Playwright MCP

Overview

Playwright MCP is a Model Context Protocol server that provides browser automation capabilities powered by Microsoft's Playwright library. It enables AI agents to interact with any website, including JavaScript-heavy single-page applications (SPAs), by controlling a headless or headed Chromium, Firefox, or WebKit browser.

Playwright is known for its reliability, speed, and cross-browser support. The MCP integration brings these capabilities directly into AI agent workflows, allowing agents to navigate websites, fill forms, click buttons, extract data, take screenshots, and more.

Features

• Cross-Browser Support: Chromium, Firefox, and WebKit
• Headless or Headed Mode: Run in background or with visible browser
• Full DOM Access: Query elements, extract text, take screenshots
• Form Interaction: Fill inputs, select options, click buttons
• Network Interception: Monitor and modify network requests
• Screenshot and Video: Capture visual output
• JavaScript Execution: Run arbitrary code in browser context
• Wait and Retry Logic: Handle dynamic content reliably

Installation

npx -y @modelcontextprotocol/server-playwright

Or with uv:

uvx @modelcontextprotocol/server-playwright

Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Available Tools

Tool	Description
browser_navigate	Navigate to a URL
browser_click	Click an element by selector
browser_fill	Fill an input field
browser_select	Select an option from a dropdown
browser_screenshot	Take a screenshot of the page
browser_evaluate	Execute JavaScript in the browser
browser_get_content	Get page content and structure
browser_wait	Wait for a selector or condition
browser_close	Close the browser

Usage Examples

Navigate and Extract Content

# Navigate to a page
browser_navigate(url="https://example.com")

# Get page content
content = browser_get_content()
print(content)

Fill Forms and Submit

# Navigate to login page
browser_navigate(url="https://example.com/login")

# Fill form fields
browser_fill(selector="#username", value="myuser")
browser_fill(selector="#password", value="mypassword")

# Click submit
browser_click(selector="button[type='submit']")

# Wait for navigation
browser_wait(selector=".dashboard")

Extract Data from Dynamic Pages

# Navigate to a JavaScript-heavy site
browser_navigate(url="https://example.com/products")

# Wait for content to load
browser_wait(selector=".product-list")

# Extract product information
products = browser_evaluate(script="""
  return Array.from(document.querySelectorAll('.product')).map(el => ({
    name: el.querySelector('.name').textContent,
    price: el.querySelector('.price').textContent,
    link: el.querySelector('a').href
  }));
""")

Take Screenshots

# Navigate and screenshot
browser_navigate(url="https://example.com")
screenshot = browser_screenshot(full_page=True)
save_image(screenshot, "page.png")

Pros

• ✅ Reliable Browser Automation: Battle-tested by Microsoft
• ✅ Cross-Browser: Works with Chromium, Firefox, WebKit
• ✅ Handles JavaScript: Perfect for SPAs and dynamic content
• ✅ Fast Execution: Optimized for speed
• ✅ Rich API: Comprehensive browser control
• ✅ Screenshot Support: Visual capture for analysis

Cons

• ❌ Resource Intensive: Browser instances consume memory
• ❌ Slower than HTTP: Browser overhead vs direct API calls
• ❌ Complex Setup: Requires browser binaries
• ❌ Anti-Bot Detection: Some sites block automated browsers

When to Use

Use Playwright MCP when:

• You need to interact with JavaScript-heavy websites
• You need to fill forms and submit data
• You need to capture screenshots of web pages
• You need to test web applications
• You need to scrape dynamic content

Avoid Playwright MCP when:

• You can use a direct API instead
• You need high-volume scraping (use dedicated scrapers)
• You're on a resource-constrained environment

Resources

• Playwright Documentation
• GitHub Repository
• MCP Servers Index