当整个行业还在为GPT-4o的多模态能力惊叹或者在等待GPT-5/GPT-6降临以解决Agent不够智能的问题时一线的工程实践者已经意识到一个核心矛盾LLM的智力溢出与浏览器交互接口的脆弱性之间的鸿沟。即便强如GPT-6如果依然依赖传统的CSS选择器或脆弱的XPath去操作网页它依然会在动态加载的DOM树、Canvas绘制的游戏界面以及反爬虫混淆代码面前碰得头破血流。真正的Agentic RPA代理式流程自动化绝不是简单的提示词工程 Selenium脚本。它需要一套感知与执行解耦、具备自我修复能力的闭环架构。本文将深度复盘如何从零构建一个基于VLM视觉语言模型与DOM解析双驱动的Browser Agent不仅开源核心逻辑更将揭示那些Demo视频里不会告诉你的工业级落地陷阱。一、 核心痛点为什么传统的Browser Agent全是玩具在深入架构之前我们必须先拆解当前Browser Use浏览器使用类Agent的三大技术债务HTML的噪声困境现代网页如SPA单页应用的HTML动辄数万行Token直接喂给LLM不仅上下文溢出而且关键的交互元素如button往往被深埋在div地狱中。动态元素的脆弱性基于XPath或CSS ID的操作在面对A/B测试、动态ID如#btn-293847时极易失效。ID一变Agent就瞎了。Canvas与Shadow DOM的黑盒地图、网页游戏、在线设计工具如Figma往往不产生标准DOM节点纯文本解析对此无能为力。为了解决这些问题我们需要构建一个混合感知系统。二、 系统架构VLM DOM 双轮驱动我们设计的Agent架构名为“Omni-Browser-Core”核心理念是DOM负责定位VLM负责校验与视觉补盲。Reflection Layer (反思层)Action Layer (执行层)Cognition Layer (决策层)Perception Layer (感知层)True用户指令: 帮我在Amazon买一个最便宜的鼠标Agent 主控脑ReAct LoopHeadless BrowserDOM 提取器去除噪声/构建DOM树页面截图A11y Tree 简化大语言模型GPT-4o/Claude-3.5上下文构建器视觉模型YOLO/Qwen-VL动作空间定义元素坐标映射鼠标/键盘事件注入状态变更检测异常处理?三、 关键技术拆解与实现3.1 感知层构建LLM友好的DOM表示直接把原始HTML扔给LLM是愚蠢的。我们需要一个提纯过程。参考了Microsoft的UFO项目和Browser-Use开源库我们采用了一种基于Accessibility Tree (A11y Tree)的折中方案并结合了自定义的重要元素提取算法。核心逻辑只保留可交互元素用数字ID标记忽略div等纯布局标签。# 伪代码DOM 提纯器frombs4importBeautifulSoupfromplaywright.sync_apiimportPageclassDOMPurifier:def__init__(self,page:Page):self.pagepagedefget_interactive_elements(self):# 注入JS脚本提取可交互元素及其坐标js_script () { const elements document.querySelectorAll(button, a, input, select, textarea, [rolebutton], [onclick]); const output []; elements.forEach((el, index) { const rect el.getBoundingClientRect(); if (rect.width 0 rect.height 0) { // 过滤隐藏元素 output.push({ id: elem_${index}, tag: el.tagName, text: el.innerText || el.value || el.placeholder || , coordinates: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }, attributes: Array.from(el.attributes).map(a ${a.name}${a.value}).join( ) }); } }); return output; } returnself.page.evaluate(js_script)通过这种方式我们将几百KB的HTML压缩成了几KB的结构化JSON不仅节省了Token还大幅提高了定位准确率。3.2 决策层Agentic ReAct 循环与Prompt工程这是系统的灵魂。单纯调用API不是AgentAgent必须具备规划、执行和反思的能力。我们采用ReActReasoning Acting框架并针对浏览器场景进行了微调。Prompt 模板示例核心片段You are an autonomous web browsing agent. Your goal is to complete the users task by interacting with the web page. ## Current State - **User Goal**: {user_goal} - **Current URL**: {current_url} - **Previous Action**: {last_action} - **Current DOM Snapshot** (ID - Element): {dom_snapshot} ## Available Actions 1. click(id: str) - Click an element by its ID. 2. type(id: str, text: str) - Type text into an input field. 3. scroll(direction: str) - Scroll the page (up or down). 4. goto(url: str) - Navigate to a specific URL. 5. finish(result: str) - Task is complete. ## Thought Process (Chain of Thought) 1. Analyze the current DOM and screenshot (if provided). 2. Compare the current state with the user goal. 3. Identify the next logical step. 4. Handle popups or errors if they exist. **Output JSON format:** { thought: Analyzing the page... I see the search bar is elem_5. I need to type the product name., action: type, params: {id: elem_5, text: wireless mouse} }反思机制的实现如果Agent执行操作后页面在5秒内没有变化或者出现了意外的弹窗系统会触发反思模式。此时我们会强制截取一张屏幕截图要求VLM分析发生了什么错误并修正下一步动作。3.3 盲区攻坚Canvas 与 Shadow DOM 的视觉映射这是很多开源项目回避的难点。面对Canvas如Google Maps或在线PSDOM解析器返回的是空。此时我们必须切换到视觉模式。我们使用类似Set-of-Mark (SoM) 的技术截图获取当前页面像素流。图标检测利用视觉模型如YOLOv8或Qwen-VL-Chat识别可点击的图标。Overlay绘制在截图上绘制数字ID标签。VLM决策将标记后的图片传给GPT-4o让它直接输出点击ID 3。# Canvas 交互逻辑伪代码classVisualAgent:def__init__(self,modelgpt-4o):self.vision_modelmodeldefact_on_canvas(self,screenshot_path,instruction):# 1. 调用视觉模型识别图标# 这里假设我们有一个 detect_icons 方法返回坐标列表iconsself.detect_icons(screenshot_path)# 2. 在截图上标记 IDmarked_imageself.draw_markers(screenshot_path,icons)# 3. 询问 VLMpromptfIn the image, which icon ID should I click to {instruction}?responsecall_vlm_api(marked_image,prompt)# 4. 解析 ID 并计算坐标中心点target_idparse_id(response)target_coordsicons[target_id][center]# 5. 执行物理点击pyautogui.click(target_coords[x],target_coords[y])四、 实战演练全链路鲁棒性测试为了验证最强Agentic的成色我们设置了一个地狱级难度的测试场景在动态加载的电商网站处理随机弹窗并完成下单。测试任务打开一个包含反爬机制的Demo电商站搜索Headphones添加最贵的一个到购物车处理过程中出现的订阅邮件弹窗最终进入结算页。测试日志实录节选[Step 1] Thought: Page loaded. Need to find search bar. [Action] Type into elem_12: Headphones [Result] Success. URL changed to /search?qHeadphones. [Step 2] Thought: Search results loaded. I see a list of items. Need to find the most expensive one. [Observation] Prices are dynamically loaded. Waiting 2s for DOM stability... [Action] Click elem_45 (Price: $299.00) [Step 3] CRITICAL EVENT: Unexpected Modal Detected! [Detection] A Subscribe for 10% off popup appeared. It blocked the Add to Cart button. [Reflection] My previous plan was to click Add to Cart, but the popup is blocking it. I must close the popup first. [Action] Click elem_5 (Close button X on modal) [Result] Modal closed. DOM re-rendered. [Step 4] Thought: Popup cleared. Now I can see the Add to Cart button again. [Action] Click elem_50 (Add to Cart) [Result] Success. Cart icon updated. [Final] Task Completed.技术复盘在Step 3中如果是传统的线性RPA脚本任务已经失败。而我们的Agent通过DOM变化检测发现了元素遮挡并通过LLM的上下文推理能力自主决定先关闭弹窗。这就是Agentic的体现——动态纠错。五、 为什么说GPT-6来了也不怕这并不是一句狂妄的口号而是基于对技术本质的判断。维度传统 RPA (UIPath/Selenium)简单 LLM Agent本文架构 (VLMAgentic RPA)定位机制绝对坐标/XPath (极脆弱)纯文本解析 (易混淆)DOM结构 视觉坐标 (双重冗余)抗干扰能力低 (UI一变就挂)中 (理解语义但可能点错)极高 (视觉校验 自我修复)适应未知网站需重新录制脚本需大量Prompt调试零样本/少样本泛化智力天花板无 (死板执行)受限于模型上下文模型越强效果越好我们的架构本质上是将LLM与浏览器接口进行了标准化解耦。向下我们通过DOM Parser和Visual Module屏蔽了网页实现的复杂性给LLM提供了干净的Action Space。向上我们通过ReAct循环和Reflection机制给LLM提供了充分的推理空间。即便GPT-6甚至GPT-7发布它们的本质依然是基于Next Token Prediction的推理引擎。只要浏览器的人机交互界面UI存在这套架构就能无缝接入更强的模型获得更强的规划能力而无需重构底层代码。我们修的是路Infrastructure车Model换得越快路的价值越大。六、 资源与溯源本文涉及的架构思想参考了目前全球最前沿的Open Source项目与Paper请按需取用Browser-Use (Python Lib): 目前最成熟的Browser Agent库之一实现了DOM提取与Action Mapping。URL: https://github.com/gregpr07/browser-useMicrosoft UFO (Windows Agent): 提出了基于视觉的UI操作范式对Canvas处理有极大参考价值。URL: https://github.com/microsoft/UFOSet-of-Mark (SoM) Paper: 微软提出的视觉提示技术极大地提升了LLM在图像上的定位能力。Paper: https://arxiv.org/abs/2310.11441Playwright (Browser Automation): 比Selenium更现代化的浏览器自动化驱动。URL: https://playwright.dev/python/结语Agentic RPA 不仅仅是自动化工具的升级它是AI从聊天机器人走向数字员工的关键一步。手搓这套系统的过程实际上是在重新定义人机交互的接口。当你不再依赖笨拙的鼠标键盘而是通过语义直接控制浏览器时你会发现互联网的每一条链接、每一个按钮都已经为你敞开。