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
code
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
code
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
code
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
code
browser_navigate: { url: "https://example.com/data" }
browser_evaluate: {
script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }"
}
Screenshot
code
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-sandboxwith 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