agent-browser使用介绍~适合浏览器操作截图等简易流程

项目介绍

agent-browser 是 Vercel 公司旗下 Vercel Labs 开发的开源项目。

项目定位：专为 AI 智能体（AI Agent）设计的浏览器自动化命令行工具。

核心技术：使用 Rust 编写，通过网页无障碍树（Accessibility Tree）实现 AI 对页面元素的精准交互。

此文档的用法：复制本文url链接地址或下面github仓库地址，粘贴到trea的ai对话框里，直接让它参考去页面操作****。

项目地址

✨ 核心优势与特性

  1. AI原生设计：输出紧凑的“可访问性树（accessibility tree）”而非庞大DOM树，Token消耗比传统Playwright MCP方案减少高达93%，非常适合大语言模型。

  2. 基于引用的交互（Snapshot + Refs）：通过 snapshot 命令获取元素列表（如 @e1、@e2），AI可直接引用并操作，无需编写脆弱的选择器。

  3. 高性能与跨平台：核心CLI由Rust编写，响应快、性能高。通过Node.js作为后备（fallback），保证了在macOS、Linux、Windows上的兼容性。

  4. 功能全面：提供超过50个命令，涵盖导航、表单填写、点击、截图、网络请求拦截等所有浏览器操作，并提供多会话隔离、持久化认证等高级功能 

📦 安装与使用

  1. 请先确保系统已安装 Node.js。
  2. 安装CLI与浏览器内核，以下命令将全局安装agent-browser CLI，并自动下载配套的Chromium浏览器：

             npm install -g agent-browser

             agent-browser install  （agent-browser install 命令在尝试访问 https://googlechromelabs.github.io/chrome-for-testing/... 这个地址时失败了。这通常是因为网络无法直接访问 GitHub 或相关 CDN 域名，尤其在国内环境下很常见。）

             推荐的解决办法为：

             1）手动下载 Chrome for Testing，访问 https://googlechromelabs.github.io/chrome-for-testing/ 官方索引，找到与你的操作系统匹配的版本（Windows 64位是 win64）。

             2）下载 chrome-win64.zip 文件（例如 stable 或 latest 版本），解压到你想要的目录，比如 C:\tools\chrome-win64

             3）告诉 agent-browser 使用这个 Chrome，通过环境变量指定 Chrome 可执行文件路径： cmd窗口： set AGENT_BROWSER_CHROME_PATH=C:\tools\chrome-win64\chrome.exe

             4）然后运行 agent-browser 其他命令（不需要再执行 agent-browser install）。验证是否生效，cmd窗口：agent-browser open https://example.com --headed 如果能正常打开浏览器窗口，说明配置成功。

             💡 你也可以把这个环境变量永久添加到系统环境变量中（通过“系统属性” → “环境变量”），以后就不需要每次都设置了。

基本工作流

         最常用的自动化流程遵循“打开页面 → 获取快照 → 操作元素”的模式：

  1. bash，在cmd窗口或trea等编辑器里让AI执行均可

    # 1. 打开网页
agent-browser open https://example.com
# 2. 获取页面快照（获取可交互元素及其引用，如 @e1, @e2）
agent-browser snapshot -i
# 示例输出：
# - textbox "用户名" [ref=e1]
# - button "登录" [ref=e2]
# 3. 使用引用进行操作
agent-browser fill @e1 "你的用户名"
agent-browser click @e2

  2. 常用命令示例

功能分类命令示例说明
导航 agent-browser open <url> 打开指定网页
  agent-browser back 后退
页面快照 agent-browser snapshot -i 获取可交互元素及引用（@e1, @e2）
  agent-browser snapshot -i -C 包含鼠标光标交互的元素（如div）
元素交互 agent-browser click @e1 点击元素
  agent-browser fill @e2 "text" 在输入框中填写文本
  agent-browser select @e3 "option" 选择下拉菜单选项
多标签页管理 agent-browser tab new https://github.com 打开新标签
  agent-browser tab 2 切换标签
  agent-browser tab close 关闭标签
  agent-browser tab tab 列出所有标签
等待 agent-browser wait --load networkidle 等待网络空闲，确保页面加载完成
  agent-browser wait e15 等待特定元素
  agent-browser wait --text "登录成功" 等待文字出现
  agent-browser wait --url "/dashboard" 等待url变化
