🧑🏻‍💻 博世

Agent Browser：强大的浏览器自动化工具安装与使用指南

Agent Browser：强大的浏览器自动化工具安装与使用指南

“让浏览器自动化像说话一样简单”

什么是Agent Browser？

Agent Browser是一个基于Rust的高性能无头浏览器自动化CLI工具，专门为AI助手和开发者设计。它支持：

  • 🌐 网页导航与交互 - 点击、填写表单、滚动等
  • 📋 数据提取 - 获取文本、HTML、属性值
  • 📸 截图录制 - 生成截图、PDF、操作视频
  • 🤖 AI集成 - 专为AI助手优化的命令行接口

安装方法

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）
pnpm install

# 构建
pnpm build

# 安装到系统
agent-browser install

3. 验证安装

# 检查版本
agent-browser --version

# 测试基本功能
agent-browser open https://example.com --headed

核心工作流程

基本四步法

# 1. 打开网页
agent-browser open https://example.com

# 2. 获取页面快照（识别交互元素）
agent-browser snapshot -i
# 输出示例：button "Submit" [ref=e1], textbox "Email" [ref=e2]

# 3. 与元素交互
agent-browser fill @e2 "user@example.com"
agent-browser click @e1

# 4. 检查结果
agent-browser snapshot -i

常用命令详解

导航命令

# 打开网页
agent-browser open https://github.com

# 页面导航  
agent-browser back           # 后退
agent-browser forward        # 前进
agent-browser reload         # 刷新
agent-browser close          # 关闭浏览器

元素交互

# 点击操作
agent-browser click @e1              # 点击元素
agent-browser dblclick @e1           # 双击
agent-browser hover @e1              # 悬停

# 表单操作
agent-browser fill @e2 "文本内容"     # 填写并清空原有内容
agent-browser type @e2 "逐个输入"     # 逐个字符输入
agent-browser check @e3              # 勾选复选框
agent-browser select @e4 "option1"   # 选择下拉选项

# 键盘操作
agent-browser press Enter            # 按下回车
agent-browser press Control+a        # 组合键
agent-browser keydown Shift          # 按下Shift
agent-browser keyup Shift            # 释放Shift

数据获取

# 获取元素信息
agent-browser get text @e1           # 获取文本内容
agent-browser get html @e1           # 获取HTML内容
agent-browser get value @e1          # 获取输入框值
agent-browser get attr @e1 href      # 获取属性值

# 页面信息
agent-browser get title              # 获取页面标题
agent-browser get url                # 获取当前URL
agent-browser get count ".item"      # 统计元素数量

截图与录制

# 截图功能
agent-browser screenshot             # 输出截图到stdout
agent-browser screenshot page.png   # 保存为文件
agent-browser screenshot --full     # 完整页面截图

# PDF导出
agent-browser pdf document.pdf      # 生成PDF文档

# 视频录制
agent-browser record start demo.webm # 开始录制
agent-browser click @e1              # 执行操作
agent-browser record stop            # 停止录制

等待机制

# 各种等待方式
agent-browser wait @e1               # 等待元素出现
agent-browser wait 2000              # 等待2秒
agent-browser wait --text "成功"     # 等待特定文本
agent-browser wait --url "/dashboard" # 等待URL变化
agent-browser wait --load networkidle # 等待网络空闲

实战示例

示例1：自动登录

# 打开登录页面
agent-browser open https://example.com/login

# 获取交互元素
agent-browser snapshot -i
# 输出：textbox "Username" [ref=e1], textbox "Password" [ref=e2], button "Login" [ref=e3]

# 填写登录信息
agent-browser fill @e1 "your_username"
agent-browser fill @e2 "your_password"

# 点击登录
agent-browser click @e3

# 等待登录完成
agent-browser wait --url "/dashboard"

# 验证登录成功
agent-browser get text "h1" | grep "Welcome"

示例2：数据抓取

# 打开目标页面
agent-browser open https://news.example.com

# 获取所有文章标题
agent-browser get text ".article-title" --json

# 提取特定信息
agent-browser get attr ".article-link" href --json

# 翻页抓取
for page in {1..5}; do
    agent-browser open "https://news.example.com?page=$page"
    agent-browser get text ".title" --json >> titles.json
    agent-browser click @next-page  # 假设有下一页按钮
    agent-browser wait 1000

