--- schema_version: 1 route: /t/playwright-mcp.md tool: "playwright-mcp" --- # sincecutoff.com /t/playwright-mcp — Playwright MCP Server - name: Playwright MCP Server - kind: mcp - children: none - homepage: Changes to the tools coding agents drive, since a model's training cutoff, each linked to its first-party source. Check installed versions and limitations before acting; a cutoff date does not establish what a model knows. Original editorial content: [Apache 2.0](https://sincecutoff.com/v1/data-license.txt), by [0xPatrick](https://0xpatrick.dev). Preserve applicable license and [NOTICE](https://sincecutoff.com/notice.txt) attribution when redistributing. Third-party source text and examples retain their own rights. [License scope and attribution](https://sincecutoff.com/v1/license.json). To stay current, read the changes feed: [`/v1/changes.md?tool=playwright-mcp`](https://sincecutoff.com/v1/changes.md?tool=playwright-mcp) (or `.json`), adding `since=YYYY-MM-DD` for your training cutoff. Entries for registered children are included; the registry itself is `/v1/tools.json`. How to page and save your place: [llms.txt](https://sincecutoff.com/llms.txt). ### playwright-mcp browser_emulate_media changes media features during a session (2026-09-18) - slug: playwright-mcp-browser-emulate-media-changes-media-features-during-a-session-4d16960c2071 - score: 0.98 How to use it: When inspecting dark-theme or other media-dependent rendering in a browser session, call `browser_emulate_media` with the media features to change; omitted parameters remain unchanged, and `null` clears an override. Examples: ``` browser_emulate_media({"colorScheme":"dark"}) ``` ``` browser_emulate_media({"media":"print"}) ``` - why_it_matters: Inspect a web application's dark theme or other media-dependent rendering during a browser session. - before: The release note says agents had no way to inspect the dark theme mid-session. - sources: , - gotchas: "Version: v0.0.82"; "colorScheme: Emulates the `prefers-color-scheme` media feature."; "reducedMotion: Emulates the `prefers-reduced-motion` media feature."; "forcedColors: Emulates the `forced-colors` media feature."; "contrast: Emulates the `prefers-contrast` media feature."; "media: Changes the CSS media type of the page."; "Prerequisite: Node.js 18 or newer and an MCP client."; "Omitted parameters are left unchanged; `null` clears an override." ### playwright-mcp exposes page-registered WebMCP tools directly (2026-09-18) - slug: playwright-mcp-exposes-page-registered-webmcp-tools-directly-935236dbf3c5 - score: 0.95 How to use it: When the current tab exposes a page-registered WebMCP tool, call its `webmcp_` entry using the listed input schema. The tool list follows the current tab and may change; handle `tools/list_changed` notifications. - why_it_matters: Call a page-provided operation directly while inspecting or interacting with a web application. - before: In v0.0.81, use `browser_webmcp_list` / `browser_webmcp_call`; v0.0.82 replaces these MCP tools with page-listed `webmcp_` tools. - sources: , , , - gotchas: "Version: v0.0.82"; "Availability: WebMCP is experimental; see WebMCP in Chrome for how to enable it."; "webmcp_ input parameters (required): Use the parameters in that page tool's listed input schema; they vary by page."; "--no-webmcp: Disables collection and exposure of page-registered WebMCP tools."; "webmcp: Set to `false` in the server config to disable page-registered WebMCP tools."; "PLAYWRIGHT_MCP_WEBMCP: Set to `false` to disable page-registered WebMCP tools."; "Prerequisite: Enable WebMCP in Chrome for local development: open `chrome://flags/#enable-webmcp-testing`, enable the flag, then relaunch Chrome."; "Tool names, descriptions, schemas, and results come from the page and are untrusted input."; "WebMCP must be enabled in Chrome; exact enablement steps are not supplied."; "Docs conflict: The newer v0.0.83 release notes say WebMCP tool calls work with Chromium 155+. That version-specific requirement is not established for v0.0.82." ### playwright-mcp adds WebMCP page tool listing and calls (2026-09-14) - slug: playwright-mcp-adds-webmcp-page-tool-listing-and-calls-f3e100c50807 - score: 0.97 How to use it: When a page registers WebMCP tools, check the page status for the available-tool count, then list the tools and call the relevant one with its documented input. Use this in Playwright MCP v0.0.81; current documentation describes a newer interface that replaces these MCP tools. Examples: ``` browser_webmcp_list() ``` ``` browser_webmcp_call({"name":"","params":{},"frame":""}) ``` - why_it_matters: Use tools exposed by a WebMCP-enabled page to complete a browser task without driving its UI. - sources: , , - gotchas: "Version: v0.0.81"; "Availability: WebMCP is experimental; enable it in Chrome as described in the linked WebMCP in Chrome documentation."; "browser_webmcp_list parameters: None are documented; it lists tools across all frames."; "name (required): Name of the WebMCP tool to call."; "params: Object of inputs matching the page tool's inputSchema."; "frame: Frame that registered the tool, as reported by browser_webmcp_list; use when that tool name occurs in multiple frames."; "Prerequisite: The page must register WebMCP tools. WebMCP is experimental; for local Chrome development, enable chrome://flags/#enable-webmcp-testing and relaunch Chrome."; "Prerequisite: Playwright MCP v0.0.81 README requires Node.js 18 or newer and an MCP client."; "The page must register WebMCP tools."; "Docs conflict: Current Playwright MCP documentation says page-registered tools are exposed directly as webmcp_; it says browser_webmcp_list and browser_webmcp_call are no longer exposed over MCP. This is newer behavior and does not change the v0.0.81 instructions. https://github.com/microsoft/playwright-mcp/releases" ### playwright-mcp devtools recording tools return browser actions as Playwright code (2026-09-01) - slug: playwright-mcp-devtools-recording-tools-return-browser-actions-as-playwright-cod-bb07af45a595 - score: 0.96 How to use it: When a user demonstrates a browser flow manually, start the Playwright MCP server with `--caps=devtools`, call `browser_start_recording`, then call `browser_stop_recording` when they are done to retrieve Playwright code. Examples: ``` npx @playwright/mcp@0.0.80 --caps=devtools ``` ``` browser_start_recording() ``` ``` browser_stop_recording() ``` - why_it_matters: Capture a browser flow demonstrated manually so you can use it as Playwright code in a repository. - sources: , - gotchas: "Version: v0.0.80"; "Availability: Opt-in via `--caps=devtools`."; "--caps (required): Comma-separated additional capabilities to enable; include `devtools` to expose the recording tools."; "browser_start_recording parameters: None documented."; "browser_stop_recording parameters: None documented."; "Prerequisite: Node.js 18 or newer and an MCP client."; "Prerequisite: Install the Playwright MCP server with the MCP client; `devtools` is an opt-in capability."; "Records actions that the user performs manually in the browser." ### browser_take_screenshot supports WebP format selection (2026-08-06) - slug: browser-take-screenshot-supports-webp-format-selection-0eff65d88704 - score: 0.95 How to use it: When a browser-based coding task requires a particular screenshot format, call `browser_take_screenshot` with `type` set to `png`, `jpeg`, or `webp`. If `type` is omitted, the format is inferred from the filename extension, otherwise it defaults to PNG. Examples: ``` browser_take_screenshot { type: "webp", filename: ".webp" } ``` - why_it_matters: Capture a page screenshot in a required image format while working on a browser-based coding task. - sources: , - gotchas: "Version: v0.0.79"; "type: Image format: `png`, `jpeg`, or `webp`. If omitted, inferred from the filename extension, otherwise PNG."; "filename: File to save the screenshot to; a relative name resolves against the workspace root."; "Supported `type` values are `png`, `jpeg`, and `webp`."; "When `type` is unset, the format is inferred from the filename extension." ### playwright-mcp browser_find searches accessibility snapshots (2026-07-09) - slug: playwright-mcp-browser-find-searches-accessibility-snapshots-a581e4874ca8 - score: 0.97 How to use it: When locating an element in the current page’s accessibility snapshot, call `browser_find` with exactly one of `text` or `regex`; use the returned node’s ref as the element target. Examples: ``` browser_find { text: "" } ``` ``` browser_find { regex: "//" } ``` - why_it_matters: Locate an element in the current page when inspecting a repository’s browser-based UI. - sources: , , - gotchas: "Version: v0.0.78"; "text: Plain text search; case-insensitive substring match. Provide exactly one of `text` or `regex`."; "regex: Regular expression search; case-sensitive by default. Slash-delimited patterns can include flags. Provide exactly one of `regex` or `text`."; "Prerequisite: The Playwright MCP server requires Node.js 18 or newer and an MCP client; `browser_find` is a core tool."; "Searches the accessibility snapshot of the current page."; "Returns matching snapshot nodes with a few lines of surrounding context." ### playwright-mcp browser_drop exposes Locator.drop (2026-04-27) - slug: playwright-mcp-browser-drop-exposes-locator-drop-5ee8f737f8bf - score: 0.96 How to use it: When a browser task requires dropping files or MIME-typed data onto an element, call `browser_drop` with its target and at least one of `paths` or `data`. Use `browser_drag` for dragging between page elements. Examples: ``` {"target":"","data":{"text/plain":""}} ``` ``` {"target":"","paths":[""]} ``` - why_it_matters: Complete a drag-and-drop operation onto a target in a browser session. - sources: , - gotchas: "Version: v0.0.71"; "target (required): Exact target reference from the page snapshot or a unique element selector."; "paths (required): Optional array of absolute file paths; provide this or `data`."; "data (required): Optional MIME-type-to-string map; provide this or `paths`."; "element: Human-readable element description used to obtain permission to interact with the target."; "Prerequisite: Node.js 18 or newer and an MCP client; install and configure the Playwright MCP server."; "Docs conflict: `browser_drop` is documented for files or MIME-typed data dragged from outside the page. For a drag between two page elements, the v0.0.71 docs specify `browser_drag`. The card’s broader wording could imply either operation." ### playwright-mcp browser_network_requests adds response body and header options (2026-04-27) - slug: playwright-mcp-browser-network-requests-adds-response-body-and-header-options-ee34b45c1937 - score: 0.94 How to use it: When debugging a browser workflow, call `browser_network_requests` with `responseBody` and `responseHeaders` enabled to inspect response data. Binary bodies appear as a placeholder based on MIME-type detection. Examples: ``` browser_network_requests({"responseBody": true, "responseHeaders": true}) ``` - why_it_matters: Inspect network requests while debugging a browser workflow. - sources: , - gotchas: "Version: v0.0.71"; "responseBody: Release note says this option was added; its default and detailed behavior are not specified in the v0.0.71 README."; "responseHeaders: Release note says this option was added; its default and detailed behavior are not specified in the v0.0.71 README."; "Prerequisite: Playwright MCP requires Node.js 18 or newer and an MCP client."; "Binary bodies are rendered as a placeholder using mime-type detection."; "Docs conflict: The v0.0.71 README lists `static`, `requestBody`, and `requestHeaders` for `browser_network_requests`, but omits `responseBody` and `responseHeaders`; the v0.0.71 release note says the response options were added. README evidence does not specify their defaults or behavior." ### playwright-mcp adds browser_network_state_set for offline testing (2026-03-30) - slug: playwright-mcp-adds-browser-network-state-set-for-offline-testing-0e7f4bd02783 - score: 0.94 How to use it: When testing a repository’s browser workflow without connectivity, call `browser_network_state_set` with `state: "offline"`; restore connectivity with `state: "online"`. Examples: ``` {"tool":"browser_network_state_set","arguments":{"state":"offline"}} ``` ``` {"tool":"browser_network_state_set","arguments":{"state":"online"}} ``` ``` npx @playwright/mcp@0.0.69 --caps=network ``` - why_it_matters: Test how a repository’s browser workflow behaves when connectivity is unavailable. - sources: , - gotchas: "Version: v0.0.69"; "state (required): Use `offline` to simulate offline mode or `online` to restore connectivity."; "Prerequisite: The network tools are documented as opt-in via `--caps=network`."; "Prerequisite: The README lists Node.js 18 or newer and an MCP client as requirements."; "Docs conflict: In the same README, the network tool section says to enable `--caps=network`, but the `--caps` option description lists only `vision`, `pdf`, and `devtools` as possible values." ### playwright-mcp browser_mouse_click_xy adds click options (2026-03-30) - slug: playwright-mcp-browser-mouse-click-xy-adds-click-options-30deb92ef1b7 - score: 0.94 How to use it: When you need a coordinate-based browser click, call `browser_mouse_click_xy` with the target `x` and `y`; set `button`, `clickCount`, and `delay` to control the click. The tool is available with the `vision` capability enabled. Examples: ``` browser_mouse_click_xy({"x": , "y": , "button": "right", "clickCount": 2, "delay": 100}) ``` ``` {"command":"npx","args":["@playwright/mcp@0.0.69","--caps=vision"]} ``` - why_it_matters: Control mouse clicks at specific coordinates while automating a browser workflow. - sources: , , - gotchas: "Version: v0.0.69"; "x (required): X coordinate."; "y (required): Y coordinate."; "button: Button to click; defaults to left."; "clickCount: Number of clicks; defaults to 1."; "delay: Milliseconds between mouse down and mouse up; defaults to 0."; "--caps=vision (required): Enables coordinate-based tools."; "Prerequisite: Playwright MCP requires Node.js 18 or newer and an MCP client."; "Prerequisite: Enable the `vision` capability to expose coordinate-based tools." ### playwright-cli defaults to in-memory browser profiles (2026-02-06) - slug: playwright-cli-defaults-to-in-memory-browser-profiles-c3a93c0e1676 - score: 0.92 How to use it: For repository browser work that should start with clean profile state, run `playwright-cli open `; profiles are in-memory by default. Add `--persistent` to retain the profile on disk, or `--profile=` to choose its directory. Examples: ``` playwright-cli open ``` ``` playwright-cli open --persistent ``` ``` playwright-cli open --profile= ``` - why_it_matters: Run browser sessions for repository work that should start with clean profile state. - sources: , - gotchas: "Version: v0.0.64"; " (required): URL to open."; "--persistent: Persist the browser profile to disk."; "--profile=: Set a custom directory for the persistent browser profile." ### playwright-cli browser storage and authentication state controls (2026-02-04) - slug: playwright-cli-browser-storage-and-authentication-state-controls-4ee0ffcf0209 - score: 0.97 How to use it: When persisting login state or debugging browser storage, use `playwright-cli state-save` and `state-load` for a state file, and the cookie, localStorage, or sessionStorage commands to inspect or change entries. Examples: ``` playwright-cli state-save auth.json playwright-cli state-load auth.json ``` ``` playwright-cli cookie-list playwright-cli cookie-get playwright-cli cookie-set --domain= playwright-cli cookie-delete playwright-cli cookie-clear ``` ``` playwright-cli localstorage-list playwright-cli localstorage-get playwright-cli localstorage-set playwright-cli localstorage-clear playwright-cli sessionstorage-list playwright-cli sessionstorage-set playwright-cli sessionstorage-clear ``` - why_it_matters: Persist browser login state or inspect and change browser storage while debugging a web application. - sources: , - gotchas: "Version: v0.0.63"; "state-save [filename]: Saves browser state; filename is optional. Example: `auth.json`."; "state-load (required): Loads browser state from the named file."; "cookie-get ; cookie-delete (required): Cookie name to retrieve or delete."; "cookie-set (required): Cookie name and value; `--domain=` selects its domain."; "localstorage-get ; localstorage-set (required): Storage key to retrieve, or key and value to set."; "sessionstorage-set (required): Storage key and value to set."; "Docs conflict: The current official CLI reference documents `localstorage-delete`, `sessionstorage-get`, and `sessionstorage-delete`, which the v0.0.63 release note does not list. It also documents session-storage get and delete examples absent from that release note; no claim about their availability in v0.0.63 is made. Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md" ### playwright-cli route mocks support URL patterns and route management (2026-02-04) - slug: playwright-cli-route-mocks-support-url-patterns-and-route-management-aff8f81791e4 - score: 0.98 How to use it: When you need frontend development or testing without a backend, use `playwright-cli route` to mock requests by URL pattern, then use `route-list` or `unroute` to manage routes. Examples: ``` playwright-cli route "**/api/users" --body='[{"id":1,"name":"Alice"}]' --content-type=application/json ``` ``` playwright-cli route "**/api/data" --body='{"ok":true}' --header="X-Custom: value" ``` ``` playwright-cli route-list playwright-cli unroute "" playwright-cli unroute ``` - why_it_matters: Mock backend responses while developing or testing a web application's frontend. - sources: - gotchas: "Version: v0.0.63"; " (required): URL pattern to match; examples include `**/api/users`, `**/api/*/details`, `**/*.{png,jpg,jpeg}`, and `**/search?q=*`."; "--status: HTTP status code for the mock response; release example uses `404`."; "--body: Response body, such as a JSON string."; "--content-type: Content type for the response, such as `application/json`."; "--header: Custom header in `Name: Value` format."; "--remove-header: Comma-separated request headers to strip, such as `cookie,authorization`."; "unroute : Remove routes matching a URL pattern; omit the pattern to remove all routes."; "Routes target URL patterns; the spans describe glob-style pattern support." ### Playwright CLI records browser sessions on demand (2026-01-31) - slug: playwright-cli-records-browser-sessions-on-demand-7a8aeb4db794 - score: 0.96 How to use it: When debugging or reviewing a web application, start a video recording, perform the browser flow, then stop the recording to save the video. In Playwright MCP, enable the capability with `--caps=devtools` and use the video tools. Examples: ``` playwright-cli open playwright.dev playwright-cli video-start # Perform the browser flow playwright-cli video-stop ``` ``` playwright-cli video-start .webm # Perform the browser flow playwright-cli video-stop ``` ``` # Start the MCP server with the devtools capability enabled: --caps=devtools browser_start_video {} # Perform the browser flow browser_stop_video {} ``` - why_it_matters: Record a browser flow while debugging or reviewing a web application. - sources: , , , - gotchas: "Version: v0.0.62"; "video-start [filename]: Optional output video filename."; "--caps=devtools: Enables the MCP developer tools, including session video recording."; "browser_start_video.filename: Video output filename; when omitted, saves as `video-{timestamp}.webm` in the output directory."; "browser_start_video.size: Video size object."; "Prerequisite: Playwright CLI requires Node.js 18 or newer; install with `npm install -g @playwright/cli@latest`."; "Prerequisite: For MCP video tools, start Playwright MCP with `--caps=devtools`." ### Playwright CLI adds browser automation, sessions and configuration (2026-01-25) - slug: playwright-cli-adds-browser-automation-sessions-and-configuration-eff9ba31d714 - score: 0.98 How to use it: When an agent needs to test a web workflow, install the CLI and use `open`, snapshots, and interaction commands; use a named session for project-specific browser state. The cited v0.0.59 release says the CLI is headless by default and `--headed` shows the browser. Examples: ``` npm install -g @playwright/mcp@latest playwright-cli --help ``` ``` playwright-cli open playwright-cli snapshot playwright-cli click playwright-cli type "" playwright-cli press playwright-cli screenshot ``` ``` playwright-cli --session= open playwright-cli session-list PLAYWRIGHT_CLI_SESSION=

