种草Cypress和TestCafe,QA同学一定想了解的Web UI自动化测试工具

Cypress、TestCafe、Puppeteer 在技术雷达中被誉为后Selenium时代Web UI测试的三驾马车。

一、初步印象

谈起Web UI自动化测试,首先想到的肯定是Selenium了,毕竟Selenium是名噪一时的Web UI自动化测试工具。在一次QA Community的Catch Up上,大家聊起了最近火起来的Cypress、TestCafe等测试工具,那时候还不知道这是什么,心里想着大概就像是Selenium的改进版吧。后来在同事聊天时,在QA的微信群里,越来越多的听到这两个单词。终于,忍不住准备自己探索一下这两个小东西。他们究竟为什么就开始被频繁的提起了呢?

首先,翻翻ThoughtWorks技术雷达,我坚信一切前沿的值得被采纳的技术都会出现在我们的技术雷达里。果然没有失望,在技术雷达中,他们的定位是这样的:


TechRadar.png

Cypress 采纳
我们不断收到关于Cypress 、TestCafe 和 Puppeteer等“后Selenium” web UI测试工具的积极反馈。运行端到端测试时经常会遇到一些棘手的问题,如运行时间过长、测试过于零碎、还需要修复无头模式下运行的测试所导致的CI失败。我们的团队借助Cypress很好地解决了性能差、响应时间长、资源加载慢等常见问题。Cypress已成为我们团队内部执行端到端测试的首选工具。

TestCafe 试验
在使用Cypress、TestCafe和Puppeteer等 “后Selenium” web UI测试工具方面,我们拥有良好的体验。TestCafe支持采纳JavaScript或TypeScript来编写测试,并在浏览器中运行测试。TestCafe提供了开箱即用的并行执行、HTTP请求模拟等有用的功能。TestCafe使用异步执行模型而无需指定等待时间,有效提升了测试套件的稳定性。它的选择器API可更轻松实现PageObject模式。TestCafe最近发布了1.0.x版本,进一步提升了稳定性和功能性。

技术雷达中明确的指出了Cypress在采纳阶段,TestCafe在试验阶段。这就意味着他们很牛啊,如果项目有需要,那么请放心大胆的尝试吧。

读到这里,大家可能开始好奇了,说好的三驾马车,怎么只剩下了两驾?这是因为Puppeteer具有其自己的特殊性。Puppeteer 是谷歌出品的一个通过Devtools 协议控制Chromium或Chrome的Node库。由于其只支持Chrome,无法进行跨浏览器的兼容性测试,所以有评论提出,Puppeteer从严格意义上来讲并不算是自动化测试工具。而且通读了Puppeteer的文档之后,没有发现让人眼前一亮的地方。所以,后文中也主要是对Cypress和TestCafe的种草。

二、相比于Selenium的小优势

(1)简单到令人惊喜的安装过程

对TestCafe和Cypress初有好感是从安装开始的。对于Web的自动化测试,大部分人熟悉的还是Selenium + Webdriver 的解决方案。还记得去年在某通信类企业用Selenium进行自动化测试时,仅安装就耗费了两天时间,Webdriver版本问题、环境变量配置问题和特殊环境下出现的其他问题等等,安装体验非常痛苦,若不是为了赚钱养家,几乎就是要放弃了。

而本文种草的两种工具,其安装真的是非常简单,只需要一行命令就可以自动安装和配置所有驱动程序和依赖项:

npm install testcafe

如果你想安装cypress,把testcafe换成cypress即可。

还可以选择本地安装,以支持不同项目使用不同的版本:

npm install --save-dev testcafe

就算没写过代码的QA同学也完全都够上手,瞧,是不是非常的惊喜。

(2)内置的等待机制

还记得第一次独立开始写自动化测试,是来要完善一个基于Selenium的自动化测试。代码中在很多地方都重复的使用time.sleep(2)、time.sleep(5)等类似的等待。开始觉得很冗余,试图删掉一些,发现删除后测试出现了不稳定状况,时过时挂,无奈只能又加回来。后来,发现了“隐式等待”,只需要加上“driver.implicitly_wait(10)”(在尝试发现某个元素的时候,如果没能立刻发现,就等待固定长度的时间10s)。像是发现了新大陆一样,终于可以干掉那些看着闹心的time.sleep()了。

然而,TestCafe和Cypress更让人惊喜,他们是内置了自动等待机制的。

TestCafe具有内置的自动等待机制,它不需要专用的API来等待页面元素出现。他对以下几种行为内置了等待机制:

  • Actions:元素出现前不运行action,而是持续监听selector,直到元素出现或超时。
  • Selectors:监听selector,直到元素出现或超时。
  • Assertions:智能断言查询机制,重试断言结果直到通过或超时。
  • XHR and Fetch Requests:执行测试动作之前,等带XHR 和 fetch request,测试在收到响应或超时后运行下一步。
  • Redirects:当触发重定向时,自动等待服务器响应。

Cypress更是将使用cy.wait() 当作是反模式,明文写在其文档中。例如,以下代码中的等待就是不需要的:

