agent-browser

name	agent-browser
description	Webテスト、フォーム入力、スクリーンショット、データ抽出のためのブラウザ自動化。ユーザーがWebサイトのナビゲーション、Webページの操作、フォーム入力、スクリーンショット撮影、Webアプリケーションのテスト、またはWebページからの情報抽出を必要とする場合に使用。

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

クイックスタート

pnpm exec agent-browser open <url>        # ページに移動
pnpm exec agent-browser snapshot -i       # 参照付きの対話要素を取得
pnpm exec agent-browser click @e1         # 参照を使用して要素をクリック
pnpm exec agent-browser fill @e2 "text"   # 参照を使用して入力欄を埋める
pnpm exec agent-browser close             # ブラウザを閉じる

基本ワークフロー

1. ナビゲーション: pnpm exec agent-browser open <url>
2. スナップショット: pnpm exec agent-browser snapshot -i （@e1, @e2のような参照を返す）
3. スナップショットからの参照を使用して対話
4. ナビゲーションまたは大きなDOM変更後に再スナップショット

コマンド

ナビゲーション

pnpm exec agent-browser open <url>      # URLに移動
pnpm exec agent-browser back            # 戻る
pnpm exec agent-browser forward         # 進む
pnpm exec agent-browser reload          # ページをリロード
pnpm exec agent-browser close           # ブラウザを閉じる

スナップショット（ページ解析）

pnpm exec agent-browser snapshot        # 完全なアクセシビリティツリー
pnpm exec agent-browser snapshot -i     # 対話要素のみ（推奨）
pnpm exec agent-browser snapshot -c     # コンパクト出力
pnpm exec agent-browser snapshot -d 3   # 深さを3に制限

対話（スナップショットからの@参照を使用）

pnpm exec agent-browser click @e1           # クリック
pnpm exec agent-browser dblclick @e1        # ダブルクリック
pnpm exec agent-browser fill @e2 "text"     # クリアして入力
pnpm exec agent-browser type @e2 "text"     # クリアせずに入力
pnpm exec agent-browser press Enter         # キーを押す
pnpm exec agent-browser press Control+a     # キーの組み合わせ
pnpm exec agent-browser hover @e1           # ホバー
pnpm exec agent-browser check @e1           # チェックボックスをチェック
pnpm exec agent-browser uncheck @e1         # チェックボックスのチェックを外す
pnpm exec agent-browser select @e1 "value"  # ドロップダウンを選択
pnpm exec agent-browser scroll down 500     # ページをスクロール
pnpm exec agent-browser scrollintoview @e1  # 要素を表示領域にスクロール

情報取得

pnpm exec agent-browser get text @e1        # 要素のテキストを取得
pnpm exec agent-browser get value @e1       # 入力値を取得
pnpm exec agent-browser get title           # ページタイトルを取得
pnpm exec agent-browser get url             # 現在のURLを取得

スクリーンショット

pnpm exec agent-browser screenshot          # 標準出力にスクリーンショット
pnpm exec agent-browser screenshot path.png # ファイルに保存
pnpm exec agent-browser screenshot --full   # フルページ

待機

pnpm exec agent-browser wait @e1                     # 要素を待機
pnpm exec agent-browser wait 2000                    # ミリ秒待機
pnpm exec agent-browser wait --text "Success"        # テキストを待機
pnpm exec agent-browser wait --load networkidle      # ネットワークアイドルを待機

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

pnpm exec agent-browser find role button click --name "Submit"
pnpm exec agent-browser find text "Sign In" click
pnpm exec agent-browser find label "Email" fill "[e-mail]"

例: フォーム送信

pnpm exec agent-browser open https://example.com/form
pnpm exec agent-browser snapshot -i
# 出力例: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

pnpm exec agent-browser fill @e1 "[e-mail]"
pnpm exec agent-browser fill @e2 "password123"
pnpm exec agent-browser click @e3
pnpm exec agent-browser wait --load networkidle
pnpm exec agent-browser snapshot -i  # 結果を確認

例: 保存された状態による認証

# 一度ログイン
pnpm exec agent-browser open https://app.example.com/login
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e1 "username"
pnpm exec agent-browser fill @e2 "password"
pnpm exec agent-browser click @e3
pnpm exec agent-browser wait --url "**/dashboard"
pnpm exec agent-browser state save auth.json

# 後続セッション: 保存された状態をロード
pnpm exec agent-browser state load auth.json
pnpm exec agent-browser open https://app.example.com/dashboard

セッション（並列ブラウザ）

pnpm exec agent-browser --session test1 open site-a.com
pnpm exec agent-browser --session test2 open site-b.com
pnpm exec agent-browser session list

JSON出力（パース用）

機械可読な出力のために --json を追加:

pnpm exec agent-browser snapshot -i --json
pnpm exec agent-browser get text @e1 --json

デバッグ

pnpm exec agent-browser open example.com --headed  # ブラウザウィンドウを表示
pnpm exec agent-browser console                    # コンソールメッセージを表示
pnpm exec agent-browser errors                     # ページエラーを表示

使用上の注意

タイミング

• ページナビゲーション後は必ず新しいスナップショットを取得
• 動的コンテンツが読み込まれるのを待つために wait コマンドを使用
• 要素が表示されない場合は、scrollintoview で要素をビューポート内にスクロール

