浏览器自动化-skill
用于自动化浏览器交互操作的 skill,支持网页测试、表单填写、截图以及数据提取。
可用工具
| 工具 | 说明 |
|---|---|
open |
打开指定 URL 的网页 |
back |
返回上一页 |
forward |
前进到下一页 |
reload |
重新加载页面 |
close |
关闭浏览器 |
snapshot |
获取页面交互元素快照,返回带引用的元素列表 |
screenshot |
截取当前页面的屏幕截图 |
click |
点击指定的元素 |
dblclick |
双击指定的元素 |
focus |
聚焦指定的元素 |
fill |
清空并输入文本到指定元素 |
type |
不清空直接输入文本到指定元素 |
press |
按下按键或组合键 |
keydown |
按住按键 |
keyup |
释放按键 |
hover |
鼠标悬停在指定元素上 |
check |
勾选复选框 |
uncheck |
取消勾选复选框 |
select |
在下拉列表中选择指定的选项 |
scroll |
滚动页面到指定位置 |
scrollintoview |
滚动元素至可见区域 |
wait |
等待指定的条件(元素、文本、URL、网络空闲等) |
get text |
获取指定元素的文本内容 |
get html |
获取指定元素的 innerHTML |
get value |
获取指定元素的输入值 |
get attribute |
获取指定元素的属性值 |
get styles |
获取指定元素的计算样式 |
get box |
获取元素的边界框位置和尺寸 |
get title |
获取当前页面的标题 |
get url |
获取当前页面的 URL |
get count |
计算匹配元素数量 |
is visible |
检查元素是否可见 |
is enabled |
检查元素是否启用 |
is checked |
检查元素是否被选中 |
find |
使用语义定位器查找元素并执行操作 |
cookies |
获取、设置或清除 cookies |
storage |
操作 localStorage |
tab |
管理标签页(列出、新建、切换、关闭) |
window |
管理浏览器窗口 |
dialog |
处理对话框(接受或取消) |
eval |
执行 JavaScript 代码 |
核心工作流
1. 浏览器自动化流程
步骤 1: open <url> # 导航到目标网页
步骤 2: snapshot -i # 获取可交互元素快照(推荐使用)
步骤 3: 使用 snapshot 返回的 @e1、@e2 等引用进行交互操作
步骤 4: 在页面导航或 DOM 发生重大变化后,重新执行 snapshot
2. 导航
node scripts/360browser_agent.mjs open <url> # 导航到 URL(别名:goto, navigate)
# 支持:https://, http://, file://, about:, data://
# 如果没有协议,自动添加 https://
node scripts/360browser_agent.mjs back # 返回上一页
node scripts/360browser_agent.mjs forward # 前进到下一页
node scripts/360browser_agent.mjs reload # 重新加载页面
node scripts/360browser_agent.mjs close # 关闭浏览器(别名:quit, exit)
3. 页面分析(快照)
node scripts/360browser_agent.mjs snapshot # 获取完整的可访问性树
node scripts/360browser_agent.mjs snapshot -i # 仅获取可交互元素(推荐)
node scripts/360browser_agent.mjs snapshot -c # 紧凑输出模式
node scripts/360browser_agent.mjs snapshot -d 3 # 限制深度为 3
node scripts/360browser_agent.mjs snapshot -s "#main" # 限定 CSS 选择器范围
4. 交互操作(使用 snapshot 返回的 @refs)
node scripts/360browser_agent.mjs click @e1 # 点击元素
node scripts/360browser_agent.mjs dblclick @e1 # 双击元素
node scripts/360browser_agent.mjs focus @e1 # 聚焦元素
node scripts/360browser_agent.mjs fill @e2 "text" # 清空并输入文本
node scripts/360browser_agent.mjs type @e2 "text" # 不清空直接输入文本
node scripts/360browser_agent.mjs press Enter # 按下按键(别名:key)
node scripts/360browser_agent.mjs press Ctrl+a # 按下组合键
node scripts/360browser_agent.mjs keydown Shift # 按住键
node scripts/360browser_agent.mjs keyup Shift # 释放键
node scripts/360browser_agent.mjs hover @e1 # 鼠标悬停
node scripts/360browser_agent.mjs check @e1 # 勾选复选框
node scripts/360browser_agent.mjs uncheck @e1 # 取消勾选复选框
node scripts/360browser_agent.mjs select @e1 "value" # 选择下拉选项
node scripts/360browser_agent.mjs select @e1 "a" "b" # 选择多个选项
node scripts/360browser_agent.mjs scroll down 500 # 滚动页面(默认:向下 300px)
node scripts/360browser_agent.mjs scrollintoview @e1 # 滚动元素至可见区域(别名:scrollinto)
5. 获取信息
5.1 元素内容获取
node scripts/360browser_agent.mjs get text @e1 # 获取元素文本内容
node scripts/360browser_agent.mjs get html @e1 # 获取元素的 innerHTML
node scripts/360browser_agent.mjs get value @e1 # 获取表单元素的输入值
5.2 元素属性获取
node scripts/360browser_agent.mjs get attr @e1 href # 获取元素的指定属性值
node scripts/360browser_agent.mjs get styles @e1 # 获取元素的计算样式(字体、颜色、背景等)
5.3 元素位置与布局
node scripts/360browser_agent.mjs get box @e1 # 获取元素的边界框位置和尺寸
5.4 页面信息获取
node scripts/360browser_agent.mjs get title # 获取当前页面的标题
node scripts/360browser_agent.mjs get url # 获取当前页面的 URL
5.5 元素统计
node scripts/360browser_agent.mjs get count ".item" # 计算匹配选择器的元素数量
6. 检查状态
node scripts/360browser_agent.mjs is visible @e1 # 检查元素是否可见
node scripts/360browser_agent.mjs is enabled @e1 # 检查元素是否启用
node scripts/360browser_agent.mjs is checked @e1 # 检查元素是否被选中
7. 截图与 PDF
node scripts/360browser_agent.mjs screenshot # 保存到临时目录
node scripts/360browser_agent.mjs screenshot path.png # 保存到指定路径
node scripts/360browser_agent.mjs screenshot --full # 截取全页面
8. 等待
node scripts/360browser_agent.mjs wait @e1 # 等待元素出现
node scripts/360browser_agent.mjs wait 2000 # 等待毫秒数
node scripts/360browser_agent.mjs wait --text "Success" # 等待文本出现(或 -t)
node scripts/360browser_agent.mjs wait --url "**/dashboard" # 等待 URL 模式(或 -u)
node scripts/360browser_agent.mjs wait --load networkidle # 等待网络空闲(或 -l)
node scripts/360browser_agent.mjs wait --fn "window.ready" # 等待 JS 条件(或 -f)
9. 语义定位器(替代 @refs)
node scripts/360browser_agent.mjs find role button click --name "Submit"
node scripts/360browser_agent.mjs find text "Sign In" click
node scripts/360browser_agent.mjs find text "Sign In" click --exact # 精确匹配
node scripts/360browser_agent.mjs find label "Email" fill "user@test.com"
node scripts/360browser_agent.mjs find placeholder "Search" type "query"
node scripts/360browser_agent.mjs find alt "Logo" click
node scripts/360browser_agent.mjs find title "Close" click
node scripts/360browser_agent.mjs find testid "submit-btn" click
node scripts/360browser_agent.mjs find first ".item" click
node scripts/360browser_agent.mjs find last ".item" click
node scripts/360browser_agent.mjs find nth 2 "a" hover
Cookies 和存储
node scripts/360browser_agent.mjs cookies # 获取所有 cookies
node scripts/360browser_agent.mjs cookies set name value # 设置 cookie
node scripts/360browser_agent.mjs cookies clear # 清除 cookies
node scripts/360browser_agent.mjs storage local # 获取所有 localStorage
node scripts/360browser_agent.mjs storage local key # 获取指定键的值
node scripts/360browser_agent.mjs storage local set k v # 设置值
node scripts/360browser_agent.mjs storage local clear # 清除所有
标签页和窗口
node scripts/360browser_agent.mjs tab # 列出所有标签页
node scripts/360browser_agent.mjs tab new [url] # 新建标签页
node scripts/360browser_agent.mjs tab 2 # 切换到指定索引的标签页
node scripts/360browser_agent.mjs tab close # 关闭当前标签页
node scripts/360browser_agent.mjs tab close 2 # 关闭指定索引的标签页
node scripts/360browser_agent.mjs window new # 新建窗口
对话框
node scripts/360browser_agent.mjs dialog accept [text] # 接受对话框
node scripts/360browser_agent.mjs dialog dismiss # 取消对话框
JavaScript 执行
node scripts/360browser_agent.mjs eval "document.title" # 执行 JavaScript
示例:表单提交
node scripts/360browser_agent.mjs open https://example.com/form
node scripts/360browser_agent.mjs snapshot -i
# 输出显示:textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]
node scripts/360browser_agent.mjs fill @e1 "user@example.com"
node scripts/360browser_agent.mjs fill @e2 "password123"
node scripts/360browser_agent.mjs click @e3
node scripts/360browser_agent.mjs wait --load networkidle
node scripts/360browser_agent.mjs snapshot -i # 检查结果