cy.request('http://localhost:8080/db/seed')
cy.wait(5000)     // <--- this is unnecessary

在cy.request()收到服务器响应之前不会进行解析,此处添加的“等待5s”已经默认存在了。除此之外,cy.visit() 会自动等待所有资源都加载完成,cy.get() 会自动重试寻找元素。

三、TestCafe的独特优势

(1)Live模式

TestCafe支持Live模式,该模式下进行调试工作会简单一些。启用Live模式运行测试时TestCafe会打开浏览器运行测试,并显示报告。然后,TestCafe会监视测试文件和其引用的所有文件,一旦发现这些文件有更改并且进行了保存,TestCafe就会重新运行测试。测试完成后,浏览器会保留在最后打开的页面上,方便使用开发者工具进行调试。
实时模式可以在任何浏览器中使用:本地,远程,移动或无头。
使用-L( - live)标志从命令行界面启用实时模式。

testcafe chrome tests/test.js -L

(2)多浏览器并发测试变得很简单

TestCafe允许执行并发测试,运行以下的命令为启动测试:

testcafe chrome tests/test.js

当需要调用一个浏览器的多个实例同时运行时,可以用-c或—concurrency命令,如用以下命令调用三个Chrome实例同时运行:

testcafe -c 3 chrome tests/test.js

还可以针对多个不同的浏览器进行并发测试,例如启用4个Safari实例和4个Firefox实例:

testcafe -c 4 safari,firefox tests/test.js

甚至可以使用all在全部本地计算机已经安装的浏览器中运行测试,这种一下子把全部本地浏览器都打开进行测试的感觉太酷了,我自己都没想到电脑上装了这么多浏览器,哈哈哈:

testcafe all tests/test.js

(3)可以在远程计算机和移动设备进行测试

可以在没有安装TestCafe的计算机设备上运行测试,只要这台设备可以访问已安装了TestCafe的这台计算的网络即可。
在远程计算机上运行测试:

  1. 用testcafe remote启用一个web服务器,供远程测试机访问.
testcafe remote tests/test.js
remote.png
  1. 远程机器打开任意浏览器访问控制台中输出的URL即可进行测试。

在移动设备上运行测试:

  1. 用testcafe remote启用一个web服务器、添加--qr-code标志以生成移动设备的QR码。
testcafe remote tests/test.js --qr-code
  1. TestCafe将QR码输出到控制台。


    remote1.png
  2. 使用移动设备上的浏览器扫描二维码,TestCafe将在移动浏览器中启动测试。

四、Cypress的杀手锏

(1)吹爆Time travel功能

Cypress的Time travel功能绝对是它的最大亮点,支持回退至任意时间的Snapshot,可以非常快速的定位问题,极大的提高了调试自动化测试的体验,相信调试过自动化的同学一定可以体会到它的好处。不过目前该功能的使用是有限制的,若想更好的使用该功能是需要付费的。

在它的运行界面中可以看到每一步的操作,只需点击你想重现的步骤即可看到该步的截屏。如下图所示,点击“找到包含type的元素”这一行代码,右侧就会呈现出此时的场景,并高亮出这个元素。


TimeTravel1.png

对于包含动作的步骤(如Click),还会出现两个场景:before和after(箭头3所指向的位置),完全不需要重新跑测试就可以重现。


TimeTravel2.png

(2)官方文档大赞

Cypress的官方文档中是带小视频的,这对于QA同学入门自动化非常的友好,从入门开始,就像是有老师带着你一步一步的升级打怪一样,按着视频上的教程来,你一定能掌握这个工具的。

五、TestCafe和Cypress小对比

(1)从对浏览器的支持度上来看:

明显TestCafe更占优势。

Cypress目前只支持Chrome,其开发团队目前正在致力于对IE、Firfox等浏览器的支持,以满足对跨浏览器测试的支持。

TestCafe支持市面上主流的浏览器,包括:

  • Google Chrome: Stable, Beta, Dev and Canary
  • Internet Explorer (11+)
  • Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Android browser
  • Safari mobile

(2)从github角度看两个工具:

Tool Star Issue Open Total issue Open/Issue
Cypress 12,590 974 3,382 28.8%
TestCafe 6,862 356 2,128 16.7%

可以看出Cypress的Star更多,表示有更多的人认可该工具。而TestCafe的Open/Issue的比例更低,表明TestCafe社区对问题的修复率更高。

(3)支持语言

TestCafe和Cypress都是只支持JavaScript的,对一些只会python的QA同学(比如我)就有些没那么友好了。

六、小结

这两个工具相比于Selenium都更加的轻量级,且在不同的方面有了改进,比如安装更简单,增加了内置等待机制,调试更加方便等。而且这两个工具都属于开源工具,如果有需要进行Web UI自动化的项目,同学们不妨试试这两个新工具。

附两款自动化测试工具的链接:
https://devexpress.github.io/testcafe/
https://www.cypress.io/

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

推荐阅读更多精彩内容