playwright-mcp

Playwright MCP is a server that enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models. It leverages Playwright's accessibility tree to provide fast and lightweight browser automation, making it LLM-friendly by operating purely on structured data. This approach ensures deterministic tool application, avoiding the ambiguity common with screenshot-based methods. The server is compatible with various MCP clients like VS Code, Cursor, Windsurf, and Claude Desktop, and requires Node.js 18 or newer.

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.

MCP Tools

• {'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_type': 'Type text into editable element'}

Usage with Different Platforms

VS Code

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

Cursor

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

Windsurf

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

Claude Desktop

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