Playwright MCP

Playwright MCP Skill

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

Installation

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

Install browsers (first time):

npx playwright install chromium

Quick Start

Start MCP Server (STDIO mode)

npx @playwright/mcp

Start with Options

# 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

# 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

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

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

# 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

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

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

Screenshot

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

Troubleshooting

# Update browsers
npx playwright install chromium
Debug mode
npx @playwright/mcp --headless=false --output-mode=stdout
Check installation
playwright-mcp --version

Links

Login to Website

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

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

Screenshot

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

# Update browsers
npx playwright install chromium
Debug mode
npx @playwright/mcp --headless=false --output-mode=stdout
Check installation
playwright-mcp --version