playwright-mcp: Playwright MCP server

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

# Claude Code
claude mcp add playwright npx @playwright/mcp@latest

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

Overview

Playwright MCP is an official Microsoft Model Context Protocol server that brings powerful browser automation capabilities to AI agents. Unlike traditional screenshot-based approaches, it uses Playwright's accessibility tree for fast, lightweight, and deterministic browser interactions.

💡 Key Differentiator: Playwright MCP operates purely on structured data, making it faster and more reliable than vision-based browser automation that requires expensive vision models.

Why Playwright MCP Stands Out

1. Accessibility-First Architecture

Instead of analyzing screenshots, Playwright MCP leverages the browser's accessibility tree. This approach offers:

• Speed: No image processing overhead
• Accuracy: Structured data is more reliable than visual inference
• Cost Efficiency: No need for vision model tokens
• Determinism: Consistent behavior across runs

2. Broad Client Support

Playwright MCP integrates seamlessly with virtually every major AI coding agent:

• VS Code & VS Code Insiders
• Claude Code & Claude Desktop
• Cursor
• Gemini CLI
• Windsurf, Goose, Kiro, and more

3. Flexible Session Modes

The server supports three distinct session modes:

Configuration Options

Playwright MCP is highly configurable through command-line arguments:

# Headless mode for CI/CD
npx @playwright/mcp@latest --headless

# Isolated testing session
npx @playwright/mcp@latest --isolated

# Specific browser (Chrome, Firefox, WebKit)
npx @playwright/mcp@latest --browser firefox

# Mobile device emulation
npx @playwright/mcp@latest --device "iPhone 15"

# With proxy
npx @playwright/mcp@latest --proxy-server "http://proxy:3128"

Use Cases

Web Scraping & Data Extraction

Extract structured data from websites without writing complex selectors. The accessibility tree provides semantic information about page elements.

End-to-End Testing

Automate browser-based testing with natural language commands. Agents can navigate, interact, and verify application behavior.

Form Automation

Fill out complex forms, submit data, and interact with dynamic web applications through semantic element identification.

Research & Investigation

Let agents browse the web to gather information, verify facts, and explore documentation across multiple sites.

Comparison: MCP vs CLI

Microsoft offers two complementary approaches:

For agents balancing large codebases with browser tasks, the CLI + Skills approach may be more token-efficient. For long-running autonomous workflows requiring continuous browser context, MCP is the better choice.

Advanced Configuration

Configuration File

Create a playwright.config.json for complex setups:

{
  "browser": {
    "browserName": "chromium",
    "headless": false,
    "viewport": { "width": 1280, "height": 720 }
  },
  "capabilities": ["core", "pdf", "vision"],
  "outputDir": "./playwright-output",
  "network": {
    "allowedOrigins": ["https://example.com"]
  }
}

Environment Variables

# Security settings
export PLAYWRIGHT_MCP_ALLOWED_HOSTS="example.com,api.example.com"
export PLAYWRIGHT_MEP_BLOCKED_ORIGINS="https://malicious.com"

# Browser behavior
export PLAYWRIGHT_MCP_HEADLESS="true"
export PLAYWRIGHT_MCP_TIMEOUT_ACTION="5000"
export PLAYWRIGHT_MCP_TIMEOUT_NAVIGATION="60000"

Security Considerations

• Host Allowlisting: Control which domains the browser can access
• File System Access: Restricted to workspace roots by default
• Secrets Management: Built-in support for masking sensitive data
• Origin Blocking: Blocklist/allowlist origins for fine-grained control

When to Use Playwright MCP

Ideal for:

• Agents that need to interact with web UIs
• Scenarios requiring persistent browser sessions
• Teams already invested in the Playwright ecosystem
• Cost-conscious setups avoiding vision model tokens

Consider alternatives if:

• You need pixel-perfect visual validation (use vision models)
• Token efficiency is paramount and you have many small browser tasks (consider CLI)

Conclusion

Microsoft's Playwright MCP server is a mature, production-ready solution for browser automation in AI agents. Its accessibility-first approach, broad compatibility, and flexible configuration make it an excellent choice for teams building agentic workflows that interact with the web.

The official backing from Microsoft ensures ongoing maintenance, security updates, and integration with the broader Playwright ecosystem. For AI professionals looking to add web capabilities to their agents, Playwright MCP is a top-tier option.