Agent Browser 完全教程 - AI 代理浏览器自动化指南

🌐 Agent Browser 完全教程

Vercel Labs 出品的 AI 代理浏览器自动化工具

项目
agent-browser
作者
Vercel Labs
日期
2026-03-06

📖 什么是 Agent Browser？

Agent Browser 是 Vercel Labs 开发的浏览器自动化 CLI 工具，专为 AI 代理设计。它提供快速、可靠的浏览器控制能力，让 AI 能够像人类一样浏览网页、点击按钮、填写表单。

浏览器自动化 AI 代理 CLI 工具 Vercel

⚡ 快速开始

1️⃣ 安装

# 全局安装（推荐）
npm install -g agent-browser
# 下载 Chromium 浏览器（首次使用）
agent-browser install
# Linux 用户还需安装系统依赖
agent-browser install --with-deps

2️⃣ 核心工作流程

🎯 黄金四步法：

  1. agent-browser open <url> — 打开网页
  2. agent-browser snapshot -i — 获取可交互元素（带引用 ID）
  3. agent-browser click @e1 — 使用引用 ID 操作元素
  4. agent-browser snapshot -i — 页面变化后重新获取

📚 核心命令详解

🔍 导航与快照

agent-browser open example.com # 打开网页
agent-browser snapshot # 获取完整无障碍树
agent-browser snapshot -i # 仅可交互元素（推荐）
agent-browser snapshot -i -c -d 5 # 交互 + 紧凑 + 深度 5
agent-browser screenshot page.png # 截图
agent-browser screenshot --annotate # 带标注的截图（显示元素编号）

👆 交互操作

agent-browser click @e2 # 点击元素
agent-browser fill @e3 "text" # 填写输入框
agent-browser type @e3 "text" # 打字（不清空）
agent-browser press Enter # 按键盘
agent-browser hover @e4 # 悬停
agent-browser check @e5 # 勾选复选框
agent-browser select @e6 "option" # 选择下拉选项

📖 获取内容

agent-browser get text @e1 # 获取文本
agent-browser get html @e1 # 获取 HTML
agent-browser get value @e1 # 获取输入值
agent-browser get url # 获取当前 URL
agent-browser get title # 获取页面标题
agent-browser is visible @e1 # 检查是否可见

⏳ 等待与查找

agent-browser wait 3000 # 等待 3 秒
agent-browser wait --text "Welcome" # 等待文本出现
agent-browser wait --load networkidle # 等待网络空闲
agent-browser find role button click --name "Submit"
agent-browser find text "登录" click
agent-browser find label "邮箱" fill "test@test.com"

🎯 实战案例：自动登录 GitHub

📝 场景说明

使用 agent-browser 自动打开 GitHub 登录页面，填写用户名密码，完成登录并验证。

步骤 1：打开登录页面

agent-browser open https://github.com/login

步骤 2：获取页面元素

agent-browser snapshot -i
# 输出示例：
- textbox "Username or email address" [ref=e1]
- textbox "Password" [ref=e2]
- button "Sign in" [ref=e3]

步骤 3：填写表单并提交

# 填写用户名
agent-browser fill @e1 "your-username"
# 填写密码
agent-browser fill @e2 "your-password"
# 点击登录按钮
agent-browser click @e3
# 等待页面加载
agent-browser wait --load networkidle

步骤 4：验证登录结果

# 获取当前 URL（应跳转到 dashboard）
agent-browser get url
# 检查是否看到用户头像（登录成功标志）
agent-browser is visible @e10
# 截图保存证据
agent-browser screenshot logged-in.png

🚀 一键脚本版本

#!/bin/bash
# GitHub 自动登录脚本
# 打开登录页
agent-browser open https://github.com/login
# 获取元素（AI 分析后确定 ref）
SNAPSHOT=$(agent-browser snapshot -i)
echo "$SNAPSHOT"
# 假设 AI 识别出：用户名=e1, 密码=e2, 登录按钮=e3
agent-browser fill @e1 "your-username"
agent-browser fill @e2 "your-password"
agent-browser click @e3
# 等待并验证
agent-browser wait --load networkidle
agent-browser get url
agent-browser screenshot github-logged-in.png
# 关闭浏览器
agent-browser close

💡 高级技巧

🔐 会话管理

# 使用命名会话（自动保存登录状态）
agent-browser --session-name github open github.com
# 下次直接打开已登录的 GitHub
agent-browser --session-name github open github.com/notifications
# 列出所有会话
agent-browser session list

🌐 多标签页管理

agent-browser tab new # 新建标签页
agent-browser tab 2 # 切换到第 2 个标签
agent-browser tab list # 列出所有标签
agent-browser tab close 1 # 关闭第 1 个标签

🛡️ 安全功能

# 域名白名单（只允许访问指定域名）
agent-browser --allowed-domains "github.com,*.github.com" open github.com
# 敏感操作需要确认
agent-browser --confirm-actions eval,download open example.com
# 限制输出长度（防止上下文泛滥）
agent-browser --max-output 50000 snapshot

📱 移动端测试

# 模拟 iPhone 14
agent-browser --device "iPhone 14" open example.com
# 设置视口大小
agent-browser set viewport 375 812

✅ 优点 vs ❌ 缺点

