feat!: replace @playwright/mcp with playwright-cli#1
feat!: replace @playwright/mcp with playwright-cli#1pierreboissinot wants to merge 1 commit intomnapoli:mainfrom
Conversation
BREAKING CHANGE: swap MCP-based browser automation for playwright-cli (https://github.com/microsoft/playwright-cli), a CLI-based alternative that returns lightweight YAML snapshots instead of full accessibility trees, reducing token usage and speeding up test execution. - Replace @playwright/mcp dependency with @playwright/cli - Use Bash(playwright-cli:*) instead of mcp__playwright__* tools - Remove MCP config generation in runner.ts - Update prompt-template.md to use playwright-cli commands with ref-based selectors (e.g. e3, e15) and skills-less discovery via --help - Move headed/headless mode from runner to prompt interpolation
|
Very interesting thank you! What do you think about this mention in the cli readme: 
Do you think it's still worth switching here? If so why? |
|
Oh also why not include the official skill? Because it might be useful for Claude to use the CLI optimally? (i.e. I'd be afraid we do a poorer job at teaching Claude how to use the CLI than the official skill) |
Ok, i'll look into that idea on monday, I'm attending to https://shift-hackathon.com this week end |
|
|
||
| 1. Navigate to the application URL. | ||
| 2. Resize the browser to the configured resolution with `mcp__playwright__browser_resize`. | ||
| 1. Open the browser with `playwright-cli open` and navigate to the application URL. |
There was a problem hiding this comment.
I think this should be the following to have the option to use it headed:
Open the browser with playwright-cli open --headed(if browser mode is headed) orplaywright-cli open (if headless) and navigate to the application URL.
| prompt, | ||
| "--allowedTools", | ||
| "mcp__playwright__*", | ||
| "Bash(playwright-cli:*)", |
There was a problem hiding this comment.
If I am not mistaken we can let it load the skill by using:
Bash(playwright-cli:*) Skill
And adding the section below on prompt-template.md):5
First, invoke the playwright-cliskill (via the Skill tool with skill name "playwright-cli") to set up browser interaction capabilities. If the skill is not available, fall back to runningplaywrigh
+t-cli --help to discover available commands.
3 participants
Context
Hey @mnapoli ! Following up on our exchange under your LinkedIn post about exspec —
I mentioned I was experimenting with playwright-cli (https://github.com/microsoft/playwright-cli)
as a more token-efficient alternative to the MCP-based Playwright integration.
Here's a working implementation.
Summary
@playwright/mcpwith@playwright/cli(playwright-cli)Bash(playwright-cli:*)) instead of MCP tool callse3,e15) instead of full accessibility treesplaywright-cli --helpWhy
The MCP approach returns verbose accessibility trees on every
browser_snapshotcall —each interaction bloats the context window. playwright-cli returns concise YAML with
numbered refs, which means:
playwright-cli showfor live session monitoringWhat changed
package.json@playwright/mcp→@playwright/clisrc/runner.ts--allowedTools "Bash(playwright-cli:*)"src/prompt.tsheadedoption with{HEADED_MODE}interpolationsrc/cli.tsheadedto prompt instead of runnerprompt-template.md--helpdiscovery, ref-based selectorsREADME.mdTest plan
npm run fixturesruns successfully against example.com