Cypress - 截图和视频

Cypress - 截图和视频

Cypress 提供了强大的功能来捕获测试运行过程中的截图和录制视频。这些视觉产物对于调试和理解测试结果非常有价值。

截图

你可以使用 cy.screenshot() 命令捕获整个应用视口（viewport）或特定元素的截图。Cypress 还内置了一项功能，可在测试失败时自动捕获截图，这对于快速诊断问题非常有帮助。

要在测试期间通过代码（programmatically）捕获截图，请使用 cy.screenshot() 命令。你可以提供文件名和选项来定制截图。

截图实现

以下是如何在 Cypress 测试中实现截图命令：

describe('Visual Test Suite', () => {
    it('Captures screenshots', () => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');

        // Capture a full page screenshot with a custom filename
        // 捕获带有自定义文件名的完整页面截图
        cy.screenshot('full-application-page');

        // Capture a screenshot of a specific element
        // 捕获特定元素的截图
        cy.get('button[onclick="jsConfirm()"]').screenshot('confirm-button-element');
    });
});

执行与输出

当你运行此测试时，Cypress 将执行这些命令。在 Test Runner 中，你将直观地看到页面以及截图的目标元素。

Test Runner 中的执行日志将确认截图操作。例如，它可能会显示 ‘screenshot: full-application-page.png’ 和 ‘screenshot: confirm-button-element.png’。

默认情况下，截图会保存在项目内的 cypress/screenshots 文件夹中。每个测试文件都有自己的子目录。例如，如果你的测试文件是 my_test_spec.cy.js，则截图将位于 cypress/screenshots/my_test_spec.cy.js/。

文件 full-application-page.png 将包含网页整个可见部分的图像。文件 confirm-button-element.png 将专门是 ‘Click for JS Confirm’ 按钮的图像。

配置

截图行为可以在你的 cypress.config.js（或 cypress.config.ts）文件中进行配置。screenshotOnRunFailure 选项默认为 true，这意味着在执行 cypress run 期间测试失败时会自动捕获截图。

screenshotsFolder 选项默认为 "cypress/screenshots"。如果需要，你可以更改此路径。

要禁用测试失败时的自动截图，可以在 cypress.config.js 中将 screenshotOnRunFailure 设置为 false：

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    screenshotOnRunFailure: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
      // 在此处实现 Node 事件监听器
    },
  },
});

视频

Cypress 通过 cypress run 命令自动为每个 spec 文件（spec file）运行过程录制视频。此功能默认启用。视频存储在 cypress/videos 文件夹中。

当你使用命令行执行测试时，例如：

npx cypress run

运行完成后，控制台输出通常会包含有关视频录制的信息，例如其路径、持续时间以及压缩详情。例如，它可能会显示：‘Video: cypress/videos/my_test_spec.cy.js.mp4’。

你将在项目内的指定位置找到相应的 MP4 视频文件。此视频显示了该 spec 文件的整个测试执行过程。

配置

要禁用视频录制，请在 cypress.config.js 中将 video 选项设置为 false：

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    video: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
      // 在此处实现 Node 事件监听器
    },
  },
});

你还可以配置其他与视频相关的设置，例如 videosFolder、videoCompression 和 videoUploadOnPasses（它控制通过的测试的视频是否上传到 Cypress Dashboard）。