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

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 AgentAI 推理决策自适应强二、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主要依赖DOMXPathSelector问题动态页面容易失效React 页面复杂div 地狱2.0升级为DOM Vision UI AST即DOM 提供结构Screenshot 提供视觉语义UI AST 提供可理解结构2. Action 抽象升级旧方式click(xpath...)新方式语义动作click(Search Button)type(From Input,Beijing)系统负责匹配 DOMfallback重试3. Planner显式规划browser-use 2.0 会先生成 Plan1. 打开网站 2. 输入出发地 3. 输入目的地 4. 点击搜索然后逐步执行。4. Self-Healing自恢复包括自动 retryselector fallback页面变化适配memory/context 压缩四、Playwright vs browser-use对比项Playwrightbrowser-use定位自动化框架AI Agent驱动方式手写代码自然语言稳定性极高中等灵活性一般很强成本低有 LLM 成本适合场景测试/RPA智能浏览任务Playwright 示例awaitpage.goto(url)awaitpage.click(#search)browser-use 示例Agent(task帮我找到最便宜的机票)五、CDP 与 Screenshot 的关系很多人误解 browser-use 是“截图点击”。实际上执行动作100% 基于 CDP通过browser-use → Playwright → CDP → Browser执行clicktypescrollevaluate JSScreenshot 的作用Screenshot 用于视觉理解多模态推理grounding不是直接点击。六、为什么需要 DOM Screenshot 混合DOM 的问题例如divclassx93af/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 坐标系一致Screenshotpage.screenshot()坐标原点同样是(0,0) 页面左上角建立映射{text:Search,role:button,bbox:[120,300,200,330]}于是视觉按钮 ↔ DOM 元素建立了对齐关系。八、UI AST 是怎么生成的重点UI AST给 LLM 看的“语义网页树”生成流程DOM ↓ 清洗 ↓ 筛选交互元素 ↓ 语义提取 ↓ 结构重建 ↓ 加入 bbox ↓ 压缩 ↓ UI AST1. DOM 清洗删除scriptstylehidden element无意义 div2. 保留交互元素包括buttoninputarolebutton3. 语义提取优先级label aria-label innerText placeholder示例HTMLinputplaceholderSearch flights转换Input: Search flights4. 结构重建最终Form ├── Input: From ├── Input: To └── Button: Search九、DOM 质量评分决定是否用视觉系统会自动判断DOM 是否足够可靠常见评分维度1. 语义信息是否有textarialabel2. 唯一性是不是多个按钮同名。3. 稳定性class 是否随机 hash。4. 可交互性是否visibleenabledclickable决策逻辑ifDOM_scorethreshold:use_dom_only()else:use_vision()十、真正主流策略DOM-first Vision Fallback真实工程1. 先尝试 DOM 2. 定位失败 3. fallback 到视觉原因方案问题纯视觉慢、贵、不稳定纯 DOM看不懂复杂 UI所以现实方案DOM 主导 Vision 辅助十一、多模态 Grounding不是简单 bboxGrounding找到“视觉上的按钮”对应哪个 DOM 元素。方法1Cross-modal Matching主流流程截图 → Vision Encoder → embedding 文本 → embedding 相似度匹配方法2Attention Grounding模型直接文本 query → attention → 图像区域输出bboxheatmap方法3现实工程最常见DOM 提供候选 Vision 辅助判断即多个候选按钮 ↓ 视觉 disambiguation ↓ 选最合理的十二、OpenAI vs Claude Browser Agent 风格系统风格OpenAI Operator更偏视觉驱动Claude Computer Use更偏结构化 DOMOpenAI 风格更像“看屏幕操作电脑”特点多模态更强视觉 grounding 强更像真人Claude 风格更像“结构化网页理解”输入[Button Search] [Input Email]默认更少依赖视觉。十三、为什么 Browser Agent 不用纯 RL虽然前沿研究有end-to-end RLBrowser 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核心思想“让模型像人一样理解网页但像程序一样精准操作。”