- Home
- MCP servers
- MCP Playwright CDP Server
MCP Playwright CDP Server
- typescript
47
GitHub Stars
typescript
Language
6 months ago
First Indexed
2 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
Installation
Add the following to your MCP client configuration file.
Configuration
View docs{
"mcpServers": {
"lars-hagen-mcp-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.