{"slug": "playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code", "title": "Playwright CLI vs Playwright MCP: Which Should You Use with Claude Code?", "summary": "A developer compares Playwright MCP and Playwright CLI for use with Claude Code, finding that CLI uses 26,000-27,000 tokens per multi-step UI test versus MCP's 114,000 tokens due to CLI keeping page state on disk. The post recommends CLI for token-efficient, repeatable automation with shell access and MCP for sandboxed exploratory tasks.", "body_md": "If you searched \"Claude Code + Playwright,\" the first thing you probably found was the Playwright MCP server — it's the original, most widely documented integration. But there's a newer option, Playwright CLI, built specifically for agents like Claude Code that already have shell access. They solve the same problem in very different ways, and picking the wrong one for your situation can cost you real time and real tokens.\n\nThis post breaks down exactly how they differ, with real numbers, so you can pick the right tool for your project.\n\n`claude mcp add playwright npx @playwright/mcp@latest`\n\nPlaywright MCP is a Model Context Protocol server that gives Claude tools like `browser_navigate`\n\n, `browser_click`\n\n, and `browser_snapshot`\n\n. It's the plug-and-play option:\n\n```\nclaude mcp add playwright npx @playwright/mcp@latest\n```\n\nPlaywright CLI is a newer, standalone command-line tool built for coding agents that already have filesystem and shell access:\n\n```\nnpm install -g @playwright/cli@latest\nnpx playwright install chromium\n```\n\n`grep`\n\n), instead of the whole document.Here's identical logic — navigate, fill a field, submit, verify — expressed through each tool.\n\n**With MCP** (called as conversational tool-use, no shell commands visible):\n\n```\nClaude calls: browser_navigate(url=\"https://demo.playwright.dev/todomvc\")\nClaude calls: browser_snapshot()\nClaude calls: browser_type(ref=\"e12\", text=\"Write blog post\")\nClaude calls: browser_press_key(key=\"Enter\")\nClaude calls: browser_snapshot()\n```\n\n**With CLI** (run as literal shell commands):\n\n```\nplaywright-cli navigate https://demo.playwright.dev/todomvc\nplaywright-cli snapshot\nplaywright-cli fill e12 \"Write blog post\"\nplaywright-cli press e12 Enter\nplaywright-cli snapshot\n```\n\nThis is the part that actually matters for your wallet and your context window. Independent benchmarking on a typical multi-step browser task found:\n\n| Tool | Approx. Tokens for a Multi-Step UI Test |\n|---|---|\n| Playwright MCP | ~114,000 |\n| Playwright CLI | ~26,000–27,000 |\n\nThat's close to a **90,000-token difference for the same task** — largely because MCP re-sends full page state into the conversation on every single tool call, while CLI keeps that state on disk and Claude only pulls in the specific slice it needs.\n\nFor a one-off exploratory test, this difference barely matters. For a full regression suite, or a long session where you're testing form after form, it's the difference between finishing your session and hitting a context limit halfway through.\n\n| Use MCP when... | Use CLI when... |\n|---|---|\n| Your agent is sandboxed with no shell access (Claude Desktop, custom chat UI) | Your agent has shell/filesystem access (Claude Code, Copilot, Cursor) |\n| You need quick, exploratory, one-off browser tasks | You're running long, multi-step sessions where token budget matters |\n| You want conversational back-and-forth over page structure | You want repeatable automation you can also run in CI |\n\nIn practice, most teams don't pick just one — they keep **CLI as the default** for test writing and longer sessions, and leave **MCP configured as a fallback** for quick interactive debugging when a shell isn't convenient.\n\nPlaywright MCP and Playwright CLI aren't competitors so much as tools for different moments — MCP for sandboxed, conversational exploration, and CLI for token-efficient, repeatable automation with an agent that already has shell access. Now that you know the tradeoffs, in the next post we'll go further into general token-saving habits for Claude Code sessions — beyond just this one tool choice.\n\nWhich one are you already using — MCP, CLI, or both? Let me know in the comments!", "url": "https://wpnews.pro/news/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code", "canonical_source": "https://dev.to/aswani25/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code-1olh", "published_at": "2026-07-15 16:30:00+00:00", "updated_at": "2026-07-15 16:40:14.720954+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "large-language-models"], "entities": ["Playwright", "Claude Code", "Playwright MCP", "Playwright CLI"], "alternates": {"html": "https://wpnews.pro/news/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code", "markdown": "https://wpnews.pro/news/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code.md", "text": "https://wpnews.pro/news/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code.txt", "jsonld": "https://wpnews.pro/news/playwright-cli-vs-playwright-mcp-which-should-you-use-with-claude-code.jsonld"}}