Cypress 入门指南：从安装到执行测试全流程

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 等）规范，测试用例结构如下：

1. describe：定义测试套件名称。
2. it / specify：定义具体测试用例名称。
3. 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 文件结构与测试执行流程

左侧为文件结构，右侧为执行流程，并用颜色区分：

flowchart LR
    %% 项目文件结构
    A["Cypress 项目根目录"] --> B["fixtures 测试数据"]
    A --> C["integration 测试用例"]
    A --> D["plugins Cypress 事件"]
    A --> E["support 可复用方法/自定义命令"]
    A --> F["videos 测试视频"]
    A --> G["node_modules 项目依赖"]
    A --> H["cypress.json 配置文件"]
    A --> I["package.json 依赖和脚本"]

    %% 测试执行流程
    C --> J["测试执行流程"]
    J --> K["打开 Test Runner"]
    J --> L["命令行执行"]
    K --> M["选择 spec 文件"]
    K --> N["浏览器中执行测试用例"]
    L --> O["运行所有测试或指定测试文件"]
    O --> P["命令行输出测试结果"]
    N --> Q["记录视频 与 日志"]
    P --> Q

通过该图可以直观了解：

• 项目文件结构和作用分区。
• 测试执行流程：可通过 Test Runner 或命令行执行测试。
• 执行结果可生成视频与日志，方便查看和分析。

---

六、总结

Cypress 提供了灵活的测试执行方式，不论是通过命令行还是 Test Runner，都能快速触发测试。结合完整的文件结构和简单的 API，能够帮助测试工程师高效构建和维护前端自动化测试项目。

掌握本指南内容，你就可以完成从安装、编写测试到执行的全流程，为项目质量保障提供稳定支撑。