chore: update to 1.54.0

package.json

@@ -43,14 +43,14 @@
     "commander": "^13.1.0",
     "debug": "^4.4.1",
     "mime": "^4.0.7",
-    "playwright": "1.53.0",
+    "playwright": "1.54.0",
     "ws": "^8.18.1",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.53.0",
+    "@playwright/test": "1.54.0",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@types/chrome": "^0.0.315",
     "@types/debug": "^4.1.12",

src/tools/utils.ts

@@ -81,7 +81,7 @@ export async function generateLocator(locator: playwright.Locator): Promise<stri
   try {
     return await (locator as any)._generateLocatorString();
   } catch (e) {
-    if (e instanceof Error && /locator._generateLocatorString: Timeout .* exceeded/.test(e.message))
+    if (e instanceof Error && /locator._generateLocatorString: No element matching locator/.test(e.message))
       throw new Error('Ref not found, likely because element was removed. Use browser_snapshot to see what elements are currently on the page.');
     throw e;
   }

tests/cdp.spec.ts

@@ -27,7 +27,7 @@ test('cdp server', async ({ cdpServer, startClient, server }) => {
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
-  })).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
+  })).toContainTextContent(`- generic [active] [ref=e1]: Hello, world!`);
 });
 
 test('cdp server reuse tab', async ({ cdpServer, startClient, server }) => {
@@ -57,7 +57,7 @@ test('cdp server reuse tab', async ({ cdpServer, startClient, server }) => {
 - Page Title: Title
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Hello, world!
+- generic [active] [ref=e1]: Hello, world!
 \`\`\`
 `);
 });
@@ -78,7 +78,7 @@ test('should throw connection error and allow re-connecting', async ({ cdpServer
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.PREFIX },
-  })).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
+  })).toContainTextContent(`- generic [active] [ref=e1]: Hello, world!`);
 });
 
 // NOTE: Can be removed when we drop Node.js 18 support and changed to import.meta.filename.

tests/core.spec.ts

@@ -31,13 +31,13 @@ await page.goto('${server.HELLO_WORLD}');
 - Page Title: Title
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Hello, world!
+- generic [active] [ref=e1]: Hello, world!
 \`\`\`
 `
   );
 });
 
-test('browser_click', async ({ client, server }) => {
+test('browser_click', async ({ client, server, mcpBrowser }) => {
   server.setContent('/', `
     <title>Title</title>
     <button>Submit</button>
@@ -65,7 +65,7 @@ await page.getByRole('button', { name: 'Submit' }).click();
 - Page Title: Title
 - Page Snapshot
 \`\`\`yaml
-- button "Submit" [ref=e2]
+- button "Submit" ${mcpBrowser === 'webkit' ? '' : '[active] '}[ref=e2]
 \`\`\`
 `);
 });
@@ -275,3 +275,22 @@ test('old locator error message', async ({ client, server }) => {
     },
   })).toContainTextContent('Ref not found');
 });
+
+test('visibility: hidden > visible should be shown', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright-mcp/issues/535' } }, async ({ client, server }) => {
+  server.setContent('/', `
+    <div style="visibility: hidden;">
+      <div style="visibility: visible;">
+        <button>Button</button>
+      </div>
+    </div>
+  `, 'text/html');
+
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_snapshot'
+  })).toContainTextContent('- button "Button"');
+});

tests/dialogs.spec.ts

@@ -58,7 +58,7 @@ await page.getByRole('button', { name: 'Button' }).click();
 - Page Title: 
 - Page Snapshot
 \`\`\`yaml
-- button "Button" [ref=e2]
+- button "Button" [active] [ref=e2]
 \`\`\`
 `);
 });
@@ -136,7 +136,7 @@ test('confirm dialog (true)', async ({ client, server }) => {
   expect(result).toContainTextContent('// <internal code to handle "confirm" dialog>');
   expect(result).toContainTextContent(`- Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: "true"
+- generic [active] [ref=e1]: "true"
 \`\`\``);
 });
 
