Diffing
ページの状態を比較して変更を検出します — アクセシビリティツリーのスナップショットによる構造的比較、ピクセル比較による視覚的比較、または2つの異なるURL間での比較。
コマンド
| コマンド | 説明 |
|---|---|
diff snapshot | 現在のスナップショットとセッション内の最新スナップショットを比較 |
diff snapshot --baseline <file> | 保存されたファイルと現在のスナップショットを比較 |
diff screenshot --baseline <file> | ベースライン画像との視覚的ピクセル差分 |
diff url <url1> <url2> | 2つのページを比較（スナップショット + オプションのスクリーンショット） |
スナップショット差分
行単位のテキスト差分を使用して、2つの時点間のアクセシビリティツリーを比較します。
# 現在のセッションで最後に取得したスナップショットと比較
agent-browser diff snapshot
# 保存されたベースラインファイルと比較
agent-browser diff snapshot --baseline before.txt
# ページの特定部分に範囲を限定
agent-browser diff snapshot --selector "#main" --compact--baseline を指定しない場合、コマンドは自動的に現在のセッションで最も最近に取得されたスナップショットと比較します。これは、エージェントがアクションの意図した効果があったことを確認するための主な用途です。
オプション
| フラグ | 説明 |
|---|---|
-b, --baseline <file> | 比較対象とする保存済みスナップショットファイルのパス |
-s, --selector <sel> | 現在のスナップショットの範囲をCSSセレクターや@refに限定 |
-c, --compact | コンパクトなスナップショット形式を使用 |
-d, --depth <n> | スナップショットツリーの深さを制限 |
出力
差分は、追加された行には +、削除された行には - を使用し、ユニファイド差分形式と同様です。要約行には追加、削除、変更なしの行数が表示されます。
- button "Submit" [ref=e2]
+ button "Submit" [ref=e2] [disabled]
3件の追加、2件の削除、41件の変更なしスクリーンショット差分
現在のページスクリーンショットをベースライン画像とピクセルレベルで比較します。変更されたピクセルが赤色で強調された差分画像を生成します。
# 基本的な視覚的差分
agent-browser diff screenshot --baseline before.png
# 差分画像を特定のパスに保存
agent-browser diff screenshot --baseline before.png --output diff.png
# 閾値と要素の範囲を調整
agent-browser diff screenshot --baseline before.png --threshold 0.2 --selector "#hero"オプション
| フラグ | 説明 |
|---|---|
-b, --baseline <file> | 比較対象とするベースラインのPNG/JPEG画像（必須） |
-o, --output <file> | 生成された差分画像の保存先パス（デフォルト：一時ディレクトリ） |
-t, --threshold <0-1> | 色距離の閾値（デフォルト：0.1）。値が高いほど許容範囲が広がる |
-s, --selector <sel> | 現在のスクリーンショットの範囲を要素に限定 |
--full | 全ページスクリーンショットを取得 |
出力
差分画像のパス、異なるピクセル数、および不一致の割合を報告します。差分画像では変更のないピクセルは薄く表示され、変更されたピクセルは赤色で示されます。
ベースライン画像と現在の画像のサイズが異なる場合、ピクセル比較を試行せず、代わりにサイズ不一致を報告します。
URL差分
順次各ページにアクセスし、結果を比較することで2つのページを比較します。
# 2つのURLを比較（スナップショット差分）
agent-browser diff url https://staging.example.com https://prod.example.com
# 視覚的比較を含む
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot
# 全ページスクリーンショットの比較
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot --fullこのコマンドは最初のURLにアクセスし、状態を取得した後、2番目のURLに移動して再度取得します。スナップショット差分は常に含まれます。スクリーンショット差分には --screenshot フラグが必要です。
完了後、ブラウザは2番目のURLに留まります。
オプション
| フラグ | 説明 |
|---|---|
--screenshot | 視覚的なスクリーンショット比較も実行 |
--full | 全ページスクリーンショットを使用 |
--wait-until <strategy> | ナビゲーションの待機戦略： load、domcontentloaded、networkidle（デフォルト： load） |
-s, --selector <sel> | スナップショットの範囲をCSSセレクターや@refに限定 |
-c, --compact | コンパクトなスナップショット形式を使用 |
-d, --depth <n> | スナップショットツリーの深さを制限 |
利用事例
エージェントのアクションの検証
最も一般的な利用事例：クリック、入力、送信などのアクションが想定通りのページ変化を引き起こしたかを確認する。
agent-browser snapshot -i # インタラクティブのみのスナップショットを取得（ベースライン）
agent-browser fill @e3 "[email protected]"
agent-browser diff snapshot # 現在のスナップショットをベースラインと比較変更の監視
定期的にページを保存済みのベースラインと比較して更新を検出します。
# ベースラインの保存
agent-browser open https://example.com && agent-browser snapshot > baseline.txt
# 後に変更を確認
agent-browser open https://example.com && agent-browser diff snapshot --baseline baseline.txt視覚的レグレッションテスト
デプロイ前後のスクリーンショットを比較し、意図しない視覚的変更を検出します。
agent-browser open https://staging.example.com && agent-browser screenshot baseline.png
# ... デプロイが行われる ...
agent-browser open https://staging.example.com && agent-browser diff screenshot --baseline baseline.png環境間の比較
ステージング環境と本番環境を比較し、同一性を検証します。
agent-browser diff url https://staging.example.com https://prod.example.com --screenshot