关于 browser
使用 agent-browser 执行网页自动化的 Agent 技能，通过带元素引用的无障碍快照来浏览和操作页面。支持导航、表单交互、信息提取及隔离会话。
主要功能
- 01生成无障碍树与交互元素快照
- 02通过引用或选择器操作页面
- 03导航、等待并读取页面信息
- 04使用隔离会话并保存状态
- 05通过 MCP 工具调用浏览器操作
适用场景
- 01自动填写并提交网页表单
- 02从产品页面提取名称与价格
- 03在独立会话中复用登录状态
- 04通过 MCP 执行浏览器交互
MCP 相关
通过 Claude Flow 将浏览器操作作为 MCP 工具提供，工具名称使用 browser/ 前缀，例如 browser/open、browser/click 和 browser/snapshot。
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/browser确认已加载。
详细介绍
浏览器自动化技能
使用 agent-browser 和针对 AI 优化的快照进行网页浏览器自动化。使用元素引用（@e1、@e2）代替完整 DOM，可减少 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] | 截取屏幕截图（未指定路径时返回 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/openbrowser/snapshotbrowser/clickbrowser/fillbrowser/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
提示
- 始终使用快照 - 快照针对带引用的 AI 使用场景进行了优化
- 优先使用
-i标志 - 仅获取可交互元素，输出更精简 - 使用引用，而非选择器 - 更可靠，结果更确定
- 导航后重新获取快照 - 页面状态会发生变化
- 并行工作时使用会话 - 每个会话彼此独立
评论
支持 Markdown