四、Cypress测试框架拆解

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