ProofShot — ビジュアル検証ワークフロー は何をしますか？
ProofShotは、オープンソースでエージェント非依存のCLIツールです。実際のブラウザ上で作業を検証し、動画、スクリーンショット、エラーレポートを生成します。ベンダーロックインはありません。
使用タイミング
ProofShotは以下のタイミングで使用します：
- 新しいUI機能やページを構築した後
- 既存のUIコンポーネントを変更した後
- 視覚的なバグを修正した後
- ユーザーに表示される内容に影響を与える変更があった場合
ワークフロー（必ず以下の3ステップに従ってください）
ステップ 1: セッションを開始する
proofshot start --run "your-dev-command" --port PORT --description "これから検証する内容"
これによりブラウザが開き、録画が開始されます。指定したポートが既に使用中の場合は、proofshotが自動的に既存のプロセスを強制終了します。
必ず --run を使用して、proofshotに開発サーバーを起動させ、その出力（サーバーログ）を検証レポートに含めてください。
--run を省略するのは、ユーザーまたは別のプロセスが明示的にサーバーを起動した場合のみにしてください。省略するとサーバーログは取得されません。
前回のセッションが正常に終了していない場合は、--force を追加して上書きしてください。
ステップ 2: ブラウザを操作してテストする
proofshot exec を使用して、ナビゲーション、インタラクション、検証を行います：
proofshot exec snapshot -i # インタラクティブ要素を表示
proofshot exec open http://localhost:PORT/page # ページに移動
proofshot exec click @e3 # ボタンをクリック
proofshot exec fill @e2 "[email protected]" # フォームフィールドに入力
proofshot exec screenshot step-NAME.png # 重要な瞬間をキャプチャ
重要な瞬間にスクリーンショットを撮影してください。これらが視覚的な証拠となります。 スナップショットの出力を読み、期待通りの結果が表示されているか確認してください。
ステップ 3: 録画を停止し、証拠をまとめる
proofshot stop
これにより録画が停止し、コンソールエラーとサーバーエラーが収集され、 SUMMARY.md（動画、スクリーンショット、エラーレポートを含む）が生成されます。
ステップ 4（オプション）: 証拠をPRに投稿する
proofshot pr # 現在のブランチからPRを自動検出
proofshot pr 42 # 特定のPR番号を指定
これによりスクリーンショットと動画がGitHubにアップロードされ、PRに整形されたコメントが投稿されます。デフォルトでは、公式のGitHub Contents APIを使用し、proofshot-artifacts ブランチに保存します。GitHubの添付ファイルURLを明示的に使用したい場合は --upload-provider github-web-attachments を指定してください。
ヒント
- 常に意味のある
--descriptionを指定し、人間が何をテストしたかわかるようにしてください - 重要なアクションの前 と 後（例：フォーム送信前、リダイレクト後）にスクリーンショットを撮影してください
- 検証中にエラーを見つけた場合は、修正してからワークフローを再度実行してください
- 停止後に
proofshot prを使用して、証拠をプルリクエストに直接添付してください