QA Web Testing with Chrome DevTools MCP

Arguments

• $ARGUMENTS[0]

  — Target URL to test (e.g.

  http://localhost:3000/page

  )

• $ARGUMENTS[1]

  — (optional) Output directory for the QA report and screenshots. Defaults to

  ./qa-reports

Output Location

• Creates or updates

  $ARGUMENTS[1]/qa-report-{timestamp}.md

  (e.g.

  ./qa-reports/qa-report-2026-02-27.md

  )
• Screenshots are saved to

  $ARGUMENTS[1]/screenshots/

  (e.g.

  ./qa-reports/screenshots/page-700px.png

  )
• Run

  mkdir -p $ARGUMENTS[1]/screenshots

  before writing to ensure directories exist.

Prerequisites

1. Chrome running with remote debugging enabled (or Chrome DevTools MCP server configured)
2. Target page accessible (dev server running, or staging/production URL)
3. If the page requires authentication, attempt to find credentials from environment variables. If none are found or authentication fails, skip the test

Workflow

1. Connect to browser — List pages and navigate to target URL
2. Determine breakpoints — Choose viewport widths to test
3. Emulate and capture — Set viewport, screenshot, inspect dimensions
4. CSS inspection — Inspect computed styles and container queries
5. Report results — Summarize findings with pass/fail table

Reference Files