セキュリティ

• 認証情報は安全に管理し、状態ファイル（auth.jsonなど）を公開リポジトリにコミットしない
• テスト環境では専用のテストアカウントを使用

パフォーマンス

• 不要な完全ページスクリーンショットを避ける
• 必要に応じて snapshot -i を使用して対話要素のみに絞る
• 複数のブラウザ操作が必要な場合はセッション機能を活用

トラブルシューティング

• 要素が見つからない: snapshot -i を再実行して最新の参照を取得
• クリックが機能しない: 要素が表示されているか確認、必要に応じて scrollintoview を使用
• タイムアウト: wait --load networkidle でページの読み込み完了を待機

ユースケース

Webアプリケーションのテスト

# ユーザー登録フローのテスト
pnpm exec agent-browser open https://app.example.com/signup
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e1 "[e-mail]"
pnpm exec agent-browser fill @e2 "SecurePass123!"
pnpm exec agent-browser click @e3
pnpm exec agent-browser wait --text "Welcome"
pnpm exec agent-browser screenshot signup-success.png

データスクレイピング

# 商品情報の抽出
pnpm exec agent-browser open https://shop.example.com/products
pnpm exec agent-browser snapshot
pnpm exec agent-browser get text @e5 --json > product-name.json
pnpm exec agent-browser get text @e6 --json > product-price.json

UIの視覚的回帰テスト

# 複数の画面サイズでスクリーンショットを撮影
pnpm exec agent-browser open https://example.com
pnpm exec agent-browser screenshot desktop.png
pnpm exec agent-browser resize 768 1024
pnpm exec agent-browser screenshot tablet.png
pnpm exec agent-browser resize 375 667
pnpm exec agent-browser screenshot mobile.png

フォームの自動入力

# 繰り返しフォーム入力の自動化
pnpm exec agent-browser open https://forms.example.com
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e1 "John Doe"
pnpm exec agent-browser fill @e2 "[e-mail]"
pnpm exec agent-browser fill @e3 "555-1234"
pnpm exec agent-browser select @e4 "Option 2"
pnpm exec agent-browser check @e5
pnpm exec agent-browser click @e6

高度な機能

複数ページにわたるワークフロー

# ステップ1: ログイン
pnpm exec agent-browser open https://app.example.com/login
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e1 "[e-mail]"
pnpm exec agent-browser fill @e2 "password"
pnpm exec agent-browser click @e3
pnpm exec agent-browser wait --url "**/dashboard"

# ステップ2: 設定ページに移動
pnpm exec agent-browser open https://app.example.com/settings
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e7 "New Display Name"
pnpm exec agent-browser click @e8
pnpm exec agent-browser wait --text "Settings saved"

条件付き操作

# エラーメッセージの確認
pnpm exec agent-browser open https://example.com/form
pnpm exec agent-browser snapshot -i
pnpm exec agent-browser fill @e1 "invalid-email"
pnpm exec agent-browser click @e2
pnpm exec agent-browser wait --text "Invalid email"
pnpm exec agent-browser screenshot error-state.png

セッション管理

# 並列テストの実行
pnpm exec agent-browser --session user1 open https://app.example.com
pnpm exec agent-browser --session user2 open https://app.example.com
pnpm exec agent-browser --session user1 fill @e1 "[e-mail]"
pnpm exec agent-browser --session user2 fill @e1 "[e-mail]"

ベストプラクティス

1. スナップショットファースト: 対話の前に常にスナップショットを取得
2. 明示的な待機: wait コマンドを使用して非同期操作を処理
3. エラーハンドリング: 予期しない状態をキャプチャするためにスクリーンショットを使用
4. 状態の再利用: 認証状態を保存して繰り返しログインを避ける
5. JSON出力: 自動化とパースのために --json フラグを使用
6. セッションの分離: 並列テストにはセッション機能を使用
7. デバッグモード: 問題のトラブルシューティングには --headed を使用

agent-browserとMCPツールの統合

Claude Codeでは、agent-browserに加えてChromeブラウザ用のMCP（Model Context Protocol）ツールも利用できます。

agent-browser vs MCPツール

機能	agent-browser	MCPツール（Chrome）
使いやすさ	CLIベース、簡単	プログラマティック
スナップショット	✅ テキストベース	✅ DOM構造
要素参照	@e1, @e2	uid ベース
セッション管理	✅	✅
スクリーンショット	✅	✅
ネットワーク監視	❌	✅ DevTools統合
パフォーマンス分析	❌	✅ トレース機能

使い分けのガイドライン

agent-browserを使用する場合:

• 簡単なフォーム入力やナビゲーション
• テキストベースの要素参照が望ましい場合
• 軽量で迅速な操作

MCPツール（Chrome）を使用する場合:

• ネットワークリクエストの監視が必要
• コンソールログの詳細な分析
• パフォーマンストレースと最適化
• より複雑なDOM操作

まとめ

agent-browserは、Webブラウザの自動化を簡単にするための強力なツールです。スナップショットベースのワークフロー、参照システム、豊富なコマンドセットにより、Webテスト、データ抽出、フォーム自動化などのタスクを効率的に実行できます。

このスキルを使用することで、ユーザーはWebページとの対話を自動化し、反復的なタスクを削減し、Webアプリケーションの品質を向上させることができます。