Claude Code Playwright

Claude Code Playwright refers to the practice and integration of using Claude Code, Anthropic's agentic coding tool available in the terminal, IDEs, and via API, with the Playwright test automation framework through the Model Context Protocol (MCP). The combination enables developers to generate, execute, and maintain browser automation and end-to-end tests using natural language commands and AI-assisted automation.^[1][2] It is both a workflow pattern and a technical integration that allows large language models (LLMs) like Claude to interact with web browsers in a structured, deterministic manner, effectively giving Claude Code a structured view into web applications without relying on screenshot-based vision tools.^[3]

The term "Claude Code Playwright" emerged in 2025 as shorthand for this specific workflow, popularized through developer blogs, Reddit discussions, and YouTube tutorials that demonstrate how the combination addresses limitations in AI coding assistants, such as the inability to visually inspect or iterate on web-based outputs.^[4][5] By mid-2026, the Microsoft-maintained @playwright/mcp package became the most-installed MCP server for browser automation, with over 32,000 GitHub stars and routine use in production CI/CD pipelines.^[6][7]

Overview

The integration consists of three main components that work together to provide AI-driven browser automation:

• Claude Code is a CLI-based agentic coding assistant that uses Anthropic's AI models to understand codebases, execute routine development tasks, and automate coding from natural language instructions.^[2][8]

• Playwright is an open-source browser automation and testing framework developed by Microsoft, providing one API to drive Chromium, Firefox, and WebKit.^[9]

• Model Context Protocol (MCP) is a standardized protocol for connecting AI systems with external tools and data sources, enabling structured browser interaction.^[10]

The Playwright MCP server acts as a bridge between Claude Code and the browser, providing deterministic, text-based snapshots of web pages through Playwright's accessibility tree rather than pixel-based inputs, making it lightweight and LLM-friendly.^[11][12] Each interactive element in the snapshot receives a unique reference identifier (for example ref=e5) that the LLM can target deterministically, replacing the ambiguity of pixel-coordinate clicks used by vision-based agents.^[13]

History

Playwright origins

Playwright was released by Microsoft in January 2020 as a cross-browser automation framework, intended to address the Chromium-only limitation of Puppeteer.^[14] The project was led by Andrey Lushnikov, a former Chrome DevTools and Puppeteer technical lead, alongside Dmitry Gozman; several Puppeteer engineers had moved from Google to Microsoft in 2019 specifically to build the new tool.^[15] Playwright drives Chromium, Firefox, and WebKit through patched browser binaries that ensure feature parity across engines, and by 2022 it had overtaken Cypress in GitHub stars.^[15]

The framework added official Python bindings in 2020, followed by .NET and Java SDKs, and introduced its dedicated @playwright/test runner in 2021 with built-in assertions, parallelization, tracing, and the codegen recorder.^[16] Subsequent releases standardised accessible locators (getByRole, getByLabel, getByText) that align with the W3C accessibility tree, which later became the foundation for the MCP integration.^[16]

Claude Code and the MCP launch

Claude Code was introduced by Anthropic in February 2025 as a research preview of a terminal-native agentic coding tool, then made generally available in May 2025 alongside the Claude 4 family.^[17][18] It integrates with Claude Sonnet and Opus models to perform tasks such as mapping entire codebases, executing routine coding operations, running tests, and committing changes.^[17][19]

The Model Context Protocol was open-sourced by Anthropic on 25 November 2024 as an open standard for connecting AI assistants to external systems.^[10] MCP was created at Anthropic by David Soria Parra and Justin Spahr-Summers to solve the "M x N problem", the combinatorial explosion of connecting M different AI models to N different tools and data sources.^[20] The protocol launched with reference servers for Google Drive, Slack, GitHub, Git, Postgres, and Puppeteer; Playwright was not in the initial set.^[10]

The Playwright MCP server (2025)

Following Anthropic's MCP release, both community developers and Microsoft itself built Playwright-flavoured MCP servers. ExecuteAutomation released @executeautomation/playwright-mcp-server in early 2025, supporting 143 device emulation presets and basic browser automation through Playwright.^[21] Microsoft then released the official @playwright/mcp (repository microsoft/playwright-mcp) on 22 March 2025, deliberately designed around the accessibility tree rather than screenshot models.^[6][11]

The integration of Claude Code with Playwright MCP was first documented on 1 July 2025 by developer Simon Willison, who detailed the claude mcp add playwright npx @playwright/mcp@latest command and noted that prompts often need to explicitly mention "playwright mcp" so that Claude does not fall back to Bash.^[4] Subsequent tutorials expanded its use for self-correcting AI workflows such as fixing UI bugs in real time and generating Playwright tests from natural language exploration sessions.^[22] By mid-2025 the combination had become a key technique for AI-driven web development, and by May 2026 the Microsoft repository had passed 32,000 stars and the @playwright/mcp package was being published to the official MCP Registry on every release.^[6][7]

Architecture

Technical components

Scroll sideways for more →

MCP itself is built on JSON-RPC 2.0 and supports three transports: stdio (local subprocess), HTTP (streamable HTTP, recommended for remote servers), and the now-deprecated server-sent events transport.^[23] Claude Code uses stdio for local Playwright servers and HTTP for remote ones, expanding ${CLAUDE_PROJECT_DIR} so the server can resolve paths relative to the user's project.^[23]

Dynamic element identification

Unlike traditional Playwright automation that relies on CSS selectors or XPath expressions, the Playwright MCP uses a dynamic element identification system:^[24]

