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

前言

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

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

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

正文

什么是 Applitools

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

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

最佳实践

进入官网后,眼前一亮后我们点击页面右上角的 GET STARTED 按钮。

![004.png](https://upload-images.jianshu.io/upload_images/18344821-3136de716ba32acd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

![003.png](https://upload-images.jianshu.io/upload_images/18344821-3293588676431742.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这个时候我们需要点击右上角头像中的 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 页面即可看到测试结果。

004.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:

001.png

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

![003.png](https://upload-images.jianshu.io/upload_images/18344821-232b2ce0e4fe7a5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

咦,这是怎么回事,怎么没有 PASS?于是我们点进去一看:

003.png

哈哈,原来这张 checkpoint 中识别出了百度搜索框中的光标,而 Baseline 中没有......

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

如何解决判断图像差异带来的后遗症?

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

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

最佳实践

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

001.png

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

002.png

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

设置 Checkpoint 图像忽略区域

我们回到之前的 Web 页面中,在最后的测试结果的 ANNOTATIONS 标签栏中选择 ignore regions(可忽略区域),然后我们选中输入框光标所属区域,最后点击保存,如图所示:

![004.png](https://upload-images.jianshu.io/upload_images/18344821-ad52582d7a7c8825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

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主页面中,发现多了一条测试通过的用例:

003.png

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

004.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355