skill test_开发编程 skill-PHP中文网

skill test

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

基于 Rust 的快速无头浏览器自动化 CLI 工具，支持 Node.js 回退，使 AI 代理能够通过结构化指令导航、点击、输入和截取页面。

浏览器自动使用代理浏览器. npm 推荐

功能概述

浏览器自动使用代理浏览器. npm 推荐是一项面向实际任务的技能，主要用于from Source Qast start.；Core 工作流程；

核心要点

Navigate: author- browser 打开 <url X Snapshot: author-browser shrapp -i(返回元素, 参考器类似)。
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。

使用与执行

从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。

结果检查与注意事项

执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

使用 agent-browser 进行浏览器自动化

安装

从源码构建

git clone https://github.com/vercel-labs/agent-browser
cd agent-browser
pnpm install
pnpm build
agent-browser install

快速开始

agent-browser open         # 导航至指定页面
agent-browser snapshot -i       # 获取带引用标识（refs）的可交互元素
agent-browser click @e1         # 通过引用标识点击元素
agent-browser fill @e2 "text"   # 通过引用标识向输入框填充文本
agent-browser close             # 关闭浏览器

核心工作流

导航：agent-browser open
快照：agent-browser snapshot -i（返回带引用标识的元素，例如 @e1、@e2）
使用快照中生成的引用标识进行交互
在导航或 DOM 发生显著变化后，需重新执行快照以获取最新引用标识

命令

交互操作（使用快照中生成的 @refs）

agent-browser click @e1           # 点击
agent-browser dblclick @e1        # 双击
agent-browser focus @e1           # 聚焦元素
agent-browser fill @e2 "text"     # 清空后输入文本
agent-browser type @e2 "text"     # 直接输入文本（不清空）
agent-browser press Enter         # 按下键
agent-browser press Control+a     # 组合键
agent-browser keydown Shift       # 按住按键
agent-browser keyup Shift         # 释放按键
agent-browser hover @e1           # 悬停
agent-browser check @e1           # 勾选复选框
agent-browser uncheck @e1         # 取消勾选复选框
agent-browser select @e1 "value"  # 选择下拉框选项
agent-browser scroll down 500     # 页面向下滚动 500 像素
agent-browser scrollintoview @e1  # 将元素滚动至可视区域
agent-browser drag @e1 @e2        # 拖拽并放置
agent-browser upload @e1 file.pdf # 上传文件

获取信息

agent-browser get text @e1        # 获取元素文本内容
agent-browser get html @e1        # 获取 innerHTML
agent-browser get value @e1       # 获取输入框当前值
agent-browser get attr @e1 href   # 获取属性值（如 href）
agent-browser get title           # 获取页面标题
agent-browser get url             # 获取当前 URL
agent-browser get count ".item"   # 统计匹配元素数量
agent-browser get box @e1         # 获取元素边界框（bounding box）

截图与 PDF

agent-browser screenshot          # 截图并输出到标准输出
agent-browser screenshot path.png # 保存截图至文件
agent-browser screenshot --full   # 全页截图
agent-browser pdf output.pdf      # 保存为 PDF 文件

视频录制

agent-browser record start ./demo.webm    # 开始录制（基于当前 URL 和状态）
agent-browser click @e1                   # 执行操作
agent-browser record stop                 # 停止并保存视频
agent-browser record restart ./take2.webm # 停止当前录制并立即开始新录制

录制会创建一个全新的上下文，但保留您当前会话中的 cookies 和 storage。若未提供 URL，则自动返回至当前页面。为获得更流畅的演示效果，建议先探索页面，再开始录制。

等待

agent-browser wait @e1                     # 等待元素出现
agent-browser wait 2000                    # 等待指定毫秒数
agent-browser wait --text "Success"        # 等待指定文本出现
agent-browser wait --url "/dashboard"    # 等待 URL 匹配指定模式
agent-browser wait --load networkidle      # 等待网络空闲（network idle）
agent-browser wait --fn "window.ready"     # 等待 JavaScript 条件满足

鼠标控制

agent-browser mouse move 100 200      # 移动鼠标至坐标 (100, 200)
agent-browser mouse down left         # 按下鼠标左键
agent-browser mouse up left           # 释放鼠标左键
agent-browser mouse wheel 100         # 向上滚动滚轮 100 单位

语义定位器（替代引用标识的另一种方式）

agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find first ".item" click
agent-browser find nth 2 "a" text

浏览器设置