1. A web page is loaded in a browser controlled by Playwright.
2. The Playwright MCP server captures the page's accessibility tree.
3. A unique ref identifier is assigned to each interactive element.
4. A structured accessibility snapshot is returned to the model in YAML-like text.
5. Claude Code receives the element map with semantic information (role, name, value).
6. The user writes natural language test steps.
7. Claude matches descriptions to ref values or accessible locators.
8. Browser actions are executed through the corresponding MCP tool call.

The accessibility tree path keeps a single snapshot in the 200 to 400 token range for typical pages, compared with thousands of tokens for raw DOM or base64 screenshots, which is why the official Playwright documentation describes the server as "fast and lightweight".^[11][12] The approach also gives Claude an observation channel for self-correction; the model can read the post-action snapshot, detect that an expected element is missing or that a flash message appeared, and decide its next step.^[3]

Browser profile modes

The official @playwright/mcp server supports three browser context modes, selected through CLI flags:^[25]

Scroll sideways for more →

The extension mode was extended in @playwright/mcp v0.0.74 (released 6 May 2026) to manage multiple tabs and to group automated tabs into a green "Playwright" tab group in Chromium so users can see which tabs the agent owns.^[26]

Tool catalogue

By mid-2026, the official Playwright MCP server exposed roughly 25 core tools plus a set of opt-in capability groups for tracing, video, PDF generation, vision (coordinate-based mouse), and test assertions.^[7][11] Selected examples:

Scroll sideways for more →

The April 2026 release of v0.0.72 also added a browser_network_request tool for indexed inspection of a single request and surfaced unhandled rejections from the JavaScript execution tool, reflecting a general 2025 to 2026 trend toward giving Claude more fine-grained observability into the browser state.^[26]

Comparison with adjacent MCP servers

Scroll sideways for more →

Steve Kinney describes the split as "driving vs debugging": Playwright MCP optimises for driving the browser, while Chrome DevTools MCP optimises for asking the browser why something happened.^[27] Several authors recommend layering them, using Playwright MCP for navigation and assertions and Chrome DevTools MCP for performance and network analysis.^[27][31]

Features

Core capabilities

• Natural language test generation. Plain English descriptions are converted by Claude into idiomatic Playwright code, often using getByRole, getByLabel, and other accessible locators that map cleanly back to the accessibility-tree refs.^[32][33]

• Self-correction. Claude can iterate by reading the post-action snapshot, detecting an error banner or a missing element, and choosing a recovery action without leaving the loop.^[3]

• Structured browser interaction. All observation goes through the accessibility tree by default, which is deterministic and token-cheap.^[11][12]

• Multi-browser support. Through Playwright, the MCP server can drive Chromium, Firefox, WebKit, and Microsoft Edge, selectable with the --browser flag.^[11]

• Screenshots and PDF generation. Available for human-readable debugging artefacts even though the model does not need them to act.

• Code generation. Recorded sessions can be exported to TypeScript, Python, .NET, or Java test scaffolds.^[33]

• Context extraction. get_context and snapshot tools retrieve the DOM or accessibility tree for analysis.

• Session persistence. The default persistent profile keeps login state, IndexedDB, and cookies across runs.^[25]

• Custom JavaScript execution. browser_evaluate and browser_run_code_unsafe allow ad-hoc scripting inside the browser context.

Language bindings

Playwright supports multiple first-party client libraries that Claude Code can target by adjusting prompts and file paths:^[9]

Scroll sideways for more →

The TypeScript binding is by far the most commonly used with Claude Code because the MCP server itself is written in TypeScript and produces TypeScript by default in codegen mode.^[7][34]

Installation and configuration

Prerequisites

• Node.js 18 or newer; Node 14 and 16 are no longer supported by @playwright/mcp.^[7][33]
• npm, pnpm, or yarn as a package manager.
• A Claude Pro, Max, Team, or Enterprise subscription, or API access for Claude Code.
• An MCP-compatible client: Claude Code CLI, Claude Desktop, Claude in Chrome, VS Code, Cursor, Windsurf, Cline, or the Claude Agent SDK.^[11][33]

Installation methods

Using npm

# Install globally (ExecuteAutomation flavour)
npm install -g @executeautomation/playwright-mcp-server

# Or use the official server with npx
npx @playwright/mcp@latest

Claude Code CLI integration

Add Playwright MCP to Claude Code using the claude mcp add command:^[4][23]

# Initialize Playwright in the project
npm init playwright@latest

# Add the MCP server to Claude Code (local scope by default)
claude mcp add playwright npx @playwright/mcp@latest

# For headless mode or custom options
claude mcp add playwright npx @playwright/mcp@latest --headless --no-sandbox

# Start Claude Code
claude

The first command persists the configuration under the project entry in ~/.claude.json. Adding --scope project writes to a .mcp.json file at the project root that can be checked into version control, and --scope user writes to a user-global section of ~/.claude.json.^[23]

Claude Desktop configuration

Add the server to claude_desktop_config.json:^[35]

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Project-level configuration

Create .mcp.json in the project root so the whole team gets the same server when they run Claude Code:^[23][36]

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "HEADLESS": "false",
        "BROWSER": "chromium"
      }
    }
  }
}

Project-scoped servers prompt for approval the first time they are used; the approval is recorded so subsequent sessions in the same workspace start without an extra confirmation.^[23]

Docker deployment

For scalable headless deployment, Microsoft publishes a Playwright base image with Chromium, Firefox, and WebKit preinstalled:

