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；

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');