Problem it solves

Claude can write UI code but it cannot see what the result looks like. You implement a component, run the dev server, then manually open the browser to check if the layout is correct. If something is wrong, you describe the problem in text and iterate blind.

Playwright MCP closes this loop. Claude can open a browser, navigate to your running app, take a screenshot, see what the page actually looks like, fill out forms, click buttons, and verify behavior — all from inside the session. It turns visual verification from a manual step into something Claude can do autonomously.

How to install

Terminal window
claude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest

No API keys or accounts needed. Playwright MCP is maintained by Microsoft and installs via npx. Restart Claude Code after running the command, then confirm with /mcp.

Node.js must be installed. If you’re doing any frontend development, it almost certainly already is.

How to use

Start your dev server as normal, then ask Claude to verify:

  • “Take a screenshot of http://localhost:3000 and describe the layout”
  • “Navigate to the login page and check if the form renders correctly”
  • “Fill in the signup form with test data and submit it, then screenshot the result”
  • “Run the E2E test for the checkout flow and report any failures”
  • “Check if the mobile breakpoint at 375px looks correct”

Claude will control the browser, take screenshots, and report back what it sees — including errors in the console, broken layouts, or unexpected behavior.

Pro tips

Use for accessibility checks. Ask Claude to navigate to a page and check for missing alt text, improper heading hierarchy, or contrast issues. It can combine visual inspection with code review for a more complete audit.

Screenshot before and after refactors. Before a major CSS refactor, ask Claude to screenshot key pages. After the refactor, screenshot again. Ask Claude to compare and flag any visual regressions.

Automate repetitive test flows. If you’re testing a multi-step form or wizard UI, describe the happy path to Claude and let Playwright MCP execute it. Faster than manually clicking through every time you change something.

When NOT to use

Playwright MCP is heavier than other MCP servers — it launches a real browser process. Don’t reach for it when you just need to read text content from a URL (use Fetch MCP instead). Reserve it for situations where you genuinely need browser rendering: visual verification, JavaScript-heavy SPAs, form interactions, and E2E test execution.