Playwright CLI Cuts Claude Code Token Use by 4x
Key insights
- Playwright CLI uses ~26K tokens per task compared to ~114K for the MCP server, a roughly 4x reduction
- The CLI saves the accessibility tree to disk and only sends a summary to Claude Code, keeping the context window lean
- Reusable Claude Code skills let you package multi-agent testing workflows into a single command
This article is a summary of Claude Code + Playwright = INSANE Browser Automations. Watch the video →
Read this article in norsk
In Brief
Chase Hannegan shows how Playwright CLI, Microsoft's open-source browser automation tool, works with Claude Code to run browser tasks using far fewer tokens than the alternatives. The video compares three browser automation options for Claude Code: the Claude in Chrome extension, the Playwright MCP (Model Context Protocol) server, and the new Playwright CLI. The CLI wins on efficiency, using roughly 26,000 tokens per task compared to 114,000 for the MCP server. Hannegan walks through setup, a live UI testing demo with parallel sub-agents, and how to package the entire workflow into a reusable Claude Code skill.
What you'll learn
- How to install Playwright CLI and connect it to Claude Code in under five minutes
- Why the CLI uses far fewer tokens than the MCP server or the Chrome extension
- How to run parallel browser tests with sub-agents and package them into reusable skills
Why Playwright CLI?
Claude Code has several options for controlling a browser: the Claude in Chrome extension, the Playwright MCP server, and the Playwright CLI. All three let an AI model control a browser through code, but they differ in how much data they push into the model's context window (the limited amount of text the AI can "see" at once).
The Chrome extension takes screenshots of each page (3:53). Images are expensive in tokens, it cannot run in headless mode (without a visible browser window), and it cannot run multiple sessions in parallel (4:11).
The MCP server uses the accessibility tree. This is a structured map of everything on a web page (buttons, links, text fields), originally built so screen readers can help blind users navigate. It is lighter than screenshots, but the MCP server dumps the entire tree into Claude Code's context window every time it navigates (6:08). On a content-rich page, that tree can be thousands of tokens.
The CLI takes a different approach. It reads the same accessibility tree but saves it to disk instead of sending it all to Claude Code (6:40). It then sends only a short summary to the model (6:50). The result: roughly 26,000 tokens per task versus 114,000 for MCP, a difference of about 90,000 tokens (3:36).
Setup
Installation takes three commands (7:11):
Install the Playwright CLI package
Run npm install -g @playwright/cli@latest to install the command-line tool globally.
Install a browser engine
Run npx playwright install chromium to download Chromium. You can swap chromium for firefox or webkit if you prefer a different engine.
Install the Claude Code skill
Run playwright-cli install --skills to add the Playwright skill to your Claude Code environment. This creates a markdown file that tells Claude Code how to use the CLI (7:46).
After these three steps, open Claude Code and you are ready to go.
Running a browser test
With the skill installed, you control Playwright through plain language. Hannegan shows this by asking Claude Code to test a form on his website (9:38):
"Can you use the Playwright CLI tool to test the form submission? Make it a single agent and make it headed so I can see it."
Claude Code loads the skill, inspects the project to understand the page structure, opens the browser, scrolls to the form, fills in fields, and checks the results. When finished, it closes the browser and reports the test outcome with screenshots (10:25).
Key features supported by the CLI (4:36):
- Headless mode: the browser runs invisibly in the background, using fewer resources
- Parallel sessions: multiple sub-agents can test different scenarios at the same time
- Persistent login profiles: saved cookies and sessions so the browser stays logged in across runs
Packaging workflows into skills
The real power comes from combining Playwright CLI with Claude Code skills (reusable prompt files that store a workflow so you can run it with a single command) (11:04).
Instead of typing "run three parallel headed browser tests on the form" every time, you can save that instruction as a skill:
Define the workflow
Write out the exact instructions: how many sub-agents, what to test, headed or headless, what to report (12:06).
Create the skill
Use Claude Code's skill creator to turn the workflow into a saved skill file (12:18).
Run with one command
Now you just say "use the form tester skill" and Claude Code spawns three parallel agents, each using the Playwright CLI, testing your form from different angles (12:36).
This turns a multi-step testing workflow into something you can run with a single command, every time.
Checklist: Common pitfalls
- Browser not opening? By default, Playwright CLI runs in headless mode. Add "headed" to your prompt if you want to see the browser window (9:22).
- Skill not found? Make sure you ran
playwright-cli install --skillsafter installing the CLI package. The skill file must exist for Claude Code to know how to use the tool. - High token usage despite using CLI? Check that you are using the CLI skill, not the MCP server. Both use Playwright, but the MCP path sends the full accessibility tree into the context window.
- Tests failing on your project? Claude Code has full visibility into your project files, which helps it understand page structure. Make sure your dev server is running before asking it to test (10:01).
Practical implications
For individual developers
Start with the UI testing use case. Every time you change a form, button, or page layout, ask Claude Code to test it with Playwright CLI. You skip manual testing and the 4x token savings add up fast.
For teams
Package your testing workflows into shared Claude Code skills. New team members can run the full test suite without knowing how Playwright works under the hood.
For cost-conscious projects
If you are already using the Playwright MCP server, switching to the CLI cuts your browser automation token costs by roughly 75%. On a project with frequent browser tasks, that is a significant saving.
Test yourself
- Transfer: How could you use the Playwright CLI + sub-agent pattern for something other than form testing, for example monitoring a competitor's pricing page?
- Trade-off: When would you choose the Chrome extension over Playwright CLI despite the higher token cost?
- Architecture: Design a nightly testing workflow that uses Playwright CLI skills to test five critical pages, report failures, and log results to a file.
Glossary
| Term | Definition |
|---|---|
| Accessibility tree | A structured representation of a web page built for assistive technologies like screen readers. It describes every element (buttons, links, text fields) in a way that doesn't require seeing the page. |
| CLI (Command-Line Interface) | A text-based way to interact with software by typing commands in a terminal, as opposed to clicking buttons in a graphical interface. |
| Context window | The limited amount of text an AI model can process at once. Everything the model "sees" (your prompt, tool output, conversation history) must fit in this window. |
| Headed browser | A browser with a visible window that you can watch and interact with. The opposite of headless. |
| Headless browser | A browser running in the background without a visible window. Faster and lighter because it skips rendering the visual interface. |
| MCP (Model Context Protocol) | A protocol that connects AI models to external tools and data sources. The Playwright MCP server is one implementation. |
| Playwright | An open-source browser automation framework from Microsoft. It can control Chromium, Firefox, and WebKit browsers programmatically. |
| Skill (Claude Code) | A reusable markdown file containing instructions that Claude Code can execute on command. Think of it as a saved recipe for a workflow. |
| Sub-agent | An independent AI agent spawned by the main agent to handle a specific task. Multiple sub-agents can run in parallel. |
| Token | The smallest unit an AI model processes. Roughly 3-4 characters of English text. Token usage affects both cost and how much fits in the context window. |
Sources and resources
Want to go deeper? Watch the full video on YouTube →