AntiGem 瀏覽器 QA
概述
統一的、節省 Token 的瀏覽器測試技能，專為 AntiGem 的原生 browser_mcp（17 種工具）設計。透過漸進式揭露涵蓋 8 個測試面向：探索性流程、表單/安全性、佈局/無障礙/視覺、PWA/離線/i18n，以及頁面內審計片段。強制協議：標籤頁重用 → 鎖定 → 以參考為主的發現 → React 安全的輸入 → 批次操作 → 運行時門控（主控台 + 網路）。
使用時機
- 在 Web/PWA 應用程式上編寫或執行 E2E 測試
- 探索性錯誤狩獵（首次使用者流程、對抗性序列）
- 表單邊界模糊測試、XSS 負載、檔案上傳、拖放、Canvas/WebGL
- WCAG 2.1 AA/AAA 審計、200% 縮放回流、CLS、觸控目標（≥48px/≥60dp）
- 視覺回歸基準線與建置版本的差異比對、響應式斷點
- Service Worker 生命週期、IndexedDB/Dexie 離線同步、Indic 字形/matra 裁剪
- 運行時主控台錯誤 / 網路失敗零容忍門控
強制執行協議
- 標籤頁重用：
browser_list_tabs → 重用現有標籤頁或 browser_open_url
- 觸控/縮放鎖定： 在多步驟鏈之前執行
browser_lock(locked=true)
- 以參考為主的發現：
browser_find(query="...")（首選）或 browser_read_page(filter="interactive") 來取得帶有穩定 ref_N ID 的 ARIA 樹
- React 安全輸入： 對於
<input>、<textarea>、<select>、核取方塊/開關、單選按鈕、contenteditable，使用 browser_form_input(ref, value)
- 可信操作：
browser_computer（left_click、hover、left_click_drag、key、scroll_to、screenshot、zoom [x0,y0,x1,y1]、wait）；對於檔案輸入使用 browser_upload_file；對於提示框使用 browser_handle_dialog
- 往返批次處理： 對於確定性的多步驟鏈，使用
browser_batch
- 運行時門控（零容忍）： 在每個畫面之後，執行
browser_get_console_logs(pattern="error|warn") + browser_read_network（如果標籤頁在 MCP 附加之前就已存在，請先重新載入）
- 解鎖： 退出時執行
browser_lock(locked=false)
8 大面向統一檢查表
| # | 面向 | 通過/失敗門檻 |
|---|
| 1 | 探索性與流程 | 首次使用者模擬；多路由導航；browser.goBack() 模態框優先；焦點陷阱；缺陷報告格式 |
| 2 | 表單與元件 | 邊界模糊測試；數值鉗位；內聯模糊驗證；滾動至第一個錯誤；雙重提交去抖；XSS 清理；檔案上傳；拖放；Canvas/SVG 驗證 |
| 3 | 安全性測試 | CSP 標頭；XSS 負載注入；權限拒絕後備方案；安全 Cookie 標誌 |
| 4 | 佈局、無障礙、視覺 | WCAG AA ≥4.5:1 / 陽光 AAA ≥7.0:1 / 暗紅色 #000000；200% 縮放回流；CLS ≤0.1；prefers-reduced-motion；觸控目標 ≥48px（標準）/ ≥64px（農村）；視覺差異基準線 vs 建置版本 |
| 5 | PWA、離線、i18n | Manifest 與 SW 生命週期；IndexedDB/Dexie ACID + useLiveQuery；離線模擬 + 同步佇列；Indic 連字/matra 裁剪；document.documentElement.lang；Lakhs/Crores + tabular-nums |
| 6 | Web API 與權限 | navigator.vibrate?.()、相機/地理定位權限拒絕；硬體 API 後備方案 |
| 7 | 運行時診斷 | 主控台錯誤快速失敗；網路 4xx/5xx 快速失敗；透過 browser_eval_js 進行 LCP/記憶體審計 |
| 8 | 行動版與視口 | browser_set_view_mode 行動版/桌面版矩陣；browser_computer(action="zoom") 微觀檢查 |
漸進式參考路由器表
| 任務重點 | 載入參考 |
|---|
| 探索性錯誤狩獵、首次使用者流程、模態框焦點、導航 | references/01-exploratory-and-flows.md |
| 表單驗證、邊界模糊測試、檔案上傳、拖放、Canvas、XSS | references/02-forms-components-security.md |
| WCAG 審計、對比度、縮放回流、CLS、觸控目標、視覺差異 | references/03-layout-a11y-visual.md |
| SW 生命週期、IndexedDB、離線同步、Indic 排版、權限 | references/04-pwa-offline-i18n-apis.md |
| 頁面內審計片段（孤立標籤、邊界框、對比度、SW、IndexedDB） | references/05-eval-js-audit-snippets.md |
快速參考：browser_mcp 工具對應
| 上游原始操作 | AntiGem 工具 |
|---|
page.fill() / selectOption() / check() | browser_form_input(ref, value) |
page.click() / keyboard.press() / hover() / dragAndDrop() | browser_computer(left_click, hover, left_click_drag, key, scroll_to, ...) |
page.setInputFiles() | browser_upload_file |
page.on('dialog') | browser_handle_dialog(accept=true/false) |
page.evaluate() | browser_eval_js（頂層 await，回傳 JSON） |
page.on('console') / page.on('pageerror') | browser_get_console_logs(pattern="...") |
page.on('response') / HAR | browser_read_network |
| 多步驟鏈 | browser_batch + browser_lock |
| 視口 / 截圖 / 縮放 | `browser_set_view_mode + browser_computer(screenshot |
常見錯誤
- 跳過
browser_lock → 意外的觸控/縮放會破壞參考 ID
- 使用座標而不是參考 → 脆弱，在回流時失效
- 未執行運行時門控 → 遺漏主控台錯誤 / 失敗的請求
- 一次載入所有參考 → Token 膨脹；根據路由器表按需載入
- 忘記執行
browser_lock(false) → 導致標籤頁對使用者保持鎖定
實際影響
- 相較於完整的 DOM 快照，透過
browser_find/browser_read_page(filter="interactive") 可減少 90% 的 Token 消耗
- 單次
browser_eval_js 呼叫即可執行完整的頁面審計（無障礙 + 幾何 + 對比度 + SW + IndexedDB）
- 零容忍的運行時門控可在問題影響使用者之前捕捉回歸