browser-qa について
指定された変更と仕様に基づき、実行中のアプリをブラウザーで確認する QA スキルです。実行時の観察を証拠として、スクリーンショットや動画を参照する合否レポートを作成します。
主な機能
- 01テスト範囲と仕様の特定
- 02アプリのフローをエンドツーエンドで操作
- 03関連するエッジケースの検証
- 04合否の報告
- 05ブラウザーセッションとアプリプロセスの終了
活用シーン
- 01機能仕様に照らしてブランチを検証
- 02実行中のアプリで変更箇所のフローを確認
- 03QA レポート用の証拠を記録
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/browser-qaを入力して読み込まれたか確認します。
詳細
検証とは、実行時の観察です。実行中のアプリから取得したものが証拠となります。テストや型チェックは CI の出力であり、あなたが用意するものではありません。
手順
1. テスト対象を確定する
ユーザーが指定したものが対象範囲です（コミット SHA、ブランチ名、タグ、main、HEAD~5）。指定がない場合は、ユーザーに確認してください。
2. 仕様の出典を特定する
次の順に、元となる仕様を探してください。
- コミットメッセージ内の Issue 参照（
#123、Closes #45、GitLab の!67）。docs/agents/issue-tracker.mdのワークフローを使って取得します。 - ユーザーが引数として渡したパス。
- ブランチ名または機能名に一致する、
docs/、specs/、.scratch/配下の仕様ファイル。 - 見つからない場合は、仕様の場所をユーザーに確認してください。
3. 操作する
agent-browser がインストールされていない場合は、拒否してユーザーに伝えてください。run スキルを呼び出し、アプリが稼働している URL を取得します。アプリを実行できない場合も同様に拒否してください。
agent-browser スキルを呼び出し、agent-browser skills get dogfood --full で dogfood ワークフローを読み込みます。--full を指定すると、レポートのテンプレートとエッジケースのチェックリストがインラインで含まれます。次の 2 点を変更して、URL に対してこのワークフローを実施してください。
- アプリ全体ではなく、差分を対象にします。読むコードは差分のみとし、影響を受けるフローの一覧作成にだけ使用します。
- レポートはファイルではなく、あなたの返信に記載します。スクリーンショットと動画は絶対パスで示します。
変更の影響を受けるすべてのフローをエンドツーエンドで操作し、その後、変更に適したエッジケースのチェックリストから検証項目を選んでください。
依頼にフィクスチャ（すでに用意されているテストデータ）が含まれている場合は、それを使ってフローを操作し、不足しているものだけを用意してください。
4. 判定
レポートの最初の行に、pass または fail の判定を記載してください。指定された動作を損なう問題、または検証項目に失敗する問題があれば fail とします。部分的な合格はありません。不十分なものはすべて fail とし、合格した部分があれば併記してください。
その後、開始したものをすべて終了処理してください。開いた各ブラウザーセッションを agent-browser --session <name> close で閉じ、起動したアプリのプロセスを停止します。自分が起動したものではなく、すでに稼働していたアプリはそのままにします。各セッションは、閉じるまでヘッドレス Chrome を保持します。終了処理は、拒否する場合も含め、あらゆる終了時に実施してください。
レポートの最初に判定が記載され、終了処理が完了したら完了です。