AntiGem ブラウザ QA は何をしますか？
概要
AntiGem のネイティブ browser_mcp（17 ツール）に統合された、統一されたトークン効率の高いブラウザテストスキルです。プログレッシブディスクロージャにより、探索的フロー、フォーム/セキュリティ、レイアウト/アクセシビリティ/ビジュアル、PWA/オフライン/i18n、ページ内監査スニペットの 8 つのテスト側面をカバーします。必須プロトコル：タブ再利用 → ロック → ref 優先発見 → React セーフな入力 → バッチ操作 → ランタイムゲート（コンソール + ネットワーク）。
使用するタイミング
- Web/PWA アプリケーションでの E2E テストの作成または実行
- 探索的バグハンティング（初回ユーザーフロー、敵対的シーケンス）
- フォーム境界ファジング、XSS ペイロード、ファイルアップロード、ドラッグ＆ドロップ、キャンバス/WebGL
- WCAG 2.1 AA/AAA 監査、200% ズームリフロー、CLS、タッチターゲット（≥48px/≥60dp）
- ビジュアルリグレッションのベースライン対ビルド差分、レスポンシブブレークポイント
- サービスワーカーライフサイクル、IndexedDB/Dexie オフライン同期、インジックグリフ/マトラのクリッピング
- ランタイムコンソールエラー / ネットワーク障害のゼロトレランスゲート
必須実行プロトコル
- タブ再利用:
browser_list_tabs → 既存のものを再利用するか、browser_open_url を使用
- タッチ/ズームロック: マルチステップチェーンの前に
browser_lock(locked=true) を実行
- Ref 優先発見:
browser_find(query="...")（推奨）、または安定した ref_N ID を持つ ARIA ツリーのために browser_read_page(filter="interactive") を使用
- 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 サニタイゼーション；ファイルアップロード；ドラッグ＆ドロップ；キャンバス/SVG 検証 |
| 3 | セキュリティテスト | CSP ヘッダー；XSS ペイロードインジェクション；許可拒否フォールバック；セキュアクッキーフラグ |
| 4 | レイアウト、アクセシビリティ、ビジュアル | WCAG AA ≥4.5:1 / 日光 AAA ≥7.0:1 / 暗所赤 #000000；200% ズームリフロー；CLS ≤0.1；prefers-reduced-motion；タッチターゲット ≥48px（標準）/ ≥64px（地方）；ベースライン対ビルドのビジュアル差分 |
| 5 | PWA、オフライン、i18n | マニフェスト & SW ライフサイクル；IndexedDB/Dexie ACID + useLiveQuery；オフラインシミュレーション + 同期キュー；インジック結合子/マトラクリッピング；document.documentElement.lang；ラーク/クロール + 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 |
| フォームバリデーション、境界ファジング、ファイルアップロード、ドラッグ＆ドロップ、キャンバス、XSS | references/02-forms-components-security.md |
| WCAG 監査、コントラスト、ズームリフロー、CLS、タッチターゲット、ビジュアル差分 | references/03-layout-a11y-visual.md |
| SW ライフサイクル、IndexedDB、オフライン同期、インジックタイポグラフィ、パーミッション | 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 のスキップ → 誤ったタッチ/ズームで ref ID が破損- ref の代わりに座標を使用 → 脆弱で、リフロー時に壊れる
- ランタイムゲートを実行しない → コンソールエラー / 失敗したリクエストを見逃す
- すべてのリファレンスを一度にロード → トークンの肥大化；ルーターテーブルに従ってオンデマンドでロード
browser_lock(false) を忘れる → ユーザーに対してタブがロックされたままになる
実際の効果
browser_find/browser_read_page(filter="interactive") を使用して、完全な DOM スナップショットと比較してトークンを 90% 削減- 単一の
browser_eval_js 呼び出しでフル画面監査（アクセシビリティ + ジオメトリ + コントラスト + SW + IndexedDB）を実行
- ゼロトレランスランタイムゲートが、ユーザーに届く前にリグレッションをキャッチ