playwright

What the tool does

Playwright MCP is an MCP server that drives a browser through Playwright. The README says it works from the accessibility tree rather than pixel-based input. In the default mode, browser_snapshot reads the page as structured text, and Claude clicks or types using element references from that text. That means it works without a vision model.

There is also a screenshot tool (browser_take_screenshot), but the README states you cannot act on a screenshot. Actions are based on snapshots.

Installing it

The official marketplace has a playwright plugin, set up to run @playwright/mcp@latest through npx in its .mcp.json. You can also register just the MCP server yourself without the plugin. Node.js 18 or later is required.

# As a plugin
/plugin install playwright@claude-plugins-official

# As an MCP server, directly
claude mcp add playwright npx @playwright/mcp@latest

How to use it

• Say what to open and what to check, such as "Open localhost:3000 and check that the login screen looks right."
• To see different screen widths, ask it to open the page at a specific window size. The tool list includes browser_resize.
• It can also read console errors and network requests (browser_console_messages, browser_network_requests).
• The browser runs in headed mode (with a visible window) by default. To run without a window, pass --headless in the server options.
• Use --browser to pick chrome, firefox, webkit, or msedge. With --isolated, the profile lives only in memory and its state disappears when the browser closes.

When not to use it, and safety

• For high-throughput coding agents, the README recommends the Playwright CLI with skills instead. MCP uses more context because of its tool definitions and the accessibility tree.
• The MCP approach suits exploratory automation, self-healing tests, and long tasks where the browser state needs to persist.
• The README says plainly that this server is not a security boundary. If you run it with a logged-in profile, it acts as that account. When opening sites you do not trust, consider --isolated, --allowed-hosts, or --blocked-origins.
• A persistent profile can only be used by one browser instance, so for parallel use you need --isolated or a separate --user-data-dir.

Real examples

Open http://localhost:3000 at 1280px wide and at 390px wide, capture the full page for each, and tell me if anything looks broken.

Open the /pricing page and tell me about any console errors and failed network requests.

Common mistakes and when not to use it

• The server starts through npx, so it will not start on Node older than 18 or when the network is blocked. Check the connection status in /mcp.
• If you open a page that needs a login with a persistent profile, it acts as your account. Use a test account.
• Everything on the open page goes into context. A very long page gets expensive, so point it at the area you want checked.
• This tool does not judge a screen the way a person does. Whether a design looks good is something you have to see and decide yourself.

FAQ