@@ -171,7 +171,7 @@ test('confirm dialog (false)', async ({ client, server }) => {
 
   expect(result).toContainTextContent(`- Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: "false"
+- generic [active] [ref=e1]: "false"
 \`\`\``);
 });
 
@@ -207,6 +207,6 @@ test('prompt dialog', async ({ client, server }) => {
 
   expect(result).toContainTextContent(`- Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Answer
+- generic [active] [ref=e1]: Answer
 \`\`\``);
 });

tests/files.spec.ts

@@ -28,7 +28,7 @@ test('browser_file_upload', async ({ client, server }, testInfo) => {
     arguments: { url: server.PREFIX },
   })).toContainTextContent(`
 \`\`\`yaml
-- generic [ref=e1]:
+- generic [active] [ref=e1]:
   - button "Choose File" [ref=e2]
   - button "Button" [ref=e3]
 \`\`\``);
@@ -65,12 +65,6 @@ The tool "browser_file_upload" can only be used when there is related modal stat
     });
 
     expect(response).not.toContainTextContent('### Modal state');
-    expect(response).toContainTextContent(`
-\`\`\`yaml
-- generic [ref=e1]:
-  - button "Choose File" [ref=e2]
-  - button "Button" [ref=e3]
-\`\`\``);
   }
 
   {

tests/iframes.spec.ts

@@ -24,10 +24,10 @@ test('stitched aria frames', async ({ client }) => {
     },
   })).toContainTextContent(`
 \`\`\`yaml
-- generic [ref=e1]:
+- generic [active] [ref=e1]:
   - heading "Hello" [level=1] [ref=e2]
   - iframe [ref=e3]:
-    - generic [ref=f1e1]:
+    - generic [active] [ref=f1e1]:
       - button "World" [ref=f1e2]
       - main [ref=f1e3]:
         - iframe [ref=f1e4]:

tests/launch.spec.ts

@@ -34,7 +34,7 @@ test('test reopen browser', async ({ startClient, server, mcpMode }) => {
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
-  })).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
+  })).toContainTextContent(`- generic [active] [ref=e1]: Hello, world!`);
 
   await client.close();
 

tests/pdf.spec.ts

@@ -40,7 +40,7 @@ test('save as pdf', async ({ startClient, mcpBrowser, server }, testInfo) => {
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
-  })).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
+  })).toContainTextContent(`- generic [active] [ref=e1]: Hello, world!`);
 
   const response = await client.callTool({
     name: 'browser_pdf_save',
@@ -58,7 +58,7 @@ test('save as pdf (filename: output.pdf)', async ({ startClient, mcpBrowser, ser
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
-  })).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
+  })).toContainTextContent(`- generic [active] [ref=e1]: Hello, world!`);
 
   expect(await client.callTool({
     name: 'browser_pdf_save',

tests/tabs.spec.ts

@@ -61,7 +61,7 @@ test('create new tab', async ({ client }) => {
 - Page Title: Tab one
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Body one
+- generic [active] [ref=e1]: Body one
 \`\`\``);
 
   expect(await createTab(client, 'Tab two', 'Body two')).toHaveTextContent(`
@@ -80,7 +80,7 @@ test('create new tab', async ({ client }) => {
 - Page Title: Tab two
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Body two
+- generic [active] [ref=e1]: Body two
 \`\`\``);
 });
 
@@ -108,7 +108,7 @@ test('select tab', async ({ client }) => {
 - Page Title: Tab one
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Body one
+- generic [active] [ref=e1]: Body one
 \`\`\``);
 });
 
@@ -135,7 +135,7 @@ test('close tab', async ({ client }) => {
 - Page Title: Tab one
 - Page Snapshot
 \`\`\`yaml
-- generic [ref=e1]: Body one
+- generic [active] [ref=e1]: Body one
 \`\`\``);
 });