Playwright MCP

What it does

Microsoft's MCP server that gives an AI agent a real browser via Playwright. It works from the page's structured accessibility snapshot instead of screenshots, so no vision model is needed.

Who it's for

Vibe coders and QA folks who want the agent to test their web app or automate web tasks.

How to set it up

1. Install Node.js 18 or newer.

2. Add to your MCP client config:

   jsonCopy

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

3. Or via CLI: Claude Code / Codex:

   bashCopy

   claude mcp add playwright npx @playwright/mcp@latest
   codex mcp add playwright npx "@playwright/mcp@latest"

4. Optional flags include --headless, --isolated (in-memory profile) and --browser (chrome, firefox, webkit, msedge).

5. Using a coding agent? Microsoft notes that Playwright CLI + Skills (github.com/microsoft/playwright-cli) can be more token-efficient than the MCP server.

Check the official docs for the latest steps.

Example prompts

Open localhost:3000, sign up with a test email and tell me if anything breaks.

Go to my pricing page and check every link works.

Fill out the contact form on my site and report the confirmation message.

Demo