视觉驱动 UI 自动化执行

自动化测试中的选择器困境

传统 UI 自动化严重依赖 DOM 选择器（如 #submit-btn、.user-profile）定位元素，但在以下场景中这一策略频繁失效：

• 动态内容生成：SPA 应用每次加载生成随机类名（如 _4x7f2a）
• 跨框架渲染差异：React/Vue/Svelte 对 data-testid 属性支持不一致
• 无障碍属性缺失：移动端 WebView 常省略 aria-label 或 role 属性
• 异步渲染延迟：懒加载组件在操作触发时尚未完成 DOM 挂载
• iframe 隔离：嵌入第三方组件无法通过主文档选择器穿透

当选择器策略崩溃时，整个自动化流程会卡在「元素未找到」阶段，导致测试中断或误报。

视觉驱动的核心工作流

本技能采用视觉基础步骤（vision-grounded steps）替代选择器定位，核心流程如下：

1. 环境感知阶段

- 通过 Midscene.js 截取当前界面截图
- 将截图与用户自然语言指令（如「点击右侧导航栏的设置图标」）共同输入视觉模型
- 模型输出元素坐标（x,y）及语义标签（如 "设置": [120,340]）

1. 动作执行阶段

- 基于坐标直接执行 mouse.click(x,y) 或 tap(x,y)
- 跨平台兼容：Web 端通过 Playwright/Puppeteer，移动端通过 adb/WebDriverAgent
- 自动处理滚动偏移：当目标在视口外时触发 scrollTo(x,y)

1. 状态验证阶段

- 视觉断言替代 isVisible() 检查：通过截图对比验证弹窗是否弹出
- 动态内容检测：识别列表项数量变化（如「购物车应有 3 件商品」）
- 文本模糊匹配：容忍大小写差异（"OK" vs "Ok"）

适用边界与技术限制

适用场景：

• 无障碍属性缺失的遗留系统
• 频繁重构的现代 SPA 应用
• 移动端混合开发框架（Ionic/Flutter WebView）
• 需要跨浏览器/设备一致性的场景

关键限制：

• 模型依赖：视觉模型需具备至少 85% 的坐标定位准确率，否则需混合使用选择器作为后备
• 性能开销：每次操作需 200-500ms 模型推理时间，高频连续操作场景不适用
• 动态内容处理：验证码、实时聊天气泡等高频变化元素需配合 OCR 单独处理
• 多模态交互：语音输入、手势操作等非视觉交互仍需传统自动化方案

工程建议：

• 优先用于功能验证阶段，而非性能测试
• 结合视觉回归测试（如 Percy）形成互补
• 关键路径操作保留选择器后备机制
• 定期用真实用户数据校准模型偏移（如不同分辨率下的坐标映射）