Cypress应用

After Screenshot 事件

截图完成后，你可以通过 after:screenshot 节点事件获取截图的相关信息。该事件在使用 cy.screenshot() 或测试失败时触发。事件会在截图图像写入磁盘后调用。

这允许你记录这些信息，根据需要处理图像，并返回更新后的图像信息。

语法

caution

⚠️ 这段代码属于 setupNodeEvents 函数的一部分， 因此会在 Node 环境中执行。你不能在此函数中调用 Cypress 或 cy 命令， 但可以直接访问文件系统和操作系统的其他部分。

cypress.config.js 文件

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      on('after:screenshot', (details) => {
        /* ... */
      })
    },
  },
})

cypress.config.ts 文件

import { defineConfig } from 'cypress'

export default defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      on('after:screenshot', (details) => {
        /* ... */
      })
    },
  },
})

details (object)

描述所截取截图的对象，包含以下属性：

属性	类型	描述
size	number	图像文件的大小（字节）。
takenAt	string	截图拍摄的日期和时间。UTC 格式的 ISO 8601（例如：'2020-03-09T07:30:37.686Z'）。
duration	number	截图和保存的耗时（毫秒）。
dimensions	object	图像的宽度和高度（像素）（例如：{ width: 100, height: 50 }）。
multipart	boolean	截图是否由多个截图图像拼接而成。
pixelRatio	number	(可选) 截图像素与浏览器显示像素的比例。
name	string	(可选) 通过 cy.screenshot() 传入的 fileName 参数。
specName	string	截图所在规范文件的名称。
path	string	图像的绝对路径。
scaled	boolean	被测应用是否被缩放以适应浏览器视口。可能是通过 cy.screenshot() 传入的 scale 参数。
blackout	array	通过 cy.screenshot() 传入的 blackout 参数。

用法

修改截图信息

使用 setupNodeEvents 可以接入 after:screenshot 事件。

如果你更改了图像的 path、size 或 dimensions，你需要更新这些新值，以便在测试结果中正确报告。除了 path、size 和 dimensions 之外的任何其他属性将被忽略。

你可以从回调函数返回一个对象或解析为对象的 Promise。任何非对象类型的返回值将被忽略。 该对象可以包含以下属性：

• path: 图像当前所在位置的绝对路径
• size: 当前图像文件的大小（字节）
• dimensions: 当前图像的宽度和高度（像素）（格式为 { width: 100, height: 50 }）

这些属性将被合并到截图信息中，并传递给 onAfterScreenshot 回调（如果通过 Cypress.Screenshot.defaults() 和/或 cy.screenshot() 定义）。

修改截图路径

如果你移动了截图图像的位置，你需要指定图像的新 path。

cypress.config.js 文件

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:screenshot', (details) => {
        console.log(details) // 将所有信息打印到终端

        const newPath = '/new/path/to/screenshot.png'

        return new Promise((resolve, reject) => {
          // fs.rename 将文件移动到现有目录 'new/path/to'
          // 并将图像重命名为 'screenshot.png'
          fs.rename(details.path, newPath, (err) => {
            if (err) return reject(err)

            // 因为我们重命名并移动了图像，所以返回新路径
            // 以便测试结果中的信息准确
            resolve({ path: newPath })
          })
        })
      })
    },
  },
})

cypress.config.ts 文件

import { defineConfig } from 'cypress'
import fs from 'fs'

export default defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      on('after:screenshot', (details) => {
        console.log(details) // 将所有信息打印到终端

        const newPath = '/new/path/to/screenshot.png'

        return new Promise((resolve, reject) => {
          // fs.rename 将文件移动到现有目录 'new/path/to'
          // 并将图像重命名为 'screenshot.png'
          fs.rename(details.path, newPath, (err) => {
            if (err) return reject(err)

            // 因为我们重命名并移动了图像，所以返回新路径
            // 以便测试结果中的信息准确
            resolve({ path: newPath })
          })
        })
      })
    },
  },
})

另请参阅

• cy.screenshot()
• Cypress Cloud
• 截图和视频
• 视觉测试
• 如何使用插件
• 节点事件概览