种草 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 技能雷达,我深信悉数前沿的值得被采用的技能都会呈现在我司的技能雷达里。公然没有绝望,在技能雷达中,他们的定位是这样的:

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

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 愈加适用。而 Cypress 和 TestCafe 作为前端测验结构,其易用性和较低的学习本钱会使得测验人员用起来愈加称心如意,后文中也主要是对 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

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

2、长途机器翻开恣意浏览器,拜访操控台中输出的 URL 即可进行测验。
在移动设备上运转测验:
1、用 testcafe remote 启用一个 web 服务器,增加–qr-code 标志以生成移动设备的 QR 码。

testcafe remote tests/test.js --qr-code

2、TestCafe 将二维码输出到操控台,如下图所示。

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

3、 运用移动设备上的浏览器,扫描二维码,TestCafe 将在移动浏览器中发动测验。

四、Cypress 的杀手锏

(1)吹爆 Time travel 功用
Cypress 的 Time travel 功用肯定是它的最大亮点,支撑回退至恣意时刻的 Snapshot, 像是在回放电影相同,将测验运转进程中的每个细节重现出来 。能够十分快速的定位问题,极大的提高了调试主动化测验的体会,信任调试过主动化的同学必定能够体会到它的优点。不过现在该功用的运用是有约束的,若想更好的运用该功用是需求付费的。
在它的运转界面中能够看到每一步的操作,只需点击你想重现的过程即可看到该步的截屏。如下图所示,点击“找到包含 type 的元素”这一行代码,右侧就会呈现出此刻的场景,并高亮出这个元素。

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

关于包含动作的过程(如 Click),还会呈现两个场景:before 和 after(箭头 3 所指向的方位),彻底不需求从头跑测验就能够重现,节省了很多为了重现某一问题而需求跑前面若干场景的时刻。

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

(2)官方文档大赞
Cypress 的官方文档中是带小视频的,这关于 QA 同学入门主动化十分的友爱,从入门开端,就像是有教师带着你一步一步的晋级打怪相同,按着视频上的教程来,你必定能把握这个东西的。

五、TestCafe 和 Cypress 小比照

(1)从对浏览器的支撑度上来看:
显着 TestCafe 更占优势。
Cypress 现在只支撑 Chrome,其开发团队现在正在致力于对 IE、Firefox 等浏览器的支撑,以满意对跨浏览器测验的支撑。
TestCafe 支撑市面上干流的浏览器,包含:
Google Chrome: Stable, Beta, Dev and Canary
Internet Explorer (11+)
Microsoft Edge
Mozilla Firefox
Safari
Android browser
Safari mobile
(2)从 github 视点看两个东西:

种草 Cypress 和 TestCafe,QA 同学必定想了解的 Web UI 自动化测验东西

能够看出 Cypress 的 Star 更多,标明有更多的人认可该东西。而 TestCafe 的 Open/Issue 的份额更低,标明 TestCafe 社区对问题的修正率更高。
(3)支撑言语
TestCafe 和 Cypress 都是只支撑 JavaScript 的,对一些只会 python 的 QA 同学就有些没那么友爱了。

六、小结

这两个东西比较于 Selenium 都愈加的轻量级,且在不同的方面有了改善,比方装置更简略,增加了内置等候机制,调试愈加便利等。
当然,这两个东西也有其局限性。比方,有搭档指出 TestCafe 和 Cypress 对视觉测验(Visual Testing)的支撑并不是很友爱,TestCafe 中 Visual Regression Testing 相关的 issue 仍是 Open 状况,而 Cypress 需求经过 plugin 来支撑视觉测验,其自身也不支撑。再比方,我个人在运用 testcafe 进程中遇到了结构不安稳的问题,履行 typetext()(用于在输入框中输入字符串)时,文字的后半部分输入没有完好就持续履行下一个 action,且在排除了版别匹配问题后仍不安稳呈现。
若想了解更多这两个东西的特色,大能够亲身试用一下。假如正巧项目需求进行 Web UI 主动化,同学们也无妨试试这两个新东西。
作为一篇种草贴,必定是要附上两款主动化测验东西的链接哒:
https://devexpress.github.io/testcafe/
https://www.cypress.io/

作者介绍:
王薇,ThoughtWorks 软件质量分析师,有物流、出售、通讯等不同范畴下大数据类项目测验经历,拿手灵敏软件开发形式下的质量保证

【云栖号在线讲堂】每天都有产品技能专家共享!
课程地址:https://yqh.aliyun.com/zhibo

当即参加社群,与专家面对面,及时了解课程最新动态!
【云栖号在线讲堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时刻:2020-05-19
本文作者:ThoughtWorks洞见
本文来自:“InfoQ”,了解相关信息能够重视“InfoQ”