0.Cypress是什么？
cypress 是一个端到端(end to end) 测试框架。Cypress 是前端测试市场的新生力量，在测试人员和开发人员中越来越受欢迎，它可以测试浏览器中运行的任何内容。官方地址: https://www.cypress.io/
通常大家都会以为Cypress就是Selenium；Cypress从底层和结构上都不同于Selenium，Selenium通过网络执行远程命令，而Cypress与您的应用程序在同一运行循环中运行。和Selenium相比，Cypress安装简单而且免费，编写用例简单，测试速度更快。
1.Cypress 环境搭建
1.1 本地创建文件夹 CypressDemo
1.2 在VS Code中打开CypressDemo文件夹
1.3 打开VS Code 的 Terminal，运行npm init 初始化项目，初始化时，package name 等信息可以不用填写，回车就行。最后选择Yes，然后确保生成node_modules文件夹或者生成package.json文件
1.4 继续在 Terminal 中运行下边命令安装 cypress
npm install cypress --save-dev
1.5 安装完成后，cypress 已经在 ./node_modules 目录下，但需要通过下边的命令打开 cypress 的GUI，只有打开GUI之后，在项目中才能看到Cypress的文件夹。
node_modules/.bin/cypress open
1.6 生成 Cypress 文件夹后，看看整体项目的文件结构：
-- Cypress
-- fixtures 测试数据的配置文件，可以使用fixture方法读取
-- integration 测试文件所存放的路径
-- plugin 插件文件的路径，默认在index.js中
-- support 加载测试文件之前要加载的文件路径，这个文件被编译并绑定
-- screenshots 存放失败的用例的截图文件 (这个在执行测试时cypress会自动生成)
-- videos 存放测试用例执行的视频(这个在执行测试时cypress会自动生成)
-- cypress.json cypress的全局配置文件
-- package.json 存放项目的所有文件的目录
2.Cypress 常用方法
在编写测试用例之前，我们可以先了解一下Cypress的一些基本语法：
2.1. 用例集的方法
-
reference- 表示告诉VSCode要去 cypress package里找相关的语义解析，这样一来cypress相关的语法和函数等就可以尽情地使用了； -
describe()- 声明了一个测试用例集，是Mocha中将测试分组的一种方法。describe()带有两个参数，第一个是测试组的名称，第二个是回调函数； -
it()- 声明了一个测试用例，it()有两个参数，一个参数是一个字符串，说明测试应该做什么，第二个参数是一个包含实际测试的回调函数； -
it.only()- 代表只测试这个case； -
it.skip()- 代表不要测试这个case；
2.2. 钩子
-
before()- 在每个测试用例集执行前要做的事； -
after()- 在每个测试用例集执行完要做的事； -
beforeEach()- 在每个测试用例运行前需要做的事； -
afterEach()- 在每个测试用例运行前需要做的事；
2.3. 基本操作
-
cy.visit(url)-- 访问URL -
cy.url()-- 获取当前URL的地址 -
cy.go(direction)-- 返回前或者后一个页面 "forward", "back" -
cy.get()- 获取元素， 接受一个CSS选择器来选择一个或多个元素 -
cy.contains()- 可以通过元素的内容而不是 CSS 选择器来查找一个元素 -
cy.get('selector').click()- 点击元素，需要跟在查找元素表达式的后面 -
cy.get('selector').dbclick()- 双击元素，需要跟在查找元素表达式的后面 -
cy.get('selector').type(String)- 可以再输入框中输入一段内容，也需要跟在查找元素表达式的后面 -
cy.get('selector').should()- 验证 -
cy.get('selector').clear()- 清楚文本框中的内容
cy.visit("http://jianshu.com")
cy.url().should('include', 'jianshu')
cy.go("back")
cy.get('nav').should('be.visible')
cy.contains('apples')
cy.get('nav').click();
cy.get('nav').type("search")
cy.get('nav').should('have.attr', 'href', '/users')
cy.get('#app div:nth(0)').should('contain', 'first child')
3.执行测试
编写完测试用例，测试用例主要存放在integration文件夹中，讲解项目结构中也有提到。而且Cypress自带了很多测试脚本的案例，也可以进行学习。测试用例编写完了，那么如何来执行测试用例呢？
3.1. 通过GUI来选择要执行的测试用例
使用node_modules/.bin/cypress open命令可以打开GUI，选择想要执行的用例来执行。
但是如果每次通过执行完整的路径打开 cypress 就比较麻烦，我们可以添加脚本 "cypress:open": "cypress open"在 package.json 文件的 scripts 区域，然后执行 npm run cypress:open 命令就可以打开GUI，比较方便。如下代码：
{
"name": "cypressdemo",
"main": "index.js",
"scripts": {
"cypress:open": "cypress open"
},
"license": "ISC",
"devDependencies": {
"cypress": "^4.5.0"
}
}
3.2. 使用命令来运行测试 (Headless模式)
Cypress默认是使用headless模式运行测试用例的，所以不会看到打开浏览器的界面。
npx cypress run
//运行所有的测试用例
npx cypress run --spec cypress/integration/examples/actions.spec.js
//运行单个js文件里的测试用例
npx cypress run --spec “cypress/integration/examples/actions.spec.js,cypress/integration/examples/aliasing.spec.js”
//运行多个js文件里的测试用例
注意：多个js文件时，中间不能有空格，否则只执行第一个js文件里的case
npx cypress run --spec “cypress/integration/examples/**/*”
//运行测文件夹里的所有用例
3.3. 使用命令打开页面运行测试
npx cypress run --headed
//--headed 可以打开浏览器看到测试用例的执行
3.4. 选择在哪个浏览器执行
npx cypress run --browser chrome
//--browser可以选择执行的浏览器
4.生成报告
一般使用 npx cypress run --spec cypress/integration/examples/actions.spec.js 命令运行测试用例，cypress会生成两个文件夹，一个是screenshots用来存放失败的截图，一个是videos用来存放每条用例的录屏。
但是执行完之后没有测试报告，需要给Cypress项目设置报告。因为cypress是基于mocha.js，所以Mocha的所有Report都可以使用， 所以接下来我们可以用mochawesome给Cypress项目生成一个带有截图的HTML报告。
4.1. 生成json报告
A. 首先安装mocha cypress-multi-reporters mochawesome
npm install --save-dev mocha cypress-multi-reporters mochawesome
B. 安装完成后在cypress.json文件中添加下边的代码：
a. reporter： 指定报告生成器 mochawesome
b. reportDir： 指定报告存放路径，不指定默认在项目目录下mochawesome-report
c. overwrite： 是否覆盖原来的报告，选择“true”的话，如果有多个case文件，第二个文件的报告会覆盖第一个的报告，以此类推，最终只有最后一个用例的报告
d. html： 是否生成html报告
e. json： 是否生成json文件
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome",
"mochawesomeReporterOptions": {
"reportDir": "cypress/results/json",
"overwrite": false,
"html": false,
"json": true
}
}
C. 配置完成后执行测试用例，就会生成一个results和json的文件夹，里边会生成mochawesome.json , mochawesome_001.json的json文件。
4.2. Merge多个json文件
首先，安装merge报告的工具
npm i --save-dev mochawesome-merge
执行代码，将多个json文件merge成一个json文件
npx mochawesome-merge cypress/results/json > cypress/results/mochawesome.json
4.3. 将生成的json文件转换为html文件
首先，安装生成html文件的工具
npm i --save-dev mochawesome-report-generator
执行下边代码，将合成的json文件转换成一个HTML文件
npx marge cypress/results/mochawesome.json -o cypress/results
4.4. 查看报告
在cypress/results 文件下，就可以看到HTML的报告，打开如下图所示，但是没有失败的截图。
4.5. 给报告中添加失败用例的截图
Cypress会自动生成一个screenshots文件夹，里边的截图会按照case文件夹/case所在spec.js文件名字/context名字/case名字.png 格式存放，根据这个，我们可以在support/index.js 文件中添加下边代码，引入截图。
import addContext from 'mochawesome/addContext'
Cypress.on("test:after:run", (test, runnable) => {
if (test.state === "failed") {
let item = runnable
const nameParts = [runnable.title]
// Iterate through all parents and grab the titles
while (item.parent) {
nameParts.unshift(item.parent.title)
item = item.parent
}
const fullTestName = nameParts
.filter(Boolean)
.join(' -- ')
// this is how cypress joins the test title fragments
const imageUrl = `../screenshots/${
Cypress.spec.name
}/${fullTestName} (failed).png`
addContext({ test }, imageUrl);
}
});
结果如下：
至此，再运行用例，合并json文件，转换成HTML，打开HTML文件就能看到失败的截图了。 参考： 3 Steps to Awesome Test Reports with Cypress
5.与 Pipeline 集成
这里使用GoCD进行部署，关于GoCD相关信息，可以查看 GoCD相关配置。
5.1 创建pipeline
5.2 添加Task
- Task1: 安装cypress-multi-reporters mochawesome
- Task2: 安装mochawesome-merge
- Task3: 安装mochawesome-report-generator
- Task4: 运行测试
- Task5: 合并json文件
- Task6: 生成HTML报告
5.3 获取产出物(Artifacts)
将生成的HTML文件显示在TestResults tab中：