Use Playwright MCP for Visual Verification

The Playwright MCP server gives Claude a real browser. It can navigate pages, fill forms, click buttons, take screenshots, and verify UI changes visually.

Setup

claude mcp add playwright -- npx @playwright/mcp@latest

Usage

Tell Claude explicitly the first time:

Use the Playwright MCP to open http://localhost:3000
and verify the login page matches the design.

After the first use, Claude will use it naturally for browser-related tasks.

Visual Iteration Loop

This is the best use case. Give Claude a design target and let it iterate:

Here's the design mock for the new dashboard (see ./designs/dashboard.png).
Implement it, then use Playwright to screenshot the result.
Compare to the mock and iterate until it matches.

Claude will:

1. Write the code
2. Open the page in a browser
3. Take a screenshot
4. Compare against the target
5. Fix discrepancies and repeat

Other Use Cases

• E2E test generation - Navigate through your app while generating test code with --codegen typescript
• Form testing - Fill and submit forms, verify success/error states
• Responsive testing - Resize the browser and screenshot at different breakpoints
• Accessibility checks - Inspect DOM snapshots for accessibility issues

Tip

Keep total MCP servers under 10 and total tools under 80 for best performance. Disable servers you’re not actively using.