e2e测试框架之Cypress

发布日期:2019-05-28

谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Framework做Web自动化测试本质上还是使用的Selenium,包括各语言的xUnit单元测试框架。

多吧!这还只是一部分呢?你以为这些都是不知名的小项目?错了!

我特地把Selenium加了进来,其中mocha和jtest在Github上的stats是多于Selenium的,剩下的其它项目也都不弱。

本文要介绍的是Cypress测试框架! why? 因为人家的文档都是带视频的。

看一下人家官方的文档,像这样的视频还有好几段,简直是对新手的宠爱。

看到这么好的教程,不学一学感觉都对不起人家,是的!这就是我选择了解一下Cypress的原因。

官网:

https://docs.cypress.io

The web has evolved. Finally, testing has too.

Web已经进化了,最后,测试也有。

这类测试框架统称为e2e测试,即end to end(端到端)测试。理论上前端页面由前端框架来测试确实更为合适。这几天我在搭建UI自动化测试框架,顺便封装了一些元素定位,随着对前端技术的了解,我几乎将所有元素定位都换成了CSS,配合JS处理一些Selenium很难操作的元素,确实效率提高了很多,页面元素也没那么难操作了,包括学了点Jenkins的配置,当然,这个话题会放到下一次来分享。

安装:

安装很简单,首先你要安装node.js。

创建cypress_sample练习目录:

> mkdir cypress_sample> cd cypress_sample

安装cypress:

cypress_sample > npm install cypress --save-dev

启动cypress:

cypress_sample > ./node_modules/.bin/cypress open

第一次启动Cypress,它已经为我们准备了丰富的例子。

通过vs code 打开cypress_sample项目。

在examples/目录下面创建baidu.spec.js文件,代码如下:

describe("My First Test", function () { it("Does not do much!", function () { cy.visit("https://www.baidu.com") cy.get("#kw", {timeout: 2000}).type("cypress test") cy.wait(100) cy.get("#su", { timeout: 2000 }).click() })})

上上图,找到在Tests列表中找到 baidu.spec.js文件,点击运行。

在VS code 中编辑保存脚本后,上图的窗口会自动执行,速度上比selenium快多了,Selenium启动浏览器怎么着也得3~5秒吧,上面的脚本不到2秒就跑完了,元素定位主要以CSS为主,这其实不是问题,CSS本来就很强大的说。

也许,这是未来前端测试的方向,至少对于前端人员来说,快速验证界面功能,我想不到有什么理由不选择它,而是Selenium。当然,对于测试人员,脚本的可维护性,报告的生成,以及与持续集成的结合都有一整套成熟的方案。对于Cypress来说(其它前端测试框架不了解),整合能力还不够强,可能JavaScript也是一个门槛。毕竟,这两年,大家刚学会Python。