如何利用视觉AI做自动化测试？--Applitools

什么是视觉AI测试？

聊到视觉测试，其实它算功能测试的一个特殊分支。简单来说，就是通过视觉断言来检测应用或系统UI的视觉变化——比如页面元素不见了、布局歪了、文字叠到一起了，这些问题传统自动化技术往往抓不住。而视觉AI解决方案（比如Applitools）正好填补了这个空白。下面就以Applitools为例，把这个概念讲透。

Applitools是如何工作的？

测试本质上就是“交互”加“验证”。传统做法里，验证阶段通常要从页面抓取元素，然后检查文本值、可见性之类的属性。一个测试用例往往要写好多次断言，分别针对不同元素。麻烦的是，元素选择器难写，页面一改就容易断掉。更关键的是，它根本抓不住页面整体的视觉表现——布局、颜色、大小、位置，统统管不到。

视觉快照则是一种更全面、更稳定的UI验证方式。不用写那么多冗长的断言，一行代码调个快照，就能把页面上所有内容（包括HTML、CSS、Ja vaScript）完整捕获下来。这个快照不是一张静态截图，而是一个包含全部渲染信息的“数字副本”。

视觉测试的核心，就是用视觉快照来做断言。Applitools提供了针对Selenium、Cypress、Playwright等主流框架的Eyes SDK，负责捕获快照。第一次运行测试时，它会将当前快照作为基准图像上传到云端。之后每次再跑，会捕获新的检查点图像，然后靠云端的视觉AI对比出任何有意义的差异——注意，不是像素级的比对，而是有意义的视觉变化。

实际案例演示

下面拿Python + Selenium + Applitools Eyes SDK跑一遍，看看实际效果。基于Applitools官方提供的示例代码库，步骤如下：

• 首先注册Applitools账号，完成后系统会自动分配一个API Key。注册地址：https://auth.applitools.com/users/register

• 从后台截图位置获取API Key（后续步骤会用到）。

  • 

• 打开GitHub代码库：https://github.com/applitools/example-selenium-python-pytest

• 克隆代码到本地，进入项目主目录。

• 准备Python开发环境（虚拟环境更佳）。

• 准备好最新版Chrome浏览器，并下载对应版本的ChromeDriver。

• 安装所需Python库：

  pip install -r requirements.txt

• 在conftest.py文件中设置个人API Key：

  • 

• 执行测试：

  python3 -m pytest -s -v tests

• 测试完成后，控制台会输出类似以下的日志：

测试结束后，点击控制台上的“see details”链接，就能进入Applitools Eyes捕获的测试详情页。里面可以看到每次快照的对比结果，特别是UI上的细微差异都会被标注出来。效果如下图：