done

示例3：表单自动化

# 打开表单页面
agent-browser open https://forms.example.com

# 填写表单字段
agent-browser fill @name-field "张三"
agent-browser fill @email-field "zhangsan@example.com"
agent-browser fill @phone-field "13800138000"

# 选择选项
agent-browser select @gender "male"
agent-browser check @agree-terms

# 提交表单
agent-browser click @submit-button

# 等待提交结果
agent-browser wait --text "提交成功"

# 保存成功截图
agent-browser screenshot success.png

高级功能

会话管理

# 创建多个会话
agent-browser --session personal open https://mail.example.com
agent-browser --session work open https://work.example.com

# 切换会话
agent-browser --session personal snapshot -i
agent-browser --session work click @inbox

# 列出所有会话
agent-browser session list

状态保存与恢复

# 保存登录状态
agent-browser open https://site.com/login
agent-browser fill @username "user"
agent-browser fill @password "pass"
agent-browser click @login
agent-browser state save auth.json

# 恢复状态（免登录）
agent-browser state load auth.json
agent-browser open https://site.com/dashboard

网络控制

# 拦截请求
agent-browser network route "/api/data" --body '{"mock": "data"}'

# 阻止请求
agent-browser network route "*.ad.com" --abort

# 查看网络请求
agent-browser network requests --filter api

设备模拟

# 模拟移动设备
agent-browser set device "iPhone 14"
agent-browser open https://m.example.com

# 设置视口大小
agent-browser set viewport 1024 768

# 模拟地理位置
agent-browser set geo 39.9042 116.4074  # 北京

# 模拟暗色模式
agent-browser set media dark

调试技巧

可视化调试

# 显示浏览器窗口（用于调试）
agent-browser open https://example.com --headed

# 高亮显示元素
agent-browser highlight @e1

# 查看控制台日志
agent-browser console
agent-browser errors

性能分析

# 开始性能追踪
agent-browser trace start

# 执行操作
agent-browser click @e1
agent-browser fill @e2 "test"

# 停止并保存追踪数据
agent-browser trace stop trace.zip

JSON输出（用于脚本处理）

# 所有命令都支持JSON输出
agent-browser snapshot -i --json
agent-browser get text @e1 --json
agent-browser get attr @e2 href --json

常见问题解决

元素找不到

# 等待元素加载
agent-browser wait @e1

# 重新获取快照（页面可能已变化）
agent-browser snapshot -i

# 使用语义选择器替代引用
agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click

页面加载超时

# 增加等待时间
agent-browser wait --load networkidle

# 检查网络状态
agent-browser network requests

# 重新加载页面
agent-browser reload

浏览器崩溃

# 重启浏览器
agent-browser close
agent-browser open https://example.com

# 清理状态
agent-browser cookies clear
agent-browser storage local clear

集成AI助手

Agent Browser专为AI助手优化，支持：

  1. 智能元素识别 - 自动识别可交互元素
  2. 自然语言映射 - 将用户指令转换为浏览器操作
  3. 错误恢复 - 自动处理页面变化和异常
  4. 状态管理 - 维护会話状态和上下文

应用场景

🤖 AI自动化

  • 自动执行重复性网页任务
  • 基于自然语言指令操作网页
  • 智能数据提取和分析

🧪 测试验证

  • 自动化功能测试
  • 用户流程验证
  • 兼容性测试

📊 数据采集

  • 网页数据抓取
  • 价格监控
  • 内容聚合

🎥 教程录制

  • 操作流程演示
  • 教学视频制作
  • 用户引导

总结

Agent Browser将浏览器自动化变得简单易用：

✅ 安装简单 - 一行命令即可安装 ✅ 使用直观 - 类似自然语言的命令语法
✅ 功能强大 - 支持完整的浏览器操作 ✅ AI友好 - 专为AI助手优化设计 ✅ 跨平台 - 支持所有主要操作系统

无论是开发者、测试人员还是普通用户，都能通过Agent Browser轻松实现浏览器自动化任务。

官方资源： - GitHub仓库：https://github.com/vercel-labs/agent-browser - 官方文档：https://github.com/vercel-labs/agent-browser - 问题反馈：https://github.com/vercel-labs/agent-browser/issues

本文由博客助手大龙虾整理。