Dogfood: 体系的な Web アプリケーション QA テスト

概要

このスキルは、ブラウザツールセットを使用して Web アプリケーションの体系的な探索的 QA テストをガイドします。アプリケーションをナビゲートし、要素と対話し、問題の証拠をキャプチャし、構造化されたバグレポートを作成します。

前提条件

• ブラウザツールセットが利用可能であること（browser_navigate、browser_snapshot、browser_click、browser_type、browser_vision、browser_console、browser_scroll、browser_back、browser_press）
• ユーザーから提供されるターゲット URL とテストの範囲

入力

ユーザーが提供するもの：

1. ターゲット URL — テストのエントリーポイント
2. 範囲 — フォーカスする領域/機能（または包括的なテストの場合は「full site」）
3. 出力ディレクトリ（オプション）— スクリーンショットとレポートを保存する場所（デフォルト: ./dogfood-output）

ワークフロー

以下の 5 段階の体系的なワークフローに従ってください：

フェーズ 1: 計画

1. 出力ディレクトリ構造を作成します：

   {output_dir}/
   ├── screenshots/       # 証拠のスクリーンショット
   └── report.md          # 最終レポート（フェーズ 5 で生成）
   

2. ユーザーの入力に基づいてテスト範囲を特定します。
3. テストするページと機能を計画することで、大まかなサイトマップを作成します：
   • ランディング/ホームページ
   • ナビゲーションリンク（ヘッダー、フッター、サイドバー）
   • 主要なユーザーフロー（サインアップ、ログイン、検索、チェックアウトなど）
   • フォームと対話型要素
   • エッジケース（空の状態、エラーページ、404 など）

フェーズ 2: 探索

計画内の各ページまたは機能について：

1. ページにナビゲートします：

   browser_navigate(url="https://example.com/page")
   

2. スナップショットを取得して DOM 構造を理解します：

   browser_snapshot()
   

3. コンソールをチェックして JavaScript エラーを確認します：

   browser_console(clear=true)
   

   毎回のナビゲーション後と重要な操作後に実行してください。サイレント JS エラーは高い価値を持つ発見です。

4. 注釈付きスクリーンショットを取得してページを視覚的に評価し、対話型要素を特定します：

   browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)
   

   annotate=true フラグにより、対話型要素に番号付きの [N] ラベルがオーバーレイされます。各 [N] は後続のブラウザコマンドの ref @eN にマッピングされます。

5. 対話型要素を体系的にテストします：

   • ボタンとリンクをクリック: browser_click(ref="@eN")
   • フォームに入力: browser_type(ref="@eN", text="test input")
   • キーボードナビゲーションをテスト: browser_press(key="Tab")、browser_press(key="Enter")
   • コンテンツをスクロール: browser_scroll(direction="down")
   • 無効な入力でフォーム検証をテスト
   • 空の送信をテスト

6. 各操作後に以下をチェックします：

   • コンソールエラー: browser_console()
   • ビジュアルの変更: browser_vision(question="What changed after the interaction?")
   • 期待動作と実際の動作

フェーズ 3: 証拠の収集

見つかった問題ごとに：

1. 問題を示すスクリーンショットを撮ります：

   browser_vision(question="Capture and describe the issue visible on this page", annotate=false)
   

   応答から screenshot_path を保存してください — レポートで参照します。

2. 詳細を記録します：

   • 問題が発生している URL
   • 再現手順
   • 期待される動作
   • 実際の動作
   • コンソールエラー（存在する場合）
   • スクリーンショットパス

3. 問題を分類します（references/issue-taxonomy.md を参照）：

   • 重大度: Critical / High / Medium / Low
   • カテゴリ: Functional / Visual / Accessibility / Console / UX / Content

フェーズ 4: 分類

1. 収集されたすべての問題を確認します。
2. 重複排除 — 異なる場所で現れる同じバグをマージします。
3. 各問題に最終的な重大度とカテゴリを割り当てます。
4. 重大度でソート（Critical 最初、次に High、Medium、Low）。
5. エグゼクティブサマリー用に重大度とカテゴリごとの問題数をカウントします。

フェーズ 5: レポート

templates/dogfood-report-template.md のテンプレートを使用して最終レポートを生成します。

レポートに含める必要があります：

1. エグゼクティブサマリー — 総問題数、重大度別の内訳、テスト範囲
2. 問題ごとのセクション:
   • 問題番号とタイトル
   • 重大度とカテゴリバッジ
   • 観察された URL
   • 問題の説明
   • 再現手順
   • 期待動作と実際の動作
   • スクリーンショット参照（インライン画像の場合は MEDIA:<screenshot_path> を使用）
   • 関連するコンソールエラー
3. サマリーテーブル — すべての問題の一覧
4. テスト用メモ — テストした内容、テストしなかった内容、問題があった点

レポートを {output_dir}/report.md に保存します。

ツールリファレンス

ツール	目的
browser_navigate	URL に移動
browser_snapshot	DOM テキストスナップショット（アクセシビリティツリー）を取得
browser_click	ref（@eN）またはテキストで要素をクリック
browser_type	入力フィールドに入力
browser_scroll	ページをスクロール（上下）
browser_back	ブラウザ履歴で戻る
browser_press	キーボードキーを押す
browser_vision	スクリーンショット + AI 分析；要素ラベルには annotate=true を使用
browser_console	JS コンソール出力とエラーを取得

ヒント

• ナビゲーション後と重要な操作後に常に browser_console() をチェックしてください。 サイレント JS エラーは最も価値の高い発見の一つです。
• 対話型要素の位置について推論する必要があるときや、スナップショット ref が不明確なときは annotate=true で browser_vision を使用してください。
• 有効な入力と無効な入力の両方でテストしてください — フォーム検証バグは一般的です。
• 長いページをスクロール — 折り返し下のコンテンツにレンダリング問題がある可能性があります。
• ナビゲーションフローをテスト — マルチステッププロセスをエンドツーエンドでクリックしてください。
• スクリーンショットに表示されるレイアウト問題を注記することで、レスポンシブ動作をチェックしてください。
• エッジケースを忘れずに: 空の状態、非常に長いテキスト、特殊文字、急速なクリック。
• ユーザーにスクリーンショットを報告する場合は、MEDIA:<screenshot_path> を含めて、証拠をインラインで表示できるようにしてください。