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：冒烟测试

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. 导航至目标URL
2. 检查控制台错误（过滤干扰信息：分析工具、第三方脚本）
3. 验证网络请求中无4xx/5xx错误
4. 在桌面和移动端视口截取首屏截图
5. 检查核心Web指标：LCP < 2.5s，CLS < 0.1，INP < 200ms

Phase 2: Interaction Test

阶段2：交互测试

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. 点击所有导航链接——验证无死链
2. 提交含有效数据的表单——验证成功状态
3. 提交含无效数据的表单——验证错误状态
4. 测试认证流程：登录→受保护页面→登出
5. 测试关键用户旅程（结账、注册、搜索）

Phase 3: Visual Regression

阶段3：视觉回归测试

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. 在3个断点（375px、768px、1440px）截取关键页面截图
2. 与基准截图对比（若已存储）
3. 标记布局偏移>5px、元素缺失、内容溢出的情况
4. 若支持则检查深色模式

Phase 4: Accessibility

阶段4：可访问性测试

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. 在每个页面运行axe-core或同类工具
2. 标记WCAG AA违规项（对比度、标签、焦点顺序）
3. 验证键盘导航全程可用
4. 检查屏幕阅读器地标

Output Format

输出格式

markdown
undefined
markdown
undefined

QA Report — [URL] — [timestamp]

QA报告 — [URL] — [时间戳]

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 ✓
  • 控制台错误：0个严重错误，2个警告（分析工具干扰）
  • 网络请求：全部为200/304，无失败
  • 核心Web指标：LCP 1.2s ✓，CLS 0.02 ✓，INP 89ms ✓

Interactions

交互测试

  • [✓] Nav links: 12/12 working
  • [✗] Contact form: missing error state for invalid email
  • [✓] Auth flow: login/logout working
  • [✓] 导航链接：12/12可用
  • [✗] 联系表单：无效邮箱未显示错误状态
  • [✓] 认证流程：登录/登出功能正常

Visual

视觉测试

  • [✗] Hero section overflows on 375px viewport
  • [✓] Dark mode: all pages consistent
  • [✗] 首页英雄区在375px视口下内容溢出
  • [✓] 深色模式：所有页面显示一致

Accessibility

可访问性测试

  • 2 AA violations: missing alt text on hero image, low contrast on footer links
  • 2项AA违规：英雄图片缺少替代文本，页脚链接对比度不足

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

结论：修复后上线（2个问题，0个阻塞项）

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
进行部署后监控。