Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Claude Code can use Playwright MCP to explore a browser flow and draft a Playwright test from what it observes. Add the MCP server with one command, then ask Claude Code to inspect a specific journey, report the visible steps and locators, and write a focused test in your project’s existing style. The draft still needs your review and a test run: browser exploration is not proof that the generated test is correct.
What you need before you start
- A development environment with Node.js 20 or newer, the conservative minimum in Playwright’s current MCP installation guide. The MCP repository README has listed a lower minimum, so check the live package requirements if installation fails. Playwright MCP installation guide · Playwright MCP repository
- Claude Code installed and available in the project environment.
- A local or demo application with a flow you can safely explore. For authenticated pages, use a non-production account and avoid exposing real account data.
Connect Playwright MCP to Claude Code
From your project’s development environment, run the command in Microsoft’s Playwright MCP README:
claude mcp add playwright npx @playwright/mcp@latestThe generic MCP configuration uses npx as the command and @playwright/mcp@latest as its argument. Reconnect or restart Claude Code if your installed client version requires it, then confirm that the Playwright MCP tools are available. The exact restart behavior can vary by client version.
Choose how the browser should handle state
Before exploring a site, decide whether the browser should reuse an existing session or start clean. Playwright MCP documents several modes with different effects on cookies and login state:
#1 Best Overall
- Persistent profile: the default mode, which preserves cookies and login state. Use it deliberately when working with authenticated sites.
- Isolated mode: starts a fresh browser context and can load storage state. In-memory cookies and storage disappear if the server closes after its idle timeout.
- Extension mode: connects to existing browser tabs, which may already contain signed-in accounts or sensitive information.
The browser runs headed by default. The official guide says, “The browser opens in headed mode by default so you can see what’s happening.” Add --headless to switch to headless operation. The documented browser selections are chrome, firefox, webkit, and msedge. For headless server-launched browsers, the default idle timeout is one hour without a completed tool call; headed browsers do not automatically close by default. Use --idle-timeout to change the timeout. See the official MCP guide for configuration details.
If you need a separate server for headed browser use where no display is available, or for an IDE worker, the guide documents standalone HTTP mode with this command:
npx @playwright/mcp@latest --port 8931Have Claude Code inspect one browser journey
Start with a narrow flow and name the starting URL, the action to perform, and the user-visible result that matters. For example, ask it to inspect a search form and report whether submitting a known query displays matching results. Keeping the task specific makes it easier to check what the agent actually saw.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Playwright MCP gives the agent browser tools for navigation, clicking, forms, snapshots, screenshots, and requests. It presents page content through structured accessibility snapshots with element references. That context can help Claude Code identify accessible names and interact with the page, but it does not establish that a future test will be reliable or correct.
Use a two-stage prompt: ask for observations first, then request the test. This makes assumptions about locators and outcomes visible before they become code. Adapt this example to a safe test environment:
Inspect the checkout flow at <local test URL>. Use a clearly non-production test account and do not submit a real order. First list the user-visible steps, the accessible locators you found, and the success or error state you observe. Then draft one Playwright test in this repository’s existing test style that checks the stated outcome. Do not invent selectors or expected copy; call out anything you could not verify. I will review and run the test.Replace the URL with your local or demo address. If a step is blocked, the page does not expose a clear accessible name, or the final state is ambiguous, ask Claude Code to report that limitation rather than fill in missing details.
Turn the observations into a test you can maintain
Once you have checked the reported steps and expected state, ask Claude Code to put one focused test in the project’s existing test structure. Have it follow the project’s established fixtures, locator conventions, and assertions instead of creating a parallel setup. Playwright’s documentation covers web-first assertions, fixtures, and locators.
Free tools Windows power users keep installed
One-click scans. No signup required.
Keep the test focused on the user-visible outcome, not every click used during exploration. For example, if the purpose is to verify that a search returns results, the test should assert that meaningful result state rather than merely replaying navigation. Browser interaction can help discover a flow; only a reviewed test run in the target project can show whether the written test matches the application.
Review and run the draft
- Read the generated code and check that each locator and expected result matches the observations and the application.
- Confirm the test uses the project’s existing configuration, fixtures, and test command.
- Run the relevant test command in the repository. If it fails, distinguish a genuine application mismatch from a brittle locator, incorrect test data, or environment setup issue.
- Revise the test and run it again. Do not treat generated code or a successful browser exploration as a substitute for this check.
Playwright’s guidance also covers running tests in CI, which is useful once the test is stable locally.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When MCP is the right fit—and when CLI may be simpler
Playwright’s current documentation positions MCP and the Playwright CLI for different coding-agent workflows. MCP uses structured tool calls and persistent interactive browser state, which can suit iterative exploration. The CLI uses concise shell commands; Playwright’s documentation says this can suit coding agents such as Claude Code when lower context use and compact output matter. Neither approach is established here as producing better tests.
| Approach | Interaction model | Best fit described by Playwright | Context and setup |
|---|---|---|---|
| Playwright MCP | Browser interaction through MCP tool calls, with persistent interactive state | Specialized, iterative browser exploration | Configure the MCP server in the client; browser tools and structured snapshots supply page context |
| Playwright CLI | Concise shell commands | Coding-agent workflows, including work in larger codebases, where compact output is useful | Install or invoke the CLI and use its command workflow; the guide also documents optional coding-agent skills |
These are Playwright’s documented use-case distinctions, not a benchmark. If the job is to explore a page interactively and inspect what appears, MCP is a reasonable path. If the agent mainly needs concise browser commands while working in a codebase, review the Playwright CLI guide alongside the MCP introduction.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