``` - why_it_matters: Run browser interactions to test a web workflow from a coding agent, using project-specific browser state when needed. - sources: - gotchas: "Version: v0.0.59"; "Requires npm install -g @playwright/mcp@latest"; "open (required): Open the URL in the browser."; "--headed: Show the browser when passed to `open`; CLI is headless by default."; "--session=: Select a browser session/profile for the invocation."; "PLAYWRIGHT_CLI_SESSION: Select the session for the coding agent process."; "session-stop [name]: Stop the named session; name is optional in the documented syntax."; "session-stop-all: Stop all sessions."; "session-delete [name]: Delete session data and profiles; name is optional in the documented syntax."; "playwright-cli.json: Configuration file; the release states support but does not document its object keys or sub-keys."; "Prerequisite: Install globally with `npm install -g @playwright/mcp@latest`."; "Prerequisite: A coding agent may use the CLI directly by consulting `playwright-cli --help`; installing skills is optional in the release instructions."; "The CLI is headless by default."; "The release describes this as the first snapshot with the essential command set and says it is expected to grow."; "Docs conflict: Current Playwright CLI documentation describes the later `@playwright/cli` package and differs in commands and session behavior from the v0.0.59 release. Its newer details were excluded."; "Docs conflict: The v0.0.59 release specifies `@playwright/mcp@latest`; current CLI documentation specifies `@playwright/cli@latest`. The package instructions differ." ### Playwright CLI mode and command set (2026-01-24) - slug: playwright-cli-mode-and-command-set-2bb70cc96e7f - score: 0.95 How to use it: When implementing or debugging a repository feature, install the CLI and read its help. Open the target page, take a snapshot to get element refs, then use the documented commands to inspect or interact with it. Examples: ``` npm install -g @playwright/mcp@latest playwright-cli --help playwright-cli open playwright-cli snapshot playwright-cli click ``` ``` playwright-cli open --headed ``` ``` playwright-cli --session= open playwright-cli session-list ``` - why_it_matters: Use Playwright commands from a coding agent to inspect and interact with a web page while implementing or debugging a repository feature. - sources: - gotchas: "Version: v0.0.58"; "Requires npm install -g @playwright/mcp@latest; install skill with `/plugin marketplace add microsoft/playwright-cli` and `/plugin install playwright-cli`, or manually download `SKILL.md` as shown in the spans"; " (required): URL to open."; "--headed: Show the browser when opening a page; CLI is headless by default."; " (required): Element reference used by commands such as click; obtain refs from a snapshot."; "[button]: Mouse button for click or double-click."; "--session=: Select a browser session/profile."; "PLAYWRIGHT_CLI_SESSION: Environment variable to select a session for the coding agent."; " (required): JavaScript expression evaluated on the page or element."; "[min-level]: Minimum console message level to list."; "Prerequisite: Install with npm, then run `playwright-cli --help`."; "Prerequisite: The release note says coding-agent environments may install the skill through plugin commands or manually from the official repository."; "This is the first snapshot with the essential command set, which is expected to grow."; "Playwright CLI is headless by default; use `--headed` with `open` to see the browser."; "The dedicated persistent profile preserves cookies and other storage state between calls."; "Use `--session` to address a specific browser profile; separate sessions provide separate profiles."; "Docs conflict: Newer official CLI documentation uses package `@playwright/cli`, while the v0.0.58 release note specifies `@playwright/mcp`; use the release-note package for this card's version. https://github.com/microsoft/playwright-cli"; "Docs conflict: Newer official CLI documentation uses `-s=` and `list` for sessions, while the v0.0.58 release note documents `--session=` and `session-list`; use the release-note syntax for this card's version. https://github.com/microsoft/playwright-cli" ### playwright-mcp restricts browser URLs and file access by default (2026-01-09) - slug: playwright-mcp-restricts-browser-urls-and-file-access-by-default-42b3dbe4fd4c - score: 0.92 How to use it: When browsing or uploading with Playwright MCP v0.0.55, keep URLs to `http:`, `https:`, `about:`, or `data:` and upload from workspace roots (or `cwd` if none are configured). If the task requires `file://` or files outside those roots, enable `--allow-unrestricted-file-access` or set `allowUnrestrictedFileAccess: true`. Examples: ``` npx @playwright/mcp@0.0.55 --allow-unrestricted-file-access ``` ``` {"allowUnrestrictedFileAccess": true} ``` - why_it_matters: Browse pages and upload files while automating a repository with Playwright MCP. - sources: , - gotchas: "Version: v0.0.55"; "--allow-unrestricted-file-access: Allows access to files outside workspace roots and unrestricted `file://` URLs; otherwise file access is restricted to roots (or `cwd` if none are configured), and `file://` navigation is blocked."; "allowUnrestrictedFileAccess: Boolean config key to opt out of file access restrictions when set to `true`."; "Prerequisite: Playwright MCP requires Node.js 18 or newer."; "File uploads through `setInputFiles`, file choosers, and MCP file tools are restricted to workspace root directories, or `cwd` if no roots are configured."; "Browser navigation and API requests are limited to `http:`, `https:`, `about:`, and `data:` URLs; `file://` is blocked unless unrestricted file access is enabled."