浏览器 QA — 自动视觉测试与交互¶
使用时机¶
- 在将功能部署到预发布/预览环境后
- 需要验证整个页面的 UI 行为时
- 发布前 — 确认布局、表单和交互确实可用
- 审查涉及前端代码的 PR 时
- 可访问性审计和响应式测试
工作原理¶
使用浏览器自动化 MCP(claude-in-chrome、Playwright 或 Puppeteer),像真实用户一样与实时页面进行交互。
阶段 1:冒烟测试¶
1. ターゲットURLに移動
2. コンソールエラーをチェック(ノイズをフィルター:分析、サードパーティ)
3. ネットワークリクエストで4xx/5xxがないことを確認
4. デスクトップ+モバイルビューポート上の上にスクリーンショット
5. Core Web Vitalsをチェック:LCP < 2.5s、CLS < 0.1、INP < 200ms
阶段 2:交互测试¶
1. すべてのnavリンクをクリック — デッドリンクがないことを確認
2. 有効なデータでフォームを送信 — 成功状態を確認
3. 無効なデータでフォームを送信 — エラー状態を確認
4. 認証フローをテスト:ログイン→保護されたページ→ログアウト
5. 重要なユーザージャーニーをテスト(チェックアウト、オンボーディング、検索)
阶段 3:视觉回归¶
1. 3つのブレークポイント(375px、768px、1440px)でキーページのスクリーンショット
2. ベースラインスクリーンショット(保存されている場合)と比較
3. レイアウトシフト> 5px、要素の欠落、オーバーフローにフラグを立てる
4. 該当する場合はダークモードをチェック
阶段 4:可访问性¶
1. 各ページでaxe-coreまたは同等のものを実行
2. WCAG AAの違反にフラグを立てる(コントラスト、ラベル、フォーカス順)
3. キーボードナビゲーションがエンドツーエンドで機能することを確認
4. スクリーンリーダーランドマークをチェック
输出格式¶
## QA Report — [URL] — [timestamp]
### Smoke Test
- ✓ ページが読み込まれる
- ✗ コンソールエラー:オプト不可なトラッキング警告
- ✓ Core Web Vitals OK
- [スクリーンショット]
### 相互作用テスト
- ✓ ナビゲーション機能
- ✓ フォーム検証
- ✗ モバイルメニューが開かない
### ビジュアル回帰
- ✓ デスクトップレイアウト
- ✗ モバイルで画像がオーバーフロー
### アクセシビリティ
- 1 WCAG AA: コントラスト違反
- 0 WCAG A違反
集成¶
- 与
/benchmark配对以确认性能 - 与
/canary-watch配对以自动化部署后监控 - 集成到 Pull Request 工作流中,捕获前端 PR
本页原文 Markdown:在 AtomGit 查看·内容源自开源项目 ev/ECC