Cypress - 构建第一个测试

Cypress - 构建你的第一个测试

在你的项目中安装和配置好 Cypress 后，它会创建一个推荐的文件夹结构。你通常会在 cypress/e2e 文件夹中编写 端到端测试 (end-to-end tests) 的测试文件（例如，myFirstTest.cy.js）。.cy.js（或用于 TypeScript 的 .cy.ts）扩展名是现代 Cypress spec 文件 的约定规范。

以前，主要的测试文件夹是 cypress/integration。从 Cypress 10 版本及更高版本开始，这已标准化为用于 端到端测试 的 cypress/e2e 和用于 组件测试 的 cypress/component。

现代 Cypress 文件夹结构

让我们了解现代 Cypress 项目中典型的文件夹结构：

• cypress/e2e - 这是你的 端到端测试文件 (specs) 存放的位置。例如，login.cy.js 或 todo-app.cy.js。
• cypress/fixtures - 包含可供你的测试使用的静态数据文件（例如，JSON 文件）。对于 模拟 (mocking) API 响应或提供一致的测试数据非常有用。示例：user.json。
• cypress/support - 此文件夹包含可重用的 自定义命令 和 全局配置。主要文件包括：
  • commands.js (或 .ts)：用于创建 自定义命令（例如，cy.login()）。
  • e2e.js (或 .ts)：在 e2e 目录中的每个 spec 文件 运行之前执行。非常适合放置全局 beforeEach 钩子 (hooks) 或导入自定义命令。
• cypress/screenshots - 当测试失败时（如果配置了）或使用 cy.screenshot() 时，Cypress 会自动将 截图 保存到这里。
• cypress/videos - Cypress 可以录制测试运行的 视频，并保存在这里，这在 CI 环境中特别有用。
• cypress/downloads - 如果你的测试下载文件，Cypress 默认会将它们放置在此文件夹中。
• node_modules - 包含所有项目依赖项，包括 Cypress 本身，通过 npm 或 yarn 安装。这对项目执行至关重要。
• cypress.config.js (或 cypress.config.ts) - 这是 Cypress 的主 配置文件（取代了旧的 cypress.json 文件）。在这里你可以定义项目特定的设置、环境变量，并通过 setupNodeEvents 配置 插件。此文件对于 Cypress 10+ 版本是强制性的。
• package.json - 标准的 Node.js 文件，列出了项目依赖项（包括 Cypress）和 脚本（例如，用于运行 Cypress 测试的脚本）。

基本测试的结构

Cypress 测试使用类似于 Mocha 和 Jasmine 等 JavaScript 测试框架的语法构建。以下是基本结构：

• 测试套件 (test suite) 使用 describe() 函数定义，用于对相关的测试进行分组。它接受一个字符串作为套件名称和一个 回调函数。
• 套件内的单个测试用例 (test case) 使用 it() 函数（或其别名 specify()）定义。它接受一个字符串作为测试用例名称和一个包含测试步骤的 回调函数。
• 测试步骤，即 Cypress 命令（例如，cy.visit()、cy.get()），写在 it() 块内部。

基本测试实现

这是一个名为 example.cy.js 的文件中基本测试的示例：

cypress/e2e/example.cy.js

describe('My First Test Suite', function() {
  it('Visits the Kitchen Sink and asserts title', function() {
    // Test Step 1: Visit a URL
    cy.visit('https://example.cypress.io');

    // Test Step 2: Query for an element and make an assertion
    cy.contains('type').click();

    // Test Step 3: Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions');

    // Test Step 4: Get an input, type into it and verify the value
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');
  });
});

cy 对象提供了对所有 Cypress 命令的访问。它在你的测试文件中是全局可用的，所以你不需要导入 (import) 或引用 (require) 它。

测试执行

你可以通过两种主要方式运行 Cypress 测试：

1. 使用 Cypress 测试运行器 (Test Runner)（交互模式）：

npx cypress open

此命令会打开 Cypress 测试运行器，它提供了一个交互式界面。你可以看到你的 spec 文件，选择浏览器，并实时观看你的测试运行。这对于编写和调试测试强烈推荐。

2. 在无头 (Headless) 模式下运行（命令行）：

npx cypress run

此命令会在 无头浏览器（通常是 Electron）中运行 cypress/e2e 文件夹（默认）中的所有 spec 文件。这对于 CI/CD 流水线或当你只想快速运行所有测试时是理想的选择。默认情况下，在此模式下通常会启用失败时录制视频和截图的功能。

要从命令行运行特定的 spec 文件：

npx cypress run --spec "cypress/e2e/myFirstTest.cy.js"

当你执行特定文件时，测试运行器（如果通过 cypress open 打开）将聚焦于该文件，或者命令行输出将详细说明该特定文件的结果。你将看到日志指示测试的进度和结果（通过/失败）。

常见学习障碍：确保安装了 Node.js 和 npm（或 yarn），因为 npx 是 npm 的一部分。如果找不到 cypress 命令，请确保 Cypress 在你的 package.json 文件中被列为开发依赖项 (dev dependency)，并通过 npm install cypress --save-dev 命令安装。

实际应用：编写一个简单的测试来访问你的应用程序主页并验证标题或一个关键的标题是确保基本部署工作正常的一个很好的第一步。