browser-screenshot-diff

ブラウザーのスクリーンショット差分

記録された2つのセッションをステップごとに比較します。セッションAの各ステップをセッションBの同じ step-id に対応付け、キャプチャされたスクリーンショットとアクセシビリティスナップショットの差分を取り、最初の相違点と全体の類似度スコアを報告します。

使用する場面

• UI変更後のビジュアルリグレッションテスト（変更前と変更後を記録して比較）。
• browser-replay の実行結果が、許容範囲内で親セッションと一致することの検証。
• 同じフォームフローの2つのA/Bバリアントの比較。

手順

1. 両方のRVFコンテナーを特定します：

   npx -y [email protected] rvf status <session-id-a>.rvf
   npx -y [email protected] rvf status <session-id-b>.rvf
   

2. 両方の軌跡を読み込みます。trajectory.ndjson から読み込み、それぞれについて step-id → (screenshot_path, snapshot_path) のマップを作成します。
3. step-id でステップを対応付けます。片方にしか存在しないステップには unmatched のフラグを付け、相違度スコアに加算します。
4. ピクセル差分（--mode pixel|both）：各ステップの2つのPNGを比較します。mse、psnr、および最大の差分クラスターのバウンディングボックスを報告します。しきい値の既定値は 0.02（ピクセルの2％）です。
5. DOM差分（--mode dom|both）：アクセシビリティスナップショットをノードごとに比較します。追加、削除、変更されたノードと、それぞれのアクセシブルな名前を報告します。
6. 全体の類似度：対応付けられたステップの加重平均を算出し、ステップの所要時間を重みとして使用します。判定結果は新しい findings.md に記録し、新しいRVFコンテナーに保存するため、差分自体を再生できます。
7. 差分の判定結果を保存します。両方のソースIDのタグにある browser-sessions に保存し、今後の検索で「セッションXと差分を実行した」ことが見つかるようにします。

注意事項

• ピクセル差分は、フォントヒンティング、アンチエイリアス、スクロールバーの位置に影響されます。両方のセッションでビューポートを固定してください。
• Playwrightのアクセシビリティツリーを使ったDOM差分は、HTML差分より安定しています。こちらを優先してください。
• このスキルは動的コンテンツ（時計、広告）には対応していません。フィールドマップに無視する領域を追加するか、差分を取る前にスナップショットを前処理してください。
• browser_screenshot_diff MCP ツールは計画されていません（ADR-0001 §7）。このスキルはローカルに保存されたRVFアーティファクトを対象に動作し、ライブ検証には browser_eval のみを使用します。