The argument in one line.
The Playwright CLI cuts browser-automation token costs by 4x over the MCP server by saving the accessibility tree to disk and forwarding only a summary to Claude Code, making parallel headless browser agents practical for everyday development.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude Code regularly and want to automate UI testing or form validation without burning your context window.
- You have tried the Claude-in-Chrome extension or the Playwright MCP server and found them too slow or token-heavy.
- You are building repeatable Claude Code workflows and want to package them as one-command skills.
- You want to run multiple browser-test agents in parallel without writing test code yourself.
SKIP IF…
- You need cross-browser coverage beyond Chromium for your project; the video focuses exclusively on the Chromium engine.
- You want a comprehensive Playwright API reference; this is a practical Claude Code integration overview, not a testing-framework deep dive.
The full version, fast.
Playwright CLI is the most token-efficient path to browser automation inside Claude Code. The MCP server dumps the full accessibility tree into the model context on every interaction (~114K tokens per task); the CLI saves that tree to disk and sends only a compact summary (~26K tokens). The Chrome extension is worse still: screenshot-based and incapable of parallel execution. The video covers a three-command install, explains headed versus headless mode, demonstrates three parallel form-testing agents launched by one plain-language prompt, and shows how to wrap the entire workflow into a reusable Claude Code skill.
Members feature
Chat with this breakdown.
Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.
Create a free account →Where the time goes.
00:00 – 01:32
01 · Demo: Three Parallel Agents
Three Claude Code sub-agents simultaneously test a web form from different angles with no manual steps from the host.
01:32 – 07:03
02 · Why Playwright CLI Wins
Comparison of CLI vs. Playwright MCP vs. Claude-in-Chrome on headless support, parallelism, and token usage. The accessibility tree and disk-save architecture are explained.
07:03 – 08:10
03 · Setup
Three commands: npm install -g @playwright/cli, npx playwright install chromium, playwright-cli install --skills.
08:10 – 11:01
04 · Using Playwright with Claude Code
Plain-language prompting, headed vs. headless flag, single vs. multi-agent runs. Project-context advantage reduces accessibility-tree errors.
11:01 – 13:05
05 · Packaging Workflows as Skills
Articulate the workflow, hand it to the Skill Creator tool, invoke it by name forever after. The form-tester skill: three parallel headed agents with one command.
13:05 – 13:49
06 · Resources and CTA
Chase AI+ masterclass plug, free community link, outro.
Lines worth screenshotting.
- Playwright CLI uses ~26K tokens per task versus ~114K for the MCP server, a 4x cost difference on identical work.
- The Playwright MCP server dumps the entire accessibility tree into Claude's context on every interaction; the CLI writes it to disk and sends only a summary.
- The Claude-in-Chrome extension is the worst browser-automation option: screenshot-based, headed-only, and incapable of parallel execution.
- Headless mode means the browser runs invisibly in the background; faster and lower CPU overhead, but you must explicitly request a headed session to watch execution.
- Claude Code can spawn multiple Playwright CLI sub-agents in parallel; the demo runs three simultaneous form tests from different angles with one plain-language prompt.
- Any workflow you describe more than once in Claude Code is a candidate for a Skill; the Playwright test workflow becomes a one-command invoke after packaging.
- The accessibility tree, originally built for screen readers, is what Playwright uses to understand and interact with page elements without screenshots.
- When Claude Code has your project open, Playwright tests are more reliable because it already knows the page structure, reducing accessibility-tree mismatches.
- Persistent login profiles let Playwright CLI maintain session cookies across runs, useful for automating authenticated workflows beyond public form testing.
- The Playwright CLI is genuinely new at time of filming; most existing tutorials cover the older MCP or Chrome extension approaches, making this early-mover information.
Three tools, one clear winner, and one habit.
WHAT TO LEARN
Choosing the right browser-automation tool for Claude Code is a token-cost decision, and the accessibility-tree architecture is what makes the CLI the obvious answer.
- The Playwright CLI saves the accessibility tree to disk and sends only a summary to the model; that single architectural choice is why it uses 26K tokens where the MCP uses 114K on the same task.
- The Claude-in-Chrome extension costs the most per action because it works from screenshots, not structured data, and cannot run multiple sessions at once.
- Headless mode is the default and the right default: it runs faster, uses less CPU, and enables parallelism; switch to headed only when you need to watch what the agent is doing.
- Parallel sub-agents are not a power-user trick; a plain-language prompt is all it takes once the CLI skill is installed.
- Any workflow you run more than twice should become a Skill: write it out once, hand it to the Skill Creator, and trigger it with a single command from that point forward.
- Claude Code project context is a Playwright advantage; it already knows your page structure, so accessibility-tree errors are less likely than when running Playwright against an unfamiliar codebase.
Terms worth knowing.
- Accessibility tree
- A structured map of every interactive element on a webpage, built so screen readers and assistive technologies can navigate it. Playwright uses this tree instead of screenshots to understand and control pages.
- Headless browser
- A browser instance that runs in the background without rendering a visible window. Faster and lower-overhead than a headed session; the default mode for Playwright CLI.
- Playwright MCP server
- A Model Context Protocol server that connects Claude to a browser. Functional but token-heavy: it pushes the full accessibility tree into Claude's context on every step.
- Claude Code Skill
- A reusable instruction file that Claude Code can invoke by name. Once a workflow is captured as a skill, a single short command triggers the entire sequence without re-describing it.
- Sub-agent
- A parallel Claude Code instance spun up to handle one thread of work independently. Multiple sub-agents can run browser tests simultaneously, each with its own Playwright session.
Things they pointed at.
Lines you could clip.
01:20
“Anything that requires you to interact with a browser is a place where we can use this.”
03:23
“MCP is a token hog.”
06:55
“The CLI gets the same tree, saves it to the disk, and all it does is give a summary of the tree to Claude Code.”
11:27
“Do I want to say this each and every time? Of course not. Yet am I going to run this test over and over? I might need to run this test over and over and over.”
Word for word.
00:00Okay, Claude Code. I want you to spin up three parallel sub agents. I want you to use the playwright CLI skill for each of them, and I want you to test my form submission inside of my website since we just made some changes.
00:12Go. So what you're seeing happen right now is Claude code just spawned three sub agents. All of them are using the Playwright CLI.
00:20Playwright is a tool from Microsoft, totally open source, that does browser automation. And this is a huge unlock for Claude code because browser automation, despite the fact that we have Claude in Chrome as an extension, is a place that Claude code really struggles.
00:37What And you see here is one of the great use cases for browser automation. The idea that I can use it for UI testing. And so what we did in this example is I have my website.
00:46I made some adjustments to the form submission. That's what you see right here in the middle. And I'm now having Claude code test it from a number of different angles.
00:54Right? We're looking at edge case edge cases validation and also the happy path. And think about what this would look like normally.
01:00You would spin up the dev server on your own. You would manually go through it, and you would manually test it. Right?
01:05Hey. Does it work when I put in a name, an email, whatever? But now I can test it from, again, a number of different angles simultaneously.
01:13And via the Playwright CLI, we are doing this more effectively, more efficiently, and easier than really any other browser automation path. And again, I'm not touching anything.
01:25Claude code via the Playwright skill is doing all of this. And the use cases and potential upsides of knowing how to do something like this inside of Claude code is frankly wild. Anything that requires you to interact with a browser is a place where we can use this.
01:40So in this video, I'm gonna show you how the Playwright CLI works, how to install it, best practices, and most importantly, how to get the most out of it inside of the Claude code ecosystem. This is gonna be a huge productivity upgrade for you, so let's get started. But before we dive into Playwright, first, a message from our sponsor, me.
01:59So I just released a Claude code masterclass inside of Chase AI plus, and I take you from zero to AI dev no matter your technical background or lack thereof in a practical manner. So if you're looking to get way better at Claude code, definitely check it out. There's a link to it in the pinned comments.
02:15Also, I have the free Chase AI community that is in the description. Tons of free resources.
02:21So if you're just looking for more stuff, definitely take a look. Now back to Playwright. What is Playwright?
02:26Well, it's a framework for web testing and automation. It is a Microsoft product, but Microsoft was nice enough to open source this so we can use this for free. And what Playwright allows us to do is interact with our browsers programmatically.
02:38Right? Exactly what you saw in the demo. That is the power of Playwright.
02:42But hasn't Playwright been around for a while? Isn't there a Playwright MCP server? Why are we talking about Playwright CLI?
02:47And, again, doesn't Claude already have something like this? Why are we talking about this tool in particular?
02:53Well, the Playwright CLI command line interface is actually a relatively new addition to the Playwright Arsenal. This just came out a few weeks ago. Prior to that, we were in MCP land, and over the last month or so, you've probably seen Claude in Chrome extension.
03:09Let's talk about why the CLI is so much better than these other two and why this is such an important video. Now while all three of these can interact with your browser in a programmatic way, only one of them does it in an efficient way, and that's the CLI. Now why is that dropping down to the bottom?
03:25It's because it has the lowest token usage by far. MCP is a token hog.
03:31In fact, there's a video that came out from Playwright themselves comparing the MCP to the CLI, and it was a difference of about 90,000 tokens for the same task.
03:39And we'll go into the why in a little bit. Now the Claude code in Chrome extension that you've probably seen all over the place is also extremely token heavy.
03:49Why is that? Because Claude in Chrome, the way it works is it takes screenshots of your web page.
03:56So, you know, when we're looking at that in here with my web page, it would actually take screenshots to figure out what's going on and then interact with it.
04:04That is very costly. Screenshots take up tons of tokens. And in fact, out of all these, the clog code extension is probably the worst because it is not headless, and we cannot do it in parallel.
04:14What do I mean by that? What does headless mean?
04:17Well, headless or headless browsers means that Playwright can operate a browser without it actually being open. So you remember the demo, how I had the website up? So this is headed.
04:27This is a headed browser, meaning it's actually there. I can interact with it. Headless means it's working on the browser, but it's in the background.
04:33I can't see it. It's sort of invisible. We like the headless browsers because it's less of a drag on our machine.
04:38It's more efficient. I don't have 10,000,000 things popping up on my desktop. So the MCP can do headless as well, but so can the CLI.
04:44The other thing is can we do this in parallel? Again, back to the demo. We had three CLI sub agents running tests.
04:52That's great. Can I do that with the Claude code in Chrome browser? Not really.
04:57Right? It's only gonna be able to do it one tab at a time and it's slow and expensive. The MCP can do this and the CLI can do this.
05:04Now looking at this chart, it should be pretty obvious why we're focused on the CLI then. Right? I can do everything the MCP playwright server can do and more at a significantly lower token usage.
05:16So that's the why in terms of the tool. Now in case you're wondering why there is such a massive token difference between the CLI and the MCP, Kind of an interesting discussion. I won't belabor it.
05:28But the way Playwright actually works interesting enough is it uses what's called an accessibility tree. So whenever you go on a website, there is what is called an accessibility tree, and it's essentially mapping this entire website in a way that someone who couldn't see it could use it.
05:45Like, imagine if you were blind. How would you interact with this website? Well, people figure that out because guess what?
05:50Blind people need to use websites too. That entire structure behind helping blind people use websites, the accessibility tree is the technology behind it.
06:00That's what Playwright actually uses to work. Right? Kinda cool.
06:04But the Playwright MCP server, the way the MCP server works is it will take the entire accessibility tree and shove it into clawed code. And the accessibility tree is actually relatively large.
06:18Right? And so every time it shoves the accessibility tree into clawed code, it's a massive token dump. The CLI is a little bit different because while it still gets that accessibility tree, right, of all this information, it doesn't dump all of it into Claude code.
06:33Instead, what it does is it takes that tree, right, here's our accessibility tree, and it just saves it onto our computer.
06:42Right? On our disk. This is a computer.
06:45I know you're here for my great graphics. So the CLI gets the same tree, saves it to the disk, and all it does is it gives then a summary of the tree to Claude code.
06:55So it doesn't give it all the information, it instead just gives it the information that it needs. This is a way lower token cost. So that's why it's working in case you're wondering.
07:03So how do we get this installed and working with Claude code? Actually, very simple and easy. There's three things we're gonna need.
07:10One, we need to install the Playwright CLI. Two, we need to install the browser engine. And then three, we need to set up the Claude code skill for Playwright so it knows how to actually use this.
07:21And so I'll give you the commands, but understand you can also just open up Claude code and give it that GitHub repo, which I will link down below and say, hey, install everything I need. Right? But I'll show you the manual steps.
07:32To install the CLI, it will be n p m install dash g at Playwright CLI. Next, for the browser engine, n p x playwright, install Chromium. Again, using a different browser engine, just reference the documentation or have Claude code tell you the command.
07:45And then lastly, once you have the CLI installed, to install the skill, you'll do playwright dash c l I install dash dash skills. Now remember, hey. Reference the skills creator video I did the other day.
07:54This is the skill that Microsoft came up with, and we can see the actual skill right here inside of the GitHub. You are not beholden to this. This will work just fine, but also know you can create it, edit it, use the skill creator to audit it.
08:06Right? It's a living, breathing document. And once you do that, just spin up Claude code, and we're ready to actually work.
08:13Now the amount of things that the Playwright CLI can actually do is pretty broad. It's an extremely powerful tool. So I highly suggest one of the first things you do is just have an interaction with ClaudeCode asking it what can you do with the Playwright CLI skill and kinda going through some theoretical test cases that you think it can actually accomplish because ultimately your use cases will vary.
08:35What we're gonna focus on here today is essentially what we saw in the demo, is like this UI design type workflow or UI testing type workflow, which I think is something that's very common. But again, you could have this thing go like shop on Amazon for you.
08:48Right? Like, it has the ability to actually, like, log in and set up persistent sessions and sort of have, like, its own cookies type of deal. It again, the water steer very deep, and we're just touching the surface.
08:59But again, Claude code is your number one friend in understanding its capabilities. But in terms of actual execution like with our UI testing, again, we're using Claude code. Claude code uses the skill to execute the player at CLI on our behalf, which means we just have to use plain language with what we wanna do.
09:16Now some things to note. Right? Even though in the demo you saw all those tabs pop up, by default, it is going to be headless, which means when I tell it, hey, go do this testing for me, you're not gonna see that browser at all.
09:30So you need to be specific and, you know, actually say, hey. I want it to be a headed browser. I wanna see it or else you won't.
09:36But for our test, we'll just ask it again to do just a single headed browser test to test our form submission so we can again see it in action. So all I said was, can you use the Playwright CLI tool to test the form submission again?
09:49Make it a single agent and make it headed so I can see it. So we see it loaded the tool. You see it's calling the skill, and now it's gonna check the project and figure out what it actually wants to do.
09:59The other thing that's great for this, especially when we're doing it, you know, on our own sort of project, like, has full visibility into how our pages are look how they look and how they set up. So a much lower chance of dealing with some sort of, like, accessibility tree issues.
10:13It knows exactly how this page is set up, so these sort of tests are even more effective. And so it's opened the page, it scrolled down, it's starting to fill out the form, it's starting to check boxes, and it's really that simple.
10:24And once it finishes its work, will automatically close the browser, give you the form submission test results, and then even give you screenshots. And to up the ante and to do exactly what we did in the demo and say, hey. I wanna run three parallel agents, and I wanna tag it from different angles.
10:38That's all you have to add to it. This is like a two sentence thing, and it's gonna do all of your UI testing for you. Furthermore, you can ask Claude code for the best practices.
10:46Right? I didn't know the best way to, you know, stress test this form, but it did. So just kinda say like, hey.
10:52What what do think is the best way to test this? And the simplicity of use is really the value add here. Like, literally just talk plain language, the Claude code, and it does all of it.
11:01However, if you actually want to supercharge this process, you need to learn how to package this sort of workflow into a skill itself.
11:10Now what do I mean by that? You just saw me use the Playwright CLI with plain language. Like, hey.
11:15Run three parallel headed browser tests. That's exactly what you see here. Right?
11:20Because I wanna do three sub agents. They're going to test the UI blah blah blah blah blah. Do I wanna say this each and every time?
11:27Of course, I don't. Yet am I gonna probably run this test on my local dev server to check the form every single time I make changes? I might be doing a ton of changes.
11:36Right? I might need to run this test over and over and over. So what you need to be thinking about is, like, again, how can I then turn that entire workflow into a skill?
11:43That's what we can do here. Right? This entire process, this, like, triple agent thing you saw in the demo, we can turn that into a skill.
11:50And instead of having to describe the process every time, I can just say, hey. Go do the playwright CLI UI test skill.
12:00Go execute that skill. And it goes and does that. And that's really easy to do, actually.
12:04First, obviously, you need to articulate the actual workflow that you've done. That's what I've done here. Right?
12:09Three parallel agents. I want you to do x y and z. Like, I've really nailed down.
12:13Like, I can't mess it up at this point. And again, have Cloud Code spell that out for you. Next, I'm gonna use the brand new skill creator tool.
12:20Check out that video I just did a few days ago. But we'll just do skill creator. And what are we gonna say?
12:25We're gonna say, I wanna turn this process, this workflow process into a skill. Right? So I just said, I wanna turn this following workflow process into its own meta skill and pasted the entire workflow.
12:35So it went ahead and created the form tester skill. So now I could just say use the form tester skill and three parallel agents will spawn just like in the demo. And because I used it via the skill creator, I now have the option to run tests and emails and see if this is an actual improvement, which is great.
12:50And I think this is the sort of headspace you should be in with this stuff. Whenever you're doing workflows inside of Claude code, right, can we standardize it?
12:59And if it's standardized, can we turn that standard flow into a skill? Right? And it just makes it super easy.
13:05So like I alluded to at the beginning, the waters are deep when it comes to Playwright. But with that complexity under this surface comes a huge swath of use cases. And luckily for us, ClawdCode allows us to, like, bridge that gap.
13:19Right? We don't have to be crazy technical and in the weeds to really get a lot out of this because ClaudeCode abstracts so much of it away. So this is actually where I'm gonna leave you guys today.
13:29I hope this was a cool intro for a playwright and what it could do for you. I think if nothing else, just with sort of, you know, the website checks, like, that's a huge value add. I know it is and has been for me.
13:41So let me know in the comments what you thought. Make sure to check out Chase AI plus if you're looking for the Claude code masterclass, and I'll see you around.
The Hook
The bait, then the rug-pull.
Three browser windows open at once. Three agents filling out the same web form simultaneously: edge cases, validation errors, the happy path. That is the opening move of this tutorial, and it is not a trick. It is the Playwright CLI running inside Claude Code, doing in twelve seconds what would take a developer twenty minutes of manual testing.
Visual structure at a glance.
