{"slug": "playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2", "title": "Playwright MCP for Claude Code: Let It Open a Real Browser and Click Through Flows (2-Minute Setup)", "summary": "A developer demonstrated a two-minute setup for adding Microsoft's official Playwright MCP server to Claude Code, letting the agent open a real browser, click through pages, read rendered text, and fill forms via accessibility snapshots rather than screenshots. The setup registers the server as a local stdio process with a single `claude mcp add` command, and the agent can run its own CLI steps to verify the connection by navigating to a live page and reading back its heading. Optional flags such as `--headless`, `--isolated`, and `--browser` control visibility, profile reuse, and engine choice.", "body_md": "You ask Claude Code why the signup flow breaks, and it can only guess from the source. So you open the page, click through it yourself, copy what you see, and describe it back in words. The agent is working from your summary, not the page.\n\n**Playwright MCP** takes you out of that loop. It’s Microsoft’s official browser automation server: it lets Claude Code open a real browser, click through a page, read the actual rendered text, and fill in forms, using accessibility snapshots instead of pixel screenshots. It’s become one of the most-installed MCP servers because it turns “describe this page to me” from a guess into an actual read. Setup takes about 2 minutes.\n\nAdd it as a local stdio server — no separate install step, `npx` handles it on first run.\n\n```\nclaude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest\n```\n\nRestart Claude Code, then run `/mcp` inside a session to confirm it shows as connected. Total time: about 2 minutes.\n\nSkip Steps 1-4 below and hand the whole thing to the agent instead:\n\n```\nYou have access to the `claude mcp` CLI in this project. Do the following and report back — do not tell me it's done unless step 4 actually confirms it:\n\n1. Run `claude mcp list` to see what's already configured.\n2. Add the Playwright MCP server: `claude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest`\n3. Run `claude mcp list` again and confirm playwright shows as Connected.\n4. Open a real page to prove it works: navigate to https://example.com and read back the page's main heading text. If step 4 fails, tell me the exact error instead of reporting success.\n```\n\nThis works because Claude Code can run its own CLI commands and then immediately use the newly connected server — so the agent proves the browser actually works instead of just confirming the config exists.\n\n| Requirement | Why You Need It | Time | \n|---|---|---|\n| Claude Code installed | Provides the `claude mcp` command used to register the server | 0 min | \n| Node.js | Playwright MCP runs via `npx` — no separate download needed beyond this | ~5 min if missing | \n| ~300MB free disk space | First run downloads a Chromium build for Playwright to drive | ~1 min | \n\nPrefer to do it by hand instead of delegating to the agent? Here’s the manual version.\n\n~1 min\n\nThe `--` separates Claude’s own flags from the command that launches the server:\n\n```\nclaude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest\n```\n\nBy default the browser runs headed (a visible window). For faster, invisible runs — especially useful when Claude Code is doing background verification work — add `--headless` and `--isolated` so each session starts from a clean profile instead of reusing saved cookies:\n\n```\nclaude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest --headless --isolated\n```\n\nDefaults to Chromium. To test against Firefox or WebKit instead, pass `--browser`:\n\n```\nclaude mcp add --transport stdio playwright -- npx -y @playwright/mcp@latest --browser firefox\n```\n\nRun `claude` to start a fresh session. Newly added servers need a restart (or the `/mcp` panel refresh) before Claude Code can see their tools.\n\nClaude Code drives a real browser: it clicks, types, and reads the rendered page.\n\n| Flag | What It Does | \n|---|---|\n| `--headless` | Runs the browser with no visible window — headed (visible) is the default | \n| `--isolated` | Keeps the browser profile in memory only, so every session starts fresh instead of reusing saved logins/cookies | \n| `--browser` | Chooses the engine: `chromium` ,`firefox` ,`webkit` , or`msedge` | \n| `--vision` | Switches from accessibility snapshots to actual screenshots — slower and less reliable, only use it if a page genuinely needs visual inspection | \n| `--device` | Emulates a specific device, e.g. `\"iPhone 15\"` , for responsive/mobile testing | \n\nCheck that it’s registered and healthy:\n\n```\nclaude mcp list\n```\n\n✔ playwright    Connected\n\n✘ playwright    Failed to connect\n\nA config entry showing up is not the same as it working — the real test is asking Claude Code to actually drive the browser. In a session, ask it to navigate to a real page and read something back:\n\n```\nNavigate to https://example.com using the playwright MCP tools and tell me the exact text of the page's main heading.\n```\n\nIf it comes back with the actual heading text (“Example Domain”), the browser is genuinely working end to end — not just listed as connected.\n\n`--` separator.`claude mcp list`.`--headless` or the browser launch will fail.`--vision` by default.`/mcp` panel refresh to pick up a newly added server.\nNo, by default it reads the page’s accessibility tree (an accessibility snapshot) rather than capturing pixels — that’s faster and lets Claude read actual text and structure instead of interpreting an image. Screenshots are only used if you pass `--vision`.\n\nNot if you use `--isolated` — that keeps each session’s profile in memory only. Without it, Playwright MCP uses a persistent profile stored in a separate cache directory, not your regular browser’s profile.\n\nYes — that’s one of the most common uses: ask Claude Code to navigate your local dev server or a staging URL, click through a flow, and report back what it actually saw rendered.\n\nUsually a missing display for headed mode — add `--headless`, and if Chromium itself is missing in the CI image, its first-run download step needs network access.\n\nYes — `claude mcp remove playwright` deletes it from the config.\n\n`claude mcp` command reference\n*Originally published at [quickpromptco.com](https://quickpromptco.com/install-playwright-mcp-claude-code-browser-automation/), where the guide is kept up to date.*", "url": "https://wpnews.pro/news/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2", "canonical_source": "https://dev.to/juholee/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-flows-2-minute-setup-5dhb", "published_at": "2026-09-30 12:35:42+00:00", "updated_at": "2026-09-30 12:47:39.895030+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "developer-tools", "ai-tools"], "entities": ["Claude Code", "Playwright MCP", "Microsoft", "Chromium", "Firefox", "WebKit", "Node.js", "npx"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2", "markdown": "https://wpnews.pro/news/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2.md", "text": "https://wpnews.pro/news/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2.txt", "jsonld": "https://wpnews.pro/news/playwright-mcp-for-claude-code-let-it-open-a-real-browser-and-click-through-2.jsonld"}}