一、Cypress 介绍
Cypress 是一款支持现代浏览器的端到端的自动化测试工具。解决了开发人员和 QA 工程师在测试现代应用程序时面临的关键难点问题。
Cypress 包含免费的、开源的、可本地安装的 Test Runner 和 能够记录你测试的控制面板服务。
Cypress 项目地址：https://github.com/cypress-io/cypress
二、安装
官方地址：https://docs.cypress.io/guides/getting-started/installing-cypress.html
1、通过 npm 来安装 Cypress：
①、那么首先安装 node（npm是一个node包管理和分发工具）
②、打开 CMD 命令行，利用 mkdir 新建目录，利用 cd 命令切换到指定目录（也可以手动先新建好）
③、使用 npm install cypress --save-dev 安装 Cypress（如果有 WARN 可忽略，不影响）
④、使用 node_modules\.bin\cypress open 启动 Cypress，或修改 package.json
"scripts": {
"cypress:open": "node_modules/.bin/cypress open"
}
运行命令：npm run cypress:open
2、直接下载 Cypress 压缩包
①、官网下载地址：https://download.cypress.io
②、解压到指定目录，然后进入目录，执行 Cypress.exe
③、选择你的项目路径
④、Cypress 的目录结构
- fixtures：自定义json文件
- integration：编写测试用例
- plugins：插件
- support：目前未用到，需要自定义指令的时候可以深入研究
三、使用
1、默认已经为我们准备了一些丰富的例子 ，可以直接点击运行。
2、我们也可以自己新建一个测试文件：
①、首先切换至目录 ~\continue-dashboard\web\cypress\integration（任意编辑器都可以，我使用的时 VScode）
②、然后新建一个测试文件 sample_spec.js，代码如下：
describe('My first test case for cypress',function(){
it('Does not match!',function(){
expect(true).to.equal(true)
})
})
③、最后打开 Cypress 运行此文件即可，你会发现运行速度很快，这就是Cypress的优势所在。
④、更多API详解参考：https://docs.cypress.io/guides/guides/module-api.html#cypress-run
注意：在编写用例时，每次保存会自动触发测试，对于调试来说是比较方便的。
四、设置
1、运行情况：从左向右分别显示成功数、失败数、未运行、耗时，以及自动滚屏和重新运行按钮
2、控件定位：1.点击选择器-->2.点击定位元素-->3.复制生成代码
3、窗口设置：
① 默认情况下，除非由cy.viewport命令指定，否则视口将为1000*660px
② 我们可以通过在cypress.json中指定这些值来覆盖默认视口维度
{
“viewportWidth”：1200，
“viewportHeight”：800
}
4、解决chrome 下的跨域问题：
在 cypress.json 中添加：
"chromeWebSecurity": false
四、第一个真实的测试
1、一个测试用例通常包含三个方面
（1）设置应用程序状态
（2）采取行动
（3）对结果应用程序状态进行断言
2、我们来对这些步骤进行详细介绍，并将它们清晰地映射到 Cypress 命令
（1）访问一个网页
（2）查询元素
（3）与元素交互
（4）断言页面上的内容
3、实现访问百度首页并搜索 testerhome：
describe('My first test case for cypress',function(){
it('visit baidu home page and search for testerhome:',function(){
cy.visit('http://www.baidu.com') //访问 url
cy.title().should('contain','百度一下，你就知道') //验证页面 title 是否正确
cy.get('#kw') //根据 css 定位搜索输入框
.type('testerhome') //输入关键字
.should('have.value','testerhome') //验证关键字自动是否展示正确
cy.get('#su').click() //根据 css 定位搜索按钮并点击
cy.url().should('include','wd=testerhome') //验证目标url 是否正确包含关键字
cy.title().should('contain','testerhome_百度搜索') //验证页面 title 是否正确
cy.get('[id="1"]')
.should('contain','TesterHome') // 验证第一个结果中是否包含TesterHome
cy.screenshot() //截屏
})
})
五、元素定位方式
- get：按 css 或元素特定属性的方式定位元素
- contains：按特定字符串定位元素
六、使用 request 请求进行登录
cypress 推荐在每个用例的登录步骤，不调用 UI ，直接使用 request 登录。下面是一个例子：
describe('My first test case for cypress',function(){
it('login as admin without UI:',function(){
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://***',
method:'POST',
form:true,
body:accountTypes['admin'] // 使用 admin 账号登录（跳过 UI 的登录）
})
cy.visit('/profile')
cy.url().should('include','profile') //验证目标url 是否正确
cy.get('#headerTitle')
.should('have.text','个人信息') // 验证是否包含标题 个人信息，
})
})
提取登录方法为公共方法
Cypress.Commands.add('login', (userType, options = {}) => {
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://***',
method:'POST',
form:true,
body:accountTypes[userType] // 使用 admin 账号登录
})
})
describe('login with different account',function(){
beforeEach(function() {
cy.login('admin')
cy.visit('/')
})
it('进入商品列表页面',function(){
cy.contains('商品列表').click()
cy.get('#headerTitle')
.should('have.text','商品列表') // 验证是否包含标题 商品列表
})
it('进入订单列表页面',function(){
cy.contains('订单列表').click()
cy.get('#headerTitle')
.should('have.text','订单列表') // 验证是否包含标题 订单列表
})
})
七、生成 Junit-allure 报表
在 cypress.json 中添加依赖：
"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/my-test-output[hash].xml", // 通过 hash 标签区分不同文件的用例结果
"toConsole": true
}
执行 cypress run 的时候会自动生成xml文件
使用 allure 生成对应报告：
// 生成allure 报告
allure generate results --clean
// 打开报告
allure open allure-report
八、生成 mocha awsome 报告
安装对应模块：
注意： mocha 必须指定 5.2.0， 否则会报错
npm install --save-dev mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
配置cypress 对应报告信息 cypress.json：
"reporter": "mochawesome",
"reporterOptions": {
"overwrite": false,
"html": false,
"json": true
},
编写执行测试和生成报告的脚本：scripts\cypress.js
const cypress = require('cypress')
const fse = require('fs-extra')
const { merge } = require('mochawesome-merge')
const generator = require('mochawesome-report-generator')
async function runTests() {
await fse.remove('mochawesome-report')
const { totalFailed } = await cypress.run()
const jsonReport = await merge()
await generator.create(jsonReport)
process.exit(totalFailed)
}
runTests()
在 package.json 文件添加对应启动脚本：
"scripts": {
"cypress:open": "cypress open",
"cy:run": "node scripts/cypress.js"
}
总结
- 速度感觉上比 selenium 要快。
- 内置的 request 方法可以直接跳过 UI 层的登录，但要求是你能调用对应的登录接口。
- 某些步骤运行失败时自动重试。这样可以提高运行的稳定性。
- 运行失败时自动截图。
