在接下来的几节课中，我们将深入探讨 Cypress 的主要功能及其如何帮助我们编写更优、更稳定的测试用例。让我们从时间旅行开始，并了解它在 Cypress 中的意义。

什么是时间旅行？

运行测试时，Cypress 会创建快照。这些快照将准确告诉我们测试套件中每一步发生的情况。

你已经在之前的课程中见过这些截图，但可能并不知道它们被称为“快照”。

Snapshot in Cypress

它们位于测试运行器的左侧，是整个测试套件的可视化表示。这被称为 命令日志（command log）。

那么，时间旅行是如何实现的呢？每个步骤都是可交互的，我们可以回退到之前执行过的步骤。

Elements are highlighted when a step is clicked

每个测试块都正确嵌套，我们可以看到某个测试用例中执行的所有命令。

当我们点击某条命令时，相关的元数据会被记录到 DevTools 控制台中，为我们提供有关已执行命令的额外信息。

Metadata is logged to the console

为什么我们需要它？

那么，为什么我们需要回溯过去查看之前的步骤呢？如果一个测试失败了，难道不会阻止 Cypress 继续执行后续命令，使失败的步骤成为队列中的最后一个吗？

简单来说：不是。即使某个步骤失败，Cypress 仍会继续执行后续命令。因为测试步骤之间不应相互依赖。每一个测试步骤都应能独立执行，而不会导致整个测试套件失败。但如果我们碰巧遇到一个失败的测试，又该如何找到根本原因？

Cypress 如何提升可调试性

调试代码不仅是测试的重要组成部分，也是编程本身的核心。它帮助我们评估问题并发现意外行为的原因。Cypress 将调试提升到了全新的水平。

在 Cypress 中进行调试时，我们有自由选择使用自己熟悉的工具，还是采用 Cypress 自带的方式。实际上两者并无优劣之分，它们相辅相成，可以协同使用。

熟悉的工具

Cypress 通过提供你已经掌握的工具，降低了学习门槛。测试运行器最强大的功能之一就是内置的 DevTools。

使用 DevTools

由于测试运行器本身是浏览器的一个封装，我们可以像平常一样访问 DevTools。这有助于我们理解测试过程中应用程序发生了什么。通过与每个命令交互，我们可以将有用的元数据输出到控制台。

image.png

使用 debugger

我们可以使用 debugger 关键字在某个特定点暂停执行。需要注意的是，由于 Cypress 命令本质上是异步的，我们必须将 debugger 放在回调函数中：

1// ❌ 不要这样做
2cy.get('.element');
3debugger; // 无效
4
5// ✔️ 正确做法
6cy.get('.element').then(() => {
7    debugger; // 有效
8});

Cypress 特有的工具

除了你已熟悉的工具外，Cypress 还提供了其他专属于它的工具。这些包括：

debug 命令

Cypress 提供了一个便捷的 .debug() 命令，可用于设置断点。该命令会返回其关联的前一个命令。使用方式如下：

1// 注意这次不需要 then 子句
2cy.get('.element').debug();

pause 命令

我们还可以让 Cypress 在每个命令后暂停，以便检查应用的状态。这样我们可以轻松查看各种信息，例如 DOM 状态或每一步的网络流量。

1cy.pause();
2cy.get('.element');

我们将在“调试 Cypress”一课中深入探讨每个部分，并学习如何实际排查我们编写的测试。