Playwright MCP Server

Official

Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.

Local serverstdiostreamable-httpTypeScriptApache-2.0 21.0k

What is the Playwright MCP server?

The Playwright MCP server is the closest thing browser automation has to a standard right now. Built and maintained by Microsoft on top of the Playwright test framework, it gives your assistant a real Chromium, Firefox or WebKit instance to work with — and, unusually, it works from the accessibility tree rather than pixels. That means the model reads the page the way a screen reader would: structured, labelled elements it can reference precisely, instead of guessing coordinates on a screenshot.

In practice that design choice matters a lot. Vision-based automation breaks the moment a layout shifts a few pixels; accessibility-tree automation keeps working because it targets elements by role and name. It's also dramatically cheaper on tokens, since a structured snapshot is a fraction of the size of a base64 screenshot.

Typical session: ask your assistant to open your staging site, fill the signup form with test data, submit it, and report any console errors. The server handles navigation, form filling, tab management, file uploads and dialog handling, and can save a full trace for debugging. For anything you'd normally write a Playwright script for, you can now just describe the workflow in plain language first — then have the assistant generate the durable test script once the flow works.

One honest caveat: it launches a real browser locally, so it needs a machine with a display stack (headless works fine on servers). For fully cloud-hosted browsing, look at Browserbase instead — the two pair nicely.

Tips for getting the most from it

  • Take a fresh browser_snapshot before every click. Element references are tied to the snapshot they came from, and a stale ref after a re-render is the single most common cause of a step failing for no obvious reason.
  • Pass --isolated when you want a throwaway profile per run, or --user-data-dir when you want cookies and logins to survive between sessions. The default sits between the two and surprises people.
  • Enable extra tool groups with --caps (pdf, vision, tracing) only when a task needs them. A smaller toolset keeps the model focused and the context noticeably lighter.
  • browser_console_messages paired with browser_network_requests answers most "why did the page break?" questions faster than any screenshot will.

What you can do with it

Smoke-test a web app in plain language

Describe the signup or checkout flow and let the assistant walk through it, reporting broken steps and console errors.

Generate durable Playwright tests

Prototype a flow interactively, then ask for the equivalent Playwright test file once it passes.

Scrape JavaScript-heavy pages

Pages that render client-side and defeat plain HTTP fetchers are readable through a real browser session.

Automate repetitive web chores

Form submissions, dashboard exports and multi-step admin tasks that have no API.

Available tools

ToolWhat it does
browser_navigateOpen a URL in the controlled browser
browser_snapshotCapture an accessibility-tree snapshot of the current page — the primary way the model 'sees'
browser_clickClick an element referenced from the snapshot
browser_typeType text into a field, with optional submit
browser_take_screenshotTake a visual screenshot when pixels actually matter
browser_fill_formFill multiple form fields in one call
browser_tabsList, open, switch and close browser tabs
browser_console_messagesRead the page's console output — invaluable for debugging

How to install the Playwright MCP server

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

Runs headless by default in most setups; pass --headless=false to watch the browser work.

Configuration

Node.js 18+. First run downloads a browser binary (~130 MB) unless one is already installed via Playwright.

Example prompts to try

  • Open localhost:3000, sign up with a test email, and tell me if anything in the flow errors.
  • Go to our pricing page and screenshot how it renders at mobile width.
  • Fill the contact form with dummy data, submit it, and read back the confirmation message.

Frequently asked questions

No — that's its main advantage. It reads pages through the accessibility tree, so the model gets structured, labelled elements rather than pixels. Screenshots are available as a separate tool when you genuinely need to see rendering.