CtrlK
Template:Infobox software
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 Playwright test automation framework through the Model Context Protocol (MCP). This 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 "vision" into web applications without relying on screenshot-based 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]
The integration consists of three main components that work together to provide AI-driven browser automation:
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.[9][10]
Playwright was released by Microsoft in 2020 as an evolution of the Puppeteer project, gaining rapid adoption for cross-browser testing with built-in test runner, assertions, tracing, and parallelization capabilities.[11]
Claude Code was introduced by Anthropic in early 2025 as a terminal-based agentic coding tool designed to accelerate software development. It integrates with Claude 3.5 Sonnet and newer models to perform tasks like mapping entire codebases in seconds and executing routine coding operations.[12][13]
The Model Context Protocol was open-sourced by Anthropic on November 25, 2024, as a standard for connecting AI assistants to external systems.[8] Following this release, ExecuteAutomation and Microsoft developed Playwright MCP server implementations to enable browser automation capabilities for Claude and other AI systems.[10][14]
The integration of Claude Code with Playwright MCP was first documented in July 2025 by developer Simon Willison, who detailed how to add the MCP server to Claude Code for browser automation tasks.[4] Subsequent tutorials expanded on its use for self-correcting AI workflows, such as fixing UI bugs in real-time and generating Playwright tests.[15] By mid-2025, it had become a key technique for enhancing AI-driven web development.
| Component | Description | Function |
|---|---|---|
| Claude Code CLI | Command-line interface for AI coding assistance | Processes natural language commands and generates code |
| MCP Server | Middleware implementing the Model Context Protocol | Bridges communication between AI and browser |
| Playwright Core | Browser automation framework | Controls actual browser interactions |
| JSON-RPC | Communication protocol | Facilitates message passing between components |
| Accessibility Tree | Structured page representation | Provides deterministic element identification |
Unlike traditional Playwright automation that relies on CSS selectors or XPath expressions, the Playwright MCP uses a dynamic element identification system:[16]
This approach enables Claude to "see" the browser output and iterate on code by identifying visual or functional issues and generating fixes autonomously.[3]
The Playwright MCP server provides several tools accessible through Claude:[18]
| Tool Name | Function | Parameters |
|---|---|---|
| browser_navigate | Navigates to specified URLs | url (string) |
| browser_click | Performs click actions on elements | selector (string), options (object) |
| browser_fill | Fills form fields with data | selector (string), value (string) |
| browser_snapshot | Captures structured snapshot of current page | None |
| browser_screenshot | Takes screenshot of page | path (string), fullPage (boolean) |
| browser_generate_pdf | Generates PDF of current page | path (string) |
| browser_execute_js | Executes custom JavaScript on page | script (string) |
| get_context | Retrieves page accessibility tree | None |
| launch_browser | Opens new browser instance | headless (boolean), channel (string) |
Playwright supports multiple first-party client libraries that Claude Code can target by adjusting prompts and file paths:[7]
| Language | Package/Artifact | Example Run Command | Installation |
|---|---|---|---|
| TypeScript/JavaScript | @playwright/test | npx playwright test |
npm init playwright@latest
|
| Python | playwright + pytest | pytest |
pip install playwright pytest-playwright
|
| .NET (C#) | Microsoft.Playwright | dotnet test |
dotnet add package Microsoft.Playwright
|
| Java | com.microsoft.playwright | mvn test / gradle test |
Maven/Gradle dependency |
# Install globally npm install -g @executeautomation/playwright-mcp-server # Or use with npx npx @executeautomation/playwright-mcp-server
Add Playwright MCP to Claude Code using the command:[4]
# Initialize Playwright in project npm init playwright@latest # Add MCP server to Claude Code 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
This persists the configuration in `~/.claude.json`.
Add to `claude_desktop_config.json`:[19]
{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@executeautomation/playwright-mcp-server"] } } }
Create `.mcp.json` in project root:[20]
{ "mcpServers": { "playwright": { "type": "stdio", "command": "npx", "args": ["@playwright/mcp@latest"], "env": { "HEADLESS": "false", "BROWSER": "chromium" } } } }
For scalable headless deployment:
FROM mcr.microsoft.com/playwright:v1.40.0-focal RUN npm install -g @playwright/mcp@latest ENTRYPOINT ["npx", "@playwright/mcp@latest"]
To generate a Playwright test using Claude Code:[1]
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
These illustrate natural-language tasks developers often ask Claude Code to perform with Playwright:[2]
Store reusable test templates in `.claude/commands/` directory:[21]
# .claude/commands/test-login.md
Test user authentication flow with following steps:
$ARGUMENTS
The Claude Code Playwright integration supports YAML-based test definitions:[16]
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"
Below is a minimal Playwright test that Claude Code could generate or edit:[22]
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'); }); });
| Practice | Description | Example |
|---|---|---|
| Page Object Model | Encapsulate page interactions in reusable classes | LoginPage, CheckoutPage classes |
| Test Fixtures | Share common setup between tests | Authentication, database seeding |
| Parameterized Steps | Create flexible, reusable step libraries | Generic click, fill, verify functions |
| Environment Configuration | Support multiple test environments | dev/staging/production configs |
| Session Management | Maintain browser state efficiently | Persistent auth contexts |
| Parallel Execution | Run tests concurrently for speed | Sharding, worker configuration |
Companies and organizations using Claude Code Playwright include:
Although not required for this workflow, teams can connect Playwright-related tools or repositories to Claude via the Model Context Protocol (MCP) so the assistant can fetch code, open issues, or retrieve documentation through standardized tool connectors. This enables:[28]