DEV Community

Deduped
Deduped

Posted on Originally published at dedupedai.com

Give Claude Code a real browser with Playwright MCP

#claudecode #mcp #testing #ai

Claude Code can write a login form, but it cannot see whether the form works. Give it a real browser and it can open the page, click through, and tell you what broke.

Playwright MCP is Microsoft's Model Context Protocol server that does exactly this. Instead of screenshots, it hands the model Playwright's accessibility tree: a structured text view of the page. That means no vision model is needed, and actions are more deterministic than clicking at pixel coordinates.

Our shorter how-to is on the Deduped use-case page. Here is the full setup.

Requirements

  • Node.js 18 or newer
  • An MCP client: Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop, Goose and others all work

Step 1: the standard config

Most clients accept this config block:

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

Paste it into your client's MCP settings and restart it.

Step 2: add it to Claude Code

Claude Code can register MCP servers from the command line:

claude mcp add playwright npx @playwright/mcp@latest
Enter fullscreen mode Exit fullscreen mode

Run claude mcp list afterwards to confirm it is registered. For Codex and other clients, use the config block above or the client's own MCP add command; the repo README lists per-client instructions.

Step 3: give it a real task

Skip "test my site". Be specific:

Open http://localhost:3000/signup, fill the form with a test email, submit it, and tell me what the page shows. If there is an error, list the exact message and which field caused it.

The agent calls tools to navigate, read the accessibility snapshot, type and click, then reports what it found. This is a good loop for exploring a flow you just built, reproducing a bug a user described, or checking a form after a refactor.

MCP or the CLI?

The README is candid about a tradeoff. Coding agents increasingly prefer the Playwright CLI with skills, because CLI calls avoid loading large tool schemas and verbose accessibility trees into the model's context. That matters when you are also juggling a big codebase and tests inside a limited context window.

The README's guidance: use the CLI plus skills for high-throughput coding agents, and use MCP for specialized loops that benefit from persistent browser state, rich introspection and iterative reasoning over page structure, such as exploratory automation, self-healing tests or long-running autonomous workflows. If your use is "poke at my app and tell me what is wrong", MCP is a fine fit. If you are burning context, try the CLI at github.com/microsoft/playwright-cli.

Tips

  • Keep sessions short. Accessibility snapshots of busy pages are large and eat context quickly.
  • Point it at localhost or a staging site. Do not let an agent click around production with real accounts.
  • Pin the version (@playwright/mcp@0.0.x) if you need reproducible behavior, since @latest can change under you.
  • If you need Firefox or WebKit instead of Chromium, see the Deduped page on running it in other browsers.

Who this is for

Anyone building web apps with an AI coding agent who is tired of the "it should work now" guess. It will not replace a proper test suite, but it closes the gap between writing code and seeing it run.

Repo: github.com/microsoft/playwright-mcp. More on Deduped: Playwright MCP in Claude Code or Codex.

Get one email every Monday with the week's hottest AI repos and exactly how to use them: subscribe free at dedupedai.com

Top comments (0)