Cypress（基于JS的UI、API、单元测试自动化测试工具）

大家好，我是讯享网，很高兴认识大家。

一、Cypress介绍

大多数测试工具（如Selenium）通过在浏览器外部运行并在网络上执行远程命令来运行。Cypress恰恰相反。Cypress在与你的应用程序相同的生命周期里执行。

Cypress背后是Node服务进程。 Cypress和Node进程不断进行通信，同步和执行任务。访问这两个部分（前端和后端）使我们能够实时响应你的web应用程序的事件，与此同时在浏览器之外也能工作以完成需要更高权限的任务。Cypress还可以通过即时读取和更改网络流量工作在网络(请求)层。这使得Cypress不仅可以修改进出浏览器的所有内容，还可以更改可能会影响自动化浏览器操作的代码。

因为Cypress是本地安装的, 它可以从系统层提供对自动化任务的服务. 也就是说，比如截图或录屏, 一般的命令执行和请求成为可能.

Cypress提供官网文档、API拓展文档查看使用

二、Cypress安装

2.1 操作系统

Mac OS 10.9+ (Mavericks+), 仅提供64位二进制文件
Linux Ubuntu 12.04+, Fedora 21, Debian 8的64位二进制文件
Windows 7+

2.2 安装NodeJs环境

讯享网

2.3 安装cypress

cypress需要安装至你的项目文件夹下，因此每个新的项目需要安装一次（或复制旧包）

cd xxx/xxxx/xxx # 手动创建你的项文件夹并进入该文件夹 npm init npm install cypress --save-dev # 安装cypress

讯享网

2.4 启动Cypress

直接启动

讯享网cd xxx/xxxx/xxx # 进入项目根目录 ./node_modules/.bin/cypress open # 启动cypress

添加启动脚本
在根目录添加文件package.json，并写入如下内容

{ "scripts": { "cypress:open": "cypress open" } }

讯享网cd xxx/xxxx/xxx # 进入项目根目录 npm run cypress:open # 启动cypress

三、Cypress使用

3.1 项目文件结构介绍

启动Cypress就会默认创建项目文件结构，并提供demo

|-- cypress | -- fixtures # 外部静态数据 | -- example.json # 静态数据文件 | -- integration # 测试文件，支持.js .jsx .coffee .cjsx | -- xxx.js | -- xxx.jsx | -- xxx.coffee | -- xxx.cjsx | -- plugin # 插件文件 | -- index.js # cypress将会在每个spec文件运行之前默认自动包含插件文件 index.js | -- support # 支持文件（可以理解为hooks钩子） | -- index.js # cypress会默认自动包含支持文件 index.js |-- cypress.json # cypress配置文件、环境变量 |-- node_modules # 安装的cypress包 |-- package.json # 项目信息，用于CI打包 |-- package-clok.json # cypress版本信息

cypress会自动识别integration文件下的所有js文件为测试用例，可以根据个人需要在此基础上添加文件夹做分类
cypress.json默认为空，即cypress设为全部为默认。需要修改配置，就添加配置信息，例如开启截图、录屏、修改各个存储文件夹名称等等，可以参考官网

3.2 测试脚本说明、样例

3.2.1 脚本结构

讯享网|-- describe() # 定义test，会识别该函数为test（可添加备注），可自定义在次分类 |-- context() # 定义test，会识别该函数为test（可添加备注），等同于describe | --it() # 定义case，识别为每一个it为一个case（可添加备注），每个case单独执行 | --specify() # 定义case，识别为每一个it为一个case（可添加备注），每个case单独执行，等同于it

3.2.2 单元测试样例

// 加法函数 function add (a, b) { return a + b } // 减法函数 function subtract (a, b) { return a - b } // 除法函数 function divide (a, b) { return a / b } // 乘法函数 function multiply (a, b) { return a * b } //定义测试内容 describe('Unit test our math functions', function() { //定义测试内容 context('math', function() { //定义case it('can add numbers', function() { expect(add(1, 2)).to.eq(3) # 检查点，1+2是否等于3 }) //定义case it('can subtract numbers', function() { expect(subtract(5, 12)).to.eq(-7) // 检查点，5-12是否等于-7 }) //定义case specify('can divide numbers', function() { expect(divide(27, 9)).to.eq(3) // 检查点，27/9是否等于3 }) //定义case specify('can multiply numbers', function() { expect(multiply(5, 4)).to.eq(20) // 检查点，5*4是否等于20 }) }) })

