Multiple Cucumber Report错误信息含特殊字符，如何正确格式化显示？

以下是几种可行的解决方法，按优先级排序：

1. 在Cucumber钩子中提前转义错误信息 #

在Cucumber的After钩子中捕获失败场景的错误信息，手动转义HTML特殊字符（比如<、>、&等），避免报告渲染时解析为HTML标签。

示例TypeScript代码：

import { After, Status } from '@cucumber/cucumber';

After(async function (scenario) {
  if (scenario.result?.status === Status.FAILED && scenario.result.error?.message) {
    const rawErrorMessage = scenario.result.error.message;
    // 转义HTML特殊字符为实体
    const escapedMessage = rawErrorMessage
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
    // 更新场景的错误信息
    scenario.result.error.message = escapedMessage;
  }
});

2. 配置Multiple Cucumber Reporter的转换函数 #

如果钩子处理不够彻底，可以在报告生成阶段直接修改JSON报告数据，统一处理所有步骤的错误信息。

修改报告生成脚本（比如generate-report.ts）：

import report from 'multiple-cucumber-html-reporter';

report.generate({
  jsonDir: './reports/json/', // JSON报告存放路径
  reportPath: './reports/html/', // 生成的HTML报告路径
  displayDuration: true,
  enableCharts: true,
  // 自定义转换JSON数据的逻辑
  transformData: (reportData) => {
    reportData.forEach(feature => {
      feature.elements.forEach(scenario => {
        scenario.steps.forEach(step => {
          if (step.result?.error_message) {
            step.result.error_message = step.result.error_message
              .replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;');
          }
        });
      });
    });
    return reportData;
  }
});

3. 检查Cucumber JSON报告生成配置 #

确保Cucumber生成的JSON报告没有重复转义。检查你的cucumber.js配置文件，避免使用会自动转义的格式器：

module.exports = {
  default: {
    format: [
      'json:reports/cucumber-report.json', // 仅使用官方JSON格式器
      'progress'
    ],
    require: ['steps/**/*.ts'],
    paths: ['features/**/*.feature'],
    compiler: 'ts:ts-node/register'
  }
};

执行以上步骤后，重新运行测试并生成报告，错误信息中的特殊字符会以正确的文本形式展示，不会被解析为HTML元素。

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