Playwright MCP vs Chrome DevTools MCP: What Agents Miss
Your coding agent can build a landing page in ten minutes and tell you everything works. Then you open it and find the cards misaligned and the mobile menu hiding behind the header. A browser MCP like Playwright MCP or Chrome DevTools MCP lets the agent open a real browser and check its own work. This guide covers what each one does, how to set it up, which to pick, and what neither of them can see.
Playwright MCP vs Chrome DevTools MCP: the short answer
Playwright MCP is Microsoft’s open-source MCP server that lets an AI agent drive a browser through Playwright. It clicks, types, navigates and checks results, working from a structured snapshot of the page.
Chrome DevTools MCP is the Chrome team’s MCP server that gives an agent DevTools access to a live Chrome window: performance traces, network requests and console output.
| Playwright MCP | Chrome DevTools MCP | |
|---|---|---|
| Core job | Acting on the page | Debugging the page |
| Best for | User flows, cross-browser checks, writing tests | Slow pages, runtime errors, network issues |
| Browsers | Chrome, Firefox, WebKit, Edge | Chrome only |
Verdict: use Playwright MCP to act and test across browsers, and Chrome DevTools MCP to diagnose performance and runtime problems. Plenty of teams run both.
Why this matters if you ship client sites: both tools confirm that a page works. Neither can tell you whether it looks and feels right, and that’s what clients notice. The second half of this guide shows how to get human feedback back to the agent so it can fix those issues too.
What is Playwright MCP?
Playwright MCP is an open-source server from Microsoft (Apache-2.0, published on npm as @playwright/mcp). It exposes Playwright’s browser automation to AI agents through the Model Context Protocol. The agent calls tools such as browser_navigate, browser_click and browser_type, and Playwright carries them out in a real browser.
By default the agent doesn’t look at pixels. It reads an accessibility snapshot, a text outline of the page:
- heading "Contact us" [level=1] [ref=e3]
- textbox "Email" [ref=e5]
- button "Send message" [ref=e7]To fill the form, it types into ref=e5 and clicks ref=e7. Targeting elements by reference rather than guessing from a screenshot makes it fast and reliable. Screenshots are available when you want them.
It runs a visible browser by default (add --headless for background runs), keeps logins between sessions, and adds extra tool groups with --caps, such as testing for generating Playwright tests from a run. It needs a current LTS version of Node.js.
Two notes before you install. Only enable browser_run_code_unsafe for prompts you trust, because it lets the agent run arbitrary code. And mcp-playwright by executeautomation is a separate community server; Microsoft’s official package is @playwright/mcp.
What is Chrome DevTools MCP?
Chrome DevTools MCP (npm package chrome-devtools-mcp) is maintained by the Chrome DevTools team. It connects your agent to Chrome and gives it the parts of DevTools developers reach for when something is wrong:
- Performance traces, with insights on metrics such as LCP and layout shift
- Network requests, including status, headers and payloads
- Console errors and warnings as they happen
- Emulation of slow CPUs, slow networks and different viewport sizes
- Screenshots and basic interaction, such as clicking and filling forms
It’s Chrome-only and built for debugging first. It can launch its own Chrome or connect to one that’s already running.
How to add Playwright MCP to Claude Code, Cursor and Codex
Claude Code:
claude mcp add playwright npx @playwright/mcp@latestThe first time, tell Claude Code to “use playwright mcp”. Otherwise it may write and run a Playwright script instead.
Cursor: go to Settings → MCP → Add new MCP Server, choose the command type and enter npx @playwright/mcp@latest.
Codex:
codex mcp add playwright npx "@playwright/mcp@latest"Other clients (Claude Desktop, Windsurf and most others) accept the standard JSON:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Chrome DevTools MCP works the same way. In Claude Code:
claude mcp add chrome-devtools npx chrome-devtools-mcp@latestIn other clients, use the JSON above with "args": ["chrome-devtools-mcp@latest"].
Confirm it works with this first prompt:
Use playwright mcp. Open localhost:3000, fill the contact form with test data, submit it and report any console errors.If a browser window opens and the agent reports back, you’re connected.
Side-by-side comparison
| Playwright MCP | Chrome DevTools MCP | |
|---|---|---|
| Maintainer | Microsoft | Google (Chrome DevTools team) |
| How the agent sees the page | Accessibility snapshot first, screenshots optional | Page snapshot plus screenshots |
| Browsers | Chrome, Firefox, WebKit, Edge | Chrome only |
| Console and network | Yes, and can mock requests | Yes, with deeper inspection |
| Performance | Basic tracing | Traces plus insights such as LCP |
| Turning runs into tests | Yes, with --caps=testing | Not a focus |
| Price | Free, open source | Free, open source |
| Best for | Acting on pages, cross-browser flows, regression tests | Diagnosing slow pages and runtime errors in Chrome |
Playwright CLI or MCP? Microsoft now suggests that coding agents in large codebases may do better with the Playwright CLI plus Skills, because it uses fewer tokens. Choose MCP when the agent needs to explore a live page step by step or keep a session open across many actions.
Which one should you use?
- Building or fixing user flows, or need Firefox or Safari coverage: Playwright MCP.
- Want the agent to write regression tests: Playwright MCP with
--caps=testing. - Slow page, layout shift or LCP problem: Chrome DevTools MCP.
- Console error or failing API call in Chrome: either, but DevTools goes deeper.
- Building client sites: both, plus a human review step.
What your agent can check, and what it can’t
Browser MCPs are good at function. A well-prompted agent can reliably confirm that pages load, links don’t 404, forms submit, validation messages appear, logins work, the console is clean and no network requests fail. A typical self-test summary:
Checked /contact at 1440px and 390px.
- Form submits with valid data; success message shown.
- Empty email shows "Please enter a valid email".
- 0 console errors, 0 failed requests.
All checks passed.But “all checks passed” only means the functional checks passed. An accessibility snapshot records what’s on the page, not how it looks, and the agent doesn’t know your design intent or your client’s taste. These are the issues a person spots in seconds and an agent waves through:
- Spacing and alignment slightly off. One row of cards has a 6px gap and the next has 8px.
- Buttons that click but feel wrong. The tap target is tiny, or offset from the label.
- Missing or clumsy hover and focus states.
- Overlapping elements. The sticky header covers the heading when you jump to an anchor.
- Animations that stutter or take so long the page feels slow.
- Awkward widths. The layout holds at 768px but breaks at 820px, a portrait iPad Air.
- Real-device quirks. The iOS Safari toolbar hides your bottom call to action.
- Subjective calls. “The hero feels empty.” “This doesn’t feel premium.”
Playwright MCP does have a browser_annotate tool that lets you draw on the page during the agent’s session. That helps the developer at the keyboard. It doesn’t help when the reviewer is a teammate checking tomorrow, or a client who will never install an MCP client.
The full loop: agent builds, human reviews, agent fixes
The answer is to give human review a direct line back to the agent. With PageProofer’s MCP server alongside Playwright MCP, the loop looks like this:
Agent builds ──> Playwright / DevTools MCP self-test
^ │
│ v
Agent fixes <── PageProofer MCP <── Human pins notes on the page
│
v
Note moves to Review ──> Human checks and closes it- The agent builds and self-tests with Playwright MCP or Chrome DevTools MCP.
- People review the live or staging site. You, a teammate or the client pin notes on the page with PageProofer’s script or Chrome/Edge extension. Clients can leave feedback as guests without an account.
- Each note captures the technical context automatically: the element’s CSS selector and HTML, the browser and window size, and any console errors and failed network requests. Reviewers can attach a screenshot of exactly what’s on their screen.
- The agent reads the notes through PageProofer’s MCP server, fixes the code, re-checks it with Playwright MCP and comments on the note with what it changed.
- The note moves to Review. The agent can’t mark a note Complete or Closed, so a person always checks the fix on the page and closes it.
Here’s the loop in action: a note pinned on the page, picked up by the agent through PageProofer’s MCP server, fixed and replied to.
Step 3 is what makes this work. A client comment like “this looks squashed on my laptop” is useless to an agent on its own. With the selector, the HTML, “Chrome on Windows at 1366px” and a screenshot of their actual screen, the agent knows exactly which element, at which width, in which browser.
Prompts that tie it together
With PageProofer’s MCP server and Playwright MCP both connected, you talk to the agent in plain language. There’s no special syntax. These are the prompts we use most, in the order a typical review goes.
Start with the backlog after a client review:
“How many open notes are there on the Northwind site?”
“Show me the open notes tagged #mobile.”
“Are there any notes about the pricing page?”
Read a note in full before touching code:
“What’s wrong in note 12? Summarise it and tell me which page it’s on.”
“Look at the screenshot on note 7 and describe what’s broken.”
“Note 7 has console errors. What do they point to?”
Plan, then fix and verify:
“Find the code behind note 12 and tell me what you’d change. Don’t edit anything yet.”
“That looks right, go ahead. Then use playwright mcp to load the page at the window size from the note and check the fix.”
Report back on the note:
“Comment on note 12 with what you changed and the commit hash, then move it to Review.”
“Add an internal comment to note 5 saying this needs a design decision first.”
“Ask the reporter on note 9 which browser they were using.”
Internal comments are hidden from clients and guests, and everyone else on the note gets the usual email.
Check it yourself:
“Give me the link to note 12 on the website.”
The link opens the page with the note showing, which is the quickest way to confirm a layout fix with your own eyes.
Hand it the whole job
Once you trust the routine, give the agent the full loop in one prompt:
Work through the open #mobile notes on the Northwind site. For each note:
1. Read the feedback, comments, screenshot, selector, HTML, browser and window size, and any console errors.
2. Find the code that renders that element and make the smallest fix. Don't refactor unrelated code.
3. Use playwright mcp to load the page at the note's window size and confirm the fix looks and behaves as intended.
4. Commit, comment on the note with what you changed and the commit hash, then move it to Review.
If a note is unclear, ask the reporter on the note instead of guessing.For notes about slow or janky pages, add: “For performance notes, use chrome devtools mcp to record a trace and report the main insight before and after your fix.”
Your team sees every step in each note’s Activity tab, marked “via AI agent”. When the agent is done, filter the dashboard by Review and you have a ready-made checklist of fixes to check on the page. For more prompts, see how the AI agent reads and replies to notes, or the walkthrough from client note to fixed code.
Set up PageProofer’s MCP server
- Install PageProofer on the site, with the embedded script or the Chrome/Edge extension.
- Invite clients as guests without an account so they can pin notes straight away.
- Connect PageProofer’s MCP server to your agent. In Claude Code it’s one command, copied from the AI agents tab in your settings with your token filled in.
AI agent access is included on every plan, and every plan includes unlimited sites. Plans start at $39/month for Freelancer (5 users), as of October 2026. Start a 15-day free trial, no credit card needed, or see how it works on the AI agents page.
FAQ
What is Playwright MCP?
Playwright MCP is Microsoft’s open-source MCP server, published as @playwright/mcp. It lets AI agents such as Claude Code, Cursor and Codex control a real browser through Playwright, navigating, clicking and typing from an accessibility snapshot of the page. It supports Chrome, Firefox, WebKit and Edge, and it’s free under Apache-2.0.
Chrome DevTools MCP vs Playwright MCP: which is better?
Neither is better overall. Playwright MCP is stronger for driving user flows, testing across browsers and generating tests. Chrome DevTools MCP is stronger for performance traces and deep network and console debugging, but only works in Chrome. Many teams use Playwright to act and DevTools to diagnose.
How do I add Playwright MCP to Claude Code?
Run claude mcp add playwright npx @playwright/mcp@latest in your terminal. The first time you use it, say “use playwright mcp” in your prompt so Claude Code calls the MCP tools instead of writing a script.
How do I set up Playwright MCP in Cursor?
Open Settings, go to MCP and choose Add new MCP Server. Pick the command type and enter npx @playwright/mcp@latest, or add the standard mcpServers JSON block to your Cursor MCP config.
Does Playwright MCP use screenshots or the accessibility tree?
The accessibility tree, by default. The agent gets a text outline of the page with references such as ref=e5 and acts on those, which is fast and doesn’t need a vision model. Screenshots are available when needed.
Can Playwright MCP write Playwright tests for me?
Yes. Start it with --caps=testing and the agent can turn an exploratory run into Playwright test code. Review the output like any generated code.
Can Playwright MCP replace manual website QA?
No. It covers function well: pages load, forms submit, links work and the console is clean. It can’t judge spacing, hover states, animation feel, odd breakpoints, real-device quirks or whether the client likes the design. Pair it with human review, using a tool like PageProofer to send those notes back to the agent.
PageProofer makes it simple to manage visual feedback.