e2e-chrome-devtoolslisted

Visual smoke test using Chrome DevTools MCP against a running web app (local or production). Navigates key pages, captures screenshots, inspects console errors, network failures, runs Lighthouse audits, tests mobile/dark-mode emulation, and traces performance. Use this skill whenever the user says "smoke test", "visual test with chrome", "chrome devtools test", "visual QA", "devtools smoke", "visual e2e", "test with real browser", "test no chrome", "teste visual", "smoke visual", or wants to audit a running app through the real Chrome browser (not Playwright). Also use when the user asks to check console errors, network failures, or Lighthouse scores on a live page via Chrome DevTools MCP.
parisgroup-ai/imersao-ia-setup · ★ 1 · Testing & QA · score 77

Install: claude install-skill parisgroup-ai/imersao-ia-setup

# 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`: ```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