← Back to Library

Claude Code + Playwright = INSANE Browser Automations

{"output": Chase H has found the browser automation tool that actually saves money — and it's not what you'd expect

Most developers assume the best way to automate browser tasks is through extensions or MCP servers. They're wrong. The CLI option is dramatically more efficient.

Why Playwright CLI Changes Everything

Playwright, an open-source Microsoft tool for browser automation, has a new CLI that outperforms every other method — by a massive margin.

The difference comes down to tokens. A single task using the Playwright MCP server consumes about 90,000 tokens compared to the CLI. The Chrome extension is even worse because it relies on screenshots, which burn through tokens rapidly.

But here's what makes the CLI special: it doesn't dump the entire accessibility tree into Claude Code like the MCP server does. Instead, it saves that tree locally and feeds Claude only the summary. This dramatically reduces token usage while maintaining full functionality.

The CLI also supports headless operation — meaning browsers run invisibly in the background without dragging down system performance. And unlike the Chrome extension, Playwright CLI can spawn parallel agents that test multiple scenarios simultaneously.

How Browser Automation Actually Works

Playwright interacts with websites through what's called an accessibility tree. This is the same technology that allows blind users to navigate websites. The accessibility tree maps every element on a page — buttons, forms, navigation — into a structure that tools can programmatically interact with.

When you use the MCP server, it shoves the entire accessibility tree into Claude Code for every single interaction. That's massive overhead. The CLI takes a different approach: it retrieves the same information but stores it on your local disk, then feeds only what each agent needs to complete its specific task.

This is why three parallel agents running simultaneously via the CLI execute tests faster and cheaper than any other method.

Installation Is Surprisingly Simple

Getting Playwright CLI working requires three steps. First, install the Playwright CLI globally using `npm install -g play`. Second, install the browser engine with `npx playwright install chromium`. Third, add the skill to Claude Code with `playright-cli install --skills`.

Alternatively, you can just hand Claude Code a GitHub repository and ask it to install everything needed.

The Real Use Case: Form Testing

The most practical application demonstrated is form submission testing. Instead of manually running through validation scenarios on your website — checking edge cases, happy paths, error messages — Claude Code spawns multiple agents that do this simultaneously.

One agent might test valid name and email combinations. Another tests empty submissions. A third attacks boundary conditions like special characters or extremely long inputs. All three run in parallel without you touching a single key.

The results come back with screenshots and detailed reports of what passed and failed.

Creating Reusable Skills

Once you've refined a workflow into something repeatable, you can package it as a skill using the skill creator tool. This lets you say "run form tester skill" instead of describing the entire process each time.

This transforms browser automation from a one-time experiment into a permanent productivity system that runs every time you push code changes.

Bottom Line

Chase H's strongest argument is concrete: the CLI dramatically reduces token costs while maintaining full functionality. The vulnerability is that most developers haven't tried it yet — they default to extensions or MCP servers because those options are more familiar. But the efficiency gap is enormous, and for anyone building CI/CD pipelines or automated testing, Playwright CLI isn't just an alternative — it's the obvious choice.}

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 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 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, ...