agent-browser

agent-browser によるブラウザー自動化

基本的なワークフロー

ブラウザー自動化はすべて、次のパターンに従います。

1. 移動：agent-browser open <url>
2. スナップショット：agent-browser snapshot -i（@e1、@e2 のような要素参照を取得）
3. 操作：参照を使ってクリック、入力、選択を行います
4. 再スナップショット：移動または DOM の変更後に、新しい参照を取得します

agent-browser open https://example.com/form
agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

agent-browser fill @e1 "[email protected]"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Check result

コマンドの連結

1 回のシェル呼び出しで、コマンドを && で連結できます。バックグラウンドデーモンを介してブラウザーの状態がコマンド間で維持されるため、連結しても安全で、個別に呼び出すより効率的です。

# Chain open + wait + snapshot in one call
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Chain multiple interactions
agent-browser fill @e1 "[email protected]" && agent-browser fill @e2 "password123" && agent-browser click @e3

# Navigate and capture
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

連結する場合： 次の処理に進む前に中間コマンドの出力を確認する必要がない場合（例：開く + 待機 + スクリーンショット）は、&& を使います。先に出力を解析する必要がある場合（例：スナップショットで参照を確認してから、その参照を使って操作する）は、コマンドを個別に実行します。

基本的なコマンド

# Navigation
agent-browser open <url>              # Navigate (aliases: goto, navigate)
agent-browser close                   # Close browser

# Snapshot
agent-browser snapshot -i             # Interactive elements with refs (recommended)
agent-browser snapshot -i -C          # Include cursor-interactive elements (divs with onclick, cursor:pointer)
agent-browser snapshot -s "#selector" # Scope to CSS selector

# Interaction (use @refs from snapshot)
agent-browser click @e1               # Click element
agent-browser click @e1 --new-tab     # Click and open in new tab
agent-browser fill @e2 "text"         # Clear and type text
agent-browser type @e2 "text"         # Type without clearing
agent-browser select @e1 "option"     # Select dropdown option
agent-browser check @e1               # Check checkbox
agent-browser press Enter             # Press key
agent-browser keyboard type "text"    # Type at current focus (no selector)
agent-browser keyboard inserttext "text"  # Insert without key events
agent-browser scroll down 500         # Scroll page
agent-browser scroll down 500 --selector "div.content"  # Scroll within a specific container

# Get information
agent-browser get text @e1            # Get element text
agent-browser get url                 # Get current URL
agent-browser get title               # Get page title

# Wait
agent-browser wait @e1                # Wait for element
agent-browser wait --load networkidle # Wait for network idle
agent-browser wait --url "**/page"    # Wait for URL pattern
agent-browser wait 2000               # Wait milliseconds

# Downloads
agent-browser download @e1 ./file.pdf          # Click element to trigger download
agent-browser wait --download ./output.zip     # Wait for any download to complete
agent-browser --download-path ./downloads open <url>  # Set default download directory

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser screenshot --annotate   # Annotated screenshot with numbered element labels
agent-browser pdf output.pdf          # Save as PDF

# Diff (compare page states)
agent-browser diff snapshot                          # Compare current vs last snapshot
agent-browser diff snapshot --baseline before.txt    # Compare current vs saved file
agent-browser diff screenshot --baseline before.png  # Visual pixel diff
agent-browser diff url <url1> <url2>                 # Compare two pages
agent-browser diff url <url1> <url2> --wait-until networkidle  # Custom wait strategy
agent-browser diff url <url1> <url2> --selector "#main"  # Scope to element

よくあるパターン

フォームの送信

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

Auth Vault による認証（推奨）

# Save credentials once (encrypted with AGENT_BROWSER_ENCRYPTION_KEY)
# Recommended: pipe password via stdin to avoid shell history exposure
echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Login using saved profile (LLM never sees password)
agent-browser auth login github

# List/show/delete profiles
agent-browser auth list
agent-browser auth show github
agent-browser auth delete github

状態の永続化による認証

# Login once and save state
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USERNAME"
agent-browser fill @e2 "$PASSWORD"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

セッションの永続化

# Auto-save/restore cookies and localStorage across browser restarts
agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved to ~/.agent-browser/sessions/

# Next time, state is auto-loaded
agent-browser --session-name myapp open https://app.example.com/dashboard

# Encrypt state at rest
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Manage saved states
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7

データの抽出

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Get specific element text
agent-browser get text body > page.txt  # Get all page text

# JSON output for parsing
agent-browser snapshot -i --json
agent-browser get text @e1 --json

並列セッション

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list

既存の Chrome への接続

# Auto-discover running Chrome with remote debugging enabled
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# Or with explicit CDP port
agent-browser --cdp 9222 snapshot

配色（ダークモード）

# Persistent dark mode via flag (applies to all pages and new tabs)
agent-browser --color-scheme dark open https://example.com

# Or via environment variable
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com

# Or set during session (persists for subsequent commands)
agent-browser set media dark

ビジュアルブラウザー（デバッグ）

agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser record start demo.webm # Record session
agent-browser profiler start         # Start Chrome DevTools profiling
agent-browser profiler stop trace.json # Stop and save profile (path optional)

ローカルファイル（PDF、HTML）

# Open local files with file:// URLs
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png

iOS シミュレーター（モバイル Safari）

# List available iOS simulators
agent-browser device list

# Launch Safari on a specific device
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# Same workflow as desktop - snapshot, interact, re-snapshot
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # Tap (alias for click)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # Mobile-specific gesture

# Take screenshot
agent-browser -p ios screenshot mobile.png

# Close session (shuts down simulator)
agent-browser -p ios close

要件： Xcode を搭載した macOS、Appium（npm install -g appium && appium driver install xcuitest）

実機： 事前に設定されていれば、物理的な iOS デバイスでも動作します。xcrun xctrace list devices で確認した UDID を使って、--device "<UDID>" を指定します。

セキュリティ

セキュリティ機能はすべてオプトインです。デフォルトでは、agent-browser は移動、操作、出力に制限を設けません。

コンテンツ境界（AI エージェントに推奨）

--content-boundaries を有効にすると、ページ由来の出力がマーカーで囲まれ、LLM がツールの出力と信頼できないページのコンテンツを区別しやすくなります。

export AGENT_BROWSER_CONTENT_BOUNDARIES=1
agent-browser snapshot
# Output:
# --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---
# [accessibility tree]
# --- END_AGENT_BROWSER_PAGE_CONTENT nonce=<hex> ---

ドメイン許可リスト

信頼できるドメインへの移動を制限します。*.example.com のようなワイルドカードは、ベースドメインの example.com にも一致します。許可されていないドメインへのサブリソースリクエスト、WebSocket、EventSource 接続もブロックされます。対象ページが依存する CDN ドメインも含めてください。

export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com"
agent-browser open https://example.com        # OK
agent-browser open https://malicious.com       # Blocked

操作ポリシー

破壊的な操作を制限するには、ポリシーファイルを使います。

export AGENT_BROWSER_ACTION_POLICY=./policy.json

policy.json の例：

{"default": "deny", "allow": ["navigate", "snapshot", "click", "scroll", "wait", "get"]}

Auth Vault の操作（auth login など）は操作ポリシーを迂回しますが、ドメイン許可リストは引き続き適用されます。

出力制限

大きなページによるコンテキストの過剰な消費を防ぎます。

export AGENT_BROWSER_MAX_OUTPUT=50000

差分の確認（変更の検証）

操作を実行した後に diff snapshot を使うと、意図した効果が得られたかを検証できます。このコマンドは、現在のアクセシビリティツリーと、セッション内で最後に取得したスナップショットを比較します。

# Typical workflow: snapshot -> action -> diff
agent-browser snapshot -i          # Take baseline snapshot
agent-browser click @e2            # Perform action
agent-browser diff snapshot        # See what changed (auto-compares to last snapshot)

ビジュアルリグレッションテストや監視には、次を使います。

# Save a baseline screenshot, then compare later
agent-browser screenshot baseline.png
# ... time passes or changes are made ...
agent-browser diff screenshot --baseline baseline.png

# Compare staging vs production
agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

diff snapshot の出力では、git diff と同様に、追加を +、削除を - で示します。diff screenshot は、変更されたピクセルを赤で強調表示した差分画像と、不一致率を出力します。

タイムアウトと読み込みの遅いページ

ローカルブラウザーでの Playwright のデフォルトタイムアウトは 25 秒です。AGENT_BROWSER_DEFAULT_TIMEOUT 環境変数（ミリ秒単位の値）で変更できます。ウェブサイトの読み込みが遅い場合やページが大きい場合は、デフォルトのタイムアウトに頼るのではなく、明示的に待機してください。

# Wait for network activity to settle (best for slow pages)
agent-browser wait --load networkidle

# Wait for a specific element to appear
agent-browser wait "#content"
agent-browser wait @e1

# Wait for a specific URL pattern (useful after redirects)
agent-browser wait --url "**/dashboard"

# Wait for a JavaScript condition
agent-browser wait --fn "document.readyState === 'complete'"

# Wait a fixed duration (milliseconds) as a last resort
agent-browser wait 5000

一貫して読み込みが遅いウェブサイトでは、open の後に wait --load networkidle を使い、スナップショットを取得する前にページが完全に読み込まれるようにします。特定の要素の描画が遅い場合は、wait <selector> または wait @ref でその要素を直接待機します。

セッション管理とクリーンアップ

複数のエージェントや自動化を同時に実行する場合は、競合を避けるために、必ず名前付きセッションを使用してください。

# Each agent gets its own isolated session
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

# Check active sessions
agent-browser session list

プロセスが残るのを防ぐため、作業が終わったら必ずブラウザーセッションを閉じてください。

agent-browser close                    # Close default session
agent-browser --session agent1 close   # Close specific session

