Provides browser automation tools with special support for Angular applications, including form submission and reactive input handling that works with Angular's framework-specific patterns.
Enables browser automation using CSS selectors for element discovery and interaction, with auto-generated selectors for all interactive elements on a page.
Allows execution of arbitrary JavaScript code in the browser context through the cdp_execute tool, providing an escape hatch for custom browser automation scenarios.
Implements a Chrome DevTools Protocol server for browser automation, requiring Node.js 18+ to run.
Provides browser automation capabilities as an alternative to Puppeteer, using direct Chrome DevTools Protocol communication instead of the Puppeteer framework wrapper.
Provides browser automation tools with special support for React applications, including form submission and controlled input handling that works with React's state management patterns.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@CDP MCPfill out the login form on example.com with my credentials"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
CDP MCP
Browser automation through Chrome DevTools Protocol. No Playwright. No Puppeteer. Just raw CDP over WebSocket.
Why
Playwright MCP runs headless — and many websites detect and block it. Chrome in Claude's computer use struggles with file uploads, making tasks like applying for jobs harder than they should be. Both are heavier and more brittle than they need to be.
CDP MCP talks directly to Chrome over DevTools Protocol, controls a real visible browser, reads the accessibility tree to discover every interactive element on the page, and verifies that interactions actually worked. More lightweight, more robust, and designed for AI agents that need to actually use the web.
Tools
Tool | What it does |
| Launch Chrome with CDP enabled |
| Connect to an existing Chrome instance |
| Go to URL, back, forward, refresh |
| Get the accessibility tree with numbered |
| Click, type, select, check, press, upload, hover, focus, submit |
| Run arbitrary JavaScript |
| Wait for elements, text, navigation, network idle |
| Capture viewport or full page |
| List, switch, close, or open tabs |
| Get, set, delete, clear cookies |
| Capture console output, JS errors, dialog info |
How it works
The core loop is two tools: snapshot and interact.
cdp_snapshot returns the page's accessibility tree — a structured view of every interactive element, each tagged with a numbered ref:
[1] button "Sign In"
[2] textbox "Email" value=""
[3] textbox "Password" value=""
[4] checkbox "Remember me" checked=false
[5] link "Forgot password?"cdp_interact accepts those [n] refs directly as selectors, along with CSS selectors and text= prefix matching:
cdp_interact(action="type", selector="[2]", value="user@example.com")
cdp_interact(action="click", selector="text=Sign In")
cdp_interact(action="click", selector="#submit-btn")Interactions are verified — if a React controlled input silently rejects your value, you'll know:
{
"success": true,
"action": "type",
"expected": "user@example.com",
"actual": "user@example.com"
}Framework handling
cdp_interact uses native property setters and dispatches the right events for React, Vue, and Angular inputs. It doesn't just set .value — it triggers the framework's internal change detection. If that fails, it falls back to CDP-level keystroke dispatch.
Installation
npm install
npm run buildAdd to your MCP config:
{
"mcpServers": {
"cdp": {
"type": "stdio",
"command": "node",
"args": ["/path/to/cdp-mcp/dist/index.js"]
}
}
}Test results
Tested against the-internet.herokuapp.com — 39 automation challenges covering forms, dynamic content, iframes, shadow DOM, drag and drop, and more. An AI agent (Claude) ran every test using only the tools above.
Test | Result |
Form Authentication | Pass |
Checkboxes | Pass |
Dropdown | Pass |
File Upload | Pass |
JS Alert | Pass |
JS Confirm | Pass |
JS Prompt | Pass |
Dynamic Controls | Pass |
Hovers (CSS :hover) | Pass |
WYSIWYG Editor (TinyMCE in iframe) | Pass |
Sortable Data Tables | Pass |
Key Presses | Pass |
Shadow DOM | Pass |
Context Menu (right-click) | Pass |
Infinite Scroll | Pass |
Dynamic Loading (render after) | Pass |
Dynamic Loading (hidden reveal) | Pass |
Nested Frames (frameset in frameset) | Pass |
Add/Remove Elements | Pass |
Disappearing Elements | Pass |
Horizontal Slider | Pass |
Inputs (number field) | Pass |
Forgot Password (form submit) | Pass |
Challenging DOM (unstable selectors) | Pass |
Status Codes (404) | Pass |
Redirect Link | Pass |
Notification Messages (flash) | Pass |
Typos (text detection) | Pass |
Floating Menu | Pass |
Broken Images (detection) | Pass |
Drag and Drop (HTML5) | Pass |
JQuery UI Menus (nested submenus) | Pass |
Geolocation (API mocking) | Pass |
A/B Testing | Pass |
Entry Ad (modal dismiss) | Pass |
Large & Deep DOM (182KB page) | Pass |
Shifting Content | Pass |
Multiple Windows | Pass |
Dynamic Content | Pass |
39/39.
Known code smells
cdp_tabsaccessesCDPClientprivate fields (port,host) viaas anycast. Works, needs proper getters.
Requirements
Node.js 18+
Chrome, Chromium, or Edge
Dependencies
ws— WebSocket client for CDPThat's it
License
Copyright (c) 2025 Cassius Oldenburg. All rights reserved.