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环境
由于Cypress是基于js语⾔的⼯具，操作系统需要安装NodeJs环境。
Mac、Linux、Windows
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
| -- fixtures # 外部静态数据
| -- example.json # 静态数据⽂件
| -- integration # 测试⽂件，⽀持.js .jsx .coffee .cjsx
| -- xxx.js
| -- xxx.jsx
| -- ffee
| -- 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": "www.amazon/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=1590396419&sr=8-1"}
//定义测试
describe('Test', function() {
//定义case
it('Search For Goods', function() {
// 访问亚马逊官⽹
cy.visit('www.amazon')
// 根据元素class定位搜索框，并输⼊“惠百施熊本熊成⼈⽛刷” <('.nav-search-field .nav-input').type(data['search'])
// 检查点，根据元素class定位搜索框，判断是否有值“惠百施熊本熊成⼈⽛刷”
大理石粘接剂<('.nav-search-field .nav-input').should('have.value', data['search'])
// 根据元素class定位搜索按钮，并点击
<('.nav-search-submit .nav-input').click({force:true})
// 根据定位搜索框，并点击“惠百施熊本熊成⼈⽛刷”
})
/
/定义case
specify('Add Shop Cart', function() {
// 访问商品链接
cy.visit(data['url'])
// 根据元素selector定位加⼊购物车按钮，并点击
<('#add-to-cart-button').click({force:true})
pcu h// 等待3000ms
cy.wait(3000).then(()=>{
// 根据元素selector定位添加购物车成功提⽰，并⽐较提⽰中是否包含“商品已加⼊购物车”
<('#huc-v2-order-row-confirm-text > h1').should('contain', '商品已加⼊购物车')
// 根据元素selector定位价格信息，并⽐较提⽰中是否等于“￥85.76”
农用保水剂
<('#hlb-subcart > div.a-row.a-spacing-micro > span > span.a-color-price.hlb-price.a-inline-block.a-text-bold').should('', '￥85.76')
})
})
})
3.2.4 API测试样例（仅http）
describe('My First Test', function() {
//定义case
it('Gets, types and asserts', function() {
// 发送请求，并获取响应
method: 'GET',
url: 'www.amazon/',
}).then((resp)=>{
// 检查点，验证响应状态是否是200
expect(resp.status).to.eq(200)
})
})
})
3.3 测试执⾏
Cypress的测试执⾏可通过应⽤程序和命令⾏执⾏
3.3.1 应⽤程序进⾏测试
开始测试，可以选择⾃带⽆头浏览器或设备安装的chrome浏览器
测试执⾏，浏览器会直接显⽰测试过程，如出错可快速定位步骤。也可以通过刷新按钮重新执⾏测试（令：此时测试⽂件修改会⾃动刷新执⾏）
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议