Playwright MCP — Add-ons & integrations

Playwright MCP

✓ Official★ 34.987

Microsoft's official MCP server for browser automation — via the accessibility tree, without screenshots or a vision model.

Playwright MCP drives a real browser — but unlike screenshot-based approaches, the server works on Playwright's accessibility tree, i.e. the structured description of a page (which buttons, links, and form fields exist, with names and state). The README sums up the advantages as "Fast and lightweight", "LLM-friendly — no vision models needed, operates purely on structured data", and "deterministic tool application" — there's no ambiguity about which pixel was meant, because the agent addresses elements directly instead of clicking on coordinates.

For this, the agent gets a set of browser tools: browser_navigate opens pages, browser_snapshot returns the current accessibility snapshot as text, browser_click and related tools interact with elements, browser_tabs manages multiple tabs. Additional capabilities are opt-in: PDF export (browser_pdf_save via --caps=pdf) and coordinate-based mouse actions for edge cases (--caps=vision). Network routing as well as cookies/localStorage can also be controlled.

Chrome, Firefox, WebKit, and Microsoft Edge are supported; by default the browser runs visibly (headed), with --headless it can also run invisibly. The only requirement is Node.js 18 or newer — the server starts directly via npx @playwright/mcp@latest, with no permanent installation needed. This lets an agent like Claude Code operate web pages, fill out forms, and click through its own frontend end-to-end, while every step is logged as a traceable tool action.

🔧 SETUP

Check the prerequisite: Node.js 18 or newer
Register with Claude Code: `claude mcp add playwright npx @playwright/mcp@latest`
For other MCP clients, add the standard config: `{"mcpServers": {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}}`
Optionally enable capabilities: `--caps=pdf` (PDF export) or `--caps=vision` (coordinate clicks), invisible browser with `--headless`
Test it: ask the agent to open a page and describe it — it will then use browser_navigate and browser_snapshot

✅ WHEN TO USE IT?

End-to-end testing your own frontend

"Open localhost:3000, try submitting the form with invalid data, and check whether the error messages appear correctly" — the agent clicks its way through via the accessibility tree.

Structured web interaction without a vision model

Automatically filling out a multi-step form: the agent sees fields with names and roles as a text snapshot and fills them in deterministically — faster and cheaper than screenshot analysis.

⛔ WHEN NOT TO?

Pixel-perfect visual checks

The accessibility tree describes structure and state, but not appearance — the standard mode can't tell you whether a layout has shifted or colors are correct.

Better: For visual checks, enable the opt-in vision mode (`--caps=vision`) or use classic screenshot-based tests.

Interacting with your own, already logged-in browser

Playwright MCP launches its own browser instances — existing logins and sessions from your everyday browser aren't automatically available there.

Better: For tasks in your own logged-in browser, use Claude in Chrome instead.