Playwright MCP

What's New

New Tools

• browser_find — Search the accessibility snapshot of the current page for text or a regular expression. Returns matching snapshot nodes with a few lines of surrounding context (like search snippets), which is cheaper than capturing the whole snapshot when you only need to locate an element and its ref (#41605, #41654)

Tool Improvements

• Less verbose snapshots — Accessibility snapshots are distilled to reduce noise and token usage (#41604)
• Mobile & device emulation — New --mobile flag and --device option to emulate mobile devices from the CLI (#41657)
• Navigation status — browser_navigate now surfaces non-2xx navigation status codes (#41589)

Bug Fixes

• browser_navigate no longer crashes the response when navigation closes the last tab (e.g. privileged pages like chrome://) (#41675)
• Await page initialization before taking a screenshot immediately after opening (#41646)
• Enable the chromium sandbox for the default browser (#41652)
• Preserve the configured output directory for additional tab videos (#41680)
• Always pass noDefaults for CDP connections so attaching no longer applies unwanted default context options (#41676)
• Close the isolated HTTP client context on disconnect (#41560)
• Wait for the client event stream before sending server→client requests (#41559)

Playwright MCP

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

Playwright MCP vs Playwright CLI

This package provides MCP interface into Playwright. If you are using a coding agent, you might benefit from using the CLI+SKILLS instead.

• CLI: Modern coding agents increasingly favor CLI–based workflows exposed as SKILLs over MCP because CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context, allowing agents to act through concise, purpose-built commands. This makes CLI + SKILLs better suited for high-throughput coding agents that must balance browser automation with large codebases, tests, and reasoning within limited context windows.<br>Learn more about Playwright CLI with SKILLS.

• MCP: MCP remains relevant for specialized agentic loops that benefit from persistent state, rich introspection, and iterative reasoning over page structure, such as exploratory automation, self-healing tests, or long-running autonomous workflows where maintaining continuous browser context outweighs token cost concerns.

Key Features

• Fast and lightweight. Uses Playwright's accessibility tree, not pixel-based input.
• LLM-friendly. No vision models needed, operates purely on structured data.
• Deterministic tool application. Avoids ambiguity common with screenshot-based approaches.

Requirements

• Node.js 18 or newer
• VS Code, Cursor, Windsurf, Claude Desktop, Goose, Grok, Junie or any other MCP client

<!--

// Generate using:

node utils/generate-links.js

-->

Getting started

First, install the Playwright MCP server with your client.

Standard config works in most of the tools:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code"> <img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">

<details>

<summary>Amp</summary>

Add via the Amp VS Code extension settings screen or by updating your settings.json file:

"amp.mcpServers": {
  "playwright": {
    "command": "npx",
    "args": [
      "@playwright/mcp@latest"
    ]
  }
}

Amp CLI Setup:

Add via the amp mcp add command below

amp mcp add playwright -- npx @playwright/mcp@latest

</details>

<details>

<summary>Antigravity</summary>

Add via the Antigravity settings or by updating your configuration file:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

</details>

<details>

<summary>Claude Code</summary>

Use the Claude Code CLI to add the Playwright MCP server:

claude mcp add playwright npx @playwright/mcp@latest

</details>

<details>

<summary>Claude Desktop</summary>

Follow the MCP install guide, use the standard config above.

</details>

<details>

<summary>Cline</summary>

Follow the instruction in the section Configuring MCP Servers

Example: Local Setup

Add the following to your cline_mcp_settings.json file:

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ],
      "disabled": false
    }
  }
}

</details>

<details>

<summary>Codex</summary>

Use the Codex CLI to add the Playwright MCP server:

codex mcp add playwright npx "@playwright/mcp@latest"

Alternatively, create or edit the configuration file ~/.codex/config.toml and add:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

For more information, see the Codex MCP documentation.

</details>

<details>

<summary>Copilot</summary>

Use the Copilot CLI to interactively add the Playwright MCP server:

/mcp add

Alternatively, create or edit the configuration file ~/.copilot/mcp-config.json and add:

{
  "mcpServers": {
    "playwright": {
      "type": "local",
      "command": "npx",
      "tools": [
        "*"
      ],
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

For more information, see the Copilot CLI documentation.

</details>

<details>

<summary>Cursor</summary>

Click the button to install:

<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">

Or install manually:

Go to Cursor Settings -> MCP -> Add new MCP Server. Name to your liking, use command type with the command npx @playwright/mcp@latest. You can also verify config or add command like arguments via clicking Edit.

</details>

<details>

<summary>Factory</summary>

Use the Factory CLI to add the Playwright MCP server:

droid mcp add playwright "npx @playwright/mcp@latest"

Alternatively, type /mcp within Factory droid to open an interactive UI for managing MCP servers.

For more information, see the Factory MCP documentation.

</details>

<details>

<summary>Gemini CLI</summary>

Follow the MCP install guide, use the standard config above.

</details>

<details>

<summary>Goose</summary>

Click the button to install:

Install in Goose

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>Grok</summary>

Use the Grok CLI to add the Playwright MCP server:

grok mcp add playwright -- npx @playwright/mcp@latest

Alternatively, create or edit the configuration file ~/.grok/config.toml and add:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

For more information, see the Grok MCP documentation.

</details>

<details>

<summary>Junie</summary>

To add the Playwright MCP server in Junie CLI:

1. Type /mcp
2. Press Ctrl+A to add a new MCP server
3. Select Playwright from the list

Alternatively, add to .junie/mcp/mcp.json:

{
  "mcpServers": {
    "Playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

For more information, see the Junie MCP configuration documentation.

</details>

<details>

<summary>Kiro</summary>

Add to Kiro

Follow the MCP Servers documentation. For example in .kiro/settings/mcp.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

</details>

<details>

<summary>LM Studio</summary>

Click the button to install:

Add MCP Server playwright to LM Studio

Or install manually:

Go to Program in the right sidebar -> Install -> Edit mcp.json. Use the standard config above.

</details>

<details>

<summary>opencode</summary>

Follow the MCP Servers documentation. For example in ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest"
      ],
      "enabled": true
    }
  }
}

</details>

<details>

<summary>Qodo Gen</summary>

Open Qodo Gen chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the standard config above.

Click <code>Save</code>.

</details>

<details>

<summary>VS Code</summary>

Click the button to install:

<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code"> <img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">

Or install manually:

Follow the MCP install guide, use the standard config above. You can also install the Playwright MCP server using the VS Code CLI:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.

</details>

<details>

<summary>Warp</summary>

Go to Settings -> AI -> Manage MCP Servers -> + Add to add an MCP Server. Use the standard config above.

Alternatively, use the slash command /add-mcp in the Warp prompt and paste the standard config from above:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

</details>

<details>

<summary>Windsurf</summary>

Follow Windsurf MCP documentation. Use the standard config above.

</details>

Configuration

Playwright MCP server supports following arguments. They can be provided in the JSON configuration above, as a part of the "args" list:

<!--- Options generated by update-readme.js -->

| Option | Description |

|--------|-------------|

| --allowed-hosts <hosts...> | comma-separated list of hosts this server is allowed to serve from. Defaults to the host the server is bound to. Pass '' to disable the host check.<br>env* PLAYWRIGHT_MCP_ALLOWED_HOSTS |

| --allowed-origins <origins> | semicolon-separated list of TRUSTED origins to allow the browser to request. Default is to allow all. Important: does not serve as a security boundary and does not affect redirects.<br>env PLAYWRIGHT_MCP_ALLOWED_ORIGINS |

| --allow-unrestricted-file-access | allow access to files outside of the workspace roots. Also allows unrestricted access to file:// URLs. By default access to file system is restricted to workspace root directories (or cwd if no roots are configured) only, and navigation to file:// URLs is blocked.<br>env PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS |

| --blocked-origins <origins> | semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed. Important: does not serve as a security boundary and does not affect redirects.<br>env PLAYWRIGHT_MCP_BLOCKED_ORIGINS |

| --block-service-workers | block service workers<br>env PLAYWRIGHT_MCP_BLOCK_SERVICE_WORKERS |

| --browser <browser> | browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.<br>env PLAYWRIGHT_MCP_BROWSER |

| --caps <caps> | comma-separated list of additional capabilities to enable, possible values: vision, pdf, devtools.<br>env PLAYWRIGHT_MCP_CAPS |

| --cdp-endpoint <endpoint> | CDP endpoint to connect to.<br>env PLAYWRIGHT_MCP_CDP_ENDPOINT |

| --cdp-header <headers...> | CDP headers to send with the connect request, multiple can be s