“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

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

  • 2020-05-19
  • 本文字数:4329 字

    阅读完需:约 14 分钟

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

Cypress 和 TestCafe 这两个工具相比于 Selenium 都更加的轻量级,且在不同的方面有了改进,比如安装更简单,增加了内置等待机制,调试更加方便等。


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

一、初步印象

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


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



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
复制代码



2、远程机器打开任意浏览器,访问控制台中输出的 URL 即可进行测试。


在移动设备上运行测试


1、用 testcafe remote 启用一个 web 服务器,添加–qr-code 标志以生成移动设备的 QR 码。


testcafe remote tests/test.js --qr-code
复制代码


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



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

四、Cypress 的杀手锏

(1)吹爆 Time travel 功能

Cypress 的 Time travel 功能绝对是它的最大亮点,支持回退至任意时间的 Snapshot, 像是在回放电影一样,将测试运行过程中的每个细节重现出来 。可以非常快速的定位问题,极大的提高了调试自动化测试的体验,相信调试过自动化的同学一定可以体会到它的好处。不过目前该功能的使用是有限制的,若想更好的使用该功能是需要付费的。


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



对于包含动作的步骤(如 Click),还会出现两个场景:before 和 after(箭头 3 所指向的位置),完全不需要重新跑测试就可以重现,节省了大量为了重现某一问题而需要跑前面若干场景的时间。


(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 的 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 软件质量分析师,有物流、销售、通信等不同领域下大数据类项目测试经验,擅长敏捷软件开发模式下的质量保障。


本文转载自公众号 ThoughtWorks 洞见(ID:TW-Insights)。


原文链接


https://mp.weixin.qq.com/s?__biz=MjM5MjY3OTgwMA==&mid=2652468543&idx=1&sn=527db93832518acdc872a13a237b9f6d&chksm=bd4f47288a38ce3ef47c05ab78822154630e48748389eb3870bbde166eb772926b9f47589f5e&scene=27#wechat_redirect


2020-05-19 10:002815

评论 1 条评论

发布
用户头像
第一张图太模糊了,里面的文字是什么?
2020-06-11 14:54
回复
没有更多了
发现更多内容

如何分析和解决 TiDB 4.0 的写热点问题

TiDB 社区干货传送门

TiDB 在金融场景里面那些不得不说的事

TiDB 社区干货传送门

HTAP 会成为数据库的未来吗?

TiDB 社区干货传送门

猜一猜 TiDB 4.0 GA 第一个上线用户花落谁家?有惊喜!

TiDB 社区干货传送门

速度收藏!TiDB 读、写性能慢问题排查思路汇总

TiDB 社区干货传送门

管理与运维

以TiDB热点问题来谈Region的调度流程

TiDB 社区干货传送门

实践案例

【优质技术文章推荐】TiDB for PostgreSQL—牛刀小试

TiDB 社区干货传送门

实践案例

TiUP升级TiFlash重启失败解决方案

TiDB 社区干货传送门

TiDB 与 Flink 联合发布实时数仓最佳实践白皮书

TiDB 社区干货传送门

TIDB 3.0.5 性能压测

TiDB 社区干货传送门

数据库架构选型

TiDB 性能分析工具——PProf

TiDB 社区干货传送门

TiDB 底层架构

TiDB 多Socket 服务器性能扩展问题分析-续

TiDB 社区干货传送门

性能调优 性能测评

TIDB--不容易发现的 lightning tidb-backend 模式导入优化

TiDB 社区干货传送门

迁移 性能调优 TiDB 底层架构 管理与运维 性能测评

TiDB in Action 开源电子书

TiDB 社区干货传送门

TiDB升级、TiFlash测试及对比ClickHouse

TiDB 社区干货传送门

解决方案之:DM relay 处理单元报错

TiDB 社区干货传送门

【TiDB 最佳实践系列】HAProxy

TiDB 社区干货传送门

实践案例

内容主数据 TiDB 集群写入热点优化实践

TiDB 社区干货传送门

【理财实践】 开科唯识-互联网理财为什么会选TiDB

TiDB 社区干货传送门

TiDB 在小米的落地及云原生探索

TiDB 社区干货传送门

TiCDC 应用场景解析

TiDB 社区干货传送门

实践案例

TiDB 在茄子科技的应用实践及演进

TiDB 社区干货传送门

实践案例

TiFlash5.0.1与4.0.10 对比测试

TiDB 社区干货传送门

版本测评

TiDB-4.0.0-rc-性能测试

TiDB 社区干货传送门

TiDB v5.1 体验: 我用 TiDB 训练了一个机器学习模型

TiDB 社区干货传送门

记一场DM同步引发的Auto_Increment主键冲突漫谈

TiDB 社区干货传送门

故障排查/诊断

记一次使用TiUP半自动升级TiDB集群经验

TiDB 社区干货传送门

版本升级

体验升级至4.0

TiDB 社区干货传送门

Tiflash 尝鲜小案例

TiDB 社区干货传送门

管理与运维

隐藏esc坑之jbd2进程io占用奇高 系统长期io占用100%

TiDB 社区干货传送门

故障排查/诊断

insert引发的TiDB hang死血案(案情一)

TiDB 社区干货传送门

故障排查/诊断

种草Cypress和TestCafe,QA同学一定想了解的Web UI自动化测试工具_软件工程_张凯峰_InfoQ精选文章