e2e-chrome-devtools

Chrome DevTools Smoke Test

Run a structured visual smoke test against a running web application using the Chrome DevTools MCP server. This connects to the user's real Chrome browser (with sessions, cookies, extensions) — unlike Playwright which opens a headless browser.

When to use this vs Playwright MCP

Scenario	Tool
Debug app with logged-in session	Chrome DevTools MCP
Inspect console/network in real time	Chrome DevTools MCP
Lighthouse audit, perf trace, heap snapshot	Chrome DevTools MCP
Automated E2E test suite (CI)	Playwright MCP
Headless screenshot comparison	Playwright MCP

Prerequisites

The chrome-devtools MCP server must be configured in .mcp.json:

{
  "chrome-devtools": {
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
  }
}

Chrome must be running with DevTools Protocol enabled. The --autoConnect flag handles this automatically.

Workflow

Phase 1: Discovery

Understand what's available before testing.

1. Load tools — Call ToolSearch for all mcp__chrome-devtools__* tools
2. List pages — list_pages to see what's already open in Chrome
3. Detect app — Check if the app is running locally (try common ports: 3000, 3700, 4000, 5173, 8080) or use a production URL already open in a tab
4. Plan routes — Identify key pages to test based on the project structure (glob for **/page.tsx or similar)

Phase 2: Page-by-Page Smoke

For each target page, execute this sequence:

navigate_page(url)
  → take_screenshot(filePath, fullPage: true)
  → take_snapshot()                           # a11y tree with UIDs
  → list_console_messages(types: ["error", "warn"])
  → list_network_requests(resourceTypes: ["fetch", "xhr"])

Save screenshots to /tmp/smoke-NN-description.png.

Key pages to test (adapt to the project):

• Landing / home page
• Login page
• Main dashboard (if logged in)
• A detail/form page
• A list/table page