前回のセッションが適切に閉じられていない場合、デーモンがまだ実行中のことがあります。新しい作業を始める前に agent-browser close を使って終了してください。

Ref のライフサイクル（重要）

Refs（@e1、@e2 など）はページが変わると無効になります。次の操作を行った後は、必ず再度スナップショットを取得してください。

• ページ遷移を伴うリンクやボタンのクリック
• フォームの送信
• 動的コンテンツの読み込み（ドロップダウン、モーダル）

agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

注釈付きスクリーンショット（ビジョンモード）

--annotate を使うと、インタラクティブな要素の上に番号付きラベルを重ねたスクリーンショットを撮影できます。各ラベル [N] は Ref @eN に対応します。これにより Ref もキャッシュされるため、別途スナップショットを取得しなくても、すぐに要素を操作できます。

agent-browser screenshot --annotate
# Output includes the image path and a legend:
#   [1] @e1 button "Submit"
#   [2] @e2 link "Home"
#   [3] @e3 textbox "Email"
agent-browser click @e2              # Click using ref from annotated screenshot

注釈付きスクリーンショットは、次のような場合に使用してください。

• ラベルのないアイコンボタンや、視覚的にしか識別できない要素がページにある場合
• 視覚的なレイアウトやスタイルを確認する必要がある場合
• Canvas やチャートの要素がある場合（テキストスナップショットでは確認できません）
• 要素の位置関係を空間的に把握する必要がある場合

セマンティックロケーター（Ref の代替）

Ref を利用できない場合や、信頼性が低い場合は、セマンティックロケーターを使用してください。

agent-browser find text "Sign In" click
agent-browser find label "Email" fill "[email protected]"
agent-browser find role button click --name "Submit"
agent-browser find placeholder "Search" type "query"
agent-browser find testid "submit-btn" click

JavaScript の評価（eval）

eval を使うと、ブラウザーのコンテキストで JavaScript を実行できます。シェルのクォート処理によって複雑な式が壊れることがあります。問題を避けるには、--stdin または -b を使用してください。

# Simple expressions work with regular quoting
agent-browser eval 'document.title'
agent-browser eval 'document.querySelectorAll("img").length'

# Complex JS: use --stdin with heredoc (RECOMMENDED)
agent-browser eval --stdin <<'EVALEOF'
JSON.stringify(
  Array.from(document.querySelectorAll("img"))
    .filter(i => !i.alt)
    .map(i => ({ src: i.src.split("/").pop(), width: i.width }))
)
EVALEOF

# Alternative: base64 encoding (avoids all shell escaping issues)
agent-browser eval -b "$(echo -n 'Array.from(document.querySelectorAll("a")).map(a => a.href)' | base64)"

重要な理由： シェルがコマンドを処理すると、内側の二重引用符、! 文字（履歴展開）、バッククォート、$() によって、JavaScript が agent-browser に渡される前に壊れることがあります。--stdin と -b のフラグを使うと、シェルによる解釈を完全に回避できます。

目安：

• 1 行で、クォートの入れ子がない場合 → シングルクォートで囲んだ通常の eval 'expression' を使用できます
• クォートの入れ子、アロー関数、テンプレートリテラル、複数行の場合 → eval --stdin <<'EVALEOF' を使用してください
• プログラムで生成したスクリプトの場合 → Base64 を使用して eval -b を実行してください

設定ファイル

永続的な設定を行うには、プロジェクトのルートに agent-browser.json を作成します。

{
  "headed": true,
  "proxy": "http://localhost:8080",
  "profile": "./browser-data"
}

優先順位（低い順）：~/.agent-browser/config.json < ./agent-browser.json < 環境変数 < CLI フラグ。カスタム設定ファイルを使用するには、--config <path> または AGENT_BROWSER_CONFIG 環境変数を指定してください（ファイルがない、または無効な場合はエラーで終了します）。すべての CLI オプションはキャメルケースのキーに対応します（例：--executable-path → "executablePath"）。ブール値フラグには true／false の値を指定できます（例：--headed false は設定を上書きします）。ユーザー設定とプロジェクト設定の拡張機能は置き換えられず、マージされます。

詳細ドキュメント

リファレンス	用途
references/commands.md	すべてのオプションを含むコマンドの完全なリファレンス
references/snapshot-refs.md	Ref のライフサイクル、無効化ルール、トラブルシューティング
references/session-management.md	並列セッション、状態の永続化、同時スクレイピング
references/authentication.md	ログインフロー、OAuth、2FA の処理、状態の再利用
references/video-recording.md	デバッグとドキュメント作成のための録画ワークフロー
references/profiling.md	パフォーマンス分析のための Chrome DevTools プロファイリング
references/proxy-support.md	プロキシの設定、地域別テスト、ローテーションプロキシ

すぐに使えるテンプレート

テンプレート	説明
templates/form-automation.sh	検証を伴うフォーム入力
templates/authenticated-session.sh	一度ログインして状態を再利用
templates/capture-workflow.sh	スクリーンショットを使ったコンテンツ抽出

./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output