Agent Browser Zh_开发编程 skill-PHP中文网

Agent Browser Zh

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 变更后重新执行快照

命令

快照（页面分析）

agent-browser snapshot            # 输出完整可访问性树
agent-browser snapshot -i         # 仅输出可交互元素（推荐）
agent-browser snapshot -c         # 精简输出格式
agent-browser snapshot -d 3       # 限制树深度为 3
agent-browser snapshot -s "#main" # 限定 CSS 选择器作用域

交互操作（使用快照中生成的 @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       # 按住 Shift 键
agent-browser keyup Shift         # 释放 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）

检查状态

agent-browser is visible @e1      # 检查是否可见
agent-browser is enabled @e1      # 检查是否启用
agent-browser is checked @e1      # 检查是否已勾选

截图与 PDF

agent-browser screenshot          # 截图并输出至 stdout
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      # 等待网络空闲
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 单位

语义定位器（替代 refs 的方式）

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 Basic Auth 凭据
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 的值
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
# 输出示例：文本框 “Email” [ref=e1]，文本框 “Password” [ref=e2]，按钮 “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              # 显示浏览器窗口
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 连接