How Claude Code + Playwright turn your browser into an AI agent
Giving an AI coding assistant full control of a real browser sounds almost magical. With Claude Code wired up to the Playwright CLI, that’s exactly what you get: an AI agent that can open tabs, click buttons, fill forms, grab screenshots, and slowly improve its own scripts over time.
This setup turns your browser into a programmable robot that can stress test apps, scrape data, and even run logged‑in workflows on sites that don’t expose APIs. Below is a practical walkthrough of what this looks like in action and how you can start thinking about similar automations.
Setting Up Claude Code With Playwright CLI
The core idea is simple: Claude Code writes and maintains Playwright scripts, and Playwright actually drives the browser.
You start in a fresh Claude Code project folder and ask it to install and configure Playwright CLI for browser automation. Claude researches what’s needed, proposes a plan (initialize the project, install dependencies, create a demo script), and then executes it.
Once Playwright is installed, Claude generates a small script that opens a page and takes a screenshot. If the screenshot appears in your project folder, you know the environment is working and Claude can now control a real browser for more complex tasks.
Use Case 1: Self-Healing QA for a Web App
One of the most powerful uses of this setup is automated QA. Instead of manually clicking through your app, you let Claude Code build the app, write the tests, run them in a browser, detect bugs, and then fix its own code.
Building a Multi‑Page Onboarding Form
First, you ask Claude to create a simple multi‑page onboarding form: one question per page, with fields like first name, last name, phone number, business details, and a few onboarding questions. Claude plans the architecture, generates the files, and sets up a local server.
As it builds, it even uses Playwright to take screenshots of each page so you can visually confirm the UI. You end up with a polished, multi‑step form and a progress bar at the top, all created from a single prompt.
Letting the Browser Agent Find and Fix Bugs
Next, you ask Claude to spin up the local server and use Playwright to run a full QA pass in a headed browser (a visible window you can watch). Claude writes a dedicated Playwright script just for this QA run.
On screen, you see the browser automatically:
- Fill in each field with sample data
- Click through the steps of the form
- Interact with dropdowns and text areas
When something breaks—like the Enter key not advancing from a notes text area, or the final review page failing to load—Claude inspects the screenshots and console output, identifies the issues, and patches the app code.
Then it restarts the server, reruns the Playwright QA script, and confirms that the flow now passes end‑to‑end. You effectively get a self‑healing loop: build → test in a real browser → detect bugs → fix → retest.
This is exactly the kind of workflow that becomes even more powerful when you turn it into a reusable "skill" inside Claude. If you want a deeper dive into skills and agentic workflows, check out how Claude skills let you automate almost anything.
Use Case 2: Scraping Real‑World Data (Dentist Phone Numbers)
Browser automation isn’t just for testing your own apps. It’s also a practical way to extract data from sites that don’t offer APIs, like business directories or local search results.
In this example, Claude is asked to find dentist offices in California and collect phone numbers. It plans a Playwright script that:
- Launches a browser
- Performs a search (e.g., "dentist office LA")
- Collects a set of result links
- Visits each site and looks for phone numbers
During the first run, Google blocks automated access. Instead of giving up, Claude adapts the script to use DuckDuckGo. On subsequent runs, you can watch it:
- Search for dentists
- Open result pages
- Locate phone numbers either directly on the search results or on the site’s contact page
By telling Claude "don’t stop until you’ve found five phone numbers," you push it into a more agentic loop: it keeps updating the script and retrying until the goal is met. Over time, the script becomes more robust at navigating different layouts and finding the right elements.
Use Case 3: Automations in Logged‑In Sessions
The obvious next question: can this work on sites that require you to be logged in? The answer is yes, with a few patterns that mirror how a human uses a browser.
Persisting Login Sessions
Claude proposes a few approaches for authenticated workflows:
- Persistent browser profiles: Launch Playwright using your existing Chrome user data so cookies and sessions are reused.
- Manual login handoff: Run a headed browser, log in yourself once, then let Playwright reuse that session in future runs.
- Attach to a running browser: Connect Playwright to an already open browser session.
Using the persistent profile approach, Claude opens a community platform in a headed browser. You log in manually the first time. On the next run, Playwright reuses that session so the automation starts already authenticated.
Liking Posts in a Community Platform
As a concrete example, Claude is asked to go into a "wins" channel in a community, sort posts by newest, and like each post that hasn’t been liked yet.
The first versions of the script are imperfect. The agent finds the channel and the like buttons, but it clicks too fast, sometimes toggling likes on and off or crashing when trying to run page scripts.
With a bit of feedback—"you’re clicking the like button multiple times" and "after switching to the wins channel, open the menu and sort by newest"—Claude updates the script. On the next run, you see it:
- Navigate to the wins channel
- Change the sort order to newest
- Scroll through posts
- Like only the posts that are still gray, skipping those already liked (yellow)
- Move to the next page and continue
After a few iterations, you end up with a reliable "like all wins posts" automation that works inside a logged‑in account on a platform that isn’t particularly automation‑friendly.
From One‑Off Scripts to Always‑On Agents
Once you have a handful of solid Playwright scripts, the next step is turning them into reusable skills and scheduled tasks so they run on their own.
In a desktop setup, you can schedule Claude to run specific skills at certain times—like a bot account that:
- Posts a daily AI news roundup into a community
- Engages with new "wins" posts every day
- Responds to notifications and comments
- Votes on polls after learning how the poll UI works
Each scheduled run is a full agentic loop: Claude reads the current state (notifications, new posts, etc.), plans what to do, invokes the appropriate Playwright skills, and updates its scripts when it encounters new UI patterns or errors.
Most of these automations can run in a headless browser, so you don’t see tabs popping up while you work. When you want to debug or watch what’s happening, you simply switch to headed mode.
If you’re interested in building out broader workflows around this—like combining browser skills with content creation or social posting—have a look at how to fully automate social media with Claude Code.
Why Use Playwright CLI Instead of Browser MCPs?
There are multiple ways to let an AI control a browser. One option is an MCP server that exposes a huge set of browser tools. Another is a CLI like Playwright that Claude calls from the local environment.
The main advantages of Playwright CLI in this setup are:
- Token efficiency: MCP servers with many tools and long descriptions can bloat context usage. A CLI keeps the interface lean.
- Script reuse: Once a script is good, you can call it as a skill without re‑describing every action.
- Learning over time: Claude can iteratively refine the same script as it encounters new layouts, errors, or edge cases.
There are other CLIs and agentic browser tools as well—like Vercel’s agent browser or OpenCLI—each with different trade‑offs in speed, token usage, and reliability. The key is finding a tool that balances efficiency with the ability to robustly click around, understand the UI, and improve its behavior over time.
Once you have that in place, pairing it with Claude Code effectively gives you a general‑purpose browser agent that can automate almost anything you can do in a tab—especially when you wrap those scripts in skills and scheduled tasks.
Comments
No comments yet. Be the first to share your thoughts!