Playwright MCP

Playwright MCP is a Model Context Protocol server from Microsoft that lets an AI agent drive a real browser. It is not a standalone app — you register it with an MCP client like Claude Code, and the agent gains a set of tools for navigating pages, clicking, typing, filling forms, and reading results. Under the hood it uses Playwright, the same automation engine that powers Microsoft's end-to-end testing framework.

Its defining choice is to act on the page's accessibility tree rather than screenshots. Each action returns a structured snapshot of elements, their roles, and their text, so the model interacts with semantic targets instead of guessing pixel coordinates. That makes it fast, deterministic, and token-efficient, and means no vision model is required. It is aimed at developers who want an agent that can actually exercise a running web app — reproducing bugs, checking flows, scraping state, or driving QA — instead of only reasoning about source code.

Highlights

• Accessibility-tree based — operates on structured page snapshots (roles, names, text), not pixel screenshots, so interactions are deterministic and cheap on tokens.
• No vision model needed — the agent reads semantic element references and targets them directly; optional --caps=vision adds coordinate-based clicks when you really need them.
• Full browser tool set — navigation, clicks, typing, form fills, drag-and-drop, tab management, file uploads, dialog handling, and console/network inspection.
• Cross-browser — runs Chromium, Firefox, or WebKit (and named Chrome/Edge channels), headed or headless.
• Profile control — a persistent profile by default, so the agent reuses your logged-in state across sessions, or pass --isolated for an ephemeral session that is discarded when the browser closes.
• Microsoft-maintained, Apache-2.0 — published as @playwright/mcp on npm and tracked in the open in the microsoft/playwright-mcp repo.

In an AI-assisted workflow

Because it is an MCP server, you add it once to your client and every session can reach for it. In Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

Or drop it into an MCP config block directly:

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

From there the agent can verify its own work — start the dev server, navigate to the page it just changed, click through the flow, and read back the accessibility snapshot to confirm the result. A typical loop: ask the agent to reproduce a reported bug, let it drive the browser to the failing state, then have it write a Playwright test that locks the fix in place.

Good to know

Playwright MCP is free and open source under Apache-2.0; you run it locally via Node.js (npx @playwright/mcp@latest) and there is no hosted tier or account. It works with any MCP-capable client — Claude Code, the Claude Desktop app, VS Code, Cursor, and others — not just Claude Code.