Cypress截图左上角添加时间戳的实现方案求助

以下提供两种可行方案，结合JavaScript和Cypress API实现需求：

方案一：全局钩子+Canvas修改截图文件（推荐） #

通过Cypress的after:screenshot全局钩子，在每次生成截图后，使用Node.js的canvas库修改图片，将时间戳绘制到左上角。

步骤1：安装依赖 #

首先安装处理图片的canvas包：

npm install canvas --save-dev

步骤2：添加全局钩子与处理函数 #

在cypress/support/e2e.js（Cypress 10+版本）中添加以下代码：

// 注册截图后钩子
Cypress.on('after:screenshot', (details) => {
  return addTimestampToScreenshot(details.path);
});

// 自定义截图处理函数
function addTimestampToScreenshot(screenshotPath) {
  return new Promise((resolve, reject) => {
    const fs = require('fs');
    const { createCanvas, loadImage } = require('canvas');

    // 读取截图文件
    fs.readFile(screenshotPath, (err, data) => {
      if (err) return reject(err);

      // 加载图片到Canvas
      loadImage(data).then((img) => {
        const canvas = createCanvas(img.width, img.height);
        const ctx = canvas.getContext('2d');

        // 绘制原截图
        ctx.drawImage(img, 0, 0);

        // 设置时间戳样式
        ctx.fillStyle = 'white';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px Arial';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';

        // 生成时间戳文本
        const timestamp = new Date().toLocaleString();

        // 在左上角偏移20px位置绘制时间戳（描边+填充保证可读性）
        ctx.strokeText(timestamp, 20, 20);
        ctx.fillText(timestamp, 20, 20);

        // 将修改后的图片写回原文件
        const outStream = fs.createWriteStream(screenshotPath);
        const pngStream = canvas.createPNGStream();
        pngStream.pipe(outStream);
        
        outStream.on('finish', resolve);
        outStream.on('error', reject);
      }).catch(reject);
    });
  });
}

方案说明 #

• 全局生效，所有截图都会自动添加左上角时间戳
• 时间戳样式可通过修改font、fillStyle、偏移量（20,20）调整
• 采用描边+填充的文本绘制方式，避免时间戳被页面背景遮挡

方案二：DOM临时元素+截图（无需额外依赖） #

在截图前，动态在页面左上角添加一个时间戳DOM元素，截图完成后移除该元素。

测试用例中使用的代码 #

cy.get('body').then(($body) => {
  // 创建时间戳元素
  const timestampEl = document.createElement('div');
  Object.assign(timestampEl.style, {
    position: 'fixed',
    top: '20px',
    left: '20px',
    zIndex: '99999',
    color: 'white',
    textShadow: '2px 2px 0 black',
    fontSize: '24px',
    margin: 0,
    padding: '4px 8px'
  });
  timestampEl.innerText = new Date().toLocaleString();
  $body.append(timestampEl);

  // 执行截图
  cy.screenshot().then(() => {
    // 移除临时元素
    timestampEl.remove();
  });
});

方案说明 #

• 无需额外安装依赖，直接操作DOM实现
• 仅对当前截图用例生效，适合局部需求
• 需注意页面原有左上角元素可能遮挡时间戳，可调整top/left值规避

内容的提问来源于stack exchange，提问作者rishav srivastava