UI自动化测试框架Cypress介绍和使用
作者：互联网
# 引用官网的介绍语，快速、简单、可靠的在浏览器测试一切的工具。
cypress是比较新的一个自动化测试工具，引起很强烈的关注，在github的star数目前已经是22k+，可见是很受到广大自动化测试工作者的欢迎。
cypress有哪些与众不同呢？
- 时间追溯，cypress可以在测试运行中自动存储视频以及出错时候截屏存储，鼠标滑过命令行时可以看到这个命令行执行时的动画。
- 可调试性，不用猜测你的测试是否失败，像使用chrome的DevTools一样直接调试，并且可以快速的追踪到出错栈。
- 实时重加载，当测试代码改动过之后，cypress会自动重新加载测试。
- 自动等待，不需要添加wait或是sleep在你的测试中，cypress会自动等待命令和assertion。
- 测试状态菜单，可以实时看到有多少个测试通过或是没通过。
- 访问窗口的尺寸调整，可以随意调整页面访问窗口的尺寸。
- 测试统计报告（增强功能，免费版只能支持3个用户登录查看，已经500次的测试结果）
Cypress安装
cypress的安装是非常的简单，国内建议使用npm安装，yarn会一直卡在安装步骤。
npm install cypress --save-dev --registry=https://registry.npm.taobao.org
Cypress使用
安装结束，我们就可以使用cypress测试了，首先需要添加cypress.json也就是cypress的配置文件。
这里简单编写，可以只写cypress需要访问的服务地址。
{
"baseUrl": "http://localhost:8000", #测试访问的路由地址
"reporter": "junit", #报告类型
"reporterOptions": {
"mochaFile": "results/test-[hash].xml", #输出的文件
"toConsole": true #是否输出的命令行
},
"viewportHeight": 800, # viewPort也就是预览窗的高度
"viewportWidth": 1600 # viewPort也就是预览窗的宽度
}
编写完配置文件之后，我们可以通过cypress open本地打开测试窗口
cypress open
可以看到第一次启动时候，会有一个examples的目录，这是cypress自动创建的例子代码，我们可以直接点击右侧的open in IDE打开代码。
可以点击右上角的运行所有集成化测试，或是点击单个测试用例单独测试
Cypress的目录结构介绍
├── fixtures # mock数据的存储目录，这里存放了所有mock的json文件
│ ├── orders.json
│ ├── panicBuyings.json
│ └── routers.json
├── integration # 测试用例代码目录
│ ├── orderManagement.spec.js
│ └── panicBuyingManagement.spec.js
├── plugins # 插件目录
│ └── index.js
└── support
├── commands.js
└── index.js
Cypress测试代码编写
describe('测试抢购订单管理', () => {
beforeEach(() => { #每个测试用例调用之前的操作
const mock = Cypress.env('MOCK') || 'false'; # 自定义环境变量，运行时传递的话需要指定CYPRESS_前缀，这里使用是CYPRESS_MOCK=true cypress open
cy.server(); # 如果需要mock接口的话，必须要运行server
if (mock === true) {
cy.intercept('GET', '/panic-buying/manager/orders*', { fixture: 'orders.json' }).as(
'getOrders',
); # 拦截/panic-buying/manager/order*路由，并指定返回数据使用orders.json，定义这个接口是getOrders函数，用于后面测试使用。
} else {
cy.intercept('GET', '/panic-buying/manager/orders*').as('getOrders');
}
});
it('测试订单列表搜索', () => {
cy.visit('/#/rush-order/list'); #访问页面路径
cy.wait('@getOrders').its('response.statusCode').should('be.oneOf', [200, 304]); # 等待getOrders函数，也就是接口返回并判断返回状态是200或是304中的一个。
cy.wait(1000); # 显示的等待1秒
});
});
命令行运行cypress测试
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: panicBuyingManagement.spec.js (2 of 2)
<?xml version="1.0" encoding="UTF-8"?>
<testsuites name="Mocha Tests" time="11.0930" tests="2" failures="0">
<testsuite name="Root Suite" timestamp="2021-03-10T15:00:52" tests="0" file="cypress/integration/panicBuyingManagement.spec.js" time="0.0000" failures="0">
</testsuite>
<testsuite name="测试抢购管理" timestamp="2021-03-10T15:00:52" tests="2" time="11.0930" failures="0">
<testcase name="测试抢购管理 测试新建抢购" time="9.2340" classname="测试新建抢购">
</testcase>
<testcase name="测试抢购管理 测试列表搜索" time="1.8590" classname="测试列表搜索">
</testcase>
</testsuite>
</testsuites>
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 2 │
│ Passing: 2 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 11 seconds │
│ Spec Ran: panicBuyingManagement.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: /Users/hightall/work/wenyu/dashboard/panic-buying-managemen (0 seconds)
t/cypress/videos/panicBuyingManagement.spec.js.mp4
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ orderManagement.spec.js 00:03 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ panicBuyingManagement.spec.js 00:11 2 2 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 00:14 3 3 - - -
我们可以看到测试完成后，会自动生成测试运行过程的视频panicBuyingManagement.spec.js.mp4
原文转自：UI自动化测试框架Cypress介绍和使用 - SegmentFault 思否
标签：Cypress,spec,js,json,UI,测试,自动化,cypress 来源： https://www.cnblogs.com/5566yesongqiao/p/16202162.html