Browser QA — 自動化視覺測試與互動
使用時機
- 將功能部署到暫存/預覽環境之後
- 需要跨頁面驗證 UI 行為時
- 出貨前 — 確認佈局、表單、互動的實際運作
- 審查涉及前端程式碼的 PR 時
- 無障礙審計與響應式測試
運作方式
使用瀏覽器自動化 MCP（claude-in-chrome、Playwright 或 Puppeteer）像真實使用者一樣與線上頁面互動。
安全第一 — 爆炸半徑（預設唯讀執行）
Browser QA 會驅動真實的認證與使用者流程，因此需明確處理爆炸半徑。 預設為唯讀：絕不對生產 URL 執行會變更狀態的流程（結帳、付款、刪除、大量更新）— 需要明確的選擇加入以及暫存/預覽 URL。使用種子測試憑證，切勿使用真實的生產登入資訊，並在儲存任何螢幕截圖前遮罩憑證/令牌/PII。
階段 1：煙霧測試
1. 導航至目標 URL
2. 檢查主控台錯誤（過濾雜訊：分析工具、第三方）
3. 確認網路請求中無 4xx/5xx
4. 在桌面與行動裝置視埠擷取網頁首屏截圖
5. 檢查 Core Web Vitals：LCP < 2.5s、CLS < 0.1、INP < 200ms
（INP 於 2024 年 3 月取代 FID；閾值依 web.dev 規範）
階段 2：互動測試
1. 點擊每個導航連結 — 確認無死連結
2. 使用有效資料提交表單 — 確認成功狀態
3. 使用無效資料提交表單 — 確認錯誤狀態
4. 測試認證流程：登入 → 受保護頁面 → 登出（僅使用測試憑證，絕不使用正式帳號）
5. 測試關鍵使用者旅程（結帳、入職引導、搜尋）
— 預設唯讀；僅在明確選擇加入且針對暫存環境時，才執行會變更狀態的流程
（參見上方「安全第一」）
階段 3：視覺回歸
1. 在 3 個斷點（375px、768px、1440px）擷取關鍵頁面的螢幕截圖
2. 與已提交的基準螢幕截圖進行比較
— 無基準 ⇒ 回報「無法判斷」，切勿無聲通過
3. 標記超過 5px 的佈局位移、遺失元素、超出範圍
4. 檢查深色模式（如適用）
階段 4：無障礙性
1. 在每個頁面上執行 axe-core 或同等工具
2. 標記 WCAG 2.2 AA 違規（對比度、標籤、焦點順序）
3. 驗證鍵盤導航能完整運作
4. 檢查螢幕閱讀器地標
注意：axe-core 自動涵蓋 WCAG 約 30–40%。檢測通過是必要但不充分條件 — 鍵盤導航、焦點順序與螢幕閱讀器測試仍需手動檢查。請勿僅因自動檢測通過就回報「可無障礙存取」。
輸出格式
## QA 報告 — [URL] — [時間戳]
### 煙霧測試
- 主控台錯誤：0 個重大錯誤，2 個警告（分析工具雜訊）
- 網路：全部 200/304，無失敗
- Core Web Vitals：LCP 1.2s ✓、CLS 0.02 ✓、INP 89ms ✓
### 互動
- [✓] 導航連結：12/12 正常運作
- [✗] 聯絡表單：無效電子郵件遺失錯誤狀態
- [✓] 認證流程：登入/登出正常運作
### 視覺
- [✗] Hero 區塊在 375px 視埠下超出範圍
- [✓] 深色模式：所有頁面一致
### 無障礙性
- 2 項 AA 違規：Hero 圖片缺少替代文字、頁尾連結對比度不足
### 結論：附修正出貨（2 個問題，0 個阻擋）
# 結論 ∈ 出貨 / 附修正出貨 / 不出貨；若無視覺基準則使用「無法判斷」
整合方式
可搭配任何瀏覽器 MCP：
mChild__claude-in-chrome__*工具（首選 — 使用您的實際 Chrome）- 透過
mcp__browserbase__*使用 Playwright - 直接使用 Puppeteer 腳本
可與 /canary-watch 搭配，用於部署後監控。