s
前端开发:基于cypress的自动化实践, https://www.cnblogs.com/fnng/p/14583259.html
UI自动化测试框架Cypress介绍和使用 , https://www.cnblogs.com/5566yesongqiao/p/16202162.html
# 引用官网的介绍语,快速、简单、可靠的在浏览器测试一切的工具。
cypress是比较新的一个自动化测试工具,引起很强烈的关注,在github的star数目前已经是22k+,可见是很受到广大自动化测试工作者的欢迎。
cypress有哪些与众不同呢?
- 时间追溯,cypress可以在测试运行中自动存储视频以及出错时候截屏存储,鼠标滑过命令行时可以看到这个命令行执行时的动画。
- 可调试性,不用猜测你的测试是否失败,像使用chrome的DevTools一样直接调试,并且可以快速的追踪到出错栈。
- 实时重加载,当测试代码改动过之后,cypress会自动重新加载测试。
- 自动等待,不需要添加wait或是sleep在你的测试中,cypress会自动等待命令和assertion。
- 测试状态菜单,可以实时看到有多少个测试通过或是没通过。
- 访问窗口的尺寸调整,可以随意调整页面访问窗口的尺寸。
- 测试统计报告(增强功能,免费版只能支持3个用户登录查看,已经500次的测试结果)
Cypress安装
cypress的安装是非常的简单,国内建议使用npm安装,yarn会一直卡在安装步骤。
1
|
npm install cypress --save-dev --registry=https: //registry .npm.taobao.org |
Cypress使用
安装结束,我们就可以使用cypress测试了,首先需要添加cypress.json也就是cypress的配置文件。
这里简单编写,可以只写cypress需要访问的服务地址。
1
2
3
4
5
6
7
8
9
10
|
{ "baseUrl" : "http://localhost:8000" , #测试访问的路由地址 "reporter" : "junit" , #报告类型 "reporterOptions" : { "mochaFile" : "results/test-[hash].xml" , #输出的文件 "toConsole" : true #是否输出的命令行 }, "viewportHeight" : 800, # viewPort也就是预览窗的高度 "viewportWidth" : 1600 # viewPort也就是预览窗的宽度 } |
编写完配置文件之后,我们可以通过cypress open本地打开测试窗口
1
|
cypress open |
可以看到第一次启动时候,会有一个examples的目录,这是cypress自动创建的例子代码,我们可以直接点击右侧的open in IDE打开代码。
可以点击右上角的运行所有集成化测试,或是点击单个测试用例单独测试
Cypress的目录结构介绍
1
2
3
4
5
6
7
8
9
10
11
12
|
├── 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测试代码编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
──────────────────────────────────────────────────────────────────────────────────────────────────── 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
end