FROM mcr.microsoft.com/playwright:v1.55.0-noble
RUN npm install -g @playwright/mcp@latest
ENTRYPOINT ["npx", "@playwright/mcp@latest", "--headless"]

This pattern is widely used to wire Playwright MCP into CI runners such as GitHub Actions and Azure Pipelines so Claude-driven tests reproduce locally and in CI.^[37]

HTTP transport for remote agents

@playwright/mcp can also serve over HTTP for cloud agents, started with --port 8931. Claude Code attaches with claude mcp add --transport http playwright http://localhost:8931/mcp. HTTP is the recommended transport for remote servers and is the only one that auto-reconnects with exponential backoff if the server drops mid-session.^[23]

Usage

Basic test generation

To generate a Playwright test using Claude Code:^[1][33]

1. Navigate to the project directory.
2. Run claude to start an interactive session.
3. Use natural language to describe the test scenario.
4. Claude will generate and execute Playwright code, then save the resulting spec.

Example prompt:

Please test the login functionality:
1. Navigate to https://example.com/login
2. Enter username "testuser"
3. Enter password "testpass"
4. Click login button
5. Verify successful login by checking for welcome message

Common Claude Code prompts

These illustrate natural-language tasks developers often ask Claude Code to perform with Playwright:^[2][32]

• "Migrate selectors to getByRole and getByLabel accessible locators and update failing specs accordingly."
• "Split a long E2E test into smaller specs and add test.step annotations for trace readability."
• "Refactor to Page Object Model and deduplicate auth flows across tests."
• "Create a CI workflow that runs on push, uploads the HTML report, and retains traces on failure."
• "Generate tests for the shopping cart flow including add, remove, and checkout operations."
• "Debug why the login test is flaky and add proper waits or assertions."

Workflow patterns

Vishwas Gopinath outlines four practical patterns that appear repeatedly in 2026 tutorials:^[33]

1. Self-QA during development. Make a code change, then ask Claude to verify the UI by opening localhost and walking the affected flow.
2. Exploratory testing. Describe the scenario in plain English ("Navigate to checkout, add items, verify cart total updates") and let Claude pick the selectors.
3. Authenticated testing. Log in manually in the visible browser, save the storage state, then reuse it across sessions with --storage-state.
4. Test code generation. Pass --codegen typescript to the server, explore the flow conversationally, and have Claude commit the resulting *.spec.ts file.

Simon Willison emphasises a subtle prompting tip: explicitly say "playwright mcp" the first time, otherwise Claude Code may try to use the Bash tool instead of the MCP server.^[4]

Advanced features

Custom commands

Store reusable test templates in .claude/commands/:^[38]

# .claude/commands/test-login.md
Test the user authentication flow with the following steps:
$ARGUMENTS

YAML-based testing

The community claude-test framework supports YAML-based test definitions that wrap the MCP calls:^[24]

name: E2E test suite
tags:
  - smoke
  - regression
environment:
  url: https://staging.example.com
steps:
  - include: "login"
  - "Click Add to Cart button for first product"
  - "Verify cart contains 1 item"
  - "Navigate to checkout"
  - "Complete purchase with test card"
  - "Verify order confirmation"

Example TypeScript test

Below is a minimal Playwright test that Claude Code typically generates or edits, using accessible locators that match the MCP server's accessibility-tree refs:^[39]

import { test, expect } from '@playwright/test';

test.describe('User authentication', () => {
  test('successful login flow', async ({ page }) => {
    await page.goto('https://example.com/login');

    // Using accessible locators
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('secure_password');
    await page.getByRole('button', { name: 'Sign In' }).click();

    // Verify successful login
    await expect(page.getByText('Welcome back')).toBeVisible();
    await expect(page).toHaveURL('/dashboard');
  });
});

Subagents and multi-browser workflows

Claude Code's subagent feature, introduced in 2025, lets the top-level agent spawn specialised sub-agents with their own context windows and tool permissions. By 2026, separate planning, implementation, browser-QA, and release-notes subagents had become a common pattern.^[40][41] Each subagent gets its own copy of the Playwright MCP server, so a browser-QA subagent can drive a real browser while the main agent continues editing code, and an orchestrator collects the results.^[42]

Best practices

Context management

• Use /clear between unrelated tasks so that the MCP snapshot history does not flood the context window.^[43]
• Use /compact when approaching context limits to summarise rather than discard.
• Store project-specific instructions in CLAUDE.md.
• Keep prompts focused on a single scenario; an MCP browser_snapshot can add 4,000 to 8,000 tokens per call for a complex page.^[30]
• Enable tool search in Claude Code (default since v2.x) so that MCP tool definitions are deferred and only loaded when relevant.^[23]

Test organization

Scroll sideways for more →

Security and licensing considerations

• Source review. Treat AI-proposed diffs as suggestions; review them for data exposure, flaky waits, or brittle selectors before committing.^[8]
• Permissions. Avoid --dangerously-skip-permissions in production environments; configure permissions.allow and permissions.deny in ~/.claude/settings.json instead.^[44]
• Tool access. Define specific tool permissions for Claude in configuration, and consider denying browser_run_code_unsafe entirely for untrusted contexts.
• Sensitive data. Store credentials and tokens in environment variables, never in code; the Playwright MCP server captures the accessibility tree, including any text Claude sees on the page.
• Indirect prompt injection. A malicious page rendered through Playwright MCP can embed instructions that the model treats as new commands, a vector formally tracked by Microsoft as issue #1479 on microsoft/playwright-mcp.^[45]
• Remote code execution. Issue #1495 in the same repository describes how arbitrary JavaScript executed by the agent runs with full privileges of the Node.js process; isolate the server in a container or VM when running against untrusted pages.^[46]
• Licensing. Playwright is Apache License 2.0; Claude Code usage is governed by Anthropic's commercial terms.^[14]

