AI 测试也疯狂？一文讲解 Applitools

前言

激动人心的 AI 测试系列终于来了，听过那么多国外有名的 AI 测试工具，那么你有没有真的去实践学习一下呢？

此号的初衷就是为了探索 AI 赋能测试，这也同样是让我继续做测试相关工作的理由。不过为了避免走弯路浪费时间，同时也是抱着学习的目的，接下来我会带领大家一起体验所有已经比较著名的、现成的 AI 测试工具，做出总结，最后打造出属于我们的 AI 测试。希望大家多多支持。

相信最后所有机械的测试任务都能够被 AI 所完全取代，这也是 AI 的魅力所在。

正文

什么是 Applitools

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

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

最佳实践

进入官网后，眼前一亮后我们点击页面右上角的 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()

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

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 的图像差异时，如果发现了有不同之处，将会把当前测试打上一个 Unresolved（未解决） 标签。这是因为 AI 并不知道这个图像差异是由新功能导致的还是确实是个 Bug。

而这个时候，我们可以人工去给这个测试结果打标签（通过 / 不通过）。如果打上了通过的标签，下一次测试则会忽略这个差异并判断为通过。如果打上了失败的标签，下一次测试中如果出现了同样的差异将会自动判断为不通过。

最佳实践

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

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

以图像识别差异的方式去判断 UI 测试通过与否确实是有一定的价值的，但是其中也有不少的漏洞存在，下面来讲解如何解决这个问题

设置 Checkpoint 图像忽略区域

我们回到之前的 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 与 当前测试结果并不相同，但是由于我们选定了可忽略的区域，所以输入框光标存在与否并不会影响测试结果：

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

欢迎大家关注我的公众号：智能测试开发