Playwright

Official Recommended

by microsoft

34.8k 24.6M downloads Not rated yet

GitHub Website

About

Official Playwright MCP server for browser automation, page inspection, screenshots, and web interaction from Claude, Cursor, and other AI agents.

Explore

- 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.

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Playwright

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

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

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>

The Playwright MCP server can be configured using a JSON configuration file. You can specify the configuration file
using the --config command line option:

npx @playwright/mcp@latest --config path/to/config.json

<details>
<summary>Configuration file schema</summary>

{ / The browser to use. / browser?: { / The type of browser to use. / browserName?: 'chromium' | 'firefox' | 'webkit'; / Keep the browser profile in memory, do not save it to disk. / isolated?: boolean; / Path to a user data directory for browser profile persistence. Temporary directory is created by default. / userDataDir?: string; / Launch options passed to @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context This is useful for settings options like channel, headless, executablePath, etc. / launchOptions?: playwright.LaunchOptions; / Context options for the browser context. This is useful for settings options like viewport. / contextOptions?: playwright.BrowserContextOptions; / Chrome DevTools Protocol endpoint to connect to an existing browser instance in case of Chromium family browsers. / cdpEndpoint?: string; / CDP headers to send with the connect request. / cdpHeaders?: Record<string, string>; / Timeout in milliseconds for connecting to CDP endpoint. Defaults to 30000 (30 seconds). Pass 0 to disable timeout. / cdpTimeout?: number; / Remote endpoint to connect to an existing Playwright server. May be a WebSocket URL string, or a [ConnectOptions] object that mirrors the connectOptions shape used by the test runner. When passed as an object, exposeNetwork, headers, slowMo, and timeout are forwarded to the underlying connect call. / remoteEndpoint?: string | playwright.ConnectOptions & { endpoint: string }; / Paths to TypeScript files to add as initialization scripts for Playwright page. / initPage?: string[]; / Paths to JavaScript files to add as initialization scripts. The scripts will be evaluated in every page before any of the page's scripts. / initScript?: string[]; }, / Connect to a running browser instance (Edge/Chrome only). If specified, browser config is ignored. Requires the "Playwright Extension" to be installed. / extension?: boolean; server?: { / The port to listen on for SSE or MCP transport. / port?: number; / The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces. / host?: string; / The hosts this server is allowed to serve from. Defaults to the host server is bound to. This is not for CORS, but rather for the DNS rebinding protection. / allowedHosts?: string[]; }, / List of enabled tool capabilities. Possible values: - 'core': Core browser automation features. - 'pdf': PDF generation and manipulation. - 'vision': Coordinate-based interactions. - 'devtools': Developer tools features. / capabilities?: ToolCapability[]; / Whether to save the Playwright session into the output directory. / saveSession?: boolean; / Reuse the same browser context between all connected HTTP clients. / sharedBrowserContext?: boolean; / Secrets are used to replace matching plain text in the tool responses to prevent the LLM from accidentally getting sensitive data. It is a convenience and not a security feature, make sure to always examine information coming in and from the tool on the client. / secrets?: Record<string, string>; / The directory to save output files. / outputDir?: string; / Threshold for evicting old output files, in bytes. / outputMaxSize?: number; console?: { / The level of console messages to return. Each level includes the messages of more severe levels. Defaults to "info". / level?: 'error' | 'warning' | 'info' | 'debug'; }, network?: { / List of origins to allow the browser to request. Default is to allow all. Origins matching both allowedOrigins and blockedOrigins will be blocked. Supported formats: - Full origin: https://example.com:8080 - matches only that origin - Wildcard port: http://localhost: - matches any port on localhost with http protocol / allowedOrigins?: string[]; / List of origins to block the browser to request. Origins matching both allowedOrigins and blockedOrigins will be blocked. Supported formats: - Full origin: https://example.com:8080 - matches only that origin - Wildcard port: http://localhost: - matches any port on localhost with http protocol / blockedOrigins?: string[]; }; / Specify the attribute to use for test ids, defaults to "data-testid". / testIdAttribute?: string; timeouts?: { / Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms. / action?: number; / Configures default navigation timeout: https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout. Defaults to 60000ms. / navigation?: number; / Configures default expect timeout: https://playwright.dev/docs/test-timeouts#expect-timeout. Defaults to 5000ms. / expect?: number; }; / Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them. / imageResponses?: 'allow' | 'omit'; snapshot?: { / When taking snapshots for responses, specifies the mode to use. / mode?: 'full' | 'none'; }; / allowUnrestrictedFileAccess acts as a guardrail to prevent the LLM from accidentally wandering outside its intended workspace. It is a convenience defense to catch unintended file access, not a secure boundary; a deliberate attempt to reach other directories can be easily worked around, so always rely on client-level permissions for true security. / allowUnrestrictedFileAccess?: boolean;

/ Specify the language to use for code generation. */ codegen?: 'typescript' | 'none'; }

</details>

`browser_close`

Close the page

`browser_resize`

Resize the browser window

`browser_console_messages`

Returns all console messages

`browser_handle_dialog`

Handle a dialog

`browser_evaluate`

Evaluate JavaScript expression on page or element

`browser_file_upload`

Upload one or multiple files

`browser_drop`

Drop files or MIME-typed data onto an element, as if dragged from outside the page. At least one of "paths" or "data" must be provided.

`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), each shown under its path from the root of the tree, which is cheaper than capturing the whole snapshot when you only need to locate an element and its ref.

`browser_fill_form`

Fill multiple form fields

`browser_press_key`

Press a key on the keyboard

`browser_type`

Type text into editable element

`browser_navigate`

Navigate to a URL

`browser_navigate_back`

Go back to the previous page in the history

`browser_network_requests`

Returns a numbered list of network requests since loading the page. Use browser_network_request with the number to get full details.

`browser_network_request`

Returns full details (headers and body) of a single network request, or a single part if `part` is set. Use the number from browser_network_requests.

`browser_run_code_unsafe`

Run a Playwright code snippet. Unsafe: executes arbitrary JavaScript in the Playwright server process and is RCE-equivalent.

`browser_take_screenshot`

Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.

`browser_snapshot`

Capture accessibility snapshot of the current page, this is better than screenshot

`browser_click`

Perform click on a web page

`browser_drag`

Perform drag and drop between two elements

`browser_hover`

Hover over element on page

`browser_select_option`

Select an option in a dropdown

`browser_tabs`

List, create, close, or select a browser tab.

`browser_wait_for`

Wait for text to appear or disappear or a specified time to pass

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

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

Requirements

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

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"
      ]
    }
  }
}

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 addcommand 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:

Or install manually:

</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:

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>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>

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:

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>

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>

Click the button to install:

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:

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Explore

Setting up with Highlight

From the repository

browser_close

browser_resize

browser_console_messages

browser_handle_dialog

browser_evaluate

browser_file_upload

browser_drop

browser_find

browser_fill_form

browser_press_key

browser_type

browser_navigate

browser_navigate_back

browser_network_requests

browser_network_request

browser_run_code_unsafe

browser_take_screenshot

browser_snapshot

browser_click

browser_drag

browser_hover

browser_select_option

browser_tabs

browser_wait_for

Claude Desktop / Cursor

McpServers

Playwright MCP vs Playwright CLI

Key Features

Requirements

Getting started

Click the button to install:

Or install manually:

Click the button to install:

Or install manually:

Click the button to install:

Or install manually:

Click the button to install:

Or install manually:

Videos about Playwright

How to Generate Playwright Tests using MCP + Copilot

Let AI Explore Your Site & Write Tests with Playwright MCP!

Playwright MCP - How to use AI for Manual Testing

More like this

@mendableai/firecrawl Mcp Server

Playwright

Sentry

Github

`browser_close`

`browser_resize`

`browser_console_messages`

`browser_handle_dialog`

`browser_evaluate`

`browser_file_upload`

`browser_drop`

`browser_find`

`browser_fill_form`

`browser_press_key`

`browser_type`

`browser_navigate`

`browser_navigate_back`

`browser_network_requests`

`browser_network_request`

`browser_run_code_unsafe`

`browser_take_screenshot`

`browser_snapshot`

`browser_click`

`browser_drag`

`browser_hover`

`browser_select_option`

`browser_tabs`

`browser_wait_for`