Playwright MCP: Browser Automation with AI (Complete Setup Guide)

What is Playwright MCP? Playwright MCP is an official Model Context Protocol server from Microsoft that lets AI assistants (Claude, Cursor, GitHub Copilot, etc.) control a real browser. Instead of sending screenshots to a vision model, it uses accessibility snapshots—a structured representation of the page (roles, names, states)—so the AI can navigate, click, type, and extract data reliably and without expensive image APIs.

This guide walks you through installing and configuring the Playwright MCP server so you can use natural language to automate web tasks, generate Playwright tests, or scrape and summarize web content.

Why Playwright MCP?

Feature	Detail
Accessibility-based	Uses the page's accessibility tree (roles, names, states), not pixels. Deterministic and less brittle than screenshot-based automation.
LLM-friendly	Structured text output that language models can parse and reason about without vision capabilities.
Official & maintained	Maintained by Microsoft; part of the Playwright ecosystem. Documented at playwright.dev/agents.

What You Can Do With Playwright MCP

• Generate Playwright tests: Ask the AI to explore a URL and produce test code (e.g. "Generate a Playwright test that logs in and checks the dashboard").
• Automate tasks: Fill forms, click through flows, download files, or extract data from pages.
• Web scraping & summarization: Navigate to a page, take a snapshot or screenshot, and have the AI summarize or extract structured data.
• Explore site structure: "List all links on this page" or "What forms are on this site?" using the accessibility snapshot.

Prerequisites

Step 1: Install Playwright Browsers

The Playwright MCP server drives real browsers. Install them once (if you haven't already):

npx playwright install

This installs Chromium, Firefox, and WebKit. You can also install only Chromium with npx playwright install chromium to save disk space.

Step 2: Add Playwright MCP to Your Client

The official npm package is @playwright/mcp. Add it to your MCP client config.

Claude Desktop

Edit your Claude Desktop config (e.g. ~/Library/Application Support/Claude/claude_desktop_config.json on macOS) and add:

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

Cursor

In Cursor: Settings → Tools & MCP → Add MCP server. Use:

Field	Value
Name	playwright
Type	stdio
Command	npx
Args	-y @playwright/mcp@latest

Restart Claude Desktop or Cursor after changing the config.

Step 3: Verify It Works

In your AI chat, try:

• "What Playwright tools do you have?" — You should see tools like browser_navigate, browser_snapshot, browser_click, browser_take_screenshot, browser_fill_form, browser_type.
• "Open https://example.com and give me a snapshot of the page." — The AI will use the MCP server to navigate and return the accessibility snapshot.

Example Prompts

• "Go to https://example.com, take a snapshot, and list all the headings and links."
• "Generate a Playwright test script that navigates to [URL], clicks the login button, and fills the email and password fields."
• "Open [product page URL], extract the product name and price, and return them as JSON."

Important Notes

Package and repo references:

• npm: @playwright/mcp (npmjs.com/package/@playwright/mcp)
• GitHub: github.com/microsoft/playwright-mcp
• Docs: playwright.dev/agents, Browser Automation

Related Content

• Build an AI GitHub PR Reviewer
• How to Set Up MCP in Claude Desktop
• Awesome MCP Servers List

Frequently Asked Questions

What is the difference between @playwright/mcp and @playwright/mcp-server?

@playwright/mcp is the official Microsoft/Playwright MCP server (microsoft/playwright-mcp). @playwright/mcp-server is a different, community package. This guide uses the official @playwright/mcp.

Can I use Playwright MCP with Claude Code / Cursor for test generation?

Yes. Once the server is configured, you can ask the AI to "generate a Playwright test that does X" and it will use the browser tools to explore the page and produce test code. Works in Cursor, Claude Desktop, and other MCP-enabled clients.

Why accessibility snapshots instead of screenshots?

Accessibility snapshots are structured (roles, names, states) and deterministic. The model can reason about "click the button named Submit" without interpreting pixels. That reduces cost (no vision API) and improves reliability across different screen sizes and themes.