Browser Agent / browser-use 技术原理深度解析

面向：AI Agent、Browser Agent、browser-use、Playwright、多模态网页操作系统
更新时间：2026

---

一、Browser Agent 是什么？

Browser Agent 本质是：

LLM（大脑）
+
Browser Automation（手脚）
+
Perception（视觉/DOM感知）
+
Planning（规划）

它和传统 Selenium/RPA 的区别：

技术	驱动方式	特点
Selenium	写死脚本	稳定但不智能
RPA	流程录制	易碎
Browser Agent	AI 推理决策	自适应强

---

二、browser-use 的核心架构

browser-use 本质：

browser-use
    ↓
Playwright
    ↓
CDP (Chrome DevTools Protocol)
    ↓
Chromium

---

整体运行流程

用户目标
   ↓
Planner（任务规划）
   ↓
感知页面（DOM + Vision）
   ↓
LLM 推理
   ↓
Action（点击/输入）
   ↓
Playwright 执行
   ↓
观察结果
   ↓
循环直到完成

---

三、browser-use 2.0 核心升级

browser-use 2.0 本质：

从“能跑”升级为“稳定、可控、可恢复”

---

1. 感知系统升级（最关键）

1.x

主要依赖：

• DOM
• XPath
• Selector

问题：

• 动态页面容易失效
• React 页面复杂
• div 地狱

---

2.0

升级为：

DOM + Vision + UI AST

即：

• DOM 提供结构
• Screenshot 提供视觉语义
• UI AST 提供可理解结构

---

2. Action 抽象升级

旧方式

click(xpath=...)

---

新方式（语义动作）

click("Search Button")
type("From Input", "Beijing")

系统负责：

• 匹配 DOM
• fallback
• 重试

---

3. Planner（显式规划）

browser-use 2.0 会先生成 Plan：

1. 打开网站
2. 输入出发地
3. 输入目的地
4. 点击搜索

然后逐步执行。

---

4. Self-Healing（自恢复）

包括：

• 自动 retry
• selector fallback
• 页面变化适配
• memory/context 压缩

---

四、Playwright vs browser-use

对比项	Playwright	browser-use
定位	自动化框架	AI Agent
驱动方式	手写代码	自然语言
稳定性	极高	中等
灵活性	一般	很强
成本	低	有 LLM 成本
适合场景	测试/RPA	智能浏览任务

---

Playwright 示例

await page.goto(url)
await page.click("#search")

---

browser-use 示例

Agent(
  task="帮我找到最便宜的机票"
)

---

五、CDP 与 Screenshot 的关系

很多人误解 browser-use 是“截图点击”。

实际上：

---

执行动作：100% 基于 CDP

通过：

browser-use
→ Playwright
→ CDP
→ Browser

执行：

• click
• type
• scroll
• evaluate JS

---

Screenshot 的作用

Screenshot 用于：

• 视觉理解
• 多模态推理
• grounding

不是直接点击。

---

六、为什么需要 DOM + Screenshot 混合？

DOM 的问题

例如：

<div class="x93af"></div>

没有语义。

---

Screenshot 的问题

只有图：

• 无法精准操作
• 无法直接 click DOM

---

所以主流方案：

DOM → 提供结构
Screenshot → 提供视觉语义
CDP → 提供执行能力

---

七、DOM 与 Screenshot 如何对齐（核心）

核心技术：

Bounding Box (bbox)

---

Playwright 获取元素位置

element.bounding_box()

得到：

{
  "x": 120,
  "y": 300,
  "width": 80,
  "height": 30
}

---

Screenshot 坐标系一致

Screenshot：

page.screenshot()

坐标原点同样是：

(0,0) = 页面左上角

---

建立映射

{
  "text": "Search",
  "role": "button",
  "bbox": [120,300,200,330]
}

于是：

视觉按钮
↔
DOM 元素

建立了对齐关系。

---

八、UI AST 是怎么生成的（重点）

UI AST：

给 LLM 看的“语义网页树”

---

生成流程

DOM
↓
清洗
↓
筛选交互元素
↓
语义提取
↓
结构重建
↓
加入 bbox
↓
压缩
↓
UI AST

---

1. DOM 清洗

删除：

• script
• style
• hidden element
• 无意义 div

---

2. 保留交互元素

包括：

• button
• input
• a
• role=button

---

3. 语义提取

优先级：

label
> aria-label
> innerText
> placeholder

---

示例

HTML：

<input placeholder="Search flights">

转换：

Input: "Search flights"

---

4. 结构重建

最终：

Form
 ├── Input: "From"
 ├── Input: "To"
 └── Button: "Search"

---

九、DOM 质量评分（决定是否用视觉）

系统会自动判断：

DOM 是否足够可靠？

---

常见评分维度

1. 语义信息

是否有：

• text
• aria
• label

---

2. 唯一性

是不是多个按钮同名。

---

3. 稳定性

class 是否随机 hash。

---

4. 可交互性

是否：

• visible
• enabled
• clickable

---

决策逻辑

if DOM_score > threshold:
    use_dom_only()
else:
    use_vision()

---

十、真正主流策略：DOM-first + Vision Fallback

真实工程：

1. 先尝试 DOM
2. 定位失败
3. fallback 到视觉

原因：

方案	问题
纯视觉	慢、贵、不稳定
纯 DOM	看不懂复杂 UI

---

所以现实方案：

DOM 主导
+
Vision 辅助

---

十一、多模态 Grounding（不是简单 bbox）

Grounding：

找到“视觉上的按钮”对应哪个 DOM 元素。

---

方法1：Cross-modal Matching（主流）

流程：

截图
→ Vision Encoder
→ embedding

文本
→ embedding

相似度匹配

---

方法2：Attention Grounding

模型直接：

文本 query
→ attention
→ 图像区域

输出：

• bbox
• heatmap

---

方法3：现实工程（最常见）

DOM 提供候选
+
Vision 辅助判断

即：

多个候选按钮
↓
视觉 disambiguation
↓
选最合理的

---

十二、OpenAI vs Claude Browser Agent 风格

系统	风格
OpenAI Operator	更偏视觉驱动
Claude Computer Use	更偏结构化 DOM

---

OpenAI 风格

更像：

“看屏幕操作电脑”

特点：

• 多模态更强
• 视觉 grounding 强
• 更像真人

---

Claude 风格

更像：

“结构化网页理解”

输入：

[Button "Search"]
[Input "Email"]

默认更少依赖视觉。

---

十三、为什么 Browser Agent 不用纯 RL？

虽然前沿研究有：

• end-to-end RL
• Browser RL Agent

但现实问题：

问题	原因
成本极高	浏览器环境复杂
收敛困难	状态空间巨大
泛化差	网站变化快

---

所以现实方案：

LLM
+
工具调用
+
少量 RL 优化

而不是纯 RL。

---

十四、Browser Agent 的未来方向

1. 专用 Browser Model

训练：

• 网页
• UI
• 操作轨迹

让模型“天生会用浏览器”。

---

2. 更强 Grounding

从：

bbox matching

升级为：

真正视觉理解

---

3. OS Agent

不仅操作浏览器：

• 浏览器
• 桌面
• App
• 文件系统

统一 Agent。

---

十五、一句话总结（最终版）

browser-use 本质

LLM Agent
+
Playwright/CDP
+
DOM
+
Vision
+
UI AST
+
Grounding

---

真正主流架构

DOM-first
+
Vision fallback
+
CDP execution

---

核心思想

“让模型像人一样理解网页，但像程序一样精准操作。”