agent-browser

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

未インストールの場合

未安装时执行

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

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

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

agent-browser snapshot -i -c

出力例:

输出示例:

- link "Home" [ref=e1]

- button "Login" [ref=e2]

- input "Email" [ref=e3]

- input "Password" [ref=e4]

- 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

または URL を確認

或查看当前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 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
```
命令
对需要认证的网站，可利用会话功能维持登录状态

agent-browser

Original

Translation

Agent Browser Skill

Agent Browser Skill

トリガーフレーズ

触发短语

機能詳細

功能详情

実行手順

执行步骤

Step 0: agent-browser の確認

Step 0: 确认agent-browser

インストール確認

检查安装情况

未インストールの場合

未安装时执行

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

Step 1: 分类用户请求

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

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

1. ページを開く

1. 打开页面

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

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

出力例:

输出示例:

- 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. 通过元素引用执行操作

Step 3: 結果の確認

Step 3: 确认结果

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

通过快照确认当前状态

または URL を確認

或查看当前URL

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

获取截图

クイックリファレンス

快速参考

基本操作

基本操作

ナビゲーション

导航操作

情報取得

信息获取

待機

等待操作

デバッグ

调试操作

セッション管理

会话管理

セッションを指定

指定会话

セッション一覧

查看会话列表

特定セッションで操作

在指定会话中执行操作

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

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

注意事項

注意事项