Running at scale

• CI/CD integration. Playwright runs on most CI systems with official guides for GitHub Actions, Azure Pipelines, Jenkins, and CircleCI.^[37]
• Cloud execution. Microsoft offers Azure Playwright Testing for hosted parallel execution.^[47]
• Model access. Claude models are accessible via the Claude API and cloud platforms like Amazon Bedrock and Google Vertex AI, enabling enterprise routing and governance.^[48]
• Output limits. Claude Code warns when MCP tool output exceeds 10,000 tokens; raise MAX_MCP_OUTPUT_TOKENS (default 25,000) for large snapshots.^[23]
• Versioning. Pin @playwright/mcp to a specific version and run npx playwright install to keep the bundled browsers in sync with the MCP server's expectations.^[33]

Challenges and limitations

Technical limitations

• The Playwright MCP server is stateful per browser context; long sessions accumulate token cost because every action returns a full accessibility snapshot by default.^[30]
• Browser storage APIs (localStorage, sessionStorage) are not exposed in some sandboxed runtimes such as Claude.ai artifacts.^[10]
• Each interactive operation requires the agent to round-trip through the model, which is slower than a direct Playwright script.
• Context window limitations require periodic clearing and aggressive use of /compact.
• Manual permission granting for each operation is required unless overridden.

Performance issues

• Playwright MCP can consume roughly 114,000 tokens for a 10-step task, versus around 27,000 tokens for the equivalent script driven through @playwright/cli, a roughly four-fold difference.^[30]
• Users have reported slow browser interactions (greater than 4 seconds for navigation) in WSL2 environments.^[5]
• Token usage for repeated snapshots can be inefficient for large-scale testing.
• Generated scripts may fail due to non-unique selectors, requiring manual overrides.^[5]

Workarounds

• Set includeSnapshot: false on actions that do not need a fresh snapshot for a 70 to 80 percent token reduction per call.^[30]
• Use @playwright/cli for long batch runs and reserve MCP for interactive exploration.^[30][49]
• For WSL2 performance issues, consider running on native Windows or Linux.
• Prefer accessible locators (getByRole, getByLabel) over CSS selectors for stable, readable code.
• Run untrusted pages in --isolated mode and inside a container so that a successful prompt injection cannot read the persistent profile.^[25][45]

Applications and use cases

Primary use cases

• Exploratory testing. Surface unexpected issues by letting Claude wander a flow and observe outputs.^[36]
• Test generation. Automatically create comprehensive suites from product specifications or user stories.
• Self-correcting UI development. Build and refine UIs with automatic visual verification.^[3]
• Regression testing. Maintain and update existing suites as applications evolve.
• API testing. Combine Playwright's request context with Claude-generated assertions for REST and GraphQL endpoints.^[32]
• Visual testing. Verify UI components, layouts, and visual regressions with screenshot artefacts.
• Cross-browser testing. Ensure compatibility across Chromium, Firefox, WebKit, and Edge.
• Migration projects. Convert existing Selenium or Puppeteer tests to Playwright with Claude rewriting the selectors.
• Accessibility audits. Use the accessibility tree directly to flag missing roles or labels, often paired with Chrome DevTools MCP for axe-style scans.^[27]

Industry adoption

Companies and organizations using Claude Code Playwright include Block, which adopted MCP early for agentic systems development; Apollo, which uses it for test automation workflows; and developer tool companies including Replit, Codeium, and Sourcegraph.^[10] Microsoft has documented Playwright MCP for Power Platform automation, and the official Anthropic directory lists Playwright MCP as a featured connector in 2026.^[50][23]

2025-2026 developments

Maturation of the official MCP server

By May 2026 the @playwright/mcp package had reached v0.0.75, with around 65 releases since the 22 March 2025 launch and roughly weekly cadence.^[26] Key 2025 to 2026 milestones include:

• v0.0.71 (27 April 2026). New browser_drop tool for native drag-and-drop completion, wrapping Playwright's Locator.drop. browser_evaluate began accepting plain JavaScript expressions, and Chrome extension automation grouped automated tabs into a green "Playwright" tab group.^[26]
• v0.0.72 (30 April 2026). Added browser_network_request for indexed inspection of a single request, renamed browser_run_code to browser_run_code_unsafe to make sandbox-escape semantics explicit, and surfaced unhandled rejections from the code-execution tool.^[26]
• v0.0.73 (1 May 2026). Playwright MCP began publishing to the official MCP Registry on every release, and the extension channel and executablePath resolution moved into CLI flags.^[26]
• v0.0.74 (6 May 2026). Browser extension mode added multi-tab management; browser_take_screenshot now skips base64 output when a filename is provided; the server auto-recovers when the remote browser disconnects.^[26]
• v0.0.75 (7 May 2026). Bug fixes around shared browser launch serialisation in isolated mode and forwarding browser-level CDP commands in extension mode.^[26]

Token efficiency and @playwright/cli

