Back to Details

browser-qa

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Browser QA — Automated Visual Testing & Interaction

浏览器QA — 自动化视觉测试与交互

When to Use

适用场景

  • After deploying a feature to staging/preview
  • When you need to verify UI behavior across pages
  • Before shipping — confirm layouts, forms, interactions actually work
  • When reviewing PRs that touch frontend code
  • Accessibility audits and responsive testing
  • 功能部署到预发/预览环境后
  • 需要跨页面验证UI行为时
  • 发布前 —— 确认布局、表单、交互可正常运行
  • 审核涉及前端代码的PR时
  • 无障碍审计和响应式测试

How It Works

工作原理

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.
使用浏览器自动化MCP（claude-in-chrome、Playwright或Puppeteer），像真实用户一样与线上页面交互。

Phase 1: Smoke Test

第一阶段：冒烟测试

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

第二阶段：交互测试

1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout
5. Test critical user journeys (checkout, onboarding, search)
1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout
5. Test critical user journeys (checkout, onboarding, search)

Phase 3: Visual Regression

第三阶段：视觉回归测试

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable
1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Phase 4: Accessibility

第四阶段：无障碍测试

1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks
1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Output Format

输出格式

markdown
undefined
markdown
undefined

QA Report — [URL] — [timestamp]

QA Report — [URL] — [timestamp]

Smoke Test

Smoke Test

  • Console errors: 0 critical, 2 warnings (analytics noise)
  • Network: all 200/304, no failures
  • Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓
  • Console errors: 0 critical, 2 warnings (analytics noise)
  • Network: all 200/304, no failures
  • Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

Interactions

Interactions

  • [✓] Nav links: 12/12 working
  • [✗] Contact form: missing error state for invalid email
  • [✓] Auth flow: login/logout working
  • [✓] Nav links: 12/12 working
  • [✗] Contact form: missing error state for invalid email
  • [✓] Auth flow: login/logout working

Visual

Visual

  • [✗] Hero section overflows on 375px viewport
  • [✓] Dark mode: all pages consistent
  • [✗] Hero section overflows on 375px viewport
  • [✓] Dark mode: all pages consistent

Accessibility

Accessibility

  • 2 AA violations: missing alt text on hero image, low contrast on footer links
  • 2 AA violations: missing alt text on hero image, low contrast on footer links

Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

undefined
undefined

Integration

集成支持

Works with any browser MCP:
  • mChild__claude-in-chrome__*
    tools (preferred — uses your actual Chrome)
  • Playwright via 
    mcp__browserbase__*
  • Direct Puppeteer scripts
Pair with 
/canary-watch
for post-deploy monitoring.
支持与任意浏览器MCP搭配使用：
  • mChild__claude-in-chrome__*
    工具（首选 —— 调用你本地实际的Chrome浏览器）
  • 通过
    mcp__browserbase__*
    调用Playwright
  • 直接运行Puppeteer脚本
可搭配
/canary-watch
实现部署后监控。