如何自定义Cypress终端测试摘要以区分截图测试失败类型？

要区分代码执行失败和截图匹配失败，并在终端摘要里新增对应列，可以通过自定义测试标记+扩展Mocha Reporter的方式实现，以下是具体步骤：

1. 标记测试失败类型 #

在Cypress的全局钩子中，给失败的测试打上「是否为截图匹配失败」的标记。修改cypress/support/e2e.js（或你的项目支持文件）：

Cypress.on('after:test', (test) => {
  if (test.state === 'failed') {
    // 根据你使用的截图匹配库，调整错误信息的关键词
    const isScreenshotFail = test.err.message.includes('Image comparison failed') || 
                            test.err.message.includes('screenshot mismatch');
    // 给测试对象添加自定义属性
    test._isScreenshotFailure = isScreenshotFail;
  }
});

2. 自定义终端Reporter #

基于Cypress默认的spec reporter扩展，添加「失败截图」列。创建cypress/reporters/custom-spec-reporter.js文件：

const SpecReporter = require('cypress/lib/reporters/spec');
// 可选：如果需要颜色区分，先安装chalk（npm install chalk --save-dev）
// const chalk = require('chalk');

class CustomSpecReporter extends SpecReporter {
  epilogue(test) {
    const originalOutput = super.epilogue(test);
    // 生成自定义列内容，这里用「是/否」或图标都可以
    const screenshotCol = test._isScreenshotFailure ? '是' : '否';
    // 可选：用颜色区分
    // const screenshotCol = test._isScreenshotFailure ? chalk.red('是') : chalk.grey('否');
    return `${originalOutput}  |  失败截图: ${screenshotCol}`;
  }
}

module.exports = CustomSpecReporter;

3. 配置Cypress使用自定义Reporter #

修改cypress.config.js，指定使用你编写的自定义reporter：

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

module.exports = defineConfig({
  e2e: {
    reporter: './cypress/reporters/custom-spec-reporter.js',
    // 其他项目配置...
  },
});

注意事项 #

• 错误关键词需要根据你实际使用的截图匹配库调整：比如使用cypress-image-snapshot时，错误信息会包含Image comparison failed；如果是自定义截图逻辑，就用你抛出错误的提示文本。
• 如果需要更复杂的终端格式（比如对齐列、不同颜色），可以在reporter中进一步调整输出字符串的格式，结合chalk库实现样式优化。

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