§ 01 · 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.
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.
Visual structure at a glance.
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."
How they spent the runtime.
Hook length92s
Info densityhigh
Filler8%
Sponsor blocks
- 01:51 – 02:48 · Chase AI+ self-sponsor
Things they pointed at.
Word for word.
HOOK opening / re-engagementCTA the pitch
00:00HOOKOkay, 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:12HOOKGo. 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:20HOOKPlaywright is a tool from Microsoft, totally open source, that does browser automation. And this is a huge unlock for Claude code because browser automation,
00:31HOOKdespite the fact that we have Claude in Chrome as an extension, is a place that Claude code really struggles. What And you see here is one of the great use cases for browser automation.
00:40HOOKThe idea that I can use it for UI testing. And so what we did in this example is I have my website. I made some adjustments to the form submission.
00:49HOOKThat's what you see right here in the middle. And I'm now having Claude code test it from a number of different angles. Right?
00:54HOOKWe're looking at edge case edge cases validation and also the happy path. And think about what this would look like normally. You would spin up the dev server on your own.
01:05HOOKDoes 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. And via the Playwright CLI, we are doing this more effectively, more efficiently, and easier
01:20HOOKthan really any other browser automation path. And again, I'm not touching anything. Claude code via the Playwright skill is doing all of this.
01:29HOOKCTAAnd 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. So 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.
01:51CTAThis 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. So 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.
02:10CTASo 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. Also, I have the free
02:17CTAChase AI community that is in the description. Tons of free resources. So if you're just looking for more stuff, definitely take a look.
02:24CTANow back to Playwright. What is Playwright? Well, it's a framework for web testing and automation.
02:29CTAIt 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. Right?
02:39Exactly what you saw in the demo. That is the power of Playwright. But hasn't Playwright been around for a while?
02:44Isn't there a Playwright MCP server? Why are we talking about Playwright CLI? And, again,
02:48doesn't Claude already have something like this? Why are we talking about this tool in particular? Well, the Playwright CLI command line interface is actually a relatively new addition to the Playwright Arsenal.
03:00This 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. Let's talk about why the CLI is so much better than these other two and why this is such an important video.
03:15Now 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? It's because it has the lowest token usage by far.
03:28MCP 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,
03:53the way it works is it takes screenshots of your web page. So, you know, when we're looking at that in here with my web page, it would actually take screenshots
04:02to figure out what's going on and then interact with it. That is very costly. Screenshots take up tons of tokens.
04:07And 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. What do I mean by that? What does headless
04:16mean? Well, 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?
04:25So this is headed. This is a headed browser, meaning it's actually there. I can interact with it.
04:30Headless means it's working on the browser, but it's in the background. I can't see it. It's sort of invisible.
04:35We like the headless browsers because it's less of a drag on our machine. It's more efficient. I don't have 10,000,000 things popping up on my desktop.
04:41So the MCP can do headless as well, but so can the CLI. The other thing is can we do this in parallel? Again, back to the demo.
04:48We 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
05:10playwright 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
05:42in a way that someone who couldn't see it could use it. Like, imagine if you were blind. How would you interact with this website?
05:49Well, people figure that out because guess what? Blind people need to use websites too. That entire structure behind helping blind people use websites,
05:57the accessibility tree is the technology behind it. That's what Playwright actually uses to work. Right?
06:03Kinda cool. But 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
06:17large. Right? And so every time it shoves the accessibility tree into clawed code, it's a massive token dump.
06:24The 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. Instead,
06:35what it does is it takes that tree, right, here's our accessibility tree, and it just saves it onto our computer. Right?
06:43On our disk. This is a computer. I know you're here for my great graphics.
06:47So 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
08:33your use cases will vary. What 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
08:48for you. Right? 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.
08:55It again, the water steer very deep, and we're just touching the surface. But 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.
09:09Claude 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. Now some things to note. Right?
09:18Even 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. So you need to be specific and, you know, actually say, hey. I want it to be a headed browser.
09:35I wanna see it or else you won't. But 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.
09:45So all I said was, can you use the Playwright CLI tool to test the form submission again? Make it a single agent and make it headed so I can see it. So we see it loaded the tool.
09:54You see it's calling the skill, and now it's gonna check the project and figure out what it actually wants to do. The 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
10:13tree issues. It 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,
10:22and it's really that simple. And 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.
10:34I wanna run three parallel agents, and I wanna tag it from different angles. That's all you have to add to it.
10:39This 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
11:58UI test skill. Go execute that skill. And it goes and does that.
12:02And that's really easy to do, actually. First, obviously, you need to articulate the actual workflow that you've done. That's what I've done here.
12:09Right? Three parallel agents. I want you to do x y and z.
12:12Like, I've really nailed down. Like, I can't mess it up at this point. And again, have Cloud Code spell that out for you.
12:17Next, I'm gonna use the brand new skill creator tool. Check out that video I just did a few days ago. But we'll just do skill creator.
12:24And what are we gonna say? We're gonna say, I wanna turn this process, this workflow process into a skill. Right?
12:29So I just said, I wanna turn this following workflow process into its own meta skill and pasted the entire workflow. So 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.
12:43And 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. And I think this is the sort of headspace you should be in with this stuff.
12:53Whenever you're doing workflows inside of Claude code, right, can we standardize it? And if it's standardized, can we turn that standard flow into a skill? Right?
13:03CTAAnd it just makes it super easy. So 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.
13:16CTAAnd luckily for us, ClawdCode allows us to, like, bridge that gap. Right? 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.
13:26CTASo this is actually where I'm gonna leave you guys today. I 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.
13:39CTAI know it is and has been for me. So 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,
— full transcript
§ 05 · For Joe
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.
