mcp-registry/playwright-mcp

    ==================
      
       /// MCP ///
      /// PLA ///
        
    ==================
        
    [server:online]
    [protocol:ready]

playwright-mcp

by microsoft

Playwright MCP server

14.7k
1.0k
Open Source
GitHubWebsiteNPM

Installation

1. Prerequisites
• Node.js v18 or later installed and on your PATH.
• (Optional) A modern browser (Chromium, Firefox, or WebKit) if you want to run the server locally rather than inside Docker.
2. Install the package
# as a global binary
npm install -g @playwright/mcp
# or add it to your project
npm install --save-dev @playwright/mcp
3. First-time browser download (only when installing locally)
# this pulls Playwright browser binaries
npx playwright install
4. Start the MCP server
# default port 8080
npx playwright-mcp --port 8080
# or use environment variables
PORT=8080 PLAYWRIGHT_BROWSERS_PATH=0 node node_modules/@playwright/mcp/dist/cli.js
5. Connect to the server
WebSocket URL: ws://<host>:8080/mcp
REST base URL: http://<host>:8080/v1
6. Docker alternative
docker run -p 8080:8080 mcr.microsoft.com/playwright/mcp:latest
7. Project integration (example, playwright.config.ts)
export default defineConfig({
use: {
mcpServer: {
endpoint: 'ws://localhost:8080/mcp',
},
},
});
8. Security / tokens (optional)
• Set MCP_AUTH_TOKEN=<token> before starting the server.
• When enabled, include an Authorization: Bearer <token> header in HTTP/WebSocket requests.

Documentation

# Supercharge Your Web Development with Playwright MCP + Augment Code

Transform Augment Code into a powerful web automation companion with Microsoft's Playwright MCP server. This integration brings full browser automation capabilities directly into your coding workflow, letting Augment navigate websites, interact with web elements, and execute JavaScript in real browser contexts while you develop.

## Seamless Browser Automation in Your Development Flow

With Playwright MCP connected to Augment Code, you can now ask Augment to "test this login form," "scrape product data from this e-commerce site," or "generate a test script for this user journey" – and watch as it launches browsers, navigates pages, clicks buttons, and captures results in real-time. Instead of switching between your code editor and browser developer tools, Augment becomes your intelligent browser automation assistant that can debug frontend issues, validate API responses in live environments, and even generate comprehensive Playwright test suites based on your natural language descriptions.

## Real-World Productivity Gains

This combination excels in scenarios where developers need immediate web interaction feedback. Building a React component? Ask Augment to test it across different browsers and capture screenshots. Working with a third-party API? Have Augment navigate the documentation site, extract endpoint details, and validate responses. Debugging a complex user flow? Augment can step through the entire process, logging network requests and console output. The server supports headless and headed modes, video recording, and authentication state management – making it perfect for everything from quick UI validation to comprehensive end-to-end test generation, all without leaving your development environment.

**Installation**: Add to your Augment Code MCP configuration:
```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp", "--port", "8080"]
    }
  }
}
```
License: Apache License 2.0
Updated 7/15/2025

Table of Contents