Skip to content
Claude Kit

Playwright

Playwright

Section titled “Playwright”

Playwright MCP provides browser automation using accessibility tree for fast, LLM-friendly interaction. Built by Microsoft, it enables cross-browser testing without vision models.

Configuration

Section titled “Configuration”
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Command-Line Options

Section titled “Command-Line Options”
OptionDescriptionExample
--browserBrowser to usechrome, firefox, webkit, msedge
--headlessRun without UIFlag only
--viewport-sizeWindow size1280x720
--deviceDevice emulationiPhone 15, Pixel 7

Example with options:

{
  "playwright": {
    "command": "npx",
    "args": ["-y", "@playwright/mcp", "--browser", "chrome", "--headless"]
  }
}

Available Tools

Section titled “Available Tools”
Section titled “Navigation”
ToolDescription
browser_navigateGo to a URL
browser_go_backNavigate back
browser_go_forwardNavigate forward
browser_waitWait for page load

Interaction

Section titled “Interaction”
ToolDescription
browser_clickClick element
browser_typeType text
browser_fillFill input field
browser_select_optionSelect dropdown option
browser_press_keyPress keyboard key

Content

Section titled “Content”
ToolDescription
browser_snapshotGet accessibility tree
browser_take_screenshotCapture screenshot
browser_get_textGet element text

Tabs

Section titled “Tabs”
ToolDescription
browser_tab_listList open tabs
browser_tab_newOpen new tab
browser_tab_selectSwitch to tab
browser_tab_closeClose tab

Use Cases

Section titled “Use Cases”

E2E Testing

Section titled “E2E Testing”
/test e2e Login flow should redirect to dashboard

Playwright:

  1. Navigates to login page
  2. Fills credentials
  3. Clicks submit
  4. Verifies dashboard redirect

UI Review

Section titled “UI Review”
/review Visual regression on mobile

Playwright:

  1. Opens page with device emulation
  2. Takes screenshots
  3. Compares with expected layout

Form Testing

Section titled “Form Testing”
/test Form validation for user registration

Playwright:

  1. Fills form with various inputs
  2. Tests validation messages
  3. Verifies submission behavior

Command Integration

Section titled “Command Integration”
CommandHow Playwright Helps
/testE2E browser tests
/fixReproduce UI bugs in browser
/reviewVisual verification of changes
/featureTest new UI features

Example Workflow

Section titled “Example Workflow”

Testing Login Flow

Section titled “Testing Login Flow”
// Playwright MCP workflow
browser_navigate("https://app.example.com/login")
browser_fill("#email", "test@example.com")
browser_fill("#password", "password123")
browser_click("#login-button")
browser_wait()  // Wait for navigation
browser_take_screenshot("after-login.png")

Mobile Testing

Section titled “Mobile Testing”
// With device emulation (--device "iPhone 15")
browser_navigate("https://app.example.com")
browser_snapshot()  // Get accessibility tree
browser_take_screenshot("mobile-view.png")

Key Features

Section titled “Key Features”

Accessibility Tree

Section titled “Accessibility Tree”

Playwright uses the accessibility tree instead of pixels:

  • Faster — No image processing needed
  • LLM-friendly — Structured element data
  • Cross-browser — Works identically everywhere

Device Emulation

Section titled “Device Emulation”

Test on different devices without physical hardware:

  • iPhone, iPad, Pixel, Galaxy
  • Custom viewport sizes
  • Touch vs mouse input

Profile Management

Section titled “Profile Management”

Playwright can maintain browser state across sessions for authenticated testing.

Best Practices

Section titled “Best Practices”

Use Headless Mode

Section titled “Use Headless Mode”

For automated testing, use --headless to run without UI overhead.

Wait for Elements

Section titled “Wait for Elements”

Always use browser_wait or wait for specific elements before interaction.

Accessibility First

Section titled “Accessibility First”

Use accessibility tree (browser_snapshot) to understand page structure before clicking.

Troubleshooting

Section titled “Troubleshooting”

Element Not Found

Section titled “Element Not Found”

If clicking fails:

  1. Use browser_snapshot to see available elements
  2. Check if element needs scrolling
  3. Wait for dynamic content to load

Browser Not Starting

Section titled “Browser Not Starting”
  • Ensure browser is installed
  • Check Node.js version (18+)
  • Try different browser with --browser

Resources

Section titled “Resources”