AI 测试之Applitools入门教程

源自微信公众号：AI测试前线  Author：泰斯特

什么是 Applitools？

简单来说，Applitools 是一个 AI 赋能的测试工具，通过视觉 AI 进行智能功能和视觉测试，帮助企业以更低的成本更快地发布项目。

闲话不多说，我们进入实践环节。

一个简单的Demo

进入官网（applitools.com），眼前一亮后我们点击页面右上角的 GET STARTED 按钮。

然后使用 GITHUB 账号授权后来到了这个页面。

这个时候我们需要点击右上角头像中的 My API key 获取 Api 秘钥。

保存好秘钥后新建个项目，安装依赖包：

pip install selenium
pip install eyes-selenium

然后我们需要新建一个 python 文件并写入以下代码：

from selenium import webdriver
from applitools.selenium import Eyes, Target

class HelloWorld:
    eyes = Eyes()
    # 这里填写你保存的秘钥
    eyes.api_key = 'xxxx'
    try:
        # Open a Chrome browser.
        driver = webdriver.Chrome()
        # Start the test and set the browser's viewport size to 800x600.
        eyes.open(driver, "Test app", "First test", {'width': 800, 'height': 600})
        # Navigate the browser to the "hello world!" web-site.
        driver.get('https://demo.applitools.com')
        # Visual checkpoint #1.
        eyes.check("Login Window test", Target.window())
        # End the test.
        results = eyes.close(False)
        print(results)
    finally:
        # Close the browser.
        driver.quit()
        # If the test was aborted before eyes.close was called, ends the test as aborted.
        eyes.abort()

Eyes 在整个代码块中的作用也较为清晰：

• 首先我们将 driver 作为参数传递给了 eyes.open() 函数；
• 然后调用了 eyes.check() 方法进行了检查点的设置；
• 接着调用 eyes.close() 进行的结果的返回；
• 最后在 finally 中调用 eyes.abort()  保证 eyes 的资源释放。

运行代码成功后可以看到如下输出：

New test [TestResults(steps=1, matches=0, mismatches=0, missing=0, url='https://eyes.applitools.com/app/batches/xxxxxxxxxxxxxx/xxxxxxxxxxxxxxx?accountId=xxxxxxxxxxxxxxxxx~~')]

Process finished with exit code 0

这时候回到之前的 Web 页面即可看到之前代码运行的结果。

嗯，很神奇（才没有），至此我们完成了一个小的 Demo。

领略一下applitools 中的图像识别技术。

Baseline

在 applitools 中有个特殊的概念，叫做 Baseline。什么是 Baseline 呢？其实很简单，我们可以把他当作是一条 UI 测试流程的基准线。

打个比方，一段 UI 主流程的测试代码中对应了三个不同的页面：登录页面、登录失败页面，登录成功页面。

那么我们就可以把这个流程当作基准线，分别在三个不同的页面中添加 Checkpoint（验证点），当设定好 Baseline 后，下一次的测试执行将会对比当前测试流程与 Baseline 之间 Checkpoint 中图像的差异，并做出通过或者失败的断言。

最佳实践

我们按照惯例拿百度首页做试验：

from selenium import webdriver
from applitools.selenium import Eyes, Target

class HelloWorld:
    eyes = Eyes()
    # 这里填写你保存的秘钥
    eyes.api_key = 'XXX'
    try:
        # Open a Chrome browser.
        driver = webdriver.Chrome()
        # Start the test and set the browser's viewport size to 800x600.
        eyes.open(driver, "Test", "Baidu", {'width': 800, 'height': 600})
        # 访问百度首页
        driver.get('https://www.baidu.com')
        # Visual checkpoint #1.
        eyes.check("Baidu Homepage Test", Target.window())
        # End the test.
        results = eyes.close(False)
        print(results)
    finally:
        # Close the browser.
        driver.quit()
        # If the test was aborted before eyes.close was called, ends the test as aborted.
        eyes.abort()

代码运行完毕后返回 applitools 的 Web 页面，可以看到已经新增了一条 Baseline：

这时候我们可以检验一下 Baseline 中的 Checkpoint 是否生效，再次运行相同代码后返回 Web 页面：

咦，这是怎么回事，怎么没有 PASS？于是我们点进去一看：

哈哈，原来这张 checkpoint 中识别出了百度搜索框中的光标，而 Baseline 中并没有这个光标……

那么这种问题要怎么解决呢？

当 applitools 使用 AI 技术帮助我们对比当前测试与 Baseline 之间的图像差异时，如果发现当前测试中的 checkpoint 图像与 Baseline 不符，则会把测试结果打上一个  Unresolved（未解决） 标签。这是因为 AI 并不知道这个图像差异是由新功能导致的还是这确实是个 Bug。

而这个时候，我们可以人工去给这个测试结果打标签（通过 / 不通过）。如果打上了通过的标签，新的 Baseline 将会覆盖旧的 Baseline 。如果打上了失败的标签，下一次测试中如果出现了同样的差异将会继续给结果打上 Unresolved（未解决）标签。

最佳实践

