playwright

tuantiensiu's avatarfrom tuantiensiu

Browser automation with Playwright MCP. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows. Use when user wants to test websites or automate browser interactions.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Web Automation]

When & Why to Use This Skill

The Playwright Claude skill enables powerful browser automation and web testing capabilities directly through the Model Context Protocol (MCP). It allows users to programmatically navigate websites, interact with UI elements, capture high-resolution screenshots, and validate responsive designs. By providing tools for element snapshots and accessibility trees, it empowers developers and QA teams to automate complex web workflows, audit user experiences, and perform end-to-end testing without leaving the AI interface.

Use Cases

  • Automated Functional Testing: Streamline QA processes by automating login flows, form submissions, and multi-step user journeys to ensure web application stability.
  • Responsive Design & UI Auditing: Capture and compare screenshots across different device viewports (e.g., iPhone 13 vs. Desktop) to verify visual consistency and mobile-friendliness.
  • UX & Accessibility Analysis: Utilize page snapshots to inspect the DOM structure and accessibility tree, helping to identify and fix user experience bottlenecks.
  • Web Interaction & Data Capture: Automate repetitive browser tasks such as navigating to specific URLs, clicking elements based on snapshots, and capturing visual evidence of web content.
nameplaywright
descriptionBrowser automation with Playwright MCP. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows. Use when user wants to test websites or automate browser interactions.

Playwright Browser Automation (MCP)

Browser automation via Playwright MCP server for testing and automation.

Available Tools

  • browser_navigate - Navigate to URL
  • browser_snapshot - Get page accessibility snapshot with element refs
  • browser_take_screenshot - Capture screenshot
  • browser_click - Click element by ref
  • browser_type - Type text (appends to existing)
  • browser_fill - Fill input (clears first, then types)
  • browser_wait_for - Wait for text or selector
  • browser_resize - Resize viewport or emulate device

Workflow

  1. Navigate to the target URL using browser_navigate
  2. Snapshot to see page structure and element refs using browser_snapshot
  3. Interact using element refs from snapshot (browser_click, browser_fill)
  4. Screenshot to capture results using browser_take_screenshot

Quick Start

# Navigate to page
skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "https://example.com"}')

# Get page structure with element refs
skill_mcp(skill_name="playwright", tool_name="browser_snapshot")

# Click element (use ref from snapshot)
skill_mcp(skill_name="playwright", tool_name="browser_click", arguments='{"element": "Submit button", "ref": "e123"}')

# Fill input field
skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Email", "ref": "e456", "text": "test@example.com"}')

# Take screenshot
skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/result.png"}')

Examples

Test Responsive Design

# Navigate
skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "http://localhost:3000"}')

# Desktop
skill_mcp(skill_name="playwright", tool_name="browser_resize", arguments='{"width": 1920, "height": 1080}')
skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/desktop.png"}')

# Mobile
skill_mcp(skill_name="playwright", tool_name="browser_resize", arguments='{"device": "iPhone 13"}')
skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/mobile.png"}')

Fill a Form

# Navigate to form
skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "http://localhost:3000/contact"}')

# Get element refs
skill_mcp(skill_name="playwright", tool_name="browser_snapshot")

# Fill fields (use refs from snapshot)
skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Name", "ref": "e12", "text": "John Doe"}')
skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Email", "ref": "e34", "text": "john@example.com"}')

# Submit
skill_mcp(skill_name="playwright", tool_name="browser_click", arguments='{"element": "Submit", "ref": "e56"}')

# Wait for confirmation
skill_mcp(skill_name="playwright", tool_name="browser_wait_for", arguments='{"text": "Thank you", "timeout": 5000}')

Tips

  • Always snapshot first to get element refs before interacting
  • Use descriptive element names in click/fill for clarity
  • Save screenshots to /tmp for easy access
  • Use device presets for accurate mobile emulation
  • Chain wait_for after navigation for dynamic pages

Server Options

For advanced usage, modify mcp.json:

{
  "playwright": {
    "command": "npx",
    "args": ["@playwright/mcp@latest", "--headless", "--browser=firefox"],
    "includeTools": ["browser_navigate", "browser_snapshot", "..."]
  }
}

Common options:

  • --headless - Run without visible browser
  • --browser=chrome|firefox|webkit - Choose browser
  • --device="iPhone 13" - Emulate device

Note: This skill loads 8 essential tools. For full 17+ tools (tabs, PDF, evaluate, drag), modify mcp.json to add more tools to includeTools.