每天一个claw-skill: agent-browser

什么是 agent-browser?

agent-browser 是一个基于 Rust 的高性能无头浏览器自动化 CLI,同时提供 Node.js 回退方案,专为 AI 助手设计。它允许开发者通过结构化命令进行网页导航、点击、输入、截图等操作,非常适合自动化网页交互、提取结构化数据、表单填写和 UI 测试。

安装方法

1. 通过 npm 安装(推荐)

npm install -g agent-browser
agent-browser install
agent-browser install --with-deps

2. 从源码构建

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

核心命令

导航

agent-browser open <url>      # 跳转到指定网址
agent-browser back            # 后退
agent-browser forward         # 前进
agent-browser reload          # 重新加载
agent-browser close           # 关闭浏览器

页面快照(分析页面元素)

agent-browser snapshot            # 完整的无障碍访问树
agent-browser snapshot -i         # 仅交互式元素(推荐)
agent-browser snapshot -c         # 紧凑输出
agent-browser snapshot -d 3       # 限制深度为 3

交互操作(使用快照返回的 @ref 引用)

agent-browser click @e1           # 点击元素
agent-browser fill @e2 "文本"     # 清空并输入
agent-browser type @e2 "文本"     # 直接输入(不清空)
agent-browser press Enter         # 按下 Enter 键
agent-browser hover @e1           # 悬停

获取信息

agent-browser get text @e1        # 获取元素文本
agent-browser get html @e1        # 获取内部 HTML
agent-browser get value @e1       # 获取输入框的值

等待与条件

agent-browser wait @e1            # 等待元素出现
agent-browser wait 2000           # 等待 2000 毫秒
agent-browser wait --text "成功"  # 等待文本出现

完整示例:自动化登录

# 1. 打开登录页面
agent-browser open https://example.com/login
# 2. 获取交互元素快照
agent-browser snapshot -i
# 3. 填写用户名和密码(假设快照中 e1 是用户名框,e2 是密码框,e3 是提交按钮)
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
# 4. 点击登录
agent-browser click @e3
# 5. 等待页面跳转
agent-browser wait --load networkidle
# 6. 检查结果
agent-browser snapshot -i

高级功能

  • 会话管理:支持多会话并行,使用 --session 参数隔离环境。
  • 状态保存与恢复:使用 agent-browser state save auth.json 保存登录状态,下次直接加载恢复会话。
  • 录制视频:通过 agent-browser record start demo.webm 录制操作过程,适合制作演示。
  • 网络拦截与模拟:可以拦截、修改或阻断请求,用于测试。
  • 设备模拟:支持设置视口、模拟移动设备、地理位置等。

适用场景

  • 自动化测试与回归测试
  • 数据抓取与网页监控
  • 自动填写表单、批量操作
  • 网页截图与 PDF 导出
  • 演示录制与教学视频制作

总结

agent-browser 将复杂的浏览器自动化任务简化为一条条直观的命令,让 AI 助手能够轻松操控网页。无论你是开发人员、测试工程师还是数据工作者,它都能帮助你大幅提升工作效率。今天介绍的只是其功能的一部分,更多用法请参考官方文档。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注