chore: mark v0.0.30 (#666 )

chore: remove extension code (#667 )
chore: roll Playwright to 1.54.1 (#665 )
2025-07-14 10:53:12 -07:00 · 2025-07-14 10:52:38 -07:00 · 2025-07-14 09:51:14 -07:00 · 2025-07-14 09:53:33 +02:00 · 2025-07-11 16:45:39 -07:00 · 2025-07-09 17:40:22 -07:00
24 changed files with 385 additions and 144 deletions
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -44,6 +44,7 @@ jobs:
      - name: Login to ACR
        run: az acr login --name playwright
      - name: Build and push Docker image
+        id: build-push
        uses: docker/build-push-action@v6
        with:
          context: .
@@ -53,3 +54,17 @@ jobs:
          tags: |
            playwright.azurecr.io/public/playwright/mcp:${{ github.event.release.tag_name }}
            playwright.azurecr.io/public/playwright/mcp:latest
+      - uses: oras-project/setup-oras@v1
+      - name: Set oras tags
+        run: |
+          attach_eol_manifest() {
+            local image="$1"
+            local today=$(date -u +'%Y-%m-%d')
+            # oras is re-using Docker credentials, so we don't need to login.
+            # Following the advice in https://portal.microsofticm.com/imp/v3/incidents/incident/476783820/summary
+            oras attach --artifact-type application/vnd.microsoft.artifact.lifecycle --annotation "vnd.microsoft.artifact.lifecycle.end-of-life.date=$today" $image
+          }
+          # for each tag, attach the eol manifest
+          for tag in $(echo ${{ steps.build-push.outputs.metadata['image.name'] }} | tr ',' '\n'); do
+            attach_eol_manifest $tag
+          done
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ A Model Context Protocol (MCP) server that provides browser automation capabilit

 ### Requirements
 - Node.js 18 or newer
- VS Code, Cursor, Windsurf, Claude Desktop or any other MCP client
+- VS Code, Cursor, Windsurf, Claude Desktop, Goose or any other MCP client

 <!--
 // Generate using:
@@ -77,7 +77,7 @@ Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, u
 <details>
 <summary><b>Install in Windsurf</b></summary>

-Follow Windsuff MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use following configuration:
+Follow Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use following configuration:

 ```js
 {
@@ -112,6 +112,28 @@ Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user),
 ```
 </details>

+<details>
+<summary><b>Install in Claude Code</b></summary>
+
+Use the Claude Code CLI to add the Playwright MCP server:
+
+```bash
+claude mcp add playwright npx @playwright/mcp@latest
+```
+</details>
+
+<details>
+<summary><b>Install in Goose</b></summary>
+
+#### Click the button to install:
+
+[![Install in Goose](https://block.github.io/goose/img/extension-install-dark.svg)](https://block.github.io/goose/extension?cmd=npx&arg=%40playwright%2Fmcp%40latest&id=playwright&name=Playwright&description=Interact%20with%20web%20pages%20through%20structured%20accessibility%20snapshots%20using%20Playwright)
+
+#### Or install manually:
+
+Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @playwright/mcp`. Click "Add Extension".
+</details>
+
 <details>
 <summary><b>Install in Qodo Gen</b></summary>

@@ -133,6 +155,25 @@ Open [Qodo Gen](https://docs.qodo.ai/qodo-documentation/qodo-gen) chat panel in
 Click <code>Save</code>.
 </details>

+<details>
+<summary><b>Install in Gemini CLI</b></summary>
+
+Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use following configuration:
+
+```js
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest"
+      ]
+    }
+  }
+}
+```
+</details>
+
 ### Configuration

 Playwright MCP server supports following arguments. They can be provided in the JSON configuration above, as a part of the `"args"` list:
@@ -316,9 +357,10 @@ npx @playwright/mcp@latest --config path/to/config.json
  };
 
  /**
-   * Do not send image responses to the client.
+   * Whether to send image responses to the client. Can be "allow", "omit", or "auto". 
+   * Defaults to "auto", images are omitted for Cursor clients and sent for all other clients.
   */
-  noImageResponses?: boolean;
+  imageResponses?: 'allow' | 'omit' | 'auto';
 }
 ```
 </details>
@@ -436,6 +478,7 @@ X Y coordinate space, based on the provided screenshot.
  - Parameters:
    - `element` (string): Human-readable element description used to obtain permission to interact with the element
    - `ref` (string): Exact target element reference from the page snapshot
+    - `doubleClick` (boolean, optional): Whether to perform a double click instead of a single click
  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,20 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.29",
+  "version": "0.0.30",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@playwright/mcp",
-      "version": "0.0.29",
+      "version": "0.0.30",
      "license": "Apache-2.0",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.11.0",
        "commander": "^13.1.0",
        "debug": "^4.4.1",
        "mime": "^4.0.7",
-        "playwright": "1.53.0-alpha-2025-05-27",
+        "playwright": "1.54.1",
+        "ws": "^8.18.1",
        "zod-to-json-schema": "^3.24.4"
      },
      "bin": {
@@ -22,10 +23,12 @@
      "devDependencies": {
        "@eslint/eslintrc": "^3.2.0",
        "@eslint/js": "^9.19.0",
-        "@playwright/test": "1.53.0-alpha-2025-05-27",
+        "@playwright/test": "1.54.1",
        "@stylistic/eslint-plugin": "^3.0.1",
+        "@types/chrome": "^0.0.315",
        "@types/debug": "^4.1.12",
        "@types/node": "^22.13.10",
+        "@types/ws": "^8.18.1",
        "@typescript-eslint/eslint-plugin": "^8.26.1",
        "@typescript-eslint/parser": "^8.26.1",
        "@typescript-eslint/utils": "^8.26.1",
@@ -289,13 +292,13 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.53.0-alpha-2025-05-27",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.0-alpha-2025-05-27.tgz",
-      "integrity": "sha512-G2zG56kEQOWhk3nQyPKH5u41jyQw5jx+Kga5huUi7RjBjPEnNtiCMNXMNGCh6dDYCIyQkLJvz/o1H/QN26HLsg==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz",
+      "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.53.0-alpha-2025-05-27"
+        "playwright": "1.54.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -357,6 +360,17 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/@types/chrome": {
+      "version": "0.0.315",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.315.tgz",
+      "integrity": "sha512-Oy1dYWkr6BCmgwBtOngLByCHstQ3whltZg7/7lubgIZEYvKobDneqplgc6LKERNRBwckFviV4UU5AZZNUFrJ4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/filesystem": "*",
+        "@types/har-format": "*"
+      }
+    },
    "node_modules/@types/debug": {
      "version": "4.1.12",
      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -374,6 +388,30 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/filesystem": {
+      "version": "0.0.36",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.36.tgz",
+      "integrity": "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/filewriter": "*"
+      }
+    },
+    "node_modules/@types/filewriter": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
+      "integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/har-format": {
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz",
+      "integrity": "sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.15",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -405,6 +443,16 @@
        "undici-types": "~6.20.0"
      }
    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.27.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz",
