Cypress测试框架拆解
前面咱们已经跑通了第一个Cypress测试用例,这一章就来深入看看它的"内部构造"。就像拆一台家用小电器,搞懂每个部件的作用,才能更好地驾驭它解决实际问题。
一、默认文件结构:Cypress的"五脏六腑"
第一次启动Cypress时,它会自动生成一套标准的文件结构,就像盖房子先搭好框架。这些文件夹各司其职,让测试工作条理清晰:
-
cypress/fixtures :测试数据的"仓库"
这里放的是JSON格式的静态数据文件,比如登录用的账号密码、接口返回的模拟数据等。举个例子,创建一个
user.json
,把用户名密码存进去,测试时用cy.fixture('user')
就能直接调用,不用在代码里反复写这些数据,改起来也方便。 -
cypress/integration :测试用例的"主战场"
所有测试脚本(.js、.jsx等格式)都放在这里,Cypress会自动识别并执行。咱们之前写的登录测试用例,就该放在这个文件夹下。如果项目大,还能建子文件夹分类,比如按"登录""购物车""支付"分开管理,找起来一目了然。
-
cypress/plugins :功能扩展的"工具箱"
默认有个
index.js
文件,用来扩展Cypress的能力。比如想在测试前连接数据库清理数据,或者动态修改配置,都可以在这里写代码,Cypress会在测试开始前自动加载执行。 -
cypress/support:自定义命令的"加工厂"
commands.js
:可以把重复的操作封装成命令,比如"输入用户名→输入密码→点击登录"这一串步骤,写成cy.login()
,之后在所有测试用例里直接调用,不用重复写代码。index.js
:负责加载上面的自定义命令,还能放一些全局配置,比如设置每个用例运行前都自动访问某个页面。
二、自定义配置:给Cypress"调参数"
Cypress很灵活,就像手机的"设置"界面,能根据项目需求调整各种参数,主要通过cypress.json
文件或代码来配置:
-
基础配置项
比如设置基础URL,之后访问页面就不用写完整地址了;调整浏览器窗口大小,模拟手机或平板的显示效果:
json{ "baseUrl": "http://localhost:7077", // 基础地址,简化访问路径 "viewportWidth": 375, // 模拟手机宽度 "viewportHeight": 667, // 模拟手机高度 "testFiles": "login/**/*.js" // 只运行登录相关的测试用例 }
-
动态改配置
代码里用
Cypress.config()
能临时调整参数,比如测试某个慢接口时,延长超时时间:javascript// 把页面加载超时从默认60秒改成100秒 Cypress.config('pageLoadTimeout', 100000)
三、重试机制:Cypress的"智能等待"
写自动化测试最头疼的就是"元素还没加载出来,代码就执行完了",导致测试失败。但Cypress有个贴心的"自动重试"功能,就像有人帮你盯着页面,等元素准备好了再执行操作:
比如这段代码,检查页面上的h1
标签是否包含"欢迎回来":
javascript
cy.get('h1').should('contain', '欢迎回来')
如果h1
暂时没有这段文字,Cypress会在4秒内(可以通过defaultCommandTimeout
调整)反复检查,直到文字出现才继续,不用手动写sleep
等待。
不过要注意:只有查询元素的命令(比如get
find
)会重试,像click()
这种可能改变页面状态的命令不会重试,避免重复操作出问题。
四、测试报告:给测试结果"出份成绩单"
测试跑完了,怎么清晰地展示结果?Cypress支持好几种"成绩单"格式,满足不同场景:
- 命令行报告:默认直接在控制台显示,能看到每个用例的成功失败情况,适合本地调试。
- JUnit格式:生成XML文件,方便Jenkins等持续集成工具读取,在流水线里展示测试结果。
- Mochawesome报告:生成带截图的HTML报告,失败的步骤一目了然,适合分享给团队看。
生成报告很简单,运行时加个参数就行,比如生成HTML报告:
bash
npx cypress run --reporter mochawesome