Chrome Devtools Screencast

Chrome DevTools Screencast

Capture visual output from a live Chrome browser using screenshot and screencast MCP tools.

When to Use

• Verifying UI state during agent-driven test flows ("did the modal appear?")
• Bug reproduction: capture sequence of frames leading to a visual glitch
• Visual regression: screenshot before/after a code change
• Recording a screencast of an agent interacting with a web app (demo/audit trail)
• Capturing responsive layout at different viewport sizes

Do NOT use for

• Video encoding for delivery (output is raw frames — use ffmpeg to encode)
• Replacing automated visual diff tools like Percy (for PR-level regression at scale)
• Screenshots of terminal / non-browser content

MCP Tools

browser_screenshot          — capture current page as PNG (base64 or file path)
browser_start_screencast    — begin frame capture (configurable fps, quality)
browser_stop_screencast     — stop capture, returns frame sequence + metadata

Usage Pattern

# Single screenshot — state verification
1. browser_navigate: url: "https://app.example.com/dashboard"
2. browser_wait_for: selector: "[data-testid='dashboard-loaded']"
3. browser_screenshot:
     fullPage: true
     path: "./screenshots/dashboard.png"

# Screencast — record agent interaction
1. browser_start_screencast:
     fps: 10
     quality: 80          # 0–100 JPEG quality
     maxWidth: 1280

2. browser_navigate: url: "https://app.example.com"
3. browser_click: selector: "#open-modal"
4. browser_wait_for: selector: ".modal-visible"
5. browser_fill: selector: ".modal input", value: "test data"
6. browser_click: selector: ".modal .submit"

7. browser_stop_screencast:
   # → returns: frames[], duration, frameCount, outputDir

Screenshot Response

{
  "data": "<base64-encoded-PNG>",
  "path": "./screenshots/dashboard.png",
  "width": 1280,
  "height": 800,
  "timestamp": "2026-05-23T10:42:11Z"
}

Visual Regression Workflow

# Baseline capture
browser_screenshot: path: "./baselines/homepage-baseline.png"

# After code change
browser_screenshot: path: "./current/homepage-current.png"

# Compare (use pixelmatch or looks-same CLI)
pixelmatch baselines/homepage-baseline.png current/homepage-current.png diff.png
# → reports pixel difference percentage
# PASS if diff < 0.1%, REVIEW if 0.1–1%, FAIL if > 1%

Device + Screenshot Combo

# Test responsive layout at multiple breakpoints
for device in ["iPhone 14 Pro", "iPad Pro", "Desktop HD"]:
  browser_emulate_device: device: device
  browser_screenshot: path: "./screenshots/${device}.png"

Anti-Fake-Pass Checklist

• Screenshot taken AFTER browser_wait_for — not immediately after navigate
• fullPage: true used when testing layouts (viewport-only misses below-fold)
• Screencast frame count > 0 before declaring recording successful
• Output path written to disk and verified readable (not just base64 in memory)
• Visual diff run against actual baseline — not "looks fine to me" manual review