Browser QA — 自動化視覺測試與互動驗證
使用時機
- 在將功能部署到暫存/預覽環境後
- 需要驗證跨頁面的 UI 行為時
- 出貨前 — 確認版面、表單、互動是否正常運作
- 審查涉及前端程式碼的 PR 時
- 無障礙審計與響應式測試
運作方式
使用瀏覽器自動化 MCP（claude-in-chrome、Playwright 或 Puppeteer）像真實使用者一樣與即時頁面互動。
安全第一 — 影響範圍（預設唯讀）
Browser QA 會操作真實驗證與真實使用者流程，因此需明確標示影響範圍。 預設為唯讀：絕對不要對生產環境 URL 執行變更操作（結帳、付款、刪除、大量更新）— 需明確同意且提供暫存/預覽 URL。請使用預先建立的測試憑證，切勿使用真實的生產環境登入資訊，並在儲存任何螢幕截圖前編輯掉憑證/權杖/PII。
第一階段：煙霧測試
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）
第二階段：互動測試
1. 點擊每個導覽連結 — 確認沒有死連結
2. 使用有效資料送出表單 — 確認成功狀態
3. 使用無效資料送出表單 — 確認錯誤狀態
4. 測試身分驗證流程：登入 → 受保護頁面 → 登出（僅使用測試憑證，絕不使用正式環境）
5. 測試關鍵使用者流程（結帳、入職引導、搜尋）
— 預設唯讀；僅在明確同意下方可對暫存環境執行變更操作（見上方「安全第一」）
第三階段：視覺回歸測試
1. 在 3 個斷點（375px、768px、1440px）擷取關鍵頁面螢幕截圖
2. 與已提交的基準截圖進行比較
— 若無基準 ⇒ 回報 INCONCLUSIVE，絕不靜默回報 PASS
3. 標記超過 5px 的版面位移、缺失元素、溢位
4. 若適用則檢查深色模式
第四階段：無障礙測試
1. 在每個頁面上執行 axe-core 或同等工具
2. 標記 WCAG 2.2 AA 違規（對比度、標籤、焦點順序）
3. 驗證鍵盤導覽可從頭到尾正確運作
4. 檢查螢幕閱讀器地標
注意：axe-core 約可自動涵蓋 30–40% 的 WCAG 項目。一次乾淨的執行是必要條件，非充分條件 — 鍵盤導覽、焦點順序以及螢幕閱讀器測試仍需手動檢查。請勿僅憑自動化測試通過就回報「無障礙」。
輸出格式
## QA 報告 — [URL] — [時間戳]
### 煙霧測試
- 主控台錯誤：0 個重大錯誤，2 個警告（分析工具雜訊）
- 網路：全部 200/304，無失敗
- Core Web Vitals：LCP 1.2s ✓、CLS 0.02 ✓、INP 89ms ✓
### 互動測試
- [✓] 導覽連結：12/12 正常運作
- [✗] 聯絡表單：無效 email 缺少錯誤狀態
- [✓] 身分驗證流程：登入/登出正常運作
### 視覺測試
- [✗] 英雄區塊在 375px 視口溢位
- [✓] 深色模式：所有頁面一致
### 無障礙測試
- 2 項 AA 違規：英雄圖片缺少替代文字、頁尾連結對比度不足
### 結論：附修正出貨（2 個問題，0 個阻斷）
# 結論 ∈ 出貨 / 附修正出貨 / 不出貨；若無視覺基準則使用 INCONCLUSIVE
整合方式
可與任何瀏覽器 MCP 搭配使用：
mChild__claude-in-chrome__*工具（首選 — 使用您的實際 Chrome 瀏覽器）- 透過
mcp__browserbase__*的 Playwright - 直接使用 Puppeteer 腳本
可搭配 /canary-watch 進行部署後監控。