What is Playwright MCP?

What is Playwright MCP?

Playwright MCP is an MCP server that gives AI models (like Claude) the ability to control a real web browser using Microsoft's Playwright automation library. It enables AI agents to browse websites, fill forms, click buttons, and extract content.

What It Enables

With Playwright MCP, Claude can:

• Navigate to URLs
• Click buttons and links
• Fill in form fields
• Take screenshots
• Extract text from web pages
• Run JavaScript in the browser
• Automate end-to-end testing

Setup

bashCopy
npm install -g @modelcontextprotocol/server-playwright

jsonCopy
// ~/.claude.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Available Tools (exposed to Claude)

playwright_navigate

playwright_click

playwright_fill

playwright_screenshot

playwright_get_text

playwright_evaluate

playwright_select

Example: Claude Using Playwright MCP

textCopy
User: "Go to example.com and tell me what the main heading says"

Claude:
  1. Calls playwright_navigate({url: "https://example.com"})
  2. Calls playwright_get_text({selector: "h1"})
  3. Returns: "The heading says 'Example Domain'"

textCopy
User: "Search for 'AI engineering' on DuckDuckGo and summarize the first 3 results"

Claude:
  1. playwright_navigate({url: "https://duckduckgo.com"})
  2. playwright_fill({selector: "input[name='q']", value: "AI engineering"})
  3. playwright_click({selector: "button[type='submit']"})
  4. playwright_get_text({selector: ".results"})
  5. Summarizes the extracted text

Use Cases

Security Note

Playwright MCP gives Claude full browser control — only enable it for trusted workflows. Configure with allowed domains if needed:

jsonCopy
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright",
               "--allowed-origins", "https://yoursite.com"]
    }
  }
}

Playwright MCP vs Direct Playwright