スナップショット
snapshot コマンドは、要素操作に使用する参照を含むコンパクトなアクセシビリティツリーを返します。
オプション
出力サイズを削減するためにフィルタリングを行います：
agent-browser snapshot # 完全なアクセシビリティツリー
agent-browser snapshot -i # インタラクティブな要素のみ（推奨）
agent-browser snapshot -i -C # カーソルで操作可能な要素を含む
agent-browser snapshot -c # 汎用的な（空の要素を削除）
agent-browser snapshot -d 3 # 深さを3レベルまで制限
agent-browser snapshot -s "#main" # CSSセレクタで範囲を限定
agent-browser snapshot -i -c -d 5 # オプションを組み合わせる| オプション | 説明 |
|---|---|
-i, --interactive | インタラクティブな要素のみ（ボタン、リンク、入力欄など） |
-C, --cursor | カーソルで操作可能な要素を含む（cursor:pointer、onclick、tabindex） |
-c, --compact | 空の構造的要素を削除 |
-d, --depth | ツリーの深さを制限 |
-s, --selector | CSSセレクタで範囲を限定 |
カーソルで操作可能な要素
多くの現代的なウェブアプリでは、標準のボタンやリンクではなく、カスタムのクリック可能要素（div、spanなど）を使用しています。
-C フラグは、以下の条件を検出してこれらの要素を検出します：
cursor: pointerのCSSスタイルonclick属性またはハンドラtabindex属性（キーボードでフォーカス可能）
agent-browser snapshot -i -C
# 出力に含まれる:
# @e1 [button] "送信"
# @e2 [link] "詳しく見る"
# カーソルで操作可能な要素:
# @e3 [clickable] "メニュー項目" [cursor:pointer, onclick]
# @e4 [clickable] "カード" [cursor:pointer]出力形式
デフォルトのテキスト出力は、コンパクトかつAIに優しい形式です：
agent-browser snapshot -i
# 出力:
# @e1 [heading] "例のドメイン" [level=1]
# @e2 [button] "送信"
# @e3 [input type="email"] placeholder="メールアドレス"
# @e4 [link] "詳しく見る"参照の使用
スナップショットから得られる参照は、コマンドと直接対応します：
agent-browser click @e2 # 「送信」ボタンをクリック
agent-browser fill @e3 "[email protected]" # メール入力欄に値を入力
agent-browser get text @e1 # ヘッディングのテキストを取得参照のライフサイクル
ページが変更されると参照は無効になります。ナビゲーションやDOM更新後は常に再スナップショットしてください：
agent-browser click @e4 # 新しいページに移動
agent-browser snapshot -i # 有効な参照を取得
agent-browser click @e1 # 新しい参照を使用注釈付きスクリーンショット
テキストスナップショットに加えて視覚的情報を得たい場合、screenshot --annotate を使用してインタラクティブ要素上に番号付きラベルを重ねます。各ラベル [N] は参照 @eN に対応します：
agent-browser screenshot --annotate ./page.png
# -> 画像は ./page.png に保存されました
# [1] @e1 button "送信"
# [2] @e2 link "ホーム"
# [3] @e3 textbox "メールアドレス"
agent-browser click @e2注釈付きスクリーンショットは参照もキャッシュするため、すぐに要素とインタラクションできます。テキストスナップショットだけでは不十分な場合に有用です — ラベルなしのアイコン、キャンバス上のコンテンツ、または視覚的なレイアウトの確認など。
推奨される実践方法
-iを使用して、実行可能な要素にのみ出力を絞る- ページの変更後は必ず再スナップショットし、最新の参照を取得する
- 特定のページ領域に対しては
-sで範囲を限定する - 複雑なページでは
-dで深さを制限する - 視覚的情報が必要な場合は
screenshot --annotateを使用する
JSON出力
スクリプトでのプログラム的解析を目的とする場合：
agent-browser snapshot --json
# {"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"タイトル"},...}}}注意：JSON形式はテキスト出力よりもトークン数が多くなります。AIエージェント向けにはデフォルトのテキスト形式が推奨されます。