Cypress - 调试

Cypress - 调试技巧

Cypress 提供了出色的调试能力，主要通过其交互式的 Test Runner（测试运行器）实现。这使您可以对命令进行“时间旅行”（time-travel），在每一步检查应用程序的状态，并使用熟悉的浏览器开发者工具。

主要调试功能与技巧：

时间旅行式命令日志 (Time-Traveling Command Log)： 在 Test Runner 中，点击日志中的某个命令会显示该特定时刻应用程序的 DOM 快照。您可以看到 Cypress 当时看到的内容。
DOM 检查 (DOM Inspection)： 在日志中固定一个命令，使其 DOM 快照保持活动状态，以便您使用浏览器开发者工具检查元素。
cy.pause()： 在您的测试中插入一个断点。执行将暂停，允许您检查应用程序，一步一步地执行后续命令，或恢复完整执行。
cy.debug()： 将前一个命令产生的 subject（结果）信息记录到控制台。它还会插入一个 debugger 语句，如果在浏览器开发者工具打开的情况下，将暂停执行。
debugger; 语句： 您可以在测试代码（或应用程序代码）中的任何位置放置一个标准的 JavaScript debugger; 语句。当浏览器开发者工具打开时，执行将在此行暂停。
浏览器开发者工具 (Browser Developer Tools)： 您可以在 Cypress Test Runner 的浏览器实例中使用浏览器（例如，通过 console.log()）、Network 选项卡和元素检查器，就像在正常 Web 开发中一样。

调试示例

让我们用一个示例来说明：

describe('Debugging Example Suite', function() {
  it('Demonstrates debugging tools', function() {
    cy.visit('https://example.cypress.io/commands/actions');

    // Find an element and interact with it
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');

    // Pause execution to inspect
    cy.log('Pausing execution...');
    cy.pause(); // Test execution will pause here

    // Use cy.debug() to inspect the subject of the previous command
    cy.get('.action-email').debug(); // Logs element and pauses if dev tools open

    cy.get('#couponCode1').type('MYCOUPON');

    // Using debugger statement
    cy.get('#couponCode1').then(($input) => {
      const value = $input.val();
      console.log('Coupon Value:', value);
      // debugger; // Execution will pause here if dev tools are open
    });

    cy.log('Test finished.');
  });
});

执行与调试流程：

当遇到 cy.pause() 时，Test Runner 将显示 ‘Paused’（已暂停）以及 ‘Resume’（继续）或 ‘Step Over’（单步跳过）下一个命令的按钮。您可以检查到此时的 DOM、应用程序状态和命令日志。
如果您点击 ‘Resume’，测试会继续。当遇到 cy.debug() 时，它会将关于 .action-email 元素的详细信息记录到 DevTools（开发者工具）控制台，并在 DevTools 打开时暂停。

在开发者工具中检查：当测试暂停时（例如通过 cy.pause()、cy.debug() 或 debugger;），或者当您点击 Test Runner 日志中的一个命令时：

控制台输出 (Console Output)： DevTools 控制台将显示命令信息（例如，‘Command: get’，‘Yielded: ’）。对于 cy.debug()，它将显示产生的 subject 及其信息。
DOM 快照 (DOM Snapshots)： Test Runner 提供 DOM 快照。点击一个命令会显示该命令之前和之后的页面状态。您还可以固定一个快照，并使用浏览器的元素检查器进行检查。
网络请求 (Network Requests)： DevTools 中的 Network 选项卡可用于检查您的应用程序在测试期间发出的 XHRs 和其他请求。

常见学习障碍：理解 Cypress 命令（它们是异步且排队执行的）与 .then() 或 hook 中同步 JavaScript 代码之间的区别。debugger; 对于同步代码有效，而 cy.pause() 和 cy.debug() 更适合用于暂停 Cypress 命令的流程。

实际应用：当测试意外失败时，在失败命令之前的 cy.pause() 或在元素选择器上的 cy.debug() 可以帮助您理解为什么找不到元素、元素不可见或元素状态不符合预期。

有关更高级的调试，例如 Cypress 自身的调试日志，请参阅官方文档：[https://on.cypress.io/debugging]