UI自动化测试神器-＞Cypress

UI自动化测试神器->Cypress

序：

Cypress是基于node.js环境的，安装则极为便利，如果我们测试人员维护好了自动化脚本，就可以直接将js脚本分享给研发人员，辅助研发人员进行自测。如果能将UI自动化普及到整个部门都去使用，辅助提升产品研发效率，那UI自动化就是非常有价值的事情。

1.1、Cypress简介

官网地址：https://docs.cypress.io

官网的首页有一句标语“The web has evolved.Finally, testing has too.”

意思是Web已经进化了，最终，测试也是。而对于Cypress的介绍则是“Fast, easy and reliable testing for anything that runs in a browser.”翻译为“对浏览器中运行的任何内容进行快速、简单和可靠的测试”。Cypress是一种E2E测试框架，即end to end测试。同类型的框架还有Testcafe等。但是E2E测试似乎是比较冷门的模块，而Cypress使得E2E测试更加简单。Cypress框架安装成功后，example文件中还有很多的demo，有助于我们更快的了解和学习该框架。Cypress也可以说是web UI自动化的完美解决方案，下文中将简单描述Cypress的优势。

1.2、Cypress优势

（1）安装简单

毫不夸张的说，在网络正常的情况下，10分钟就可以安装好Cypress框架，一天则可以入门，写一些简单的用例。

（2）运行速度快

相较于Selenium来说，Cypress的运行速度真的是相当快了，它不需要web driver来驱动浏览器。

（3）脚本实时调试

在脚本编写过程中，只要编辑器中进行保存，脚本就会自动运行，可以快速高效的知道脚本是否正确。

（4）兼容性测试

目前Cypress已经支持Chrome和Firefox两款主流浏览器，在GUI界面可以非常便捷的切换浏览器进行兼容性测试。

（5）失败用例自动保存截图

脚本运行失败后，会在…\cypress\screenshots文件夹下面自动保存失败用例的截图，方便我们追踪到失败用例的原因。

（6）运行过程自动录制视频

脚本运行完成后，会在…\cypress\videos文件夹下自动保存脚本运行过程录制的视频。

（7）人人可用

沐沐觉得这个框架最大的好处就是“人人可用”，Cypress不但可以帮助测试人员进行版本回归测试，浏览器兼容性等测试，还可以辅助研发人员进行自测，甚至可以辅助去造一些测试数据，只要是web端手工不断重复的工作，都可以用Cypress辅助完成。

第二章、环境搭建

备注：以下安装步骤是基于Windows10。

2.1、安装node.js

1、官网下载地址：

https://nodejs.org/en/download/；

2、傻瓜式安装，安装后查看是否安装成功：node –v；

3、最新版的node在安装时同时也安装了npm，查看npm版本：npm -v；

4、具体安装步骤参考菜鸟教程：

https://www.runoob.com/nodejs/nodejs-install-setup.html

2.2、安装Cypress

1、cmd进入命令行模式，进入D盘创建一个文件夹：mkdir Crypress_project；

3、进入新创建的文件夹下面：cd Crypress_project；

4、初始化项目：npm init -y；

5、安装cypress：npm i cypress -S -D；安装成功截图如下：

6、打开package.json文件，将里面的内容全部删除，复制上去以下代码：

{

“scripts”: {

“cypress”: “cypress open”

}

}

2.3、运行Cypress

1、运行命令：npm run cypress；

2、Cypress窗口正常打开不报错，即环境安装成功。

3、examples中是Cypress提供的demo，点击即可运行，如下图：

第三章、实际案例

由于沐沐工作中的项目不方便作为案例，所以将以登录禅道记录缺陷作为demo，这样案例更具有参考性。

1、脚本代码如下：

describe(“禅道录入缺陷”, function(){

//登录模块

beforeEach(“登录系统”,function () {

cy.visit(‘url’)

//输入用户名

cy.get(’#account’)

.type(“账号”)

.should(‘have.value’, ‘账号’);

//输入密码

cy.get(’[name=“password”]’)

.type(“密码”)

.should(‘have.value’, ‘密码’);

//点击登录按钮

cy.get(’#submit’)

.click();

});

it(“提交bug”, function(){

//点击测试

cy.get(’[href="/zentao/qa/"]’)

.click();

//点击bug

cy.get(’[data-id=“bug”] > a’)

.click();

//点击【提bug】按钮

cy.get(’#createActionMenu > a.btn’)

.click();

//点击影响版本

cy.get(’#openedBuild_chosen > .chosen-choices’)

.click();

//选择主干

cy.get(’.active-result’)

.contains(‘主干’)

.click();

//输入bug标题

cy.get(’#title’)

.type(“bug标题”)

.should(‘have.value’, ‘bug标题’);

//点击【保存】

cy.get(’#submit’)

.click();

//断言是否新增成功

cy.get(’.datatable-wrapper > .table > tbody > .text-center > .text-left > a’)

.contains(‘a’, ‘bug标题’)

.should(‘be.visible’);

});

});

2、脚本存放位置：在…\cypress\integration文件夹下面可以自定义文件存在脚本。如下图：

3、选中用例单击即可运行，如下图：

4、运行成功截图如下：

第四章、定位方式

Cypress支持id、name、class、css、text、xpath等多种定位方式，但是需要注意的是xpath定位需要额外安装cypress-xpath库。

4.1、xpath定位

1、官网地址：https://github.com/cypress-io/cypress-xpath

2、安装命令：npm install -D cypress-xpath

3、在cypress/support/index.js文件中增加：require(‘cypress-xpath’)

4、定位举例，如下代码：

（1）xpath定位举例：

cy.xpath(’//span[contains(text(),“新增主项”)]’) .click();

（2）class属性定位举例：

cy.get(’.el-icon-plus’).click();

4.2、Demo定位说明

元素定位的方式有很多种，我将以我的demo进行说明，demo中的定位方式不一定是最佳的但是都是正确有效的，在此详细说明，只是方便像我一样的测试小白进行参考。

（1）通过标签名进行定位

代码如下截图：

定位方式如下：

//点击测试

cy.get(’[href="/zentao/qa/"]’)

.click();

（2）通过父级的date-*属性进行定位

代码如下截图：

定位方式如下：

//点击bug

cy.get(’[data-id=“bug”] > a’)

.click();

（3）通过i标签的class属性进行定位

代码如下截图：

定位方式如下：

//点击【提bug】按钮

cy.get(’.icon-plus’)

.click();

（4）通过父级的id+子级的class属性进行定位

代码如下截图：

定位方式如下：

//点击影响版本

cy.get(’#openedBuild_chosen > .chosen-choices’)

.click();

（5）通过class属性+文本进行定位

代码如下截图：

定位方式如下：

//选择主干

cy.get(’.active-result’)

.contains(‘主干’)

.click();

（6）过id进行定位

代码如下截图：

定位方式如下：

//输入bug标题

cy.get(’#title’)

.type(“bug标题”)

.should(‘have.value’, ‘bug标题’);

（7）通过相对定位的并且断言是否新增成功（不推荐使用相对定位的方式）

代码如下截图：

定位+断言方式如下：

//断言是否新增成功

cy.get(’.datatable-wrapper > .table > tbody > .text-center > .text-left > a’)

.contains(‘a’, ‘bug标题’)

.should(‘be.visible’);

作者：wait_bc65
链接：https://www.jianshu.com/p/55ed1d40f40f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。