Server facts
Playwright MCP
Project
- Author
- microsoft
- Repository
- github.com/microsoft/playwright-mcp
- License
- Apache-2.0
- Category
- Browser Automation
Tech
- Runtime / language
- node
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 38,243
- Last commit
- Data as of
Tags
- Accessibility
- Browser Automation
- Playwright
- Web Testing
Overview
Playwright MCP exposes browser automation to AI clients through Playwright. Instead of requiring a model to interpret page pixels, it supplies structured accessibility information that an agent can inspect before choosing an action. The available controls cover navigation, clicks, keyboard input, forms, dropdowns, tabs, uploads, and drag operations. Inspection tools expose console output and network traffic, while screenshots provide a separate visual record. This combination supports exploratory browsing and testing workflows in which an assistant repeatedly examines a page and acts on its current structure. The README positions persistent browser context as a reason to choose the MCP interface for longer agent loops.
Setup uses an npx command in an MCP client's configuration and requires Node.js 18 or later. The README includes configuration examples for numerous editors, terminal agents, and desktop clients. Options select browser engines, headless execution, emulated devices, saved profiles, connection endpoints, and additional capabilities. File access is limited to workspace roots by default, and file URL navigation starts blocked. Origin allowlists and blocklists are explicitly not security boundaries. For coding agents with tight context budgets, the project also points to a separate CLI and skills approach, noting that MCP's larger tool schemas and accessibility trees can consume more tokens.
Install & configure
Requirements
- Node.js 18 or later
- An MCP-compatible client
npx @playwright/mcp@latestAdd the command to your client's MCP configuration. Browser selection, headless operation, and connection settings are configurable through documented arguments.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"env": {}
}
}
}Config file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"env": {}
}
}
}Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
{
"servers": {
"playwright-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"env": {}
}
}
}Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"env": {}
}
}
}Config file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"playwright-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"@playwright/mcp@latest"
],
"env": {}
}
}
}Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
Source: repository tool metadata. Tool descriptions are a documented snapshot, not a live capability check.
| Tool | What it does |
|---|---|
| browser_close | Shut the active page. |
| browser_resize | Change the browser window dimensions. |
| browser_console_messages | Read messages emitted to the browser console. |
| browser_handle_dialog | Respond to a browser dialog. |
| browser_emulate_media | Override CSS media settings such as the page color scheme. |
| browser_evaluate | Evaluate JavaScript against a page or element. |
| browser_file_upload | Supply files to an upload control. |
| browser_drop | Drop local files or MIME data onto a page element. |
| browser_find | Find text or regex matches within the page accessibility snapshot. |
| browser_fill_form | Populate several form fields together. |
| browser_press_key | Send a keyboard key press. |
| browser_type | Enter text in an editable page element. |
| browser_navigate | Open a specified web address. |
| browser_navigate_back | Return to the preceding page in browser history. |
| browser_network_requests | List captured network requests with reference numbers. |
| browser_network_request | Inspect headers or body data for a numbered network request. |
| browser_run_code_unsafe | Execute a Playwright snippet in the server process; this permits arbitrary JavaScript execution. |
| browser_take_screenshot | Capture a page image; use an accessibility snapshot to guide actions. |
| browser_snapshot | Read the current page as an accessibility tree. |
| browser_click | Click a page element. |
| browser_drag | Drag from one page element to another. |
| browser_hover | Position the pointer over an element. |
| browser_select_option | Choose an entry from a dropdown control. |
| browser_tabs | Inspect, open, switch, or close tabs. |
| browser_wait_for | Pause for matching text, its disappearance, or an elapsed interval. |
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Explore a website through accessibility snapshots and iterative actions.
- Fill forms and exercise interactive browser flows.
- Inspect console errors and individual network requests.
- Keep browser state across a long-running agent workflow.
Strengths
- Structured page access does not require a vision model.
- Combines browser controls with console and network inspection.
- Documents configuration for many MCP clients.
Limitations
- Requires Node.js 18 or later.
- Tool schemas and accessibility trees can use more context than the separate CLI workflow.
- Origin filters are not a security boundary.
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
