mcpField
A
agent-browser

agent-browser

github.com/linuxlewisエージェントワークフロー1130 回インストール9 週間前に更新
リポジトリ

agent-browser について

agent-browser は AI エージェント向けのヘッドレスブラウザー自動化スキルで、コマンドラインからページ移動、構造の確認、要素の操作を行います。セッションをまたいだ状態保持に対応し、スクリーンショットや PDF も保存できます。

主な機能

  1. 01コマンドラインでブラウザーを操作
  2. 02要素参照付きのアクセシビリティスナップショット
  3. 03参照やセレクターによるページ操作
  4. 04セッション間でブラウザー状態を保持
  5. 05スクリーンショット撮影や PDF 出力

活用シーン

  1. 01ページの閲覧と操作要素の確認
  2. 02フォーム入力と操作結果の検証
  3. 03ページのスクリーンショットや PDF の保存

インストール

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

$npx skills add https://github.com/linuxlewis/agent-skills --skill agent-browser

インストール後、Claude Code で/agent-browserを入力して読み込まれたか確認します。

同梱ファイルreferences/commands.md

詳細

Agent Browser

AI エージェント向けの高速なヘッドレスブラウザー自動化ツール、agent-browser CLI を使用したブラウザー自動化ツールです。

インストール

npm install -g agent-browser
agent-browser install  # Install browser binaries

クイックスタート

# Navigate to a URL
agent-browser open https://example.com

# Get accessibility snapshot (shows refs like @e1, @e2)
agent-browser snapshot -i

# Click using ref from snapshot
agent-browser click @e2

# Type into an element
agent-browser fill @e3 "hello world"

# Take screenshot
agent-browser screenshot output.png

ワークフローのパターン

  1. 開く - 対象の URL に移動します
  2. スナップショット - アクセシビリティツリーを取得して、利用可能な要素を確認します
  3. 操作する - refs（@e1、@e2 など）を使用して要素を操作します
  4. 確認する - スナップショットまたはスクリーンショットを撮影して状態を確認します

基本コマンド

コマンドの全リファレンスは、references/commands.md を参照してください。

ナビゲーション
agent-browser open <url>           # Navigate to URL
agent-browser back                 # Go back
agent-browser forward              # Go forward
agent-browser reload               # Reload page
操作
agent-browser click <sel>          # Click element (or @ref)
agent-browser fill <sel> <text>    # Clear and fill
agent-browser press <key>          # Press key (Enter, Tab, etc.)
agent-browser select <sel> <val>   # Select dropdown option
情報の取得
agent-browser snapshot             # Accessibility tree with refs
agent-browser snapshot -i          # Interactive elements only
agent-browser get text <sel>       # Get element text
agent-browser get url              # Get current URL
キャプチャ
agent-browser screenshot [path]    # Take screenshot
agent-browser screenshot --full    # Full page screenshot
agent-browser pdf <path>           # Save as PDF

セッション

セッションを使用すると、コマンド間でブラウザーの状態を維持できます。

agent-browser --session myproject open https://example.com
agent-browser --session myproject snapshot
agent-browser --session myproject click @e1

セレクター

  • Refs：@e1、@e2（スナップショットの出力から取得） - 推奨
  • CSS：#id、.class、div > span
  • テキスト：text=Submit
  • ロール：role=button[name="Submit"]

ベストプラクティス

  1. 必ず最初にスナップショットを取得する - 操作の前にアクセシビリティツリーを取得します
  2. refs を使用する - CSS セレクターよりもスナップショットから取得した @e1 refs を優先します
  3. セッションを使用する - 複数のコマンド間で状態を維持します
  4. 適切に待機する - 動的なコンテンツには wait を使用します
  5. 操作を確認する - 操作後にスナップショットまたはスクリーンショットを撮影します

コメント

Markdown 対応