Cypress - 测试运行器

Cypress - Cypress App (测试运行器)

Cypress App（历史上称为 Test Runner，测试运行器）是 Cypress 体验的关键组成部分。它提供了一个交互式界面，用于运行、查看和调试你的测试。这个可视化工具显著提高了生产力，并使理解测试执行过程变得非常直观。

打开 Cypress App

在你的项目安装了 Cypress 后，你可以在项目根目录的终端中使用以下命令之一打开 Cypress App：

# Using npx (recommended, uses the project's local Cypress version)
# 使用 npx（推荐，使用项目本地的 Cypress 版本）
npx cypress open

# Or, using the direct path (less common now)
# 或者，使用直接路径（现在较少使用）
./node_modules/.bin/cypress open

当你首次在新项目运行此命令时，Cypress 可能会执行一些初始设置，例如创建 cypress.config.js（或旧版本中的 cypress.json）文件以及带有示例测试的 cypress 文件夹结构。

导航 Cypress App 界面

启动后，Cypress App 会呈现一个用户友好的界面。具体的布局可能会随着 Cypress 版本的演变而变化，但通常包括：

测试类型选择（Testing Type Selection）: 在现代 Cypress (v10+) 中，如果同时配置了端到端测试（E2E Testing）和组件测试（Component Testing），你首先会看到选择测试类型的提示。
浏览器选择（Browser Selection）: 一个下拉菜单（通常在右上角）允许你选择 Cypress 应用哪种浏览器来运行你的测试（例如，Chrome、Firefox、Edge、Electron）。
Spec（测试文件）列表（Spec (Test File) List）: 主要区域显示你的测试文件（specs）列表，这些文件通常位于你的 cypress/e2e（用于 E2E 测试）或组件测试目录中。你可以搜索或筛选此列表。
导航侧边栏（Navigation Sidebar）: 一个侧边栏（通常在左侧）可能提供以下入口：
- Specs: 查看和运行你的测试文件。
- Runs: 如果你使用 Cypress Cloud，此部分显示录制的测试运行结果。
- Settings: 项目设置、配置和设备模拟选项。
- Debug: 用于调试失败测试的工具和信息，尤其是在连接到 Cypress Cloud 时。

要运行特定的测试文件，只需点击 Spec 列表中的文件名。这将启动所选浏览器并开始执行该文件中的测试。

交互式测试执行视图

当一个 Spec 文件运行时，Cypress 会打开所选浏览器，其中包含两个主要窗格：

被测应用 (AUT) 窗格（右侧）: 这个较大的窗格显示你的 Web 应用，就像用户看到的那样。Cypress 与此窗格交互以执行操作和断言。
命令日志 (Command Log)（左侧）: 这个关键的窗格实时显示测试执行期间的每个 Cypress 命令的详细日志。对于每个命令，你可以看到：
- 命令本身（例如，cy.visit、cy.get、cy.click）。
- 使用的选择器（如果适用）。
- 它产生的元素。
- 执行的断言及其结果（通过/失败）。

交互式视图的关键特性：

时光旅行调试器 (Time-Traveling Debugger): 点击命令日志中的命令，会将 AUT 窗格恢复到该命令执行之后的状态。这使你可以逐步查看测试执行过程，并在任何时候检查 DOM。
DOM 快照 (DOM Snapshots): Cypress 在大多数动作命令执行前后都会拍摄 DOM 快照。你可以在日志中固定一个命令并检查这些快照，从而轻松查看发生了什么变化。
选择器演练场 (Selector Playground): 一个帮助你找到元素唯一选择器的工具。你可以点击 AUT 窗格中的元素，Cypress 会建议选择器。
错误消息 (Error Messages): 当测试失败时，Cypress 提供清晰的错误消息，通常还包含如何解决问题的建议。
视口尺寸调整 (Viewport Sizing): 你可以轻松更改视口尺寸以测试响应式设计。
开发者工具访问 (Developer Tools Access): 你可以打开浏览器原生的开发者工具进行更深入的检查。

Cypress App 还会在你保存 Spec 文件更改时自动重新运行测试，在开发过程中提供快速的反馈循环。

停止测试执行

你可以随时使用 ‘Stop’ 按钮停止测试执行，该按钮通常位于命令日志头部或主 App 窗口中的浏览器选择区域附近。

Cypress App 是一个强大且不可或缺的工具，用于编写、运行和调试 Cypress 测试，它使整个测试过程更加高效和愉快。