Back to Details

agent-browser

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Agent Browser Skill

Agent Browser Skill

ブラウザ自動化を行うスキル。agent-browser CLI を使用して、UI デバッグ・検証・自動操作を実行します。
这是一项实现浏览器自动化的Skill。使用agent-browser CLI执行UI调试、验证与自动化操作。

トリガーフレーズ

触发短语

このスキルは以下のフレーズで自動起動します：
  • 「ページを開いて」「URLを確認して」
  • 「クリックして」「入力して」「フォームに」
  • 「スクリーンショットを撮って」
  • 「UIを確認して」「画面をテストして」
  • "open this page", "click on", "fill the form", "screenshot"
此Skill会在出现以下短语时自动启动：
  • 「打开页面」「查看URL」
  • 「点击」「输入」「填写表单」
  • 「截图」
  • 「检查UI」「测试页面」
  • "open this page", "click on", "fill the form", "screenshot"

機能詳細

功能详情

機能詳細
ブラウザ自動化See references/browser-automation.md
AI スナップショットワークフローSee references/ai-snapshot-workflow.md
功能详情
浏览器自动化参见 references/browser-automation.md
AI 快照工作流参见 references/ai-snapshot-workflow.md

実行手順

执行步骤

Step 0: agent-browser の確認

Step 0: 确认agent-browser

bash
undefined
bash
undefined

インストール確認

检查安装情况

which agent-browser
which agent-browser

未インストールの場合

未安装时执行

npm install -g agent-browser agent-browser install
undefined
npm install -g agent-browser agent-browser install
undefined

Step 1: ユーザーのリクエストを分類

Step 1: 分类用户请求

リクエストタイプ対応アクション
URL を開く
agent-browser open <url>
要素をクリックスナップショット → 
agent-browser click @ref
フォーム入力スナップショット → 
agent-browser fill @ref "text"
状態確認
agent-browser snapshot -i -c
スクリーンショット
agent-browser screenshot <path>
デバッグ
agent-browser --headed open <url>
请求类型对应操作
打开URL
agent-browser open <url>
点击元素快照 → 
agent-browser click @ref
填写表单快照 → 
agent-browser fill @ref "text"
状态检查
agent-browser snapshot -i -c
截图
agent-browser screenshot <path>
调试
agent-browser --headed open <url>

Step 2: AI スナップショットワークフロー（推奨）

Step 2: AI 快照工作流（推荐）

ほとんどの操作で、まずスナップショットを取得してから要素参照で操作します：
bash
undefined
大多数操作中，建议先获取快照，再通过元素引用进行操作：
bash
undefined

1. ページを開く

1. 打开页面

agent-browser open https://example.com
agent-browser open https://example.com

2. スナップショット取得（AI 向け、インタラクティブ要素のみ）

2. 获取快照（面向AI，仅包含交互元素）

agent-browser snapshot -i -c
agent-browser snapshot -i -c

出力例:

输出示例:

- link "Home" [ref=e1]

- link "Home" [ref=e1]

- button "Login" [ref=e2]

- button "Login" [ref=e2]

- input "Email" [ref=e3]

- input "Email" [ref=e3]

- input "Password" [ref=e4]

- input "Password" [ref=e4]

- button "Submit" [ref=e5]

- button "Submit" [ref=e5]

3. 要素参照で操作

3. 通过元素引用执行操作

agent-browser click @e2 # Login ボタンをクリック agent-browser fill @e3 "user@example.com" agent-browser fill @e4 "password123" agent-browser click @e5 # Submit
undefined
agent-browser click @e2 # 点击Login按钮 agent-browser fill @e3 "user@example.com" agent-browser fill @e4 "password123" agent-browser click @e5 # 点击Submit按钮
undefined

Step 3: 結果の確認

Step 3: 确认结果

bash
undefined
bash
undefined

現在の状態をスナップショットで確認

通过快照确认当前状态

agent-browser snapshot -i -c
agent-browser snapshot -i -c

または URL を確認

或查看当前URL

agent-browser get url
agent-browser get url

スクリーンショットを取得

获取截图

agent-browser screenshot result.png

---
agent-browser screenshot result.png

---

クイックリファレンス

快速参考

基本操作

基本操作

コマンド説明
open <url>
URL を開く
snapshot -i -c
AI 向けスナップショット
click @e1
要素をクリック
fill @e1 "text"
フォームに入力
type @e1 "text"
テキストを入力
press Enter
キーを押す
screenshot [path]
スクリーンショット
close
ブラウザを閉じる
命令说明
open <url>
打开URL
snapshot -i -c
面向AI的快照
click @e1
点击元素
fill @e1 "text"
填写表单
type @e1 "text"
输入文本
press Enter
按下按键
screenshot [path]
截图
close
关闭浏览器

ナビゲーション

导航操作

コマンド説明
back
戻る
forward
進む
reload
リロード
命令说明
back
返回上一页
forward
前进到下一页
reload
刷新页面

情報取得

信息获取

コマンド説明
get text @e1
テキスト取得
get html @e1
HTML 取得
get url
現在の URL
get title
ページタイトル
命令说明
get text @e1
获取文本
get html @e1
获取HTML
get url
获取当前URL
get title
获取页面标题

待機

等待操作

コマンド説明
wait @e1
要素を待機
wait 1000
1秒待機
命令说明
wait @e1
等待元素加载
wait 1000
等待1秒

デバッグ

调试操作

コマンド説明
--headed
ブラウザを表示
console
コンソールログ
errors
ページエラー
highlight @e1
要素をハイライト
命令说明
--headed
显示浏览器界面
console
查看控制台日志
errors
查看页面错误
highlight @e1
高亮元素

セッション管理

会话管理

複数のタブ/セッションを並列管理：
bash
undefined
可并行管理多个标签页/会话：
bash
undefined

セッションを指定

指定会话

agent-browser --session admin open https://admin.example.com agent-browser --session user open https://example.com
agent-browser --session admin open https://admin.example.com agent-browser --session user open https://example.com

セッション一覧

查看会话列表

agent-browser session list
agent-browser session list

特定セッションで操作

在指定会话中执行操作

agent-browser --session admin snapshot -i -c

---
agent-browser --session admin snapshot -i -c

---

MCP ブラウザツールとの使い分け

与MCP浏览器工具的使用区分

ツール推奨度用途
agent-browser★★★第一選択。AI 向けスナップショットが強力
chrome-devtools MCP★★☆Chrome が既に開いている場合
playwright MCP★★☆複雑な E2E テスト
原則: まず agent-browser を試し、うまくいかない場合のみ MCP ツールを使用。
工具推荐度用途
agent-browser★★★首选工具。面向AI的快照功能强大
chrome-devtools MCP★★☆Chrome已打开时使用
playwright MCP★★☆复杂端到端测试场景
原则: 优先尝试agent-browser，若无法实现需求再使用MCP工具。

注意事項

注意事项

  • agent-browser はヘッドレスモードがデフォルト
  • --headed
    オプションでブラウザを表示可能
  • セッションは明示的に 
    close
    するまで維持される
  • 認証が必要なサイトはセッションを活用
  • agent-browser默认使用无头模式
  • 可通过
    --headed
    选项显示浏览器界面
  • 会话会一直保留，直到显式执行
    close
    命令
  • 对需要认证的网站，可利用会话功能维持登录状态