agent-browser-2

エージェントブラウザスキル

アクセシビリティツリーのスナップショットと参照を使い、要素を確実に選択できる高速なブラウザー自動化です。

組み込みブラウザーツールではなく、これを使う理由

agent-browser を使う場面：

• 複数のステップからなるワークフローを自動化する場合
• 要素を確実に選択する必要がある場合
• パフォーマンスが重要な場合
• 複雑な SPA を扱う場合
• セッションを分離する必要がある場合

組み込みブラウザーツールを使う場面：

• 分析用のスクリーンショットや PDF が必要な場合
• 視覚的な確認が必要な場合
• ブラウザー拡張機能との連携が必要な場合

基本的なワークフロー

# 1. Navigate and snapshot
agent-browser open https://example.com
agent-browser snapshot -i --json

# 2. Parse refs from JSON, then interact
agent-browser click @e2
agent-browser fill @e3 "text"

# 3. Re-snapshot after page changes
agent-browser snapshot -i --json

主なコマンド

ナビゲーション

agent-browser open <url>
agent-browser back | forward | reload | close

スナップショット（常に -i --json を使用）

agent-browser snapshot -i --json          # Interactive elements, JSON output
agent-browser snapshot -i -c -d 5 --json  # + compact, depth limit
agent-browser snapshot -s "#main" -i      # Scope to selector

操作（参照ベース）

agent-browser click @e2
agent-browser fill @e3 "text"
agent-browser type @e3 "text"
agent-browser hover @e4
agent-browser check @e5 | uncheck @e5
agent-browser select @e6 "value"
agent-browser press "Enter"
agent-browser scroll down 500
agent-browser drag @e7 @e8

情報の取得

agent-browser get text @e1 --json
agent-browser get html @e2 --json
agent-browser get value @e3 --json
agent-browser get attr @e4 "href" --json
agent-browser get title --json
agent-browser get url --json
agent-browser get count ".item" --json

状態の確認

agent-browser is visible @e2 --json
agent-browser is enabled @e3 --json
agent-browser is checked @e4 --json

待機

agent-browser wait @e2                    # Wait for element
agent-browser wait 1000                   # Wait ms
agent-browser wait --text "Welcome"       # Wait for text
agent-browser wait --url "**/dashboard"   # Wait for URL
agent-browser wait --load networkidle     # Wait for network
agent-browser wait --fn "window.ready === true"

セッション（分離されたブラウザー）

agent-browser --session admin open site.com
agent-browser --session user open site.com
agent-browser session list
# Or via env: AGENT_BROWSER_SESSION=admin agent-browser ...

状態の永続化

agent-browser state save auth.json        # Save cookies/storage
agent-browser state load auth.json        # Load (skip login)

スクリーンショットと PDF

agent-browser screenshot page.png
agent-browser screenshot --full page.png
agent-browser pdf page.pdf

ネットワーク制御

agent-browser network route "**/ads/*" --abort           # Block
agent-browser network route "**/api/*" --body '{"x":1}'  # Mock
agent-browser network requests --filter api              # View

Cookie とストレージ

agent-browser cookies                     # Get all
agent-browser cookies set name value
agent-browser storage local key           # Get localStorage
agent-browser storage local set key val

タブとフレーム

agent-browser tab new https://example.com
agent-browser tab 2                       # Switch to tab
agent-browser frame @e5                   # Switch to iframe
agent-browser frame main                  # Back to main

スナップショットの出力形式

{
  "success": true,
  "data": {
    "snapshot": "...",
    "refs": {
      "e1": {"role": "heading", "name": "Example Domain"},
      "e2": {"role": "button", "name": "Submit"},
      "e3": {"role": "textbox", "name": "Email"}
    }
  }
}

ベストプラクティス

1. 常に -i フラグを使用する - 操作可能な要素に絞り込みます
2. 常に --json を使用する - 解析が簡単になります
3. 安定するまで待つ - agent-browser wait --load networkidle
4. 認証状態を保存する - state save/load でログイン手順を省略します
5. セッションを使用する - 異なるブラウザーコンテキストを分離します
6. デバッグには --headed を使用する - 動作を目で確認できます

例：検索と情報の抽出

agent-browser open https://www.google.com
agent-browser snapshot -i --json
# AI identifies search box @e1
agent-browser fill @e1 "AI agents"
agent-browser press Enter
agent-browser wait --load networkidle
agent-browser snapshot -i --json
# AI identifies result refs
agent-browser get text @e3 --json
agent-browser get attr @e4 "href" --json

例：複数セッションでのテスト

# Admin session
agent-browser --session admin open app.com
agent-browser --session admin state load admin-auth.json
agent-browser --session admin snapshot -i --json

# User session (simultaneous)
agent-browser --session user open app.com
agent-browser --session user state load user-auth.json
agent-browser --session user snapshot -i --json

インストール

npm install -g agent-browser
agent-browser install                     # Download Chromium
agent-browser install --with-deps         # Linux: + system deps

クレジット

Yossi Elkrief（@MaTriXy）がスキルを作成しました。

agent-browser CLI は Vercel Labs によるものです。