Have Claude click through and test your web app

This guide gets Claude to act like a careful first-time visitor to your web app: open it in a real browser, click through a flow such as sign-up or checkout, try bad inputs, and give you a written list of what failed and where. You’ll use Playwright MCP, Microsoft’s MCP server for browser automation. (An MCP server is a plug-in that gives Claude a new ability; this one is “drive a web browser”.)

Playwright MCP reads pages through the browser’s accessibility tree, the structured list of buttons, links and fields that screen readers also use. Its README says it works “purely on structured data” rather than by looking at pixels, so Claude clicks on named elements (“the Sign up button”) instead of guessing coordinates.

What you’ll have at the end

• Playwright MCP installed in Claude Code (or Claude Desktop).
• A browser window that Claude controls while you watch.
• A reusable test prompt that produces a bug list with steps to reproduce.

What you need

• Node.js 18 or newer (the README’s requirement). Check with node --version.
• Claude Code (recommended) or Claude Desktop. Playwright MCP runs on your own computer, so it isn’t available in claude.ai in the browser.
• A web app to test, running locally (for example http://localhost:3000) or at a URL you own or have permission to test.
• A test account for your app. Don’t give Claude your real admin login.

Step-by-step

Option A: Claude Code (recommended)

1. Open a terminal in your project folder.
2. Add the server with the command from Playwright MCP’s README:

claude mcp add playwright npx @playwright/mcp@latest

3. Start Claude Code with claude, then type /mcp. You should see playwright listed as connected. You can also check from the shell with claude mcp list.
4. Start your app as you normally do (or ask Claude: “start the dev server for this project and tell me the URL”).
5. Ask Claude to open the URL. A browser window opens; by default it is visible (“headed”), so you can watch every click.

Claude Code adds servers at local scope by default, meaning only this project folder. Add --scope user before playwright to have it in every project.

Option B: Claude Desktop

1. From the Claude menu in your system menu bar, choose Settings…, open Developer, and click Edit Config.
2. Add Playwright to the mcpServers block. If the file is empty, paste this whole thing:

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

3. Save, fully quit Claude Desktop and reopen it.
4. Click + in the message box, hover Connectors, and choose Manage connectors to see playwright and its tools.

Useful options

Add these after @playwright/mcp@latest in the command or args list. All are from the README.

Option	What it does	When to use it
--headless	Runs the browser without a visible window	Long runs where you don’t need to watch
--browser msedge	Picks the browser (chrome, firefox, webkit, msedge)	Testing a specific browser
--device "iPhone 15"	Emulates a device	Checking your mobile layout
--viewport-size 1280x720	Sets the window size in pixels	Consistent desktop checks
--isolated	Keeps the browser profile in memory, not saved to disk	Every run should start logged out
--output-dir <path>	Folder for auto-named files such as screenshots	Keeping evidence of bugs
--caps vision,pdf	Turns on extra tool groups (vision, pdf, devtools)	When the default tools aren’t enough

For example, a phone-sized test setup in Claude Code. When you add server options, put -- before npx; Claude Code’s docs use the double dash to separate its own flags from the server’s command:

claude mcp add playwright-mobile -- npx @playwright/mcp@latest --device "iPhone 15" --isolated

What Claude can do in the browser

The README lists tools including browser_navigate, browser_click, browser_type, browser_fill_form, browser_select_option, browser_snapshot, browser_take_screenshot, browser_console_messages, browser_network_requests, browser_resize and browser_tabs. You don’t need to name them. Describe the test and Claude picks the tools, but knowing they exist helps: you can ask for console errors and failed network requests, not just “does it look right”.

Make it useful: prompts to try

Open http://localhost:3000 with Playwright. Act as a new visitor and try to sign up with the test email test+1@example.com and password Test-Pass-123. Then try again with an invalid email, an empty password, and a 300-character name. For each attempt, report: what you did, what happened, any console errors, and any failed network requests. End with a numbered bug list, most serious first, each with exact steps to reproduce.

Use Playwright to check every link in the top navigation and footer of http://localhost:3000. Resize the window to 375x812 and repeat. Tell me which links are broken, which pages show errors in the console, and anything that overlaps or gets cut off at phone width. Take a screenshot of each problem.

I just changed the checkout page. Read the files I changed (git diff), work out which user flows they affect, then use Playwright to test only those flows on http://localhost:3000. Don't edit any code. Give me a pass/fail table and a short note on anything I should test by hand.

The third prompt plays to Claude Code’s strength: it can read your code and the browser at the same time. Telling it not to edit code keeps testing and fixing as separate steps you control.

Troubleshooting

• /mcp shows playwright as failed. Check Node with node --version (18+). Try running npx @playwright/mcp@latest in a terminal to see the error directly. A slow first download can exceed the start-up timeout; try MCP_TIMEOUT=30000 claude.
• The browser doesn’t open, or a profile is “in use”. The README says a persistent profile can be used by only one browser at a time. Close other Playwright sessions, or add --isolated (or a separate --user-data-dir).
• Claude is still logged in from last time. By default, logins are stored in a persistent profile (on macOS under ~/Library/Caches/ms-playwright/, on Windows under %USERPROFILE%\AppData\Local\ms-playwright\, on Linux under ~/.cache/ms-playwright/). Use --isolated for clean runs.
• Claude Desktop doesn’t list the server. Check the JSON is valid, restart fully, and read mcp.log in ~/Library/Logs/Claude (macOS) or %APPDATA%\Claude\logs (Windows).
• Output gets cut off on large pages. Claude Code warns when an MCP tool returns more than 10,000 tokens and caps output at 25,000 by default. Ask Claude to test one section at a time, or raise the cap with MAX_MCP_OUTPUT_TOKENS=50000 claude.

Watch out for

• The README states plainly: “Playwright MCP is not a security boundary.” Options like --allowed-origins and --blocked-origins are described as not being a security boundary either. Treat Claude’s browser as having the same reach as you.
• Web pages can contain hidden instructions aimed at AI (prompt injection). Claude Code’s docs warn that servers fetching external content carry this risk. Test your own app, not random sites, and watch the session.
• Only test sites you own or have permission to test, and use test accounts and test payment modes.
• Logins saved in the persistent profile stay on disk until you delete that folder.

Next steps

• Build a simple website and put it online with Netlify, then run prompt 2 against the draft URL before going live.
• Stop Claude using outdated library docs when it fixes the bugs it found.