Browser automation and debugging MCP servers: Chrome DevTools and Playwright.
- Node.js (for
npx) - Chrome browser (for chrome-devtools)
- Playwright browsers are installed automatically via the
browser_installMCP tool (see Browser Types)
/plugin install browser-automation@claude-code-plugins| Server | Capabilities |
|---|---|
| chrome-devtools | Chrome DevTools Protocol - debugging, console access, network inspection, screenshots |
| playwright | Cross-browser automation - navigation, interaction, testing, screenshots |
The Chrome DevTools MCP server provides:
- Console message reading and filtering
- Accessibility tree snapshots (not pixel screenshots - use Playwright for visual captures)
- Network request inspection
- JavaScript execution
- DOM manipulation
The server auto-launches Chrome if no instance is found on the configured CDP port. To connect to an existing Chrome, start it with chrome --remote-debugging-port=9222. See Chrome DevTools MCP documentation for details.
The Playwright MCP server provides:
- Cross-browser automation (Chromium, Firefox, WebKit)
- Page navigation and interaction
- Element selection and manipulation
- Screenshot and PDF generation
- Network interception
| Variable | Default | Description |
|---|---|---|
CHROME_CHANNEL |
stable |
Chrome channel: stable, canary, beta, dev |
CHROME_CDP_PORT |
9222 |
Chrome DevTools Protocol debugging port |
| Variable | Default | Description |
|---|---|---|
PLAYWRIGHT_BROWSER |
chromium |
Browser: chromium, firefox, webkit, msedge |
PLAYWRIGHT_VIEWPORT |
1280,720 |
Viewport dimensions (width,height) |
Both servers support boolean flags that are present when enabled, absent when disabled. These cannot be configured via environment variables - you must edit the .mcp.json file directly.
The plugin defaults to headed mode with a persistent profile - ideal for development:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--browser", "chromium", "--viewport-size", "1280,720"]
}
}
}Add --headless for environments without a display:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--headless", "--browser", "chromium"]
}
}
}Add --isolated to use a temporary profile that's deleted on close:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--isolated", "--browser", "chromium"]
}
}
}For Docker or sandboxed environments, combine --headless, --isolated, and --no-sandbox:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--headless", "--isolated", "--no-sandbox"]
}
}
}| Flag | Description |
|---|---|
--headless |
Run without visible browser UI |
--isolated |
Use temporary profile (deleted on close) |
--no-sandbox |
Disable browser sandbox (required in some containers) |
--browser=<name> |
Browser: chromium, firefox, webkit, msedge |
--channel=<name> |
Chrome channel: stable, canary, beta, dev |
--viewport-size=<W,H> |
Viewport size (e.g., 1920,1080) |
--caps=<list> |
Enable capabilities: vision, pdf, testing |
See npx @playwright/mcp@latest --help for full options.
Playwright supports two categories of browsers:
These browsers are downloaded and managed by Playwright. You must install them before use:
npx playwright install chromium # Default browser
npx playwright install firefox
npx playwright install webkit| Browser | Install Required | Notes |
|---|---|---|
chromium |
Yes | Default. Open-source Chromium build managed by Playwright |
firefox |
Yes | Firefox build managed by Playwright |
webkit |
Yes | WebKit build managed by Playwright |
These use browsers already installed on your system:
# No install needed - just set the env var
PLAYWRIGHT_BROWSER=msedge # Microsoft Edge
PLAYWRIGHT_BROWSER=chrome # Google Chrome| Browser | Install Required | Notes |
|---|---|---|
msedge |
No | Uses system Microsoft Edge |
chrome |
No | Uses system Google Chrome |
To override the default browser, set PLAYWRIGHT_BROWSER in your settings.local.json:
{
"env": {
"PLAYWRIGHT_BROWSER": "msedge"
}
}The plugin includes a SessionStart hook that checks whether the configured Playwright browser is installed. If missing, it injects context instructing Claude to call the Playwright MCP server's built-in browser_install tool for automatic self-recovery.
- Self-recovering — Claude will call
browser_installautomatically when the browser is missing - The hook never blocks session startup
- Disable it by setting
CLAUDE_HOOK_BROWSER_PREREQ_CHECK_ENABLED=0in your settings
The Playwright MCP server includes a built-in browser_install tool that downloads and installs the configured browser. Claude calls this automatically when the startup hook detects a missing browser.
Manual alternative: npx playwright install chromium
This error means Playwright's managed browser binaries have not been downloaded. The startup hook should trigger automatic installation via the browser_install MCP tool. If it doesn't:
- Call the
browser_installtool directly via MCP - Or run
npx playwright install chromiummanually - Or switch to a system browser: set
PLAYWRIGHT_BROWSER=msedgeinsettings.local.json
On Windows, Chrome often runs as a background process. If the CDP port is occupied, quit Chrome fully or set a different port via CHROME_CDP_PORT.
Browser dialogs (alerts, confirms, prompts) block all further browser events. Avoid triggering these or dismiss them before proceeding with automation.
Use GIF recording for multi-step interactions that users may want to review. Capture extra frames before and after actions for smooth playback.
- code-quality: Code review and testing
- claude-ecosystem: Core Claude Code functionality
MIT