Cypress 是一款现代化的前端自动化测试工具，提供友好的 Test Runner 和丰富的 API，能够快速构建和执行测试用例。
本文将带你从 Cypress 安装、文件结构、基本测试实现，到多种方式执行测试的完整流程。
一、启动 Cypress Test Runner
Cypress Test Runner 有助于触发测试执行。当我们完成 Cypress 安装时，终端上的工具会给出建议，如下所示 −
您可以通过运行 − node_modules/.bin/cypress open 来打开 Cypress要打开 Test Runner，我们必须运行下面提到的命令 −
node_modules/.bin/cypress open一段时间后，Test Runner 窗口会打开，并显示一条消息，提示 Cypress 在 examples 文件夹下提供了示例项目文件夹结构。
单击"确定，知道了！"按钮。您的计算机上将显示以下屏幕 −
然后启动 Test Runner，示例文件夹下有多个 spec 文件可用，如下所示 −
要运行特定文件，例如 test2.spec.js，我们必须单击它。此外，浏览器和停止执行的选项也可用。
执行将从以下屏幕开始，其中显示测试步骤、测试用例名称、测试套件、URL、测试持续时间、浏览器尺寸等。
二、Cypress 文件夹结构
配置 Cypress 后，项目中会生成一个默认的文件框架。了解文件结构有助于我们更高效地组织测试项目：
fixtures：存放测试数据（键值对形式）。
integration：存放测试用例，是核心测试逻辑所在。
plugins：维护 Cypress 事件（如测试执行前后处理）。
support：存放可复用的方法或自定义命令，可直接在测试用例中使用。
videos：测试执行过程录制的视频。
node_modules：存放 npm 依赖，是 Cypress 项目运行核心。
cypress.json：Cypress 默认配置文件，可覆盖默认值。
package.json：项目依赖和脚本配置。
流程提示：新的测试文件应在
integration文件夹下创建，例如FirstTest.spec.js。
三、Cypress 基本测试结构
Cypress 遵循 JavaScript 测试框架（Mocha、Jasmine 等）规范，测试用例结构如下：
describe：定义测试套件名称。
it / specify：定义具体测试用例名称。
cy 命令：在测试用例中执行具体步骤，无需对象调用，安装节点模块时自动可用。
示例代码：
// 定义测试套件 describe('Tutorialspoint Test', function () { // 定义测试用例 it('Scenario 1', function () { // 打开 URL 并执行测试步骤 cy.visit("https://www.google.com/"); }); });四、Cypress 测试执行方式
1. 命令行执行
执行整个integration文件夹的所有测试：
./node_modules/.bin/cypress run执行指定 spec 文件：
cypress run --spec "<spec file path>"2. Test Runner 执行
运行 Test Runner：
./node_modules/.bin/cypress open然后在界面中点击想要执行的 spec 文件即可。
五、Cypress 文件结构与测试执行流程
左侧为文件结构，右侧为执行流程，并用颜色区分：
通过该图可以直观了解：
项目文件结构和作用分区。
测试执行流程：可通过 Test Runner 或命令行执行测试。
执行结果可生成视频与日志，方便查看和分析。
六、总结
Cypress 提供了灵活的测试执行方式，不论是通过命令行还是 Test Runner，都能快速触发测试。结合完整的文件结构和简单的 API，能够帮助测试工程师高效构建和维护前端自动化测试项目。
掌握本指南内容，你就可以完成从安装、编写测试到执行的全流程，为项目质量保障提供稳定支撑。
)