@@ -3252,12 +3300,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.53.0-alpha-2025-05-27",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.0-alpha-2025-05-27.tgz",
-      "integrity": "sha512-CD0BTwV5javEJ3hf3rhFJEvR3ZoWsu4HUQFfLH2mtVVe+grGPCP55FnlOjpDnJ5pP4Kibe/ZcmgPDg56ic/y9g==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz",
+      "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.53.0-alpha-2025-05-27"
+        "playwright-core": "1.54.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -3270,9 +3318,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.53.0-alpha-2025-05-27",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.0-alpha-2025-05-27.tgz",
-      "integrity": "sha512-uVxs7YjENoBMFyQhsZWImIBuo/oX7Mu63djhQN3qFz/NdXA/rOAnP73XzfB+VJNwRMKgIOtqHQgjOG3Rl/lm0A==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz",
+      "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==",
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
@@ -4247,6 +4295,27 @@
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
      "license": "ISC"
    },
+    "node_modules/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.29",
+  "version": "0.0.30",
  "description": "Playwright Tools for MCP",
  "type": "module",
  "repository": {
@@ -40,16 +40,19 @@
    "commander": "^13.1.0",
    "debug": "^4.4.1",
    "mime": "^4.0.7",
-    "playwright": "1.53.0-alpha-2025-05-27",
+    "playwright": "1.54.1",
+    "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-alpha-2025-05-27",
+    "@playwright/test": "1.54.1",
    "@stylistic/eslint-plugin": "^3.0.1",
+    "@types/chrome": "^0.0.315",
    "@types/debug": "^4.1.12",
    "@types/node": "^22.13.10",
+    "@types/ws": "^8.18.1",
    "@typescript-eslint/eslint-plugin": "^8.26.1",
    "@typescript-eslint/parser": "^8.26.1",
    "@typescript-eslint/utils": "^8.26.1",
--- a/src/config.ts
+++ b/src/config.ts
@@ -142,6 +142,9 @@ export async function configFromCLIOptions(cliOptions: CLIOptions): Promise<Conf
      launchOptions.proxy.bypass = cliOptions.proxyBypass;
  }

