# Getting Started with Claude Code and Playwright CLI: A Step-by-Step Guide > Source: > Published: 2026-07-14 16:30:00+00:00 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!