← スキル一覧に戻る
agent-browser
by k35o
This is my site.
⭐ 5🍴 0📅 2026年1月24日
Manusで実行SKILL.md
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 # ブラウザを閉じる
基本ワークフロー
- ナビゲーション:
pnpm exec agent-browser open <url> - スナップショット:
pnpm exec agent-browser snapshot -i（@e1,@e2のような参照を返す） - スナップショットからの参照を使用して対話
- ナビゲーションまたは大きな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 "user@test.com"
例: フォーム送信
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 "user@example.com"
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 "testuser@example.com"
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 "john@example.com"
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 "user@example.com"
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 "user1@example.com"
pnpm exec agent-browser --session user2 fill @e1 "user2@example.com"
ベストプラクティス
- スナップショットファースト: 対話の前に常にスナップショットを取得
- 明示的な待機:
waitコマンドを使用して非同期操作を処理 - エラーハンドリング: 予期しない状態をキャプチャするためにスクリーンショットを使用
- 状態の再利用: 認証状態を保存して繰り返しログインを避ける
- JSON出力: 自動化とパースのために
--jsonフラグを使用 - セッションの分離: 並列テストにはセッション機能を使用
- デバッグモード: 問題のトラブルシューティングには
--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アプリケーションの品質を向上させることができます。
スコア
総合スコア
50/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です