Home / MCP / MCP Playwright CDP Server

MCP Playwright CDP Server

Provides browser automation with Playwright and CDP support to connect to running Chrome instances for real-browser testing and interactions.

javascript

40stars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
    "mcpServers": {
        "playwright_cdp": {
            "command": "node",
            "args": [
                "/path/to/mcp-playwright/dist/index.js"
            ]
        }
    }
}

MCP Playwright CDP lets you automate real browsers via Playwright with Chrome DevTools Protocol support. You can connect to running Chrome instances, interact with web pages, take screenshots, fill forms, and execute JavaScript in the browser from your MCP client.

How to use

Use an MCP client to connect to the Playwright CDP server and perform browser automation tasks. You can connect to an existing Chrome instance via CDP, navigate pages, click elements, fill out forms, capture screenshots, and run JavaScript in the browser context. You also get access to console logs and can test HTTP endpoints against the browser environment.

How to install

Prerequisites: Install Node.js and npm on your system. You may also install the MCP client tooling if you plan to use an integration workflow that supports MCP servers.

Option A: Install via Smithery (for Claude Desktop) automatically.

npx -y @smithery/cli install @lars-hagen/mcp-playwright-cdp --client claude

Option B: Manual installation if you manage dependencies yourself.

npm install

Configure the server by adding the MCP server entry below to your client configuration. This example uses a local runtime path to the built server.

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": ["/path/to/mcp-playwright/dist/index.js"]
    }
  }
}

CDP connection

You can connect to a running Chrome instance that has remote debugging enabled. Start Chrome with remote debugging on a chosen port, then run the MCP Playwright CDP server. The server will try to attach to the existing Chrome instance first and will fall back to launching a new browser if needed.

To enable remote debugging on Chrome, start it with:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Notes

This MCP server provides a bridge between your MCP client and a real browser environment. Use it to perform end-to-end web automation tasks, capture screenshots, and verify behaviors within an actual Chrome context.

Credits

This project is a fork that adds CDP support for connecting to running Chrome instances and extends browser automation capabilities.

License

This project is licensed under the MIT License.

Available tools

connectToCDP

Attach to an existing Chrome instance via CDP so you can control a real browser session.

navigate

Navigate to URLs, wait for page load, and manage navigation state.

clickElement

Click on page elements, handle interactions like form submissions and button presses.

fillForm

Fill form fields with provided values and submit forms as part of automation flows.

takeScreenshot

Capture screenshots of full pages or specific elements for verification or reporting.

getConsoleLogs

Monitor and retrieve browser console output during automation sessions.

executeJS

Run JavaScript in the browser context and retrieve results.

httpApiTest

Test HTTP endpoints from within the browser automation context to validate responses.