ProofShot - ビジュアル検証ワークフロー は何をしますか?
ProofShotは、オープンソースでエージェントに依存しないCLIであり、実際のブラウザで自身の作業を検証できます。動画証拠、スクリーンショット、エラーレポートを提供し、ベンダーロックインはありません。
使用するタイミング
ProofShotは以下の後に使用します:
- 新しいUI機能やページの構築後
- 既存のUIコンポーネントの修正後
- ビジュアルバグの修正後
- ユーザーに表示される内容に影響を与える変更全般
ワークフロー(常にこの3ステップに従ってください)
ステップ1:セッションを開始
proofshot start --run "あなたの開発コマンド" --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を使用して、証拠をプルリクエストに直接添付してください