Browser Agent：基于浏览器的AI智能体架构与实现原理

定义

Browser Agent（浏览器智能体）是指能够自主操控浏览器完成网页导航、数据提取、表单填写、内容交互等任务的AI Agent系统。它通过模拟人类浏览器操作行为，将LLM的语义理解能力转化为实际的网页操作序列，是实现AI自动化交互的核心范式之一。

术语表

术语	定义
Computer Use	Anthropic提出的AI直接操控计算机屏幕的范式，基于屏幕截图+坐标定位执行操作
DOM-based Agent	基于浏览器DOM树结构理解和操作的Agent，提取页面元素的结构化信息
Vision-based Agent	基于屏幕截图进行视觉理解的Agent，不依赖DOM结构，模拟人类视觉操作
Playwright / CDP	浏览器自动化协议，Playwright为跨浏览器，CDP为Chrome DevTools Protocol
Accessibility Tree	浏览器可访问性树，提供元素的语义化标签和状态，比原始DOM更适LLM解析
Action Space	Agent可执行的操作集合，包括click、type、scroll、navigate、select等

架构模式

Browser Agent存在三种主流架构，各有优劣：

架构	输入	优点	缺点	代表实现
DOM-based	DOM树 / Accessibility Tree	精确获取元素信息，低token消耗	无法处理纯Canvas / 图片场景	Playwright MCP、Browser Use
Vision-based	屏幕截图（像素）	通用性强，不依赖DOM，适合复杂UI	高token消耗，坐标定位精度受限	Claude Computer Use、Operator
Hybrid	DOM + 截图（双通道）	兼顾精确性与通用性	实现复杂，token消耗双重叠加	OpenAI CUA、WebVoyager

核心操作集

Browser Agent的基本操作单元构成其Action Space，典型实现包含以下操作：

操作	描述	参数
navigate	导航到指定URL	url
click	点击元素	element_id / x,y坐标
type	输入文本	element_id + text
scroll	滚动页面（方向+像素）	direction, amount
select_option	选择下拉框选项	element_id, option_value
extract	提取页面文本或数据	selector / XPath（可选）
screenshot	截取当前页面	full_page（可选布尔值）
wait	等待条件（元素出现/页面加载）	selector / timeout

主流实现对比

项目	架构	底层协议	开源	特点
Anthropic Computer Use	Vision	CDP（Docker沙箱）	✅	屏幕截图→坐标点击，通用计算机操作
OpenAI Operator（CUA）	Hybrid	内部API	❌	DOM+视觉双通道，支持自愈能力
Playwright MCP	DOM	Playwright + MCP	✅	MCP标准协议，可嵌入任意Agent框架
Browser Use	DOM	CDP	✅	专为LLM设计，Accessibility Tree解析
WebVoyager	Hybrid	Playwright	✅	学术级基准，评估框架完整
Google Mariner	Hybrid	内部API	❌	基于Gemini 2.0，Project Mariner

DOM表示策略

DOM-based Agent的核心挑战是将浏览器DOM树高效映射为LLM可理解的输入。三种主流表示方法：

策略	方法	Token消耗	信息完整度
简化DOM	裁剪不可见/非交互元素，保留textContent和属性	低	中
Accessibility Tree	提取浏览器可访问性树，获得语义化角色和状态	低-中	高
标记化元素映射	为交互元素分配数字ID，仅输出列表供LLM决策	极低	中-高

标记化元素映射是当前最流行的策略，典型输出格式如下：

[12] <button>提交订单</button>
[15] <a href="/cart">返回购物车</a>
[23] <input type="text" placeholder="请输入收货地址">
[31] <span>总计：¥128.00</span>

LLM只需选择数字ID作为操作目标，无需处理原始HTML结构。

控制循环

Browser Agent的基本执行循环（REPL-like）包含四个阶段：

1. 观察（Observe）：获取当前页面状态（DOM/截图/Accessibility Tree）
2. 推理（Reason）：LLM分析页面内容，决定下一步操作
3. 执行（Act）：调用浏览器API执行选定的操作
4. 反馈（Feedback）：捕获操作结果（页面变化/错误信息），进入下一轮循环

// Browser Agent 控制循环伪代码
async function runAgent(task) {
  while (!taskComplete) {
    const state = await observe();           // 截图 + DOM
    const action = await llm.decide(state, task);  // LLM决策
    const result = await execute(action);           // 执行操作
    taskComplete = checkCompletion(result);
  }
}

MCP集成方式

通过MCP（Model Context Protocol）标准协议，Browser Agent可以作为Tool暴露给任意Agent框架。Playwright MCP Server是典型实现：

// OpenClaw / Claude Code 配置
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/playwright-mcp-server"],
      "env": { "HEADLESS": "true" }
    }
  }
}

MCP集成将Browser Agent降级为一个或一组Tool，由Agent框架在需要时调用，适合作为通用Agent的子能力。

评估基准

基准	任务类型	任务数	评估指标
WebArena	全栈网站交互（电商/论坛/管理后台）	812	任务完成率
VisualWebArena	视觉密集型Web任务	910	任务完成率
OSWorld	操作系统级跨应用任务	369	任务完成率 + 步骤准确率
Mind2Web	跨网站通用Web任务	2350	元素选择准确率 + 操作成功率

主要挑战

• 元素定位可靠性：动态页面、SPA、Shadow DOM、iframe导致选择器失效
• Token预算管理：长DOM树（数千节点）或高分辨率截图迅速消耗上下文窗口
• 容错与自愈：页面加载延迟、弹窗干扰、A/B测试变化等非预期状态需处理
• 安全沙箱：Agent执行不可信操作时需隔离浏览器环境，防止数据泄露
• 多标签/多窗口：Agent需要在多个页面上下文中保持状态一致性

应用场景

• 自动化测试：自然语言描述测试场景，替代Selenium编写测试用例
• 数据采集：复杂网站定向爬取，自动处理分页/登录/反爬机制
• 表单填写与提交：跨系统数据迁移、批量注册、信息录入等场景
• 业务流程自动化：SaaS系统间的数据同步与操作编排
• 浏览器RPA：传统RPA的AI升级版，无需固定选择器配置

参见

• Agent vs Function Calling：工具调用范式演进对比
• LangGraph深度：有向图驱动的Agent编排框架
• Agent与RAG融合架构
• MCP协议详解