Skip to main content
Cypress应用

截图与视频

info
你将学到​
  • 如何捕获截图和视频
  • 如何配置截图和视频设置
  • 如何删除没有失败或重试测试的规格文件视频
tip
调试Cypress Cloud测试运行？

不要依赖本地复现失败条件或人工解析测试产物。使用 测试回放功能，完整重现录制运行期间的测试执行过程，获得全面的调试能力。

截图​

Cypress具备截图功能，无论通过cypress open还是cypress run运行（包括CI环境）均可使用。

要手动截图，可以使用cy.screenshot()命令。

此外，当cypress run期间发生失败时，Cypress会自动捕获截图。在cypress open期间不会自动捕获失败截图。

可以通过Cypress配置中的screenshotOnRunFailure设置为false，或通过Cypress.Screenshot.defaults()将screenshotOnRunFailure设为false来完全关闭失败时截图功能。

截图默认存储在screenshotsFolder（默认为cypress/screenshots）。

Cypress会在cypress run前清空截图文件夹。如果不想在运行前清空截图文件夹，可将trashAssetsBeforeRuns设为false。

视频​

caution

目前，Cypress仅支持为受支持的基于Chromium的浏览器（Chrome/Electron/Edge）录制视频。对Firefox的支持进度可在此issue中追踪。

视频录制默认关闭，但可通过配置中的video设为true启用。

启用后，Cypress会在cypress run期间为每个规格文件录制视频。cypress open期间不会录制视频。

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  video: true,
})

视频默认存储在videosFolder（默认为cypress/videos）。

使用--record标志运行测试时，无论成功与否，视频都会在每次规格文件运行后被处理、压缩并上传至Cypress Cloud。要改变此行为，使其仅在测试失败时处理视频，请参阅如何删除没有失败或重试测试的规格文件视频。删除视频将导致视频不会被上传至Cypress Cloud。

Cypress会在cypress run前清空视频文件夹。如果不想在运行前清空视频文件夹，可将trashAssetsBeforeRuns设为false。

视频编码​

视频录制完成后，Cypress会将其编码为通用格式。编码过程包括视频压缩。

压缩默认禁用，意味着此步骤会被完全跳过，因此视频文件较大但编码过程更快。将videoCompression设为true会强制使用32恒定码率因子(CRF)进行压缩，处理时间更长但视频更小。

启用压缩

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  videoCompression: true,
})

如果规格文件运行时间长且启用了videoCompression，可能会注意到cypress run期间完成一个规格文件与新规格文件开始之间存在时间间隔。此时Cypress正在编码捕获的视频并可能上传至Cypress Cloud。

修改默认压缩值32

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  videoCompression: 15,
})

除了启用或禁用视频压缩外，还可以指定用于压缩视频的CRF值。以下是常见场景：

  • 如果机器编码视频缓慢（常见于使用较少CPU核心的虚拟机），尝试增加CRF值
  • 如果视频质量极低，尝试降低CRF值

较低的videoCompression值会减少压缩时间，但会导致视频文件更大且质量更高。

info

如果你是FFmpeg专家，想查看编码过程中的所有设置和调试信息，可运行以下环境变量启动Cypress：

DEBUG=cypress:server:video

控制保留和上传至Cypress Cloud的视频​

你可能需要更精细地控制哪些视频需要保留并上传至Cypress Cloud。运行后删除视频可以节省机器资源空间，并跳过处理、压缩和上传视频至Cypress Cloud的时间。

要仅在测试失败时处理视频，可以删除没有失败或重试测试的规格文件视频，这样通过的测试视频不会被上传至Cypress Cloud。

如需更精细控制，可以使用Cypress的after:spec事件监听器，该事件在每个规格文件运行后触发，可在满足特定条件时删除视频。

删除没有失败或重试测试的规格文件视频​

以下示例展示在使用Cypress测试重试时，如何删除没有重试或失败的规格文件视频。

const { defineConfig } = require('cypress')
const fs = require('fs')

module.exports = defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      on('after:spec', (spec, results) => {
        if (results && results.video) {
          // 是否有任何重试尝试失败？
          const failures = results.tests.some((test) =>
            test.attempts.some((attempt) => attempt.state === 'failed')
          )
          if (!failures) {
            // 如果规格通过且没有测试重试，则删除视频
            fs.unlinkSync(results.video)
          }
        }
      })
    },
  },
})

接下来​

现在你已经可以捕获测试运行的截图和视频了，接下来呢？

与团队分享​

你可以立即利用Cypress Cloud：我们的企业级配套服务，可存储你的工件并让你从任何网页浏览器查看，以及与团队分享。

视觉回归测试/截图差异比较​

另一个可能性是视觉回归测试：将过去运行的截图与当前运行进行比较，确保没有变化。了解如何实现视觉测试。

另请参阅​

目录