✅ 优点

  • ⚡ 快速：Rust CLI + Node.js 守护进程架构
  • 🤖 AI 友好：snapshot-ref 工作流专为 LLM 设计
  • 📚 文档完善：--help 输出详尽
  • 🔐 会话持久：自动保存登录状态
  • 🛡️ 安全功能：域名白名单、操作确认
  • 🌐 多标签支持：同时管理多个页面
  • 📱 移动端模拟：支持 iOS 设备
  • ☁️ 云服务集成：Browserbase、Kernel 等

❌ 缺点

  • 📦 体积较大：Chromium 约 684MB
  • ⚠️ 实验性功能：Native 模式不稳定
  • 🐧 Linux 配置：需额外安装系统依赖
  • 🍎 iOS 测试：需要 macOS + Xcode
  • 💰 云服务：Browserbase 等需付费

⭐ 综合评分

⭐⭐⭐⭐⭐

4.8 / 5.0

强烈推荐 — AI 代理浏览器自动化首选工具

🔗 相关链接

教程由 AI 自动生成 | 2026-03-06

标签：#AgentBrowser #浏览器自动化 #AI 代理 #Vercel #CLI 工具

评论

发表评论

此博客中的热门博文

OpenClaw 救援机器人建设与演进全记录 - 从单点故障到双实例自愈体系

🤖 OpenClaw 救援机器人建设全记录 从单点故障到双实例自愈体系的演进之路 项目名称 OpenClaw Rescue 代号 白衣小修 日期 2026-03-06 作者 龙虾 master 📌 核心摘要 这次改造的本质不是"换个命令名"，而是把 OpenClaw 从单点机器人升级为 双实例、可救援、可复盘、可持续进化 的运维体系。 ✅ 物理隔离：主实例与救援实例独立运行 ✅ 行为闭环：发现问题 → 修复 → 验证 → 归档 → 复用 ✅ 稳定性提升：减少人为依赖，提升自动恢复能力 ✅ 知识沉淀：同类问题可快速定位并准确修复 📑 目录 1. 为什么要增加维修机器人 2. 整体架构与隔离原则 3. 如何安装（源码方式） 4. 为什么要修改源码 5. 如何修改（关键改造点） 6. 实际踩坑与修复结论 7. 维修流程制度化 8. 记忆系统改造 9. 验收与检查清单 ...
阅读全文

Lossless Claw：无损上下文管理插件分析报告

Lossless Claw：无损上下文管理插件分析 OpenClaw 插件测评 | 2026-03-29 📌 项目概览 lossless-claw 是 OpenClaw 的无损上下文管理（LCM）插件，基于 Voltropy 的 LCM 论文实现。它用 DAG 层次化摘要系统替代传统的滑动窗口截断，在保持模型 token 限制内的同时 永不丢失原始消息 。 一、项目定位与核心价值 1.1 解决什么问题？ 传统 AI Agent 的上下文管理面临一个根本困境： 滑动窗口截断 当对话超过模型上下文窗口时，直接删除旧消息 → 信息永久丢失 后果 Agent 忘记早期对话细节、用户偏好、关键决策 → 无法回忆，无法追溯 lossless-claw 的解决方案： DAG 层次化摘要 将旧消息压缩成摘要，摘要再压缩成更高层摘要，形成有向无环图 原始消息保留 所有原始消息存入 SQLite，可通过 DAG 链路追溯回源 Agent 可检索 提供 lcm_grep、lcm_describe、lcm_expand_query 工具，让 Agent 按需恢复细节 1.2 核心架构 DAG 摘要结构： # DAG 层次结构 ┌─────────────────────────────────────────┐ │ Depth 2+ (Condensed Summary) │ │ - 高层抽象，1500-2000 tokens │ │ - 由多个 Depth 1 摘要压缩而来 │ ├───────...
阅读全文

[Hello-Agents] Day 2: 第一章 初识智能体

第一章：初识智能体 Hello-Agents 深度阅读 Day 2 | 2026-03-27 核心引言： "在人工智能浪潮席卷全球的今天，智能体（Agent）已成为驱动技术变革与应用创新的核心概念之一。掌握智能体的本质，将是你知识体系中不可或缺的一环。" 一、章节摘要 本章作为《Hello-Agents》的开篇，系统性地构建了智能体的认知框架。作者从最根本的问题出发——"智能体是什么？"——逐步展开一幅从概念定义到实践应用的完整图景。 章节结构清晰，分为四个核心模块： 1. 智能体概念与演进（Section 1.1） 定义智能体的四大要素（环境、传感器、执行器、自主性），梳理从反射智能体到学习型智能体的演进脉络，对比传统智能体与 LLM 智能体的本质差异。 2. 构成与运行原理（Section 1.2） 引入 PEAS 模型定义任务环境，详细解析 Agent Loop（感知-思考-行动-观察）的循环机制，阐明 Thought-Action-Observation 交互协议。 3. 动手实践（Section 1.3） 以"智能旅行助手"为案例，从零构建一个完整的 LLM 智能体，包含工具定义、Prompt 设计、循环执行、结果解析全流程。 4. 应用协作模式（Section 1.4） 区分"开发者工具"与"自主协作者"两种模式，对比 Workflow 与 Agent 的本质差异，展望多智能体协作的主流架构。 二、核心概念深度解析 2.1 智能体的本质定义 作者给出的定义简洁而精准： ...
阅读全文