Token consumption emerged as the dominant operational concern in 2026. Detailed traces showed that a single browser_snapshot could return 3,800 to 8,000 tokens for a non-trivial page, and a 10-step task could push 60,000 to 80,000 tokens of accumulated snapshot data into the conversation.^[30] In response, Microsoft released @playwright/cli in early 2026 as a complementary tool that exposes Playwright through plain shell commands and writes snapshots to disk as YAML files, returning only a one-line file path to the agent.^[30][49] The Playwright team's documented recommendation is to use @playwright/cli for coding agents that have filesystem access (Claude Code, Cursor) and @playwright/mcp for sandboxed environments such as Claude Desktop, where filesystem access is more limited.^[30] Benchmarks reported a roughly four-fold reduction (114k to 27k tokens) for a typical 10-step automation.^[30]

A parallel browser.bind() API in Playwright 1.55 and later lets the same launched browser be shared between @playwright/mcp, @playwright/cli, and bespoke clients, so an agent can switch between protocols without restarting the browser.^[49]

MCP standardisation

The Model Context Protocol matured into a de facto industry standard during 2025. Microsoft adopted MCP across VS Code, GitHub, and Power Platform; OpenAI, Google, Cursor, Goose, Amp, OpenCode, and others added native MCP clients.^[51][52] Anthropic published the official Anthropic MCP Directory at claude.ai/directory and added claude.ai connectors that automatically propagate to Claude Code when a user authenticates via the Claude.ai account.^[23] Plugin-bundled MCP servers were introduced as part of Claude Code v2, including an official mcp-server-dev plugin that can scaffold a new MCP server for the user.^[23]

Agent Skills and Playwright

Anthropic launched Claude Skills on 16 October 2025 as a way to package procedural knowledge into SKILL.md files with YAML frontmatter and supporting scripts, using progressive disclosure: the agent first sees only the skill metadata, then loads the full SKILL.md and bundled resources as needed.^[53] On 18 December 2025 Anthropic released the Agent Skills specification as an open standard and added organisation-wide management for Team and Enterprise plans.^[54][55] By early 2026 Microsoft had adopted Agent Skills inside VS Code and GitHub; Cursor, Goose, Amp, OpenCode, and OpenAI's Codex CLI had implemented the same SKILL.md format.^[51][56]

A handful of official Anthropic skills target browser testing directly, including signup-flow-driver, which runs sign-up to email-confirmation to onboarding in a headless browser with assertions, and checkout-verifier, which drives Stripe test cards and checks invoice state.^[57] Community skills routinely combine the Playwright MCP server with a skill that captures the team's preferred locator style and test layout, allowing teams to share QA conventions in the same way the rest of the company shares coding style guides.^[58]

Claude in Chrome and Computer Use

Anthropic shipped a Claude in Chrome browser extension in beta in 2025 and made it generally available to all paid users (Pro, Team, Enterprise, and Max) in late December 2025.^[59][60] The extension reads DOM state, debugs code, clicks buttons, and fills forms directly inside the user's existing Chrome session. Anthropic also shipped a Claude Code integration that lets the agent "build in your terminal, verify in your browser, and debug with Claude reading console errors and DOM state directly".^[60] In parallel, Anthropic's "Computer Use" capability, first introduced for Claude 3.5 Sonnet in October 2024, served as the screenshot-based foundation for the computer-use agent, while Playwright MCP became the structured, token-efficient alternative for testing-focused workflows.^[61]

The Claude Cowork product launched in 2025 as an agentic workflow environment with a built-in VM and out-of-the-box browser automation, expanding the surface for Claude-driven browser testing beyond the terminal.^[62]

Model upgrades

Claude Code's underlying models advanced rapidly across the period. Claude 4 launched 22 May 2025 with Sonnet 4 and Opus 4.^[17] Claude Sonnet 4.5 became the default Claude Code model in September 2025.^[18] Claude Opus 4.5 launched in November 2025 with a 67 percent price cut and roughly 76 percent fewer output tokens for comparable tasks, making premium intelligence affordable for routine Claude Code Playwright sessions.^[63] Claude Sonnet 4.6 followed in February 2026, the first Sonnet preferred over the previous generation's Opus on coding evaluations, and Claude Opus 4.7 launched in April 2026 with a three-fold image resolution improvement to 2,576 pixels, useful for the screenshot artefacts that Playwright MCP can optionally produce.^[64]

Ecosystem alternatives

The 2026 ecosystem now offers a range of MCP servers for browser automation alongside Playwright MCP:

• Chrome DevTools MCP. Driven by the Chrome team and Puppeteer, optimised for performance traces, Core Web Vitals, and network bodies; complements Playwright MCP for diagnostic work.^[27]
• Browser Use and its agent variant.^[65] A more autonomous agent loop that blends DOM and pixels and tends to suit unstructured browsing; often paired with Playwright for the underlying browser control.^[28]
• Stagehand. Browserbase's higher-level scripting layer for AI-driven browsers.^[28]
• Skyvern and BrowserAct. Pixel-and-DOM browser agents focused on enterprise RPA-style workflows.^[65]
• Glance. Community MCP server with 30 tools focused on screenshot-led QA workflows.^[29]
• @playwright/cli. Microsoft's non-MCP alternative that uses shell commands; recommended for token-sensitive coding agents.^[30][49]

The general 2026 consensus is to default to Playwright MCP for deterministic CI checks and structured E2E generation, fall back to Chrome DevTools MCP for diagnosis, and use Browser Use or @playwright/cli when token cost dominates.^[31][65]

Relationship to tool and use protocols

Although not required for this workflow, teams can connect Playwright-related tools or repositories to Claude via the Model Context Protocol so the assistant can fetch code, open issues, or retrieve documentation through standardised tool connectors. This enables:^[10]