3.2.3 UI自动化样例

说明：cypress无法识别新打开浏览器页签的情况，所以对于不同页签需要多个case完成测试

讯享网//准备数据 var data = {"search": "惠百施 熊本熊 成人牙刷", "goods": "惠百施 熊本熊 成人牙刷 （颜色随机）","url": "https://www.amazon.cn/dp/B00H4ST192/ref=sr_1_1?__mk_zh_CN=%E4%BA%9A%E9%A9%AC%E9%80%8A%E7%BD%91%E7%AB%99&keywords=%E6%83%A0%E7%99%BE%E6%96%BD+%E7%86%8A%E6%9C%AC%E7%86%8A+%E6%88%90%E4%BA%BA%E7%89%99%E5%88%B7&qid=&sr=8-1"} //定义测试 describe('Test', function() { //定义case it('Search For Goods', function() { // 访问亚马逊官网 cy.visit('https://www.amazon.cn') // 根据元素class定位搜索框，并输入“惠百施 熊本熊 成人牙刷” cy.get('.nav-search-field .nav-input').type(data['search']) // 检查点，根据元素class定位搜索框，判断是否有值“惠百施 熊本熊 成人牙刷” cy.get('.nav-search-field .nav-input').should('have.value', data['search']) // 根据元素class定位搜索按钮，并点击 cy.get('.nav-search-submit .nav-input').click({force:true}) // 根据定位搜索框，并点击“惠百施 熊本熊 成人牙刷” cy.contains(data['goods']).click({force:true}) }) //定义case specify('Add Shop Cart', function() { // 访问商品链接 cy.visit(data['url']) // 根据元素selector定位加入购物车按钮，并点击 cy.get('#add-to-cart-button').click({force:true}) // 等待3000ms cy.wait(3000).then(()=>{ // 根据元素selector定位添加购物车成功提示，并比较提示中是否包含“商品已加入购物车” cy.get('#huc-v2-order-row-confirm-text > h1').should('contain', '商品已加入购物车') // 根据元素selector定位价格信息，并比较提示中是否等于“￥85.76” cy.get('#hlb-subcart > div.a-row.a-spacing-micro > span > span.a-color-price.hlb-price.a-inline-block.a-text-bold').should('have.text', '￥85.76') }) }) })

3.2.4 API测试样例（仅http）

//定义测试 describe('My First Test', function() { //定义case it('Gets, types and asserts', function() { // 发送请求，并获取响应 cy.request({ method: 'GET', url: 'https://www.amazon.cn/', }).then((resp)=>{ // 检查点，验证响应状态是否是200 expect(resp.status).to.eq(200) }) }) })

3.3 测试执行

Cypress的测试执行可通过应用程序和命令行执行

3.3.1 应用程序进行测试

开始测试，可以选择自带无头浏览器或设备安装的chrome浏览器
测试执行，浏览器会直接显示测试过程，如出错可快速定位步骤。也可以通过刷新按钮重新执行测试（令：此时测试文件修改会自动刷新执行）
关闭测试，cypress通过点击stop关闭测试浏览器（即使测试已经结束）

3.3.2 命令行执行测试

配置执行命令，package.json文件添加执行命令

讯享网{ "scripts": { "cypress:open": "cypress open", "cy:run": "cypress run" // 添加运行命令 } }

命令行执行

// 指定使用chrome浏览器，运行指定路径测试文件，不设定chrome会默认使用自带无头浏览器 npm run cy:run -- --browser chrome --spec "cypress/integration/testcases/test_spec.js"

命令参数可以参考官网文档，默认录制执行视频存在于/cypress/videos文件夹中，以及进行屏幕截图存放于/cypress/screenshots文件夹中

结果展示

3.4 持续集成Jenkins

集成Jenkins也很简单，只需要创建一个任务添加构建Execute shell即可，写入如下：

讯享网#!/bin/bash -ilex # 说明使用系统环境变量配置 cd xxxxx/xxxx/xxxxxx/xxxxx # cd到项目根目录 npm run cy:run -- --spec "cypress/integration/testcases/test_spec.js" # 执行指定测试用例 npm run cy:run -- --spec "cypress/integration/testcases/*.js" # 执行文件夹下的所有测试用例

四、其他

4.1 UI自动化获取元素定位

Cypress可以使用class、selector、id等方式获取
推荐最简单的获取方式selector（当然稳定的定位方式clss、id会更好）
方法如下图，找到元素后–检查–copy–copy selector
在这里插入图片描述