AI时代下WebUI自动化实施架构图

这是一个非常经典的技术演进问题。从传统自动化到 AI Agent 驱动不仅是工具的替换更是架构范式的根本转变。为了清晰地展示这种差异我将架构图分为三个时代、四层逻辑传统时代Selenium 时代基于 DOM 和坐标的“机械骨骼”。大模型混合时代Copilot 时代人机协作的“辅助驾驶”。AI Agent 时代自动驾驶时代视觉理解与自主规划的“数字员工”。以下是可直接在 Draw.io 中导入使用的源码采用横向对比布局让你一眼看清技术代际差异。一、WebUI 自动化实施架构图二、关键差异解读维度传统 Selenium大模型混合 CopilotAI Agent 原生核心依赖DOM 树 / XPathDOM 截图 LLM 辅助纯视觉流 (Screenshot)脚本生成人工一行行编写AI 生成 90%人工微调无需脚本仅有目标健壮性极弱改版即挂中等AI 自愈极强像素级人类操作异步处理死板的 Sleep/Wait智能等待 DOM 变化视觉判断看到加载完毕跨技术栈Canvas/Flash 无法测部分支持全支持只认图维护成本极高中等极低三、方案详解1传统时代方案 (L2 - 浏览器驱动层)Selenium标准的 W3C WebDriver 协议通过 HTTP 请求控制浏览器。Puppeteer/Playwright绕过 WebDriver直接通过 Chrome DevTools Protocol (CDP) 控制速度更快能监听网络请求。Cypress前端工程师最爱内嵌浏览器执行极快但跨域和跨 Tab 支持较弱。2大模型混合时代方案 (L3 - 核心引擎层)自愈定位 (Self-Healing)当你用 Selenium 写死 idlogin-btn但改版后变成 idsignin-button传统脚本直接报错。混合方案会开启 LLM对比当前页面和旧脚本描述将“登录按钮”自动修正为新的定位器。脚本生成输入“测试购物车增加商品功能”LLM 观察 DOM 结构后一次性生成 Python Selenium 脚本。3AI Agent 时代方案 (L3 - 智能体大脑层)基础版 (Action Transformer)如 SeeAct 模型输入一张截图直接输出下一步的 (X, Y) 点击坐标。无需理解 HTML。进阶版 (Agentic VLM)如 WebVoyager包含“大脑 (Planner)”和“眼睛 (VLM)”。大脑负责分解任务眼睛负责找按钮。例如遇到“滑动验证码”大脑会判断“这是一个反爬机制”眼睛则识别滑块和缺口位置并尝试拖拽——这是传统自动化完全无法做到的。评价与反思Agent 操作后会对比前后截图。如果点击后页面无变化它会自我反思“刚才的点位可能错了我看一下附近有没有相似的按钮”。这幅架构图完整展示了从“机械执行”到“智能交互”的演进脉络可直接用于技术方案评审。