agent-browser set viewport 1920 1080      # 设置视口尺寸
agent-browser set device "iPhone 14"      # 模拟设备
agent-browser set geo 37.7749 -122.4194   # 设置地理位置
agent-browser set offline on              # 切换离线模式
agent-browser set headers '{"X-Key":"v"}' # 添加额外 HTTP 请求头
agent-browser set credentials user pass   # 设置 HTTP 基础认证凭据
agent-browser set media dark              # 模拟深色配色方案

Cookies 与 Storage

agent-browser cookies                     # 获取全部 cookies
agent-browser cookies set name value      # 设置 cookie
agent-browser cookies clear               # 清空所有 cookies
agent-browser storage local               # 获取全部 localStorage 数据
agent-browser storage local key           # 获取指定 key 的 localStorage 值
agent-browser storage local set k v       # 设置 localStorage 中的 key-value 对
agent-browser storage local clear         # 清空全部 localStorage

网络

agent-browser network route               # 拦截请求
agent-browser network route  --abort      # 阻止请求
agent-browser network route  --body '{}'  # 模拟响应体
agent-browser network unroute [url]            # 移除路由规则
agent-browser network requests                 # 查看已追踪的请求列表
agent-browser network requests --filter api    # 过滤请求（例如仅显示 API 请求）

标签页与窗口

agent-browser tab                 # 列出所有标签页
agent-browser tab new [url]       # 新建标签页（可选跳转至 URL）
agent-browser tab 2               # 切换至第 2 个标签页
agent-browser tab close           # 关闭当前标签页
agent-browser window new          # 新建浏览器窗口

框架（Frames）

agent-browser frame "#iframe"     # 切换至指定 iframe
agent-browser frame main          # 返回主文档（main frame）

对话框（Dialogs）

agent-browser dialog accept [text]  # 接受对话框（可选填入确认文本）
agent-browser dialog dismiss        # 取消/关闭对话框

JavaScript

agent-browser eval "document.title"   # 执行 JavaScript 表达式

状态管理

agent-browser state save auth.json    # 保存当前会话状态
agent-browser state load auth.json    # 加载已保存的状态

示例：表单提交

agent-browser open https://example.com/form
agent-browser snapshot -i
# 输出示例：textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # 检查提交结果

示例：使用已保存状态完成身份验证

# 首次登录
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "username"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --url "/dashboard"
agent-browser state save auth.json

# 后续会话：加载已保存状态
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

会话（并行浏览器实例）

agent-browser --session test1 open site-a.com
agent-browser --session test2 open site-b.com
agent-browser session list

JSON 输出（用于程序解析）

添加 --json 参数以获得机器可读的 JSON 格式输出：

agent-browser snapshot -i --json
agent-browser get text @e1 --json

调试

agent-browser open example.com --headed              # 显示浏览器窗口（GUI 模式）
agent-browser console                                # 查看控制台日志
agent-browser console --clear                        # 清空控制台日志
agent-browser errors                                 # 查看页面错误
agent-browser errors --clear                         # 清空错误日志
agent-browser highlight @e1                          # 高亮指定元素
agent-browser trace start                            # 开始记录性能追踪（trace）
agent-browser trace stop trace.zip                   # 停止并保存追踪文件
agent-browser record start ./debug.webm              # 从当前页面开始录制视频
agent-browser record stop                            # 停止并保存录制视频
agent-browser --cdp 9222 snapshot                    # 通过 Chrome DevTools Protocol 连接

故障排查

若在 Linux ARM64 系统上提示命令未找到，请使用 bin 目录下的完整路径。
若无法定位某个元素，请使用 snapshot 命令重新获取正确的引用标识（ref）。
若页面尚未加载完成，请在导航命令后添加 wait 命令。
调试时可使用 --headed 参数启动浏览器 GUI 界面以便直观观察。

选项

--session ：使用隔离的会话（session）。
--json：以 JSON 格式输出结果。
--full：执行全页截图。
--headed：显示浏览器窗口（GUI 模式）。
--timeout：设置命令超时时间（单位：毫秒）。
--cdp ：通过 Chrome DevTools Protocol 指定端口连接浏览器。

注意事项

引用标识（refs）在单次页面加载期间保持稳定，但在页面导航后会变更。
每次导航后都应执行 snapshot 以获取更新后的引用标识。
对输入框操作时，建议使用 fill 而非 type，以确保原有内容被清空。

问题反馈

功能相关问题（Skill issues）：请前往 https://github.com/TheSethRose/Agent-Browser-CLI 提交 Issue。
agent-browser CLI 工具本身的问题：请前往 https://github.com/vercel-labs/agent-browser 提交 Issue。