用 YOLOv5 做 UI 自动化元素定位：从视觉检测到 AI Agent
做 UI 自动化测试时，最容易让人烦的往往不是“怎么点一个按钮”，而是“怎么稳定地找到这个按钮”。传统 Web 自动化通常依赖 CSS Selector、XPath、id、class、文本、DOM 层级等信息；这些信息在页面重构、组件库升级、样式类名哈希化、国际化文案变动之后，很容易失效。
我之前尝试过一条更偏视觉的路线：自己用 YOLOv5 训练目标检测模型，让模型直接在页面截图中识别 UI 元素，再根据检测框坐标去定位和操作元素。这篇文章记录一下这个思路，也顺便梳理最近 UI 自动化测试技术的发展方向。
我的思路：把页面当成一张图
传统自动化脚本看的是 DOM，视觉自动化看的是截图。我的做法大致是：
- 先收集不同页面、不同分辨率、不同状态下的页面截图；
- 给截图里的 UI 元素打标，比如按钮、输入框、下拉框、弹窗、图片、导航项、复选框等；
- 使用 YOLOv5 训练一个目标检测模型，让它学习“某类 UI 元素长什么样”；
- 自动化运行时先截图，再用模型推理出元素类别和边界框；
- 根据检测框中心点换算屏幕坐标，交给 Selenium、Playwright、Appium、PyAutoGUI 或系统级输入工具执行点击、输入、拖拽等操作；
- 操作后再次截图，继续检测下一步需要的元素。
这个方法的核心，是把“元素定位”从选择器问题改造成计算机视觉问题。
YOLOv5 本身适合这种尝试，因为它是一个实时目标检测框架，训练自定义数据集的流程也比较成熟：准备图片和标注，定义类别，训练模型，导出权重，再在推理阶段拿到类别、置信度和坐标框。Ultralytics 的 YOLOv5 文档也明确覆盖了自定义数据训练、推理和部署流程。
为什么这个方法有价值
视觉定位最大的优点，是它不依赖页面内部实现。
如果一个页面的 DOM 结构变了，但按钮在视觉上仍然像按钮，模型仍然可能找到它。对于下面这些场景，视觉定位尤其有用：
- 桌面软件、游戏、远程桌面、嵌入式设备界面等拿不到 DOM 的系统；
- Canvas、WebGL、图片化 UI、低代码平台渲染出的复杂界面；
- 多端一致性测试，比如 Web、移动端、平板端界面都长得类似，但底层技术栈不同；
- 需要模拟真实用户视角的黑盒测试；
- DOM 选择器极不稳定，但视觉形态比较稳定的老系统。
它也有一个很自然的扩展：不仅检测元素，还可以检测页面状态。比如模型识别到“登录失败提示”“加载中遮罩”“危险确认弹窗”，测试逻辑就可以根据视觉状态做分支。
训练数据比模型更关键
这条路的难点不在于把 YOLOv5 跑起来，而在于数据。
UI 元素不像自然图像里的猫、车、人那样差异巨大，很多元素之间非常相似：一个输入框和搜索框，一个普通按钮和危险按钮，一个禁用态按钮和可点击按钮，差别可能只是一点颜色、阴影或文字。要让模型学得稳，数据集需要覆盖足够多的变化：
- 不同分辨率和缩放比例；
- 浅色/深色模式；
- hover、focus、disabled、loading 等状态；
- 中文、英文、长文本、空文本；
- 弹窗、抽屉、表格、表单、列表等复杂布局；
- 元素遮挡、滚动区域、粘性导航等真实情况。
我的理解是，UI 视觉模型最好不要一开始就追求“识别所有东西”。更稳的路线是先限定业务场景：例如只识别登录、搜索、提交、确认、返回、关闭、上传、分页这些高频控件。类别少一点，标注质量高一点，后续迭代会轻松很多。
推理之后还要做规则层
目标检测模型只告诉我们：“这里大概率有一个按钮”。但自动化测试真正需要的是：“这个按钮是不是我要点的那个？”
所以模型后面通常还需要一个规则层或语义层：
- 根据类别过滤，比如只找 button 或 input；
- 根据置信度过滤，丢掉低置信度框；
- 根据位置过滤，比如只找弹窗里的确认按钮；
- 根据 OCR 识别文字，比如按钮上是否写着“保存”；
- 根据上下文关系判断，比如“密码输入框”一般在“账号输入框”下面；
- 根据历史状态判断，比如上一步刚打开菜单，下一步只在菜单区域内找目标。
这一步很重要。纯坐标点击很容易脆，视觉检测加上 OCR、布局规则、状态机，才更像一个可维护的自动化系统。
和传统框架不是替代关系
视觉定位不是要完全替代 Selenium 或 Playwright。更实际的架构是混合式：
- 能用稳定语义定位的地方，优先用 Playwright 的 role、label、test id 等定位方式；
- DOM 不稳定但视觉稳定的地方，用视觉模型兜底；
- 移动端或桌面端拿不到结构信息时，用截图检测作为主路径；
- 断言层仍然要结合业务状态、接口返回、数据库或日志，而不是只看“点到了没有”。
换句话说，YOLOv5 负责“看见”，自动化框架负责“操作”，测试框架负责“判断”。三者分工清楚，系统会更稳。
最近 UI 自动化测试的发展
过去几年 UI 自动化的主线，是减少脚本脆弱性。最近的发展大概可以分成五类。
1. 更语义化的定位方式
Playwright 的 Locator 是一个典型方向。它把定位、自动等待和重试能力放在同一个抽象里，并鼓励使用 role、label、text、test id 等更接近用户语义的方式，而不是直接依赖脆弱的 CSS/XPath。Playwright 的文档也明确提到，Locator 是 auto-waiting 和 retry-ability 的核心。
Selenium 4 也引入了 Relative Locators，可以用 above、below、near 等空间关系描述元素。这说明传统框架也在补足“DOM 选择器之外”的定位能力。
2. 自动等待和可观测调试
以前很多 UI 自动化失败来自 timing：元素还没渲染完，脚本就点了；动画还没结束，断言就跑了。Playwright 这类现代框架把 actionability check、自动等待、trace、截图、录像集成得更深，减少了手写 sleep 的需求。
这类能力看起来不酷，但非常实用。因为在真实 CI 环境里，慢机器、网络波动、动画、异步请求都会放大 flaky test。
3. 视觉回归从像素 diff 走向语义校验
早期视觉测试常见做法是截图对比：只要像素差异超过阈值就报警。但页面字体、抗锯齿、浏览器版本、动态内容都会造成噪声。
新的方向是把视觉校验做得更“语义化”：关心按钮是否消失、布局是否错位、关键区域是否被遮挡、表单是否还可用，而不是只看像素是否完全一致。我的 YOLOv5 方法也可以放在这个方向里：它不是比较整张图，而是识别页面中的关键对象。
4. Self-healing 测试
Self-healing 的目标是：当定位器失效时，框架能根据历史信息、DOM 相似度、文本、位置、视觉特征等自动寻找替代元素，并给出修复建议。
商业测试平台和开源方案都在推进这个方向。它解决的是自动化维护成本问题：测试用例写出来并不难，真正贵的是页面每次改版后维护一批失效选择器。
不过 self-healing 也不能盲信。它需要解释能力和审计能力，否则框架“自动找到了另一个按钮”，测试可能继续通过，但业务行为已经错了。
5. Computer-use 和浏览器 Agent
最近更激进的方向，是让 AI Agent 直接通过截图理解界面，再输出 click、type、scroll 等动作。OpenAI 的 Computer Use 文档描述的就是这种循环：模型观察屏幕截图，推理下一步动作，由外部环境执行动作，再把结果截图回传给模型。
这和我用 YOLOv5 做 UI 元素检测的思路有相通之处：都把 UI 当成视觉环境，而不是只当 DOM 树。区别在于，YOLOv5 更像一个专用的“元素探测器”，可控、快、便宜；Computer-use Agent 更像一个通用操作者，能理解任务，但成本、稳定性、安全边界和可复现性仍然是挑战。
从测试工程角度看，Agent 目前更适合做探索、生成测试步骤、辅助定位、异常归因，而不是完全替代确定性的回归测试。
我会怎么组合这些技术
如果现在重新设计一套 UI 自动化方案，我会分层做：
- 主路径：Playwright / Selenium / Appium，优先使用语义定位和稳定 test id；
- 视觉兜底：YOLOv5 或更新的检测模型，用于找 DOM 不可见、Canvas、桌面端、远程端元素；
- OCR 和布局规则：把检测框转成更接近人类理解的语义区域；
- Self-healing：定位失败时给出候选元素和修复建议，但需要人工确认关键变更；
- Agent 辅助：让 LLM 根据截图、日志、trace 解释失败原因，生成候选脚本，而不是直接放权执行生产级测试；
- 可观测性：每次失败都保存截图、检测框、置信度、DOM 快照、trace、录像和操作日志。
这样的组合比较务实：确定性测试保证稳定，视觉模型解决“看不见 DOM”的问题，Agent 提高分析和维护效率。
一点反思
用 YOLOv5 做 UI 自动化元素定位，本质上是在给测试系统增加一双眼睛。它不会自动解决所有问题，但能打开一类传统选择器很难处理的场景。
我觉得这类方法最适合的位置不是“万能自动化”，而是作为测试基础设施里的视觉能力：当脚本找不到元素时，它能看一眼页面；当页面布局错了时，它能指出哪个对象消失或偏移；当系统没有 DOM 时，它还能继续工作。
未来 UI 自动化大概率不会只属于某一个框架，而是会变成多模态系统：DOM、可访问性树、截图、OCR、目标检测、日志、接口状态、LLM Agent 一起参与判断。真正可靠的自动化，不是看起来更像人，而是在复杂变化里仍然可解释、可复现、可维护。
参考资料
用 YOLOv5 做 UI 自动化元素定位：从视觉检测到 AI Agent