dogfood

Dogfood

Web アプリケーションを体系的に調査して問題を見つけ、すべての指摘について、再現の証拠を完全に添えたレポートを作成します。

セットアップ

必要なのは Target URL だけです。それ以外は適切なデフォルト値が設定されているため、ユーザーが明示的に別の値を指定しない限り、そのまま使用してください。

パラメーター	デフォルト値	指定例
Target URL	(必須)	vercel.com、http://localhost:3000
セッション名	ドメインをスラッグ化した値（例：vercel.com -> vercel-com）	--session my-session
出力ディレクトリ	./dogfood-output/	Output directory: /tmp/qa
スコープ	アプリ全体	Focus on the billing page
認証	なし	Sign in to [email protected]

ユーザーが「dogfood vercel.com」のように指示した場合は、デフォルト値を使ってすぐに開始してください。認証について言及されているものの、認証情報が不足している場合を除き、確認の質問はしないでください。

必ず agent-browser を直接使用し、npx agent-browser は使用しないでください。直接バイナリを使うと高速な Rust クライアントが使用されます。npx は Node.js 経由で実行されるため、大幅に遅くなります。

ワークフロー

1. Initialize    Set up session, output dirs, report file
2. Authenticate  Sign in if needed, save state
3. Orient        Navigate to starting point, take initial snapshot
4. Explore       Systematically visit pages and test features
5. Document      Screenshot + record each issue as found
6. Wrap up       Update summary counts, close session

1. 初期化

mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos

レポートのテンプレートを出力ディレクトリにコピーし、ヘッダーフィールドを入力します。

cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md

名前を付けてセッションを開始します。

agent-browser --session {SESSION} open {TARGET_URL}
agent-browser --session {SESSION} wait --load networkidle

2. 認証

アプリでログインが必要な場合：

agent-browser --session {SESSION} snapshot -i
# Identify login form refs, fill credentials
agent-browser --session {SESSION} fill @e1 "{EMAIL}"
agent-browser --session {SESSION} fill @e2 "{PASSWORD}"
agent-browser --session {SESSION} click @e3
agent-browser --session {SESSION} wait --load networkidle

OTP／メールコードが必要な場合：ユーザーに尋ね、回答を待ってからコードを入力します。

ログインに成功したら、再利用できるように状態を保存します。

agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json

3. 概要を把握する

最初に注釈付きスクリーンショットとスナップショットを取得し、アプリの構造を把握します。

agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
agent-browser --session {SESSION} snapshot -i

主要なナビゲーション要素を特定し、訪問するセクションを洗い出します。

4. 調査する

確認すべき項目と調査チェックリストの全リストについては、references/issue-taxonomy.md を読んでください。

方針 — アプリを体系的に調査します：

• メインナビゲーションから始め、各トップレベルのセクションを訪問します。
• 各セクションで、ボタンのクリック、フォームへの入力、ドロップダウンやモーダルを開くなど、インタラクティブな要素をテストします。
• エッジケースを確認します：空の状態、エラー処理、境界値の入力。
• 現実的なエンドツーエンドのワークフローを試します（作成、編集、削除のフロー）。
• 定期的にブラウザーのコンソールでエラーを確認します。

各ページで：

agent-browser --session {SESSION} snapshot -i
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png
agent-browser --session {SESSION} errors
agent-browser --session {SESSION} console

どこまで深く調査するかは、状況に応じて判断してください。主要な機能には時間をかけ、周辺的なページは手短に確認します。一つの領域で問題が集中して見つかった場合は、さらに詳しく調査します。

5. 問題を記録する（再現を優先）

手順4と5は同時に行います。つまり、調査と記録を一度の作業で進めます。問題を見つけたら、先に進む前に調査を中断して、すぐに記録してください。アプリ全体を先に調査してから、後でまとめて記録することは避けてください。

すべての問題は再現可能でなければなりません。問題を見つけたときは、ただ記録するのではなく、証拠を示して裏付けてください。レポートを読む人が、何が起きたかを正確に確認し、再現できるようにすることが目的です。

問題に適した証拠のレベルを選びます：

インタラクティブ／動作上の問題（機能、UX、操作時のコンソールエラー）

再現にはユーザー操作が必要です。動画と手順ごとのスクリーンショットを含め、完全な再現記録を作成します。

1. 再現する 前 に、再現動画の録画を開始します。

agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm

2. 人が操作するペースで手順を進めます。 動画を見やすくするため、操作の間に1～2秒間隔を空けます。各手順でスクリーンショットを撮影します。

agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.png
sleep 1
# Perform action (click, fill, etc.)
sleep 1
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png
sleep 1
# ...continue until the issue manifests

3. 問題が発生した状態を撮影します。 見る人が状態を確認できるよう一時停止してから、注釈付きスクリーンショットを撮影します。

sleep 2
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png

4. 動画を停止します。

agent-browser --session {SESSION} record stop

5. 各手順で撮影したスクリーンショットを参照する、番号付きの再現手順をレポートに記載します。

