Browser QA — 自動化視覺測試與互動驗證
使用時機
- 將功能部署到暫存/預覽環境後
- 需要跨頁面驗證 UI 行為時
- 出貨前 — 確認版面、表單、互動實際運作
- 審查涉及前端程式碼的 PR 時
- 無障礙稽核與響應式測試
運作方式
使用瀏覽器自動化 MCP（claude-in-chrome、Playwright 或 Puppeteer）像真實使用者一樣與即時頁面互動。
安全優先 — 爆炸半徑（預設唯讀）
Browser QA 會驅動真實的認證與使用者旅程，因此必須明確界定爆炸半徑。 預設為唯讀：絕不對生產 URL 執行變更旅程（結帳、付款、刪除、大量更新） — 需要明確同意以及使用暫存/預覽 URL。使用預先準備的測試憑證，絕不使用真實生產登入，並在儲存任何螢幕截圖前遮蓋憑證/權杖/PII。
階段 1：冒煙測試
1. 導航至目標 URL
2. 檢查主控台錯誤（過濾雜訊：分析工具、第三方）
3. 確認網路請求中無 4xx/5xx
4. 在桌面與行動裝置視口截取首屏螢幕截圖
5. 檢查核心網頁指標：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. 與已提交的基準螢幕截圖比對
— 無基準 ⇒ 回報 INCONCLUSIVE（無結論），絕不靜默 PASS
3. 標記超過 5px 的版面位移、遺失元素、溢出
4. 如適用，檢查深色模式
階段 4：無障礙
1. 在每個頁面上執行 axe-core 或同等工具
2. 標記 WCAG 2.2 AA 違規（對比度、標籤、焦點順序）
3. 驗證鍵盤導覽可從頭到尾運作
4. 檢查螢幕閱讀器地標
注意：axe-core 自動涵蓋約 30–40% 的 WCAG。測試通過是必要條件，而非充分條件 — 鍵盤導覽、焦點順序和螢幕閱讀器測試仍需人工檢查。請勿僅憑自動化測試通過即回報「無障礙」。
輸出格式
## QA 報告 — [URL] — [時間戳]
### 冒煙測試
- 主控台錯誤：0 個嚴重，2 個警告（分析工具雜訊）
- 網路：全部 200/304，無失敗
- 核心網頁指標：LCP 1.2s ✓、CLS 0.02 ✓、INP 89ms ✓
### 互動
- [✓] 導覽連結：12/12 正常運作
- [✗] 聯絡表單：缺少無效電子郵件的錯誤狀態
- [✓] 認證流程：登入/登出正常運作
### 視覺
- [✗] Hero 區塊在 375px 視口溢出
- [✓] 深色模式：所有頁面一致
### 無障礙
- 2 項 AA 違規：hero 圖片缺少替代文字、頁尾連結對比度不足
### 判定：附修正出貨（2 個問題，0 個阻塞）
# 判定 ∈ 出貨 / 附修正出貨 / 禁止出貨；若無視覺基準則使用 INCONCLUSIVE
整合方式
可與任何瀏覽器 MCP 搭配使用：
mChild__claude-in-chrome__*工具（首選 — 使用你的實際 Chrome）- 透過
mcp__browserbase__*使用 Playwright - 直接使用 Puppeteer 腳本
可搭配 /canary-watch 進行部署後監控。