0:00 Okay, Claude Code, I want you to spin up three parallel sub aents. 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. Go. So, what you're seeing happen right now is Claude Code just spawned three sub agents. All of them are using the Playright CLI. Playright 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 cloud code really struggles. And what 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
0:45 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 cases, 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. 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. And via the Playright 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. Cloud code via the playright skill is doing all of this. And the use cases and potential upsides
1:31 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 going to show you how the Playright CLI works, how to install it, best practices, and most importantly, how to get the most out of it inside of the Clawed Code ecosystem. This is going to be a huge productivity upgrade for you. So, let's get started. But before we dive into Playright, first a message from our sponsor, me. So, I just released a Claude code masterass 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 cloud code, definitely check it out. There's a link to it in the pin comments. Also, I have the free Chase AI
2:18 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 Playright. What is Playright? 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 Playright allows us to do is interact with our browsers programmatically, right? Exactly what you saw in the demo. That is the power of Playright. But hasn't play been around for a while? Isn't there a Playright MCP server? Why are we talking about Playright CLI? And again, doesn't Claude already have something like this? Why are we talking about this tool in particular? Well, the Playright CLI command line interface is actually a relatively new addition to the Playright Arsenal. This just came out a few weeks ago. Prior to that, we
3:03 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. 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, it's because it has the lowest token usage by far. MCP is a token hog. In fact, there's a video that came out from Playright themselves comparing the MCP to the CLI, and it was a difference of about 90,000 tokens for the same task. And we'll go into the why in a little bit. Now, the clawed code in Chrome extension that you've probably seen all over the place is also extremely tokenheavy. Why is that?
3:50 Because claude in Chrome, 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, it would actually take screenshots 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 claw 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 mean? Well, headless or headless browsers means that Playright 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
4:36 browsers because it's less of a drag on our machine. It's more efficient. I don't have 10 million things popping up on my desktop. 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 CLI sub aents running tests. That's great. Can I do that with the cloud code in Chrome browser? Not really, right? It's only going to 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. 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 playright server can do and more at a significantly lower token usage. So that's the why in terms of the tool. Now, in case you're wondering why there is such a massive token difference
5:23 between the CLI and the MCP, kind of an interesting discussion. I won't belver it. But the way Playright 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 and it's essentially mapping this entire website in 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? Well, people figured that out cuz guess what? Blind people need to use websites, too. That entire structure behind helping blind people use websites, the accessibility tree is the technology behind it. That's what Playright actually uses to work, right? Kind of cool. But the Playright MCP server, the way the MCP server works
6:08 is it will take the entire accessibility tree and shove it into clawed code. And the accessibility tree is actually relatively large, right? 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 clawed code. Instead, what it does is it takes that tree, right? Here's our accessibility tree, and it just saves it onto our computer, right? On our disc. This is a computer. I 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 clawed code. So it
6:55 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 were wondering. So how do we get this installed and working with clawed code? Actually very simple and easy. There's three things we're going to need. One, we need to install the Playright CLI. Two, we need to install the browser engine. And then three, we need to set up the claude code skill for playright. 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, 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 npm install-gplay CLI." Next, for the browser engine, npx playright install Chromium. Again, using a different browser engine, just
7:41 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 playright-cli install--sklls. 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 beholdened to this. This will work just fine, but also know you can create it, edit it, use the skill creator to audit it, right? It's a living, breathing document. And once you do that, just spin up cloud code and we're ready to actually work. Now, the amount of things that the Playright 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 Claude Code asking it what can you do with the Playright CLI skill and kind of going
8:28 through some theoretical test cases that you think it can actually accomplish because ultimately your use cases will vary. What we're going to focus on here today is essentially what we saw in the demo, which 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, 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 waters here are very deep and we're just touching the surface, but again, clawed 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 cloud code cloud code uses the skill to execute the playright CLI on our behalf which means we just have
9:13 to use plain language with what we want to do. 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 going to 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 want to 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. So alls I said was can you use the playright 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 going to check the project and figure out what it
9:58 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 it 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. 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's scrolled down, it's starting to fill out the form, it's starting to check boxes, and it's really that simple. And once it finishes its work, it will automatically close the browser, give you the form submission test results, and then even give you screenshots. And to up the antie and to do exactly what we did in the demo and say, "Hey, I want to run three parallel agents and I want to attack it from different angles." That's all you have to add to it. This is like a two sentence thing and it's going to do all of your UI testing for you. Furthermore,
10:44 you can ask cloud code for the best practices, right? I didn't know the best way to, you know, stress test this form, but it did. So, you just kind of say like, "Hey, what what do you think is the best way to test this?" And the simplicity of use is really the value ad here. Like you literally just talk plain language to cloud code and it does all of it. However, if you actually want to supercharge this process, 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 Playright CLI with plain language. Like, hey, run three parallel headed browser tests. That's exactly what you see here, right? Because I want to do three sub agents. They're going to test the UI, blah blah blah blah blah. Do I want to say this each and every time? Of course I don't. Yet, am I going to
11:29 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 playright CLI 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 it can't mess it up at this point. And
12:15 again, have Cloud Code spell that out for you. Next, I'm going to 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. And what are we going to say? We're going to say I want to turn this process, this workflow process into a skill. Right? So, I just said I want to 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 can 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 headsp space you should be in with this stuff whenever you're doing workflows inside of cloud code, right? Can we standardize it? And if it's standardized, can we
13:00 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 Playright. But with that complexity, under this surface comes a huge swath of use cases. And luckily for us, claude code 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 cloud code abstracts so much of it away. So, this is actually where I'm going to leave you guys today. I hope this was a cool intro for playright 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 ad. 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
13:46 Master Class and I'll see you
