Playwright MCP

Browser automation via Playwright MCP server. Navigate websites, click elements, fill forms, extract data, take screenshots, and perform full browser automation workflows.

Playwright MCP Skill

Browser automation powered by Playwright MCP server. Control Chrome, Firefox, or WebKit programmatically.

Installation

bash

npm install -g @playwright/mcp
# Or
npx @playwright/mcp

Install browsers (first time):

bash

npx playwright install chromium

Quick Start

Start MCP Server (STDIO mode)

bash

npx @playwright/mcp

Start with Options

bash

# Headless mode
npx @playwright/mcp --headless

# Specific browser
npx @playwright/mcp --browser firefox

# With viewport
npx @playwright/mcp --viewport-size 1280x720

# Ignore HTTPS errors
npx @playwright/mcp --ignore-https-errors

Common Use Cases

1. Navigate and Extract Data

python

# MCP tools available:
# - browser_navigate: Open URL
# - browser_click: Click element
# - browser_type: Type text
# - browser_select_option: Select dropdown
# - browser_get_text: Extract text content
# - browser_evaluate: Run JavaScript
# - browser_snapshot: Get page structure
# - browser_close: Close browser

2. Form Interaction

text

1. browser_navigate to form URL
2. browser_type into input fields
3. browser_click to submit
4. browser_get_text to verify result

3. Data Extraction

text

1. browser_navigate to page
2. browser_evaluate to run extraction script
3. Parse returned JSON data

MCP Tools Reference

Tool	Description
browser_navigate	Navigate to URL
browser_click	Click element by selector
browser_type	Type text into input
browser_select_option	Select dropdown option
browser_get_text	Get text content
browser_evaluate	Execute JavaScript
browser_snapshot	Get accessible page snapshot
browser_close	Close browser context
browser_choose_file	Upload file
browser_press	Press keyboard key

Configuration Options

bash

# Security
--allowed-hosts example.com,api.example.com
--blocked-origins malicious.com
--ignore-https-errors

# Browser settings
--browser chromium|firefox|webkit
--headless
--viewport-size 1920x1080
--user-agent "Custom Agent"

# Timeouts
--timeout-action 10000      # Action timeout (ms)
--timeout-navigation 30000  # Navigation timeout (ms)

# Output
--output-dir ./playwright-output
--save-trace
--save-video 1280x720

Examples

Login to Website

text

browser_navigate: { url: "https://example.com/login" }
browser_type: { selector: "#username", text: "user" }
browser_type: { selector: "#password", text: "pass" }
browser_click: { selector: "#submit" }
browser_get_text: { selector: ".welcome-message" }

Extract Table Data

text

browser_navigate: { url: "https://example.com/data" }
browser_evaluate: { 
  script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" 
}

Screenshot

text

browser_navigate: { url: "https://example.com" }
browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" }
# Screenshot saved via --output-dir or returned in response

Security Notes

• By default restricts file system access to workspace root
• Host validation prevents navigation to untrusted domains
• Sandboxing enabled by default (use --no-sandbox with caution)
• Service workers blocked by default

Troubleshooting

bash

# Update browsers
npx playwright install chromium

# Debug mode
npx @playwright/mcp --headless=false --output-mode=stdout

# Check installation
playwright-mcp --version

Links

• Playwright Docs
• MCP Protocol
• NPM Package