• Direct access to test repositories.
• Integration with issue tracking systems such as Linear, GitHub, or Jira.
• Real-time documentation retrieval, often through Context7 or similar MCP servers.
• Cross-tool workflow automation, for example linking a failing Playwright run to an automatically opened ticket.

Community and ecosystem

Related projects

• claude-test CLI. A YAML-based testing framework that wraps Claude Code and the Playwright MCP server.^[24]
• Playwright MCP Registry. A community-driven and now Microsoft-published collection of MCP servers.^[26]
• Awesome Claude Code. A curated list of Claude Code commands and workflows.^[66]
• Playwright Test Generator. Microsoft's Chrome extension for recording user interactions, often used to seed Claude with a starter spec.^[16]
• Aizdorj's claude-playwright-mcp. A community-maintained MCP server combining Claude Code conventions with Playwright.^[67]
• fast-playwright-mcp and roxybrowser/playwright-mcp. Community forks tuned for speed or proxy support.^[68]

Development tools

• TypeScript SDK and Python SDK for building custom MCP servers.^[69]
• Integration with VS Code, Cursor, Windsurf, Cline, WebStorm, and other development environments.^[11][33]
• Chrome DevTools integration for debugging.

Community resources

• The official Playwright Discord server.^[16]
• Claude Code community forums and the Anthropic Discord channel.
• Stack Overflow tags: playwright and claude-code.
• YouTube tutorials and courses on Claude Code Playwright workflows.

Comparison: Playwright MCP and adjacent approaches

Scroll sideways for more →

See also

• Claude (AI model)
• Claude Code
• Claude Skills
• Claude Agent SDK
• Claude Code Subagents
• Claude Code Review
• Claude Cowork
• Playwright (software)
• Model Context Protocol
• MCP server
• Anthropic Computer Use
• Computer-use agent
• Browser Use
• AI browser agent
• Agentic workflow
• Indirect prompt injection
• Prompt injection
• Vibe coding
• Context window
• Large language model
• Artificial intelligence in software testing

References