信息获取 agent-browser screenshot page.png 截图
  agent-browser get text @e1 获取元素文本
  agent-browser get url 获取页面url
  agent-browser get title 获取页面标题
  agent-browser get attr e1 href 获取页面元素属性
  agent-browser get count ".search-result" 统计元素数量
浏览器管理 agent-browser close 关闭浏览器
cookies管理 agent-browser state save login.json 保存登录状态
  agent-browser state load login.json 加载保存的状态
  agent-browser cookies 获取所有cookie
  agent-browser cookies clear 清除cookie
滚动

agent-browser scroll down 500

agent-browser scroll up 300

 滚动页面
  agent-browser scrollintoview e10 滚动元素到视野内
                           命令链（Command Chaining）：你可以用 && 将多个命令连接在一起，这比分开执行效率更高，尤其适合不需要中间结果的操作：

                           eg：    agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

    1. 处理需要登录的网站
      对于需要认证的网站，agent-browser 提供了灵活的方案来保存和复用登录状态：

      • 选项一：持久化用户配置（最简单）
        使用 --profile 参数指定一个用户配置目录，登录状态会被自动保存。

        bash
        agent-browser --profile ~/.myapp open https://app.example.com/login
# 在此处手动或自动完成登录流程...
# 之后再次使用相同profile打开，会自动保持登录状态
agent-browser --profile ~/.myapp open https://app.example.com/dashboard

      • 选项二：会话名称自动管理
        使用 --session-name 参数，agent-browser 会自动保存和恢复Cookie及本地存储。

        bash
        agent-browser --session-name myapp open https://app.example.com/login
# 完成登录...
agent-browser close  # 状态自动保存
agent-browser --session-name myapp open https://app.example.com/dashboard  # 自动恢复状态

    2. 显示浏览器窗口（非无头模式）
      默认情况下浏览器在后台静默运行。若需观察自动化过程，可使用 --headed 标志显示浏览器窗口：

      bash
      agent-browser open https://example.com --headed

    3. 环境变量
      你可以通过设置环境变量来控制其行为，例如：

      • AGENT_BROWSER_HEADED=true: 强制所有命令以有头模式启动。

      • AGENT_BROWSER_ENCRYPTION_KEY: 设置加密密钥，用于加密存储的认证状态文件。

💡 典型应用场景

agent-browser 非常适合以下任务：

  • 网页自动化测试：模拟用户操作，执行端到端测试或回归测试。

  • 数据抓取：提取动态渲染的网页数据。

  • 自动化填写与登录：自动完成表单提交、账号登录等重复性工作。

  • 监控与巡检：定时访问网页并截图，监控服务状态或内容更新。

实战案例

案例 1：自动查微博热搜

# 打开微博热搜agent-browser open https://s.weibo.com/top/summary --headed
# 截图agent-browser screenshot weibo-top.png --full
# 获取热搜标题agent-browser get text e5

案例 2：自动填表提交

# 打开表单页面agent-browser open https://example.com/form
# 填写表单agent-browser fill e1 "张三"agent-browser fill e2 "zhangsan@email.com"agent-browser fill e3 "这是留言内容"
# 选择下拉框agent-browser select e4 "选项 2"
# 勾选复选框agent-browser check e5
# 提交agent-browser click e6
# 等待提交完成agent-browser wait --text "提交成功"

案例 3：批量截图保存

# 打开网站agent-browser open https://example.com
# 首页截图agent-browser screenshot home.png
# 导航到关于页agent-browser click e10agent-browser wait --load networkidleagent-browser screenshot about.png
# 导航到联系页agent-browser click e11agent-browser wait --load networkidleagent-browser screenshot contact.png

常见问题

Q1: 元素找不到怎么办？

重新执行 snapshot -i 获取最新的元素引用，页面刷新后 ref 会变化。

Q2: 操作太快页面没加载完？

加上等待命令：agent-browser wait --load networkidle

Q3: 想看浏览器操作过程？

一定要加 --headed 参数，可以看到浏览器窗口。

Q4: 如何调试？

# 显示浏览器窗口agent-browser open url --headed
# 查看控制台消息agent-browser console
# 查看页面错误agent-browser errors
posted @ 2026-04-03 17:16  青域  阅读(3190)  评论(1)    收藏  举报