我们回到 Web 页面中给之前 Unresolved 的测试用例点个赞（打上通过的标签）。

这个时候新的 checkpoint 将会覆盖原来的 checkpoint，并且当前这个用例将会判断为通过。

但是，这很明显会产生一个新的问题：

当 checkpoint 图像截的图片不固定（无法保证截图的那一刻输入框光标显示与否）时，该怎么办？

当 Checkpoint 图像不稳定时，如何设置 Baseline？

设置 Checkpoint 图像忽略区域

在泰斯特对 applitools 进行了深度的探索后，发现了一个功能可以完美解决我们的问题。在 Baseline 中，我们可以对所有的 Checkpoint 图像中的区域设置特定的属性：可忽略、严格匹配等。而 可忽略 这个属性恰恰是解决问题的关键。
于是我们回到 applitools 的 Web 页面中，在最后测试结果中的 ANNOTATIONS 标签栏中选择 ignore regions（可忽略区域），然后我们选中输入框光标所属区域，最后点击保存，如图所示：

这时候我们再次运行代码：

from selenium import webdriver
from applitools.selenium import Eyes, Target

class HelloWorld:
    eyes = Eyes()
    # 这里填写你保存的秘钥
    eyes.api_key = 'XXX'
    try:
        # Open a Chrome browser.
        driver = webdriver.Chrome()
        # Start the test and set the browser's viewport size to 800x600.
        eyes.open(driver, "Test", "Baidu", {'width': 800, 'height': 600})
        # 访问百度首页
        driver.get('https://www.baidu.com')
        # Visual checkpoint #1.
        eyes.check("Baidu Homepage Test", Target.window())
        # End the test.
        results = eyes.close(False)
        print(results)
    finally:
        # Close the browser.
        driver.quit()
        # If the test was aborted before eyes.close was called, ends the test as aborted.
        eyes.abort()

运行完毕后回到 applitools 的 Web主页面中，发现多了一条测试通过的用例：

点进去后发现 Baseline 与 当前测试结果并不相同，但是由于我们选定了可忽略的区域，所以输入框光标存在与否并不会影响测试结果：

于是我们完美的解决了之前遇到的问题。

Applitools 是一款商业软件（不赚钱谁弄啊！），其中 免费的 功能我们在 往期系列 中基本了解完了。俗话说得好，谈钱伤感情，所以该和他说再见了。

当然，我们在与 Applitools 交往的过程中也不是没有收获，下面将分享从这段感情中学习，以及总结出来的精华部分。

虽然说 Applitools 中还有许多我们未尝试的功能，但是其实经过了一定的探索后已经可以发现 Applitools 的核心点了，那就是：图像对比。

相信有过一定 UI 自动化测试经验的人都知道，图像对比对于 UI 测试来说并不是毫无用处，不否定在一些元素难以定位的场景下这个功能确实好用。

但是以目前 Applitools 的水平来看还仅仅停留在了比较初级的水平，仍然需要大量的人力去维护工具的 "智能"。

因为随着业务的复杂度增高以及 UI 页面大量堆积，如果每个流程分支都去设置一个 Baseline，一旦 Baseline 过多，维护起来也是一笔不小的开支。

所以这个工具能否真正产生正收益是可以打个小问号的。

显然 Applitools 也意识到了 UI 测试真正的痛点并不好解决，所以采取了智能图像识别的方式去提升测试效率。

而将智能赋能于测试其实是相当危险的一件事情，因为就目前主流机器学习 - 监督学习来说，智能就意味着泛化，就意味着不稳定。对于测试来说，是非常不能容忍模棱两可的答案的。

在 Applitools 的文档中，有一段话是这样说的：

翻译过来就是：
Applitools 的 AI 经过了上亿张图片进行训练，它不基于像素点去比对图片（因为这会产生大量负面的正例）。它通过模拟人的眼睛去识别图像之间的错误。人眼会忽略的错误，它也会忽略，而对于人眼来说显著的错误，它也能识别出来。

目前 Applitools 的识别正确率高达 99.9999%，这意味着你在调用它一百万次测试中只能找出一个负面的正例。

可以看出 Applitools 的宗旨并没有偏离真正的测试，将误报率看的非常重。虽然说后面的 "人眼算法" 听起来有点玄乎了，但也不否定他的图像识别技术可能确实有他的独到之处。

总的来说，对于 UI 测试入门级新手，这个工具确实能够给你打开一道捷径之门。但对于有过一定 UI 自动化测试经验的工程师来说，使用这个工具可能并不能带来非常大的帮助。

未来展望

最后来个对 AI 测试的小展望吧。比较理想的情况是可以制造出一个 AI 测试大脑，不仅自身具备图像识别的能力并且可以自动控制测试引擎。

它不需要像专业测试工程师一样找出所有匪夷所思的 Bug，但只要可以找出比较通用的 Bug（出现空白页面等） 并且能够保证较低的误报率，那么它就可以有效地将 UI 自动化测试向真正的智能迈进。

虽然能看到许多创新的尝试，但是目前来说并没有这样一整套通用的 AI 测试解决方案，期待不久的将来会出现奇迹。