HarnessCommunity★ 20k

Playwright MCP

Updated Jul 7, 2026

The official Playwright MCP server from Microsoft, giving Claude Code 68 browser-automation tools that operate on the page's accessibility tree — no vision model needed. Covers navigation, clicks, form fill, keyboard input, screenshots, and network inspection. For high-throughput coding agents, Microsoft also offers a token-efficient Playwright CLI with Skills as an alternative to MCP.

View on GitHub

What it does

npx @playwright/mcp@latest
Launch the Playwright MCP server, which registers 68 browser automation tools for Claude Code to call.
browser_navigate
MCP tool that navigates to a given URL in the controlled browser.
browser_click
MCP tool that clicks an element identified by its accessibility-tree reference or a CSS selector.
browser_type
MCP tool that types text into an editable element identified by its accessibility-tree reference.
browser_snapshot
MCP tool that returns the page's current accessibility tree as structured data — use this (not the screenshot) when selecting elements for subsequent actions.
browser_take_screenshot
MCP tool that captures the current page as an image file for visual inspection.

Files (1)

OVERVIEW.mdprimary · markdown · 1.9 KB

## What it does

The Playwright MCP server from Microsoft exposes browser automation as 68 MCP tools Claude Code can call during a session. It operates on the page's accessibility tree rather than pixel snapshots, so no vision model is needed and tool calls are deterministic. Requires Node.js 18+.

Microsoft notes that for coding agents focused on test-writing and codebase work, their separate Playwright CLI with Skills (github.com/microsoft/playwright-cli) is more token-efficient, since it avoids loading large tool schemas and accessibility trees into the context window. The MCP server is better suited for exploratory automation, self-healing tests, and long-running agentic workflows.

## Key tools

browser_navigate — navigate to a URL

browser_click — click an element by accessibility selector or snapshot reference

browser_type — type text into an editable element

browser_fill_form — fill multiple form fields in one call

browser_take_screenshot — capture the current page as an image

browser_snapshot — return the current page's accessibility tree as structured data (use this for actions, not browser_take_screenshot)

browser_evaluate — run JavaScript in the page context

browser_press_key — press a keyboard key or chord

browser_select_option — select an option from a dropdown

browser_console_messages — return browser console output

## Install

Add to your MCP client config (claude_desktop_config.json or .claude/settings.json):

mcpServers > playwright > command: npx, args: [@playwright/mcp@latest]

Or register via Claude Code CLI:
claude mcp add playwright -- npx @playwright/mcp@latest

## When to use

Use Playwright MCP when you want Claude to drive a browser autonomously — testing UI flows, scraping structured data, or automating multi-step web tasks. Prefer CLI+Skills if you are mostly writing Playwright test code and want to conserve context window space.