+  if (cliOptions.device && cliOptions.cdpEndpoint)
+    throw new Error('Device emulation is not supported with cdpEndpoint.');
+
  // Context options
  const contextOptions: BrowserContextOptions = cliOptions.device ? devices[cliOptions.device] : {};
  if (cliOptions.storageState)
--- a/src/connection.ts
+++ b/src/connection.ts
@@ -29,7 +29,6 @@ import type { BrowserContextFactory } from './browserContextFactory.js';
 export function createConnection(config: FullConfig, browserContextFactory: BrowserContextFactory): Connection {
  const allTools = config.vision ? visionTools : snapshotTools;
  const tools = allTools.filter(tool => !config.capabilities || tool.capability === 'core' || config.capabilities.includes(tool.capability));
-
  const context = new Context(tools, config, browserContextFactory);
  const server = new McpServer({ name: 'Playwright', version: packageJSON.version }, {
    capabilities: {
--- a/src/program.ts
+++ b/src/program.ts
@@ -18,7 +18,7 @@ import { program } from 'commander';
 // @ts-ignore
 import { startTraceViewerServer } from 'playwright-core/lib/server';

-import { startHttpTransport, startStdioTransport } from './transport.js';
+import { startHttpServer, startHttpTransport, startStdioTransport } from './transport.js';
 import { resolveCLIConfig } from './config.js';
 import { Server } from './server.js';
 import { packageJSON } from './package.js';
@@ -54,11 +54,13 @@ program
    .option('--vision', 'Run server that uses screenshots (Aria snapshots are used by default)')
    .action(async options => {
      const config = await resolveCLIConfig(options);
+      const httpServer = config.server.port !== undefined ? await startHttpServer(config.server) : undefined;
+
      const server = new Server(config);
      server.setupExitWatchdog();

-      if (config.server.port !== undefined)
-        startHttpTransport(server);
+      if (httpServer)
+        startHttpTransport(httpServer, server);
      else
        await startStdioTransport(server);

--- a/src/resources/resource.ts
+++ b/src/resources/resource.ts
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Context } from '../context.js';
-
-export type ResourceSchema = {
-  uri: string;
-  name: string;
-  description?: string;
-  mimeType?: string;
-};
-
-export type ResourceResult = {
-  uri: string;
-  mimeType?: string;
-  text?: string;
-  blob?: string;
-};
-
-export type Resource = {
-  schema: ResourceSchema;
-  read: (context: Context, uri: string) => Promise<ResourceResult[]>;
-};
--- a/src/tab.ts
+++ b/src/tab.ts
@@ -83,11 +83,10 @@ export class Tab {
        || e.message.includes('Download is starting'); // firefox + webkit
      if (!mightBeDownload)
        throw e;
-
      // on chromium, the download event is fired *after* page.goto rejects, so we wait a lil bit
      const download = await Promise.race([
        downloadEvent,
-        new Promise(resolve => setTimeout(resolve, 500)),
+        new Promise(resolve => setTimeout(resolve, 1000)),
      ]);
      if (!download)
        throw e;
--- a/src/tools/snapshot.ts
+++ b/src/tools/snapshot.ts
@@ -46,13 +46,17 @@ const elementSchema = z.object({
  ref: z.string().describe('Exact target element reference from the page snapshot'),
 });

+const clickSchema = elementSchema.extend({
+  doubleClick: z.boolean().optional().describe('Whether to perform a double click instead of a single click'),
+});
+
 const click = defineTool({
  capability: 'core',
  schema: {
    name: 'browser_click',
    title: 'Click',
    description: 'Perform click on a web page',
-    inputSchema: elementSchema,
+    inputSchema: clickSchema,
    type: 'destructive',
  },

@@ -60,14 +64,18 @@ const click = defineTool({
    const tab = context.currentTabOrDie();
    const locator = tab.snapshotOrDie().refLocator(params);

-    const code = [
-      `// Click ${params.element}`,
-      `await page.${await generateLocator(locator)}.click();`
-    ];
+    const code: string[] = [];
+    if (params.doubleClick) {
+      code.push(`// Double click ${params.element}`);
+      code.push(`await page.${await generateLocator(locator)}.dblclick();`);
+    } else {
+      code.push(`// Click ${params.element}`);
+      code.push(`await page.${await generateLocator(locator)}.click();`);
+    }

    return {
      code,
-      action: () => locator.click(),
+      action: () => params.doubleClick ? locator.dblclick() : locator.click(),
      captureSnapshot: true,
      waitForNetwork: true,
    };
--- a/src/tools/utils.ts
+++ b/src/tools/utils.ts
@@ -78,7 +78,13 @@ export function sanitizeForFilePath(s: string) {
 }

 export async function generateLocator(locator: playwright.Locator): Promise<string> {
-  return (locator as any)._generateLocatorString();
+  try {
+    return await (locator as any)._generateLocatorString();
+  } catch (e) {
+    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;
+  }
 }

 export async function callOnPageNoTrace<T>(page: playwright.Page, callback: (page: playwright.Page) => Promise<T>): Promise<T> {
--- a/src/transport.ts
+++ b/src/transport.ts
@@ -23,6 +23,7 @@ import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
 import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

+import type { AddressInfo } from 'node:net';
 import type { Server } from './server.js';

 export async function startStdioTransport(server: Server) {
@@ -96,43 +97,53 @@ async function handleStreamable(server: Server, req: http.IncomingMessage, res:
  res.end('Invalid request');
 }

-export function startHttpTransport(server: Server) {
+export async function startHttpServer(config: { host?: string, port?: number }): Promise<http.Server> {
+  const { host, port } = config;
+  const httpServer = http.createServer();
+  await new Promise<void>((resolve, reject) => {
+    httpServer.on('error', reject);
+    httpServer.listen(port, host, () => {
+      resolve();
+      httpServer.removeListener('error', reject);
+    });
+  });
+  return httpServer;
+}
+
+export function startHttpTransport(httpServer: http.Server, mcpServer: Server) {
  const sseSessions = new Map<string, SSEServerTransport>();
  const streamableSessions = new Map<string, StreamableHTTPServerTransport>();
-  const httpServer = http.createServer(async (req, res) => {
+  httpServer.on('request', async (req, res) => {
    const url = new URL(`http://localhost${req.url}`);
    if (url.pathname.startsWith('/mcp'))
-      await handleStreamable(server, req, res, streamableSessions);
+      await handleStreamable(mcpServer, req, res, streamableSessions);
    else
-      await handleSSE(server, req, res, url, sseSessions);
+      await handleSSE(mcpServer, req, res, url, sseSessions);
  });
-  const { host, port } = server.config.server;
-  httpServer.listen(port, host, () => {
-    const address = httpServer.address();
-    assert(address, 'Could not bind server socket');
-    let url: string;
-    if (typeof address === 'string') {
-      url = address;
-    } else {
-      const resolvedPort = address.port;
-      let resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
-      if (resolvedHost === '0.0.0.0' || resolvedHost === '[::]')
-        resolvedHost = 'localhost';
-      url = `http://${resolvedHost}:${resolvedPort}`;
-    }
-    const message = [
-      `Listening on ${url}`,
-      'Put this in your client config:',
-      JSON.stringify({
-        'mcpServers': {
-          'playwright': {
-            'url': `${url}/sse`
-          }
+  const url = httpAddressToString(httpServer.address());
+  const message = [
+    `Listening on ${url}`,
+    'Put this in your client config:',
+    JSON.stringify({
+      'mcpServers': {
+        'playwright': {
+          'url': `${url}/sse`
        }
-      }, undefined, 2),
-      'If your client supports streamable HTTP, you can use the /mcp endpoint instead.',
-    ].join('\n');
+      }
+    }, undefined, 2),
+    'If your client supports streamable HTTP, you can use the /mcp endpoint instead.',
+  ].join('\n');
    // eslint-disable-next-line no-console
-    console.error(message);
-  });
+  console.error(message);
+}
+
+export function httpAddressToString(address: string | AddressInfo | null): string {
+  assert(address, 'Could not bind server socket');
+  if (typeof address === 'string')
+    return address;
+  const resolvedPort = address.port;
+  let resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
+  if (resolvedHost === '0.0.0.0' || resolvedHost === '[::]')
+    resolvedHost = 'localhost';
+  return `http://${resolvedHost}:${resolvedPort}`;
 }
--- a/tests/cdp.spec.ts
+++ b/tests/cdp.spec.ts
@@ -14,6 +14,9 @@
 * limitations under the License.
 */

+import url from 'node:url';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
 import { test, expect } from './fixtures.js';

 test('cdp server', async ({ cdpServer, startClient, server }) => {
@@ -22,7 +25,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 }) => {
@@ -52,7 +55,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!
 \`\`\`
 `);
 });
@@ -73,5 +76,17 @@ 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.
+const __filename = url.fileURLToPath(import.meta.url);
+
+test('does not support --device', async () => {
+  const result = spawnSync('node', [
+    path.join(__filename, '../../cli.js'), '--device=Pixel 5', '--cdp-endpoint=http://localhost:1234',
+  ]);
+  expect(result.error).toBeUndefined();
+  expect(result.status).toBe(1);
+  expect(result.stderr.toString()).toContain('Device emulation is not supported with cdpEndpoint.');
 });
--- a/tests/config.spec.ts
+++ b/tests/config.spec.ts
@@ -19,7 +19,7 @@ import fs from 'node:fs';
 import { Config } from '../config.js';
 import { test, expect } from './fixtures.js';

-test('config user data dir', async ({ startClient, server }, testInfo) => {
+test('config user data dir', async ({ startClient, server, mcpMode }, testInfo) => {
  server.setContent('/', `
    <title>Title</title>
    <body>Hello, world!</body>
@@ -45,7 +45,7 @@ test('config user data dir', async ({ startClient, server }, testInfo) => {

 test.describe(() => {
  test.use({ mcpBrowser: '' });
-  test('browserName', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright-mcp/issues/458' } }, async ({ startClient }, testInfo) => {
+  test('browserName', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright-mcp/issues/458' } }, async ({ startClient, mcpMode }, testInfo) => {
    const config: Config = {
      browser: {
        browserName: 'firefox',
--- a/tests/core.spec.ts
+++ b/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,46 @@ await page.getByRole('button', { name: 'Submit' }).click();
 - Page Title: Title
 - Page Snapshot
 \`\`\`yaml
- button "Submit" [ref=e2]
+- button "Submit" ${mcpBrowser !== 'webkit' || process.platform === 'linux' ? '[active] ' : ''}[ref=e2]
+\`\`\`
+`);
+});
+
+test('browser_click (double)', async ({ client, server }) => {
+  server.setContent('/', `
+    <title>Title</title>
+    <script>
+      function handle() {
+        document.querySelector('h1').textContent = 'Double clicked';
+      }
+    </script>
+    <h1 ondblclick="handle()">Click me</h1>
+  `, 'text/html');
+
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_click',
+    arguments: {
+      element: 'Click me',
+      ref: 'e2',
+      doubleClick: true,
+    },
+  })).toHaveTextContent(`
+- Ran Playwright code:
+\`\`\`js
+// Double click Click me
+await page.getByRole('heading', { name: 'Click me' }).dblclick();
+\`\`\`
+
+- Page URL: ${server.PREFIX}
+- Page Title: Title
+- Page Snapshot
+\`\`\`yaml
+- heading "Double clicked" [level=1] [ref=e3]
 \`\`\`
 `);
 });
@@ -237,3 +276,60 @@ await page.setViewportSize({ width: 390, height: 780 });
 \`\`\``);
  await expect.poll(() => client.callTool({ name: 'browser_snapshot' })).toContainTextContent('Window size: 390x780');
 });
+
+test('old locator error message', async ({ client, server }) => {
+  server.setContent('/', `
+    <button>Button 1</button>
+    <button>Button 2</button>
+    <script>
+      document.querySelector('button').addEventListener('click', () => {
+        document.querySelectorAll('button')[1].remove();
+      });
+    </script>
+  `, 'text/html');
+
+  expect(await client.callTool({
+    name: 'browser_navigate',
+    arguments: {
+      url: server.PREFIX,
+    },
+  })).toContainTextContent(`
+  - button "Button 1" [ref=e2]
+  - button "Button 2" [ref=e3]
+  `.trim());
+
+  await client.callTool({
+    name: 'browser_click',
+    arguments: {
+      element: 'Button 1',
+      ref: 'e2',
+    },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_click',
+    arguments: {
+      element: 'Button 2',
+      ref: 'e3',
+    },
+  })).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"');
+});
--- a/tests/device.spec.ts
+++ b/tests/device.spec.ts
@@ -16,7 +16,7 @@

 import { test, expect } from './fixtures.js';

-test('--device should work', async ({ startClient, server }) => {
+test('--device should work', async ({ startClient, server, mcpMode }) => {
  const { client } = await startClient({
    args: ['--device', 'iPhone 15'],
  });
--- a/tests/dialogs.spec.ts
+++ b/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
 \`\`\``);
 });
--- a/tests/files.spec.ts
+++ b/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]
-\`\`\``);
  }

  {
@@ -100,7 +94,7 @@ The tool "browser_file_upload" can only be used when there is related modal stat
  }
 });

-test('clicking on download link emits download', async ({ startClient, server }, testInfo) => {
+test('clicking on download link emits download', async ({ startClient, server, mcpMode }, testInfo) => {
  const { client } = await startClient({
    config: { outputDir: testInfo.outputPath('output') },
  });
@@ -124,7 +118,7 @@ test('clicking on download link emits download', async ({ startClient, server },
 - Downloaded file test.txt to ${testInfo.outputPath('output', 'test.txt')}`);
 });

-test('navigating to download link emits download', async ({ startClient, server, mcpBrowser }, testInfo) => {
+test('navigating to download link emits download', async ({ startClient, server, mcpBrowser, mcpMode }, testInfo) => {
  const { client } = await startClient({
    config: { outputDir: testInfo.outputPath('output') },
  });
--- a/tests/fixtures.ts
+++ b/tests/fixtures.ts
@@ -26,6 +26,8 @@ import { TestServer } from './testserver/index.ts';

 import type { Config } from '../config';
 import type { BrowserContext } from 'playwright';
+import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
+import type { Stream } from 'stream';

 export type TestOptions = {
  mcpBrowser: string | undefined;
@@ -88,16 +90,16 @@ export const test = baseTest.extend<TestFixtures & TestOptions, WorkerFixtures>(
      }

      client = new Client({ name: options?.clientName ?? 'test', version: '1.0.0' });
-      const transport = createTransport(args, mcpMode);
-      let stderr = '';
-      transport.stderr?.on('data', data => {
+      const { transport, stderr } = await createTransport(args, mcpMode);
+      let stderrBuffer = '';
+      stderr?.on('data', data => {
        if (process.env.PWMCP_DEBUG)
          process.stderr.write(data);
-        stderr += data.toString();
+        stderrBuffer += data.toString();
      });
      await client.connect(transport);
      await client.ping();
-      return { client, stderr: () => stderr };
+      return { client, stderr: () => stderrBuffer };
    });

    await client?.close();
@@ -138,7 +140,7 @@ export const test = baseTest.extend<TestFixtures & TestOptions, WorkerFixtures>(

  mcpMode: [undefined, { option: true }],

-  _workerServers: [async ({}, use, workerInfo) => {
+  _workerServers: [async ({ }, use, workerInfo) => {
    const port = 8907 + workerInfo.workerIndex * 4;
    const server = await TestServer.create(port);

@@ -164,17 +166,25 @@ export const test = baseTest.extend<TestFixtures & TestOptions, WorkerFixtures>(
  },
 });

-function createTransport(args: string[], mcpMode: TestOptions['mcpMode']) {
+async function createTransport(args: string[], mcpMode: TestOptions['mcpMode']): Promise<{
+  transport: Transport,
+  stderr: Stream | null,
+}> {
  // NOTE: Can be removed when we drop Node.js 18 support and changed to import.meta.filename.
  const __filename = url.fileURLToPath(import.meta.url);
  if (mcpMode === 'docker') {
    const dockerArgs = ['run', '--rm', '-i', '--network=host', '-v', `${test.info().project.outputDir}:/app/test-results`];
-    return new StdioClientTransport({
+    const transport = new StdioClientTransport({
      command: 'docker',
      args: [...dockerArgs, 'playwright-mcp-dev:latest', ...args],
    });
+    return {
+      transport,
+      stderr: transport.stderr,
+    };
  }
-  return new StdioClientTransport({
+
+  const transport = new StdioClientTransport({
    command: 'node',
    args: [path.join(path.dirname(__filename), '../cli.js'), ...args],
    cwd: path.join(path.dirname(__filename), '..'),
@@ -186,6 +196,10 @@ function createTransport(args: string[], mcpMode: TestOptions['mcpMode']) {
      DEBUG_HIDE_DATE: '1',
    },
  });
+  return {
+    transport,
+    stderr: transport.stderr!,
+  };
 }

 type Response = Awaited<ReturnType<Client['callTool']>>;
--- a/tests/iframes.spec.ts
+++ b/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]:
--- a/tests/launch.spec.ts
+++ b/tests/launch.spec.ts
@@ -18,7 +18,7 @@ import fs from 'fs';

 import { test, expect, formatOutput } from './fixtures.js';

-test('test reopen browser', async ({ startClient, server }) => {
+test('test reopen browser', async ({ startClient, server, mcpMode }) => {
  const { client, stderr } = await startClient();
  await client.callTool({
    name: 'browser_navigate',
@@ -32,7 +32,7 @@ test('test reopen browser', async ({ 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!`);

  await client.close();

--- a/tests/pdf.spec.ts
+++ b/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',
--- a/tests/tabs.spec.ts
+++ b/tests/tabs.spec.ts
@@ -59,7 +59,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(`
@@ -78,7 +78,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
 \`\`\``);
 });

@@ -106,7 +106,7 @@ test('select tab', async ({ client }) => {
 - Page Title: Tab one
 - Page Snapshot
 \`\`\`yaml
- generic [ref=e1]: Body one
+- generic [active] [ref=e1]: Body one
 \`\`\``);
 });

@@ -133,7 +133,7 @@ test('close tab', async ({ client }) => {
 - Page Title: Tab one
 - Page Snapshot
 \`\`\`yaml
- generic [ref=e1]: Body one
+- generic [active] [ref=e1]: Body one
 \`\`\``);
 });

--- a/tests/trace.spec.ts
+++ b/tests/trace.spec.ts
@@ -19,7 +19,7 @@ import path from 'path';

 import { test, expect } from './fixtures.js';

-test('check that trace is saved', async ({ startClient, server }, testInfo) => {
+test('check that trace is saved', async ({ startClient, server, mcpMode }, testInfo) => {
  const outputDir = testInfo.outputPath('output');

  const { client } = await startClient({
Author	SHA1	Message	Date
Pavel Feldman	c5a2324aaf	chore: mark v0.0.30 (#666 )	2025-07-14 10:53:12 -07:00
Pavel Feldman	128474b4aa	chore: remove extension code (#667 )	2025-07-14 10:52:38 -07:00
Pavel Feldman	7fca8f50f8	chore: roll Playwright to 1.54.1 (#665 )	2025-07-14 09:51:14 -07:00
Simon Knott	841bb417d1	chore: update to 1.54.0 (#653 ) Closes https://github.com/microsoft/playwright-mcp/issues/535	2025-07-14 09:53:33 +02:00
Pavel Feldman	59f1d67a4e	feat(dblclick): add double click (#654 ) Fixes https://github.com/microsoft/playwright-mcp/issues/652	2025-07-11 16:45:39 -07:00
おがどら	1600ba6645	docs: Update README about imageResponses option. (#646 )	2025-07-09 17:40:22 -07:00
Joah Gerstenberg	127c996e86	docs: add instructions to install in Goose (#580 )	2025-07-09 17:39:41 -07:00
Sandor Major	4bd39c07e9	docs: adding installation steps for Gemini CLI (#625 ) I just tried it out with Gemini CLI and it works like a charm, thanks for creating this MCP server!	2025-07-09 17:37:29 -07:00
Max Schmitt	f5b68dc590	devops(docker): enhance Docker image publishing with ORAS end-of-life tagging (#641 ) This tags the images we publish as EOL immediately in order to get excluded from the image scanning. Like we do upstream in microsoft/playwright.	2025-07-07 23:08:12 +02:00
Mehul Raheja	875bd3b6ec	fix(docs): Fix typo of windsurf in readme (#620 )	2025-07-02 09:54:36 +02:00
Yury Semikhatsky	137b74750c	chore(extension): wrap CDP protocol (#604 )	2025-06-26 16:21:59 -07:00
Yury Semikhatsky	ded00dc422	chore(extension): convert to typescript (#603 )	2025-06-26 13:52:08 -07:00
Yury Semikhatsky	5df6c2431b	chore(extension): support reconnect, implement relay-extension protocol (#602 )	2025-06-26 11:12:23 -07:00
Simon Knott	9066988098	chore: improve "ref not found" error message (#561 ) Helps the model better understand the error cause.	2025-06-17 14:09:29 +02:00
jito(지토)	1dc4977ff9	docs: add Claude Code installation instructions (#553 ) Add installation instructions for Claude Code CLI to the README.	2025-06-16 13:35:46 +02:00
Yury Semikhatsky	96e234012d	chore(extension): start relay before creating MCP server (#548 ) * HTTPS server launched and the relay server is created before MCP server. This way we can pass CDP endpoint to its constructor. * MCP HTTP transport is added to precreated HTTP server. * A bunch of renames to fix style issues.	2025-06-13 16:13:40 -07:00
Max Schmitt	6c3f3b6576	feat: add MCP Chrome extension (#325 ) Instructions: 1. `git clone https://github.com/mxschmitt/playwright-mcp && git checkout extension-drafft` 2. `npm ci && npm run build` 3. `chrome://extensions` in your normal Chrome, "load unpacked" and select the extension folder. 4. `node cli.js --port=4242 --extension` - The URL it prints at the end you can put into the extension popup. 5. Put either this into Claude Desktop (it does not support SSE yet hence wrapping it or just put the URL into Cursor/VSCode) ```json { "mcpServers": { "playwright": { "command": "bash", "args": [ "-c", "source $HOME/.nvm/nvm.sh && nvm use --silent 22 && npx supergateway --streamableHttp http://127.0.0.1:4242/mcp" ] } } } ``` Things like `Take a snapshot of my browser.` should now work in your Prompt Chat. ---- - SSE only for now, since we already have a http server with a port there - Upstream "page tests" can be executed over this CDP relay via https://github.com/microsoft/playwright/pull/36286 - Limitations for now are everything what happens outside of the tab its session is shared with -> `window.open` / `target=_blank`. --------- Co-authored-by: Yury Semikhatsky <yurys@chromium.org>	2025-06-13 13:15:17 -07:00
Dmitry Gozman	0df6d7a441	chore: roll playwright to Jun 10th, v1.53 (#542 ) Co-authored-by: Simon Knott <simonknott@microsoft.com>	2025-06-11 15:53:14 +01:00