这是一个非常经典的技术演进问题。从传统自动化到 AI Agent 驱动，不仅是工具的替换，更是架构范式的根本转变。
为了清晰地展示这种差异，我将架构图分为三个时代、四层逻辑：
- 传统时代（Selenium 时代）：基于 DOM 和坐标的"机械骨骼"。
- 大模型混合时代（Copilot 时代）：人机协作的"辅助驾驶"。
- AI Agent 时代（自动驾驶时代）：视觉理解与自主规划的"数字员工"。
以下是可直接在 Draw.io 中导入使用的源码，采用横向对比布局，让你一眼看清技术代际差异。
一、WebUI 自动化实施架构图
二、关键差异解读
|----------|------------------|-------------------|-----------------------|
| 维度 | 传统 Selenium | 大模型混合 Copilot | AI Agent 原生 |
| 核心依赖 | DOM 树 / XPath | DOM + 截图 + 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 写死 id=login-btn，但改版后变成 id=signin-button，传统脚本直接报错。混合方案会开启 LLM，对比当前页面和旧脚本描述，将"登录按钮"自动修正为新的定位器。
- 脚本生成：输入"测试购物车增加商品功能"，LLM 观察 DOM 结构后，一次性生成 Python Selenium 脚本。
3，AI Agent 时代方案 (L3 - 智能体大脑层)
- 基础版 (Action Transformer)：如 SeeAct 模型，输入一张截图，直接输出下一步的 (X, Y) 点击坐标。无需理解 HTML。
- 进阶版 (Agentic VLM)：如 WebVoyager，包含"大脑 (Planner)"和"眼睛 (VLM)"。大脑负责分解任务，眼睛负责找按钮。例如，遇到"滑动验证码"，大脑会判断："这是一个反爬机制"，眼睛则识别滑块和缺口位置并尝试拖拽------这是传统自动化完全无法做到的。
- 评价与反思：Agent 操作后，会对比前后截图。如果点击后页面无变化，它会自我反思："刚才的点位可能错了，我看一下附近有没有相似的按钮"。
这幅架构图完整展示了从"机械执行"到"智能交互"的演进脉络，可直接用于技术方案评审。