WEBVTT 00:00:00.000 --> 00:00:12.240 Okay, 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:00:12.785 --> 00:00:20.785 Go. 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:00:20.945 --> 00:00:21.825 Playwright 00:00:21.825 --> 00:00:26.790 is a tool from Microsoft, totally open source, that does browser automation. 00:00:26.790 --> 00:00:31.110 And this is a huge unlock for Claude code because browser automation, 00:00:31.350 --> 00:00:34.630 despite the fact that we have Claude in Chrome as an extension, 00:00:35.190 --> 00:00:43.545 is a place that Claude code really struggles. What And you see here is one of the great use cases for browser automation. The idea that I can use it for UI testing. 00:00:43.785 --> 00:00:59.170 And so what we did in this example is I have my website. I 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. Right? We're looking at edge case edge cases validation and also the happy path. 00:00:59.250 --> 00:01:13.515 And think about what this would look like normally. You would spin up the dev server on your own. You would manually go through it, and you would manually test it. Right? Hey. 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. 00:01:13.995 --> 00:01:19.755 And via the Playwright CLI, we are doing this more effectively, more efficiently, and easier 00:01:20.070 --> 00:01:51.450 than really any other browser automation path. And again, I'm not touching anything. Claude 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. 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. 00:01:51.450 --> 00:02:17.480 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. 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. 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. Also, I have the free 00:02:17.560 --> 00:02:48.570 Chase AI community that is in the description. Tons of free resources. So if you're just looking for more stuff, definitely take a look. Now back to Playwright. What is Playwright? Well, 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. Right? Exactly what you saw in the demo. That is the power of Playwright. But hasn't Playwright been around for a while? Isn't there a Playwright MCP server? Why are we talking about Playwright CLI? And, again, 00:02:48.730 --> 00:02:50.970 doesn't Claude already have something like this? 00:02:51.370 --> 00:03:08.585 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. 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. 00:03:09.230 --> 00:03:23.155 Let'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. 00:03:23.235 --> 00:03:28.835 Now why is that dropping down to the bottom? It's because it has the lowest token usage by far. MCP 00:03:28.915 --> 00:03:30.275 is a token 00:03:30.275 --> 00:03:31.075 hog. 00:03:31.315 --> 00:03:35.235 In fact, there's a video that came out from Playwright themselves comparing the MCP 00:03:35.430 --> 00:03:38.390 to the CLI, and it was a difference of about 90,000 00:03:38.390 --> 00:03:42.150 tokens for the same task. And we'll go into the why in a little bit. 00:03:42.630 --> 00:03:47.990 Now the Claude code in Chrome extension that you've probably seen all over the place is also extremely 00:03:47.990 --> 00:03:50.310 token heavy. Why is that? Because 00:03:51.135 --> 00:03:52.895 Claude in Chrome, 00:03:53.135 --> 00:04:00.255 the 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, 00:04:00.495 --> 00:04:02.255 it would actually take screenshots 00:04:02.335 --> 00:04:16.450 to figure out what's going on and then interact with it. That 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. What do I mean by that? What does headless 00:04:16.450 --> 00:04:41.920 mean? 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? So this is headed. This 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. I can't see it. It's sort of invisible. We 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. 00:04:41.920 --> 00:04:49.445 So 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. We had three 00:04:49.765 --> 00:04:51.365 CLI sub agents 00:04:51.685 --> 00:05:01.890 running tests. That's great. Can I do that with the Claude code in Chrome browser? Not really. Right? It's only gonna be able to do it one tab at a time and it's slow and expensive. 00:05:02.130 --> 00:05:10.050 The MCP can do this and the CLI can do this. Now looking at this chart, it should be pretty obvious why we're focused on the CLI then. Right? I can do everything the MCP 00:05:10.535 --> 00:05:12.855 playwright server can do and more 00:05:13.095 --> 00:05:14.775 at a significantly 00:05:14.775 --> 00:05:16.455 lower token usage. 00:05:16.615 --> 00:05:35.940 So 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. But the way Playwright actually works interesting enough is it uses what's called an accessibility tree. So whenever you go on a website, 00:05:36.500 --> 00:05:42.075 there is what is called an accessibility tree, and it's essentially mapping this entire website 00:05:42.315 --> 00:05:47.355 in a way that someone who couldn't see it could use it. Like, imagine if you were blind. 00:05:47.515 --> 00:05:52.715 How would you interact with this website? Well, people figure that out because guess what? Blind people need to use websites too. 00:05:53.140 --> 00:05:57.220 That entire structure behind helping blind people use websites, 00:05:57.300 --> 00:06:17.105 the accessibility tree is the technology behind it. That's what Playwright actually uses to work. Right? Kinda 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 00:06:17.185 --> 00:06:17.905 large. 00:06:18.065 --> 00:06:24.340 Right? And so every time it shoves the accessibility tree into clawed code, it's a massive token dump. 00:06:24.660 --> 00:06:28.420 The CLI is a little bit different because while it still gets 00:06:28.580 --> 00:06:34.820 that accessibility tree, right, of all this information, it doesn't dump all of it into Claude code. Instead, 00:06:35.220 --> 00:06:41.445 what it does is it takes that tree, right, here's our accessibility tree, and it just saves it onto our 00:06:41.925 --> 00:06:42.565 computer. 00:06:42.885 --> 00:06:45.365 Right? On our disk. This is a computer. 00:06:45.685 --> 00:06:50.645 I know you're here for my great graphics. So the CLI gets the same tree, saves it to the disk, 00:06:50.885 --> 00:06:53.205 and all it does is it gives then a summary 00:06:53.720 --> 00:07:13.055 of the tree to Claude code. So 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. So how do we get this installed and working with Claude code? Actually, very simple and easy. There's three things we're gonna need. One, we need to install the Playwright CLI. 00:07:13.215 --> 00:08:07.455 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. And 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. To 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. And 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. This 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. Right? 00:08:07.935 --> 00:08:33.070 It's a living, breathing document. And once you do that, just spin up Claude code, and we're ready to actually work. Now 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 00:08:33.415 --> 00:08:48.000 your 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 00:08:48.240 --> 00:09:16.150 for 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. It 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. 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. 00:09:16.630 --> 00:09:40.805 Now 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. So 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. But for our test, we'll just ask it again to do just a single 00:09:41.045 --> 00:10:12.995 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? Make 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. 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 00:10:13.260 --> 00:10:22.460 tree 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, 00:10:22.540 --> 00:10:31.145 and 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. 00:10:31.225 --> 00:10:36.265 And to up the ante and to do exactly what we did in the demo and say, hey. I wanna run three parallel agents, 00:10:36.425 --> 00:10:44.480 and I wanna tag it from different angles. That'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, 00:10:44.800 --> 00:11:05.255 you can ask Claude code for the best practices. Right? I didn't know the best way to, you know, stress test this form, but it did. So just kinda say like, hey. What 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. However, if you actually want to supercharge 00:11:04.940 --> 00:11:05.900 this process, 00:11:06.220 --> 00:11:27.065 you need to learn how to package this sort of workflow into a skill itself. Now what do I mean by that? You just saw me use the Playwright CLI with plain language. Like, hey. Run three parallel headed browser tests. That's exactly what you see here. Right? Because 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? 00:11:27.705 --> 00:11:57.215 Of 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. Right? 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? That'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. And instead of having to describe the process every time, I can just say, hey. Go do the playwright 00:11:57.295 --> 00:11:58.255 CLI 00:11:58.780 --> 00:12:23.895 UI test skill. Go execute that skill. And it goes and does that. And 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. Right? Three parallel agents. I want you to do x y and z. Like, 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. Next, 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. 00:12:24.295 --> 00:12:51.505 And what are we gonna say? We'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. 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. 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. And I think this is the sort of 00:12:52.280 --> 00:13:09.525 headspace you should be in with this stuff. Whenever 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? And it just makes it super easy. So like I alluded to at the beginning, the waters are deep when it comes to Playwright. 00:13:09.685 --> 00:13:47.245 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. 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. So 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. I 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, 00:13:47.485 --> 00:13:48.285 and I'll see you around.