1. Anthropic, "Claude Code: Best Practices for Agentic Coding", Anthropic Engineering, 2025. https://www.anthropic.com/engineering/claude-code-best-practices. Accessed 2026-05-24. ↩
2. Anthropic, "Claude Code: Anthropic's agentic coding system", Anthropic, 2025. https://www.anthropic.com/product/claude-code. Accessed 2026-05-24. ↩
3. Simon Willison, "Using Playwright MCP with Claude Code", Simon Willison's TILs, 2025-07-01. https://til.simonwillison.net/claude-code/playwright-mcp-claude-code. Accessed 2026-05-24. ↩
4. Simon Willison, "Using Playwright MCP with Claude Code", Simon Willison's TILs, 2025-07-01. https://til.simonwillison.net/claude-code/playwright-mcp-claude-code. Accessed 2026-05-24. ↩
5. A. Aleem, "The beginner's guide to Playwright MCP with Claude Code and why it changes how you test", Medium, 2026-04. https://medium.com/@HawksandOwls/the-beginners-guide-to-playwright-mcp-with-claude-code-and-why-it-changes-how-you-test-2712aec8e830. Accessed 2026-05-24. ↩
6. Microsoft, "playwright-mcp GitHub repository", GitHub, 2025-03-22. https://github.com/microsoft/playwright-mcp. Accessed 2026-05-24. ↩
7. Microsoft, "@playwright/mcp on npm", npm, 2026. https://www.npmjs.com/package/@playwright/mcp. Accessed 2026-05-24. ↩
8. LM Po, "The Evolution of Claude Code in 2025", Medium, 2026. https://medium.com/@lmpo/the-evolution-of-claude-code-in-2025-a7355dcb7f70. Accessed 2026-05-24. ↩
9. Playwright, "Playwright documentation home", playwright.dev, 2026. https://playwright.dev/. Accessed 2026-05-24. ↩
10. Anthropic, "Introducing the Model Context Protocol", Anthropic News, 2024-11-25. https://www.anthropic.com/news/model-context-protocol. Accessed 2026-05-24. ↩
11. Playwright, "Playwright MCP: Introduction", playwright.dev, 2026. https://playwright.dev/mcp/introduction. Accessed 2026-05-24. ↩
12. Playwright, "Snapshots", playwright.dev, 2026. https://playwright.dev/mcp/snapshots. Accessed 2026-05-24. ↩
13. Playwright, "Playwright MCP: Getting Started", playwright.dev, 2026. https://playwright.dev/docs/getting-started-mcp. Accessed 2026-05-24. ↩
14. Playwright, "Playwright release notes", playwright.dev, 2026. https://playwright.dev/docs/release-notes. Accessed 2026-05-24. ↩
15. Sii.pl, "Playwright: why should you get interested in this tool", Sii, 2024. https://sii.pl/blog/en/playwright-why-should-you-get-interested-in-the-microsoft-tool/. Accessed 2026-05-24. ↩
16. Microsoft, "Playwright on GitHub", GitHub, 2026. https://github.com/microsoft/playwright. Accessed 2026-05-24. ↩
17. Anthropic, "Introducing Claude 4", Anthropic News, 2025-05-22. https://www.anthropic.com/news/claude-4. Accessed 2026-05-24. ↩
18. CallSphere Blog, "Claude Code: The Complete Guide to Anthropic's AI Coding Assistant (2026)", CallSphere, 2026. https://callsphere.ai/blog/claude-code-complete-guide-2026. Accessed 2026-05-24. ↩
19. Built In, "Anthropic's Claude Code Shows How Far AI Coding Tools Have Come", Built In, 2025. https://builtin.com/articles/anthropic-claude-code-tool. Accessed 2026-05-24. ↩
20. Ajeet Raina, "One Year of Model Context Protocol: From Experiment to Industry Standard", DEV Community, 2025-11. https://dev.to/ajeetraina/one-year-of-model-context-protocol-from-experiment-to-industry-standard-5hj8. Accessed 2026-05-24. ↩
21. ExecuteAutomation, "mcp-playwright GitHub repository", GitHub, 2025. https://github.com/executeautomation/mcp-playwright. Accessed 2026-05-24. ↩
22. Testomat, "Playwright MCP and Claude Code: AI-Powered Test Automation Guide", Testomat, 2026. https://testomat.io/blog/playwright-mcp-claude-code/. Accessed 2026-05-24. ↩
23. Anthropic, "Connect Claude Code to tools via MCP", Claude Code Documentation, 2026. https://code.claude.com/docs/en/mcp. Accessed 2026-05-24. ↩
24. TestDino, "Playwright MCP Explained: Setup, Config and Real-World Examples", TestDino, 2026. https://testdino.com/blog/playwright-mcp. Accessed 2026-05-24. ↩
25. Playwright, "Profile and State", playwright.dev, 2026. https://playwright.dev/mcp/configuration/user-profile. Accessed 2026-05-24. ↩
26. Microsoft, "Releases: microsoft/playwright-mcp", GitHub, 2026. https://github.com/microsoft/playwright-mcp/releases. Accessed 2026-05-24. ↩
27. Steve Kinney, "Playwright vs Chrome DevTools MCP: Driving vs Debugging", stevekinney.com, 2026. https://stevekinney.com/writing/driving-vs-debugging-the-browser. Accessed 2026-05-24. ↩
28. Browser Use, "Closer to the Metal: Leaving Playwright for CDP", browser-use.com, 2026. https://browser-use.com/posts/playwright-to-cdp. Accessed 2026-05-24. ↩
29. Product Hunt, "Glance: Give Claude Code a Real Browser", Product Hunt, 2026. https://www.producthunt.com/products/glance-give-claude-code-a-real-browser. Accessed 2026-05-24. ↩
30. Morph LLM, "Playwright MCP Setup and Cost: Why the CLI Is 4x Cheaper", morphllm.com, 2026. https://www.morphllm.com/playwright-mcp. Accessed 2026-05-24. ↩
31. Webfuse, "5 Best MCP Servers for Browser Automation in 2026", Webfuse, 2026. https://www.webfuse.com/blog/the-top-5-best-mcp-servers-for-ai-agent-browser-automation. Accessed 2026-05-24. ↩
32. Anthropic, "Claude Code documentation", Anthropic Documentation, 2026. https://docs.claude.com/en/docs/claude-code. Accessed 2026-05-24. ↩
33. Vishwas Gopinath, "How to Use Playwright MCP Server with Claude Code", Builder.io Blog, 2026-03-09. https://www.builder.io/blog/playwright-mcp-server-claude-code. Accessed 2026-05-24. ↩
34. TestCollab, "Playwright MCP Server: How to Set Up, Configure and Use It (2026)", TestCollab, 2026. https://testcollab.com/blog/playwright-mcp. Accessed 2026-05-24. ↩
35. Anthropic, "Claude Desktop user guide", Anthropic, 2026. https://claude.ai/download. Accessed 2026-05-24. ↩
36. Kapil Kumar, "Understanding the Claude + Playwright MCP Server setup", Medium, 2025. https://medium.com/@kapilkumar080/understanding-the-claude-playwright-mcp-server-setup-426a574cc232. Accessed 2026-05-24. ↩
37. Playwright, "Playwright Continuous Integration documentation", playwright.dev, 2026. https://playwright.dev/docs/ci. Accessed 2026-05-24. ↩
38. TestDino, "How to install Playwright MCP on Claude Code", TestDino, 2026. https://testdino.com/blog/playwright-mcp-installation/. Accessed 2026-05-24. ↩
39. Decipher, "How to Use Claude Code to Write Playwright Tests (With Playwright MCP)", Decipher, 2026. https://getdecipher.com/blog/how-to-use-claude-code-to-write-playwright-tests-(with-playwright-mcp). Accessed 2026-05-24. ↩
40. Developers Digest, "Claude Code Agent Teams, Subagents, and MCP: The 2026 Playbook", Developers Digest, 2026. https://www.developersdigest.tech/blog/claude-code-agent-teams-subagents-2026. Accessed 2026-05-24. ↩
41. MindStudio, "How to Use Multi-Agent Chrome Automation with Claude Code", MindStudio, 2026. https://www.mindstudio.ai/blog/multi-agent-chrome-automation-claude-code. Accessed 2026-05-24. ↩
42. Alexop, "How to Use Claude Code as an AI QA Tester with Agent Browser", alexop.dev, 2026. https://alexop.dev/posts/automated-qa-claude-code-agent-browser-cli-github-actions/. Accessed 2026-05-24. ↩
43. Anthropic, "Claude Code Settings", Claude Code Documentation, 2026. https://code.claude.com/docs/en/settings. Accessed 2026-05-24. ↩
44. Anthropic, "Claude Code Security", Claude Code Documentation, 2026. https://code.claude.com/docs/en/security. Accessed 2026-05-24. ↩
45. Microsoft, "Issue #1479: Indirect Prompt Injection via accessibility snapshots", microsoft/playwright-mcp on GitHub, 2026. https://github.com/microsoft/playwright-mcp/issues/1479. Accessed 2026-05-24. ↩
46. Microsoft, "Issue #1495: Critical RCE in Playwright-MCP Server via browser_run_code", microsoft/playwright-mcp on GitHub, 2026. https://github.com/microsoft/playwright-mcp/issues/1495. Accessed 2026-05-24. ↩
47. Microsoft, "Microsoft Playwright Testing on Azure", Microsoft Learn, 2026. https://learn.microsoft.com/en-us/azure/playwright-testing/. Accessed 2026-05-24. ↩
48. Amazon Web Services, "Anthropic Claude models on Amazon Bedrock", AWS, 2026. https://aws.amazon.com/bedrock/claude/. Accessed 2026-05-24. ↩
49. TestDino, "Playwright CLI: Every Command and Setup Guide (2026)", TestDino, 2026. https://testdino.com/blog/playwright-cli. Accessed 2026-05-24. ↩
50. Microsoft, "Playwright MCP server for Power Platform Playwright samples", Microsoft Learn, 2026. https://learn.microsoft.com/en-us/power-platform/developer/playwright-samples/ai-mcp. Accessed 2026-05-24. ↩
51. SiliconANGLE, "Anthropic makes agent Skills an open standard", SiliconANGLE, 2025-12-18. https://siliconangle.com/2025/12/18/anthropic-makes-agent-skills-open-standard/. Accessed 2026-05-24. ↩
52. The New Stack, "Why the Model Context Protocol Won", The New Stack, 2026. https://thenewstack.io/why-the-model-context-protocol-won/. Accessed 2026-05-24. ↩
53. Anthropic, "Equipping agents for the real world with Agent Skills", Anthropic Engineering, 2025-10-16. https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills. Accessed 2026-05-24. ↩
54. AI Business, "Anthropic Launches Skills Open Standard for Claude", AI Business, 2025-12-18. https://aibusiness.com/foundation-models/anthropic-launches-skills-open-standard-claude. Accessed 2026-05-24. ↩
55. VentureBeat, "Anthropic launches enterprise 'Agent Skills' and opens the standard, challenging OpenAI in workplace AI", VentureBeat, 2025-12. https://venturebeat.com/technology/anthropic-launches-enterprise-agent-skills-and-opens-the-standard. Accessed 2026-05-24. ↩
56. Anthropic, "Skills public repository", GitHub, 2026. https://github.com/anthropics/skills. Accessed 2026-05-24. ↩
57. Beginners In AI, "Anthropic's Free Skills Library: Every Claude Skill (2026)", Beginners In AI, 2026. https://beginnersinai.org/anthropic-skills-library/. Accessed 2026-05-24. ↩
58. Firecrawl, "Best Claude Code Skills to Try in 2026", Firecrawl Blog, 2026. https://www.firecrawl.dev/blog/best-claude-code-skills. Accessed 2026-05-24. ↩
59. Anthropic, "Piloting Claude in Chrome", Anthropic News, 2025. https://www.anthropic.com/news/claude-for-chrome. Accessed 2026-05-24. ↩
60. Anthropic, "Use Claude Code with Chrome (beta)", Claude Code Documentation, 2026. https://code.claude.com/docs/en/chrome. Accessed 2026-05-24. ↩
61. Christian Bromann, "Automating a Browser with Anthropic's Computer Use to Play Tic-Tac-Toe", DEV Community, 2024. https://dev.to/christian_bromann/automating-a-browser-with-anthropics-computer-use-to-play-tic-tac-toe-3de2. Accessed 2026-05-24. ↩
62. VentureBeat, "Anthropic launches Cowork, a Claude Desktop agent that works in your files", VentureBeat, 2026. https://venturebeat.com/technology/anthropic-launches-cowork-a-claude-desktop-agent-that-works-in-your-files-no. Accessed 2026-05-24. ↩
63. Anthropic, "Introducing Claude Opus 4.5", Anthropic News, 2025-11. https://www.anthropic.com/news/claude-opus-4-5. Accessed 2026-05-24. ↩
64. Claude FA, "Every Claude Model: From Claude 3 to Mythos Preview", Claude FA, 2026. https://claudefa.st/blog/models. Accessed 2026-05-24. ↩
65. Bug0, "6 most popular Playwright MCP servers for AI testing in 2026", Bug0, 2026. https://bug0.com/blog/playwright-mcp-servers-ai-testing. Accessed 2026-05-24. ↩
66. Awesome Claude Code, "Awesome Claude Code repository", GitHub, 2026. https://github.com/hesreallyhim/awesome-claude-code. Accessed 2026-05-24. ↩
67. LobeHub, "sia819 claude-code-playwright-mcp", LobeHub, 2026. https://lobehub.com/mcp/sia819-claude-code-playwright-mcp. Accessed 2026-05-24. ↩
68. npm, "@tontoko/fast-playwright-mcp", npm, 2026. https://www.npmjs.com/package/@tontoko/fast-playwright-mcp. Accessed 2026-05-24. ↩
69. Model Context Protocol, "Model Context Protocol specification and SDKs", modelcontextprotocol.io, 2026. https://modelcontextprotocol.io/. Accessed 2026-05-24. ↩

External links

• Official Claude Code documentation
• Model Context Protocol GitHub organization
• Microsoft Playwright MCP Server repository
• ExecuteAutomation MCP Playwright repository
• Official Playwright documentation
• Playwright MCP introduction
• Anthropic Skills public repository