静的な問題／読み込み時に表示される問題（誤字、プレースホルダーテキスト、テキストの見切れ、配置ずれ、読み込み時のコンソールエラー）

操作を行わなくても確認できる問題です。注釈付きのスクリーンショットが1枚あれば十分です。動画や複数手順の再現は必要ありません。

agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png

簡潔に説明し、レポート内でスクリーンショットを参照してください。Repro Video は N/A に設定してください。

---

すべての問題について：

1. 問題を見つけたらすぐにレポートに追加してください。 後でまとめて追加しないでください。セッションが中断されても内容が失われないよう、見つけた時点でそれぞれ記録してください。

2. 問題番号を繰り上げてください（ISSUE-001、ISSUE-002、...）。

6. 終了

十分に記録した問題を5～10件見つけたら、作業を終了してください。件数より証拠の充実度が重要です。曖昧な説明の問題が20件あるより、再現手順を十分に記載した問題が5件あるほうが望ましいです。

調査後、次の手順を実行してください。

1. レポートを読み返し、概要の重大度別件数が実際の問題数と一致するように更新してください。すべての ### ISSUE- ブロックを合計に反映してください。
2. セッションを終了します。

agent-browser --session {SESSION} close

レポートの準備ができたことをユーザーに伝え、問題の総数、重大度別の内訳、最も重大な項目を要約してください。

ガイダンス

• 再現性がすべてです。 すべての問題には証拠が必要ですが、問題に合った証拠を用意してください。インタラクティブな不具合には、動画と手順ごとのスクリーンショットが必要です。静的な不具合（誤字、プレースホルダーテキスト、読み込み時に確認できる表示上の問題）には、注釈付きのスクリーンショットが1枚あれば十分です。
• 証拠を集める前に、再現性を確認してください。 動画を撮影したりスクリーンショットを撮ったりする前に、少なくとも1回再試行して、問題が再現することを確認してください。一貫して再現できない場合、有効な問題とはいえません。
• 静的な問題では動画を撮影しないでください。 誤字やテキストの欠けは、動画にしても有益ではありません。動画は、ユーザーの操作、タイミング、または状態の変化を伴う問題に使用してください。
• インタラクティブな問題では、各手順のスクリーンショットを撮影してください。 操作前、操作中、操作後を撮影し、全体の流れが分かるようにしてください。
• スクリーンショットに対応した再現手順を書いてください。 レポートの各番号付き手順には、対応するスクリーンショットを記載してください。読者がブラウザーに触れなくても、手順を視覚的に追えるようにしてください。
• 適切なスナップショットコマンドを使用してください。
  • snapshot -i — クリックまたは入力できる要素（ボタン、入力欄、リンク）を探す場合
  • snapshot（フラグなし） — ページのコンテンツ（テキスト、見出し、データリスト）を読む場合
• 徹底的に調査しつつ、状況に応じて判断してください。 テストスクリプトをなぞるのではなく、実際のユーザーのように探索してください。何かがおかしいと感じたら、調査してください。
• 調査結果は随時記録してください。 問題を見つけるたびに、レポートに追記してください。セッションが中断されても、調査結果が残ります。すべての問題を最後にまとめて記録しないでください。
• 出力ファイルは絶対に削除しないでください。 セッション中にスクリーンショット、動画、レポートをrmで削除しないでください。セッションを終了して再開しないでください。後戻りせず、作業を進めてください。
• テスト対象アプリのソースコードは絶対に読まないでください。 コードを監査するのではなく、ユーザーとしてテストしてください。テスト対象アプリのHTML、JS、設定ファイルを読まないでください。調査結果はすべて、ブラウザー上での観察に基づくものでなければなりません。
• コンソールを確認してください。 UI上では見えない問題も、JSエラーやリクエストの失敗として表示されることがあります。
• ロボットではなく、ユーザーのようにテストしてください。 よくあるワークフローを最初から最後まで試してください。実際のユーザーがクリックしそうなものをクリックし、現実的なデータを入力してください。
• 人間らしく入力してください。 動画の撮影中にフォームへ入力する場合は、fillではなくtypeを使用してください。1文字ずつ入力されます。速度が重要な場合に限り、動画撮影外でfillを使用してください。
• 人が見やすい再現動画にしてください。 操作の間にsleep 1を、最終結果のスクリーンショットの前にsleep 2を追加してください。動画は1倍速で見やすいものにしてください。レポートを確認する人が、瞬間的な状態変化のぼやけた映像ではなく、何が起きたのか分かる必要があります。
• コマンドを効率よく使ってください。 複数のagent-browserコマンドが独立している場合は、1回のシェル呼び出しにまとめてください（例：agent-browser ... screenshot ... && agent-browser ... console）。スクロールにはagent-browser --session {SESSION} scroll down 300を使用してください。スクロールにkeyやevaluateを使用しないでください。

参照資料

参照資料	読むタイミング
references/issue-taxonomy.md	セッション開始時 — 確認対象、重大度レベル、探索チェックリストを把握する

テンプレート

テンプレート	用途
templates/dogfood-report-template.md	レポートファイルとして出力ディレクトリにコピーする