mcpField
A
agent-browser

agent-browser

github.com/shanraisshanエージェントワークフロー68.3k372 回インストール1 日前に更新
リポジトリ

agent-browser について

agent-browser CLIでWebページを操作するブラウザー自動化スキルです。ページ移動、スナップショット、操作、セッション状態、データ抽出、iOSシミュレーターの手順を扱います。

主な機能

  1. 01ページ移動と内容の確認
  2. 02要素参照による操作
  3. 03セマンティックロケーターの利用
  4. 04セッション状態の保存と再利用
  5. 05テキストとJSONの抽出
  6. 06並列セッションの実行

活用シーン

  1. 01Webフォームの入力と送信
  2. 02認証済みブラウザー状態の再利用
  3. 03分析用のページテキスト収集
  4. 04iOSシミュレーターでのモバイルSafariのテスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill agent-browser

インストール後、Claude Code で/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

基本的なコマンド

# 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 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 scroll down 500         # Scroll page

# 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

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser pdf output.pdf          # Save as PDF

よく使われるパターン

フォームの送信
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
状態を保持した認証
# 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
データの抽出
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
ビジュアルブラウザー(デバッグ)
agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser record start demo.webm # Record session
ローカルファイル(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>" を指定してください。

参照のライフサイクル(重要)

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

  • ページ遷移を伴うリンクやボタンのクリック
  • フォームの送信
  • 動的なコンテンツの読み込み(ドロップダウン、モーダル)
agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

セマンティックロケーター(参照の代替)

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

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

詳細なドキュメント

リファレンス使用する場面
references/commands.mdすべてのオプションを含むコマンドの完全なリファレンス
references/snapshot-refs.md参照のライフサイクル、無効化のルール、トラブルシューティング
references/session-management.md並列セッション、状態の保持、並行スクレイピング
references/authentication.mdログインフロー、OAuth、2FA の処理、状態の再利用
references/video-recording.mdデバッグやドキュメント作成のための録画ワークフロー
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

コメント