Getting Started with Claude Code and Playwright CLI: A Step-by-Step Guide

A developer demonstrates how to set up Claude Code with Playwright CLI for browser automation. The guide walks through installing the necessary tools, running a test that adds a todo item to a demo page, and explains how the CLI's snapshot feature and skill files enable Claude to drive the browser reliably. The approach allows testers to describe scenarios in plain English instead of writing locators and assertions manually.

AI coding agents like Claude Code are changing how SDETs approach browser automation. Instead of writing every locator and assertion by hand, you can describe a test scenario in plain English and let Claude drive the browser for you. In this guide, we'll set up Claude Code with Playwright CLI — Microsoft's token-efficient, agent-friendly companion to Playwright — and run our first automated browser test. By the end of this guide, you'll have Claude Code testing a real form on a real page, using nothing but shell commands under the hood. Before you begin, make sure you have: npm install -g @anthropic-ai/claude-code Start by confirming your Node.js version: node --version claude --version If that command isn't recognized, install it first with npm install -g @anthropic-ai/claude-code , then re-run the check. Install the CLI globally so it's available from any project: npm install -g @playwright/cli@latest The @latest tag pulls the newest release. For CI pipelines, consider pinning to a specific version e.g. @playwright/cli@1.2.0 so your pipeline doesn't break when a new version ships mid-run. Confirm the install worked: playwright-cli --help You should see a list of available commands navigate , snapshot , click , fill , screenshot , and more . Playwright CLI needs at least one browser binary to control: npx playwright install chromium You can swap chromium for firefox or webkit depending on which engine you want to test against. This step downloads roughly 100–300 MB per browser, so make sure you have disk space and a stable connection. This is the step most setup guides skip — and it's the one that actually makes Claude reliable with the CLI's exact command syntax instead of guessing: playwright-cli install --skills This drops a SKILL.md file into your Claude Code configuration that documents every available CLI command. Without this step, Claude may occasionally hallucinate flags or fall back to running raw Playwright test scripts instead of using the CLI directly. You only need to run this once per machine or once per project, if you're using project-scoped skills . Open a Claude Code session in your project directory: claude Now, in plain language, describe the test: Use the Playwright CLI to open https://demo.playwright.dev/todomvc, add a todo item called "Write blog post", and confirm it appears in the list. Behind the scenes, Claude Code will run a sequence like this: playwright-cli navigate https://demo.playwright.dev/todomvc playwright-cli snapshot saves page state to disk as YAML playwright-cli fill e12 "Write blog post" playwright-cli press e12 Enter playwright-cli snapshot verify the todo now appears snapshot captures a compact accessibility-tree representation of the page and saves it to disk — Claude only reads the parts it needs, rather than the whole page being pushed into the conversation. e12 reference comes directly from that snapshot; Playwright CLI and Playwright MCP both use this referencing system, so if you've used MCP before, the mental model will feel familiar. npx playwright-cli --help instead, or re-run the global install. playwright-cli install --skills , and restart your Claude Code session Skills load at session start . npx playwright install chromium and check you have enough disk space. @latest .You now have Claude Code and Playwright CLI working together, with Claude driving a real browser through natural language instructions instead of you hand-writing every step. This is just the foundation — in the next post, we'll compare Playwright CLI against Playwright MCP in detail, including real token benchmarks, so you know exactly when to reach for each one. Have you tried Claude Code for browser testing yet? Drop your experience — or questions — in the comments below