如何为Cypress截图添加可见时间戳？

方法1：自定义命令动态插入时间戳元素 #

创建Cypress自定义命令，在截图前向页面插入带当前时间的DOM元素，截图完成后移除，确保时间戳出现在截图内。

1. 在cypress/support/commands.js中添加命令：

Cypress.Commands.add('addTimestamp', () => {
  const timestamp = new Date().toLocaleString();
  cy.document().then(doc => {
    const timestampEl = doc.createElement('div');
    timestampEl.id = 'cypress-timestamp';
    timestampEl.style.cssText = `
      position: fixed;
      bottom: 10px;
      right: 10px;
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 5px 10px;
      font-size: 12px;
      z-index: 99999;
      border-radius: 3px;
    `;
    timestampEl.textContent = timestamp;
    doc.body.appendChild(timestampEl);
  });
});

Cypress.Commands.add('screenshotWithTimestamp', (name) => {
  cy.addTimestamp();
  cy.screenshot(name);
  cy.get('#cypress-timestamp').then(el => el.remove());
});

2. 测试用例中替换原生screenshot命令：

it('生成带时间戳的测试截图', () => {
  cy.visit('/');
  // 执行测试步骤
  cy.screenshotWithTimestamp('首页功能测试');
});

方法2：全局钩子自动添加时间戳 #

通过Cypress钩子实现所有截图自动带时间戳，无需修改测试用例：

在cypress/support/e2e.js（或index.js）中添加：

// 截图前插入时间戳
Cypress.on('before:screenshot', () => {
  const timestamp = new Date().toLocaleString();
  cy.document().then(doc => {
    const timestampEl = doc.createElement('div');
    timestampEl.id = 'global-cypress-timestamp';
    timestampEl.style.cssText = `
      position: fixed;
      top: 10px;
      left: 10px;
      background: white;
      color: black;
      padding: 4px 8px;
      font-size: 11px;
      z-index: 99999;
      border: 1px solid #ccc;
    `;
    timestampEl.textContent = timestamp;
    doc.body.appendChild(timestampEl);
  });
});

// 截图后清理时间戳元素
Cypress.on('after:screenshot', () => {
  cy.get('#global-cypress-timestamp', { timeout: 1000 }).then(el => {
    if (el.length) el.remove();
  });
});

注意事项 #

• 可自定义时间戳的样式（位置、颜色、字体），避免遮挡页面核心内容
• 时间格式可按需调整，比如用new Date().toISOString()获取标准ISO时间
• 确保元素z-index足够高，保证时间戳显示在页面最上层

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