browser

ブラウザー自動化スキル

AI 向けに最適化されたスナップショットを使った、agent-browser による Web ブラウザー自動化です。完全な DOM の代わりに要素参照（@e1、@e2）を使うことで、コンテキストを 93％ 削減します。

基本的なワークフロー

# 1. Navigate to page
agent-browser open <url>

# 2. Get accessibility tree with element refs
agent-browser snapshot -i    # -i = interactive elements only

# 3. Interact using refs from snapshot
agent-browser click @e2
agent-browser fill @e3 "text"

# 4. Re-snapshot after page changes
agent-browser snapshot -i

クイックリファレンス

ナビゲーション

コマンド	説明
open <url>	URL に移動
back	戻る
forward	進む
reload	ページを再読み込み
close	ブラウザーを閉じる

スナップショット（AI 向けに最適化）

コマンド	説明
snapshot	アクセシビリティツリー全体
snapshot -i	インタラクティブ要素のみ（ボタン、リンク、入力欄）
snapshot -c	コンパクト表示（空の要素を削除）
snapshot -d 3	深さを 3 レベルに制限
screenshot [path]	スクリーンショットを撮影（path を指定しない場合は base64）

操作

コマンド	説明
click <sel>	要素をクリック
fill <sel> <text>	入力欄をクリアして入力
type <sel> <text>	キーイベントを使って入力
press <key>	キーを押す（Enter、Tab など）
hover <sel>	要素にカーソルを合わせる
select <sel> <val>	ドロップダウンの項目を選択
check/uncheck <sel>	チェックボックスを切り替え
scroll <dir> [px]	ページをスクロール

情報の取得

コマンド	説明
get text <sel>	テキストコンテンツを取得
get html <sel>	innerHTML を取得
get value <sel>	入力値を取得
get attr <sel> <attr>	属性を取得
get title	ページタイトルを取得
get url	現在の URL を取得

待機

コマンド	説明
wait <selector>	要素が表示されるまで待機
wait <ms>	指定したミリ秒数だけ待機
wait --text "text"	テキストが表示されるまで待機
wait --url "pattern"	URL が一致するまで待機
wait --load networkidle	読み込み状態になるまで待機

セッション

コマンド	説明
--session <name>	分離されたセッションを使用
session list	アクティブなセッションを一覧表示

セレクター

要素参照（推奨）

# Get refs from snapshot
agent-browser snapshot -i
# Output: button "Submit" [ref=e2]

# Use ref to interact
agent-browser click @e2

CSS セレクター

agent-browser click "#submit"
agent-browser fill ".email-input" "[email protected]"

セマンティックロケーター

agent-browser find role button click --name "Submit"
agent-browser find label "Email" fill "[email protected]"
agent-browser find testid "login-btn" click

例

ログインのフロー

agent-browser open https://example.com/login
agent-browser snapshot -i
agent-browser fill @e2 "[email protected]"
agent-browser fill @e3 "password123"
agent-browser click @e4
agent-browser wait --url "**/dashboard"

フォームの送信

agent-browser open https://example.com/contact
agent-browser snapshot -i
agent-browser fill @e1 "John Doe"
agent-browser fill @e2 "[email protected]"
agent-browser fill @e3 "Hello, this is my message"
agent-browser click @e4
agent-browser wait --text "Thank you"

データの抽出

agent-browser open https://example.com/products
agent-browser snapshot -i
# Iterate through product refs
agent-browser get text @e1  # Product name
agent-browser get text @e2  # Price
agent-browser get attr @e3 href  # Link

マルチセッション（スウォーム）

# Session 1: Navigator
agent-browser --session nav open https://example.com
agent-browser --session nav state save auth.json

# Session 2: Scraper (uses same auth)
agent-browser --session scrape state load auth.json
agent-browser --session scrape open https://example.com/data
agent-browser --session scrape snapshot -i

Claude Flow との統合

MCP ツール

すべてのブラウザー操作を、browser/ プレフィックス付きの MCP ツールとして利用できます。

• browser/open
• browser/snapshot
• browser/click
• browser/fill
• browser/screenshot
• など

メモリーの統合

# Store successful patterns
npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"

# Retrieve before similar task
npx @claude-flow/cli memory search --query "login automation"

フック

# Pre-browse hook (get context)
npx @claude-flow/cli hooks pre-edit --file "browser-task.ts"

# Post-browse hook (record success)
npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true

ヒント

1. 常にスナップショットを使います — 要素参照を使った AI 向けの最適化がされています
2. -i フラグを優先します — インタラクティブ要素のみが取得され、出力が小さくなります
3. セレクターではなく要素参照を使います — より信頼性が高く、決定的です
4. ナビゲーション後にスナップショットを再取得します — ページの状態が変わります
5. 並列作業にはセッションを使います — 各セッションは分離されています