浅谈AI 测试工具Applitools
前言激动人心的 AI 测试系列终于来了，听过那么多国外有名的 AI 测试工具，那么你有没有真的去实践学习一下呢？
此号的初衷就是为了探索 AI 赋能测试，这也同样是让我继续做测试相关工作的理由。不过为了避免走弯路浪费时间，同时也是抱着学习的目的，接下来我会带领大家一起体验所有已经比较著名的、现成的 AI 测试工具，做出总结，最后打造出属于我们的 AI 测试。希望大家多多支持。
相信最后所有机械的测试任务都能够被 AI 所完全取代，这也是 AI 的魅力所在。
什么是 Applitools
简单来说，Applitools 是一个 AI 赋能的测试工具，通过视觉 AI 进行智能功能和视觉测试，帮助企业以更低的成本更快地发布项目。
闲话不多说，我们进入实践环节。
最佳实践
进入官网后，点击页面右上角的 GET STARTED 按钮。
然后使用 GITHUB 账号授权后来到了这个页面。
http://www.51testing.com/attachments/2023/03/15326825_202303011648051AFRu.png
这个时候我们需要点击右上角头像中的 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
Process finished with exit code 0
这时候回到之前的 Web 页面即可看到测试结果。
http://www.51testing.com/attachments/2023/03/15326825_202303011648052suxw.png
嗯，很神奇（才没有），至此我们完成了一个小的 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：
http://www.51testing.com/attachments/2023/03/15326825_202303011648053oPF9.png
这时候我们可以检验一下 Baseline 中的 Checkpoint 是否生效，再次运行相同代码后返回 Web 页面：
http://www.51testing.com/attachments/2023/03/15326825_202303011648054GZsN.png
咦，这是怎么回事，怎么没有 PASS？于是我们点进去一看：
http://www.51testing.com/attachments/2023/03/15326825_2023030116480551yiy.png
哈哈，原来这张 checkpoint 中识别出了百度搜索框中的光标，而 Baseline 中没有......
那么这种问题要怎么解决呢？
如何解决判断图像差异带来的后遗症？
当 applitools 使用 AI 技术帮助我们对比当前测试与 Baseline 之间 checkpoint 的图像差异时，如果发现了有不同之处，将会把当前测试打上一个 Unresolved（未解决） 标签。这是因为 AI 并不知道这个图像差异是由新功能导致的还是确实是个 Bug。
而这个时候，我们可以人工去给这个测试结果打标签（通过 / 不通过）。如果打上了通过的标签，下一次测试则会忽略这个差异并判断为通过。如果打上了失败的标签，下一次测试中如果出现了同样的差异将会自动判断为不通过。
最佳实践
我们回到 Web 页面中给之前 Unresolved 的测试用例点个赞（打上通过的标签）。
http://www.51testing.com/attachments/2023/03/15326825_202303011648056Uou6.png
这个时候新的 checkpoint 将会覆盖原来的 checkpoint，并且当前这个用例将会判断为通过。
http://www.51testing.com/attachments/2023/03/15326825_2023030116480572I3C.png
以图像识别差异的方式去判断 UI 测试通过与否确实是有一定的价值的，但是其中也有不少的漏洞存在，下面来讲解如何解决这个问题。
设置 Checkpoint 图像忽略区域
我们回到之前的 Web 页面中，在最后的测试结果的 ANNOTATIONS 标签栏中选择 ignore regions（可忽略区域），然后我们选中输入框光标所属区域，最后点击保存，如图所示：
http://www.51testing.com/attachments/2023/03/15326825_202303011648058mIXt.png
这时候我们再次运行代码：
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主页面中，发现多了一条测试通过的用例：
http://www.51testing.com/attachments/2023/03/15326825_2023030116480596hqH.png
点进去后发现 Baseline 与 当前测试结果并不相同，但是由于我们选定了可忽略的区域，所以输入框光标存在与否并不会影响测试结果：
http://www.51testing.com/attachments/2023/03/15326825_2023030116480510VWCQ.png
于是我们完美的解决了之前遇到的问题。
学习下
页:
[1]
