如何修改protractor-html-screenshot-reporter报告Passed列的布尔值为状态文本？

我来帮你搞定这个需求！要把报告里的Passed列从true/false改成Passed/Failed（同时保留绿色/红色的高亮样式），只需要修改你自定义的defaultMetaDataBuilder函数里的passed字段处理逻辑就可以了。

修改核心代码 #

直接在passed字段处用三元运算符把布尔结果转换成对应的文本：

function defaultMetaDataBuilder(spec, descriptions, results, capabilities) {
  var metaData = {
    description: descriptions.join(' '),
    // 将布尔值转换为Passed/Failed文本
    passed: results.passed() ? 'Passed' : 'Failed',
    os: capabilities.caps_.platform,
    browser: {
      name: capabilities.caps_.browserName,
      version: capabilities.caps_.version
    }
  };
  return metaData;
}

确保样式正常生效 #

默认情况下，该reporter会根据passed字段的值自动应用颜色样式，但如果改成文本后样式没生效，你可以自定义CSS来强制设置颜色：

1. 创建一个自定义CSS文件（比如report-styles.css），添加以下样式：

/* 给Passed文本设置绿色 */
td:contains('Passed') {
  color: #2ecc71;
  font-weight: bold;
}
/* 给Failed文本设置红色 */
td:contains('Failed') {
  color: #e74c3c;
  font-weight: bold;
}

2. 在Protractor配置中指定这个CSS文件：

var HtmlReporter = require('protractor-html-screenshot-reporter');

var reporter = new HtmlReporter({
  baseDirectory: './test-reports', // 你的报告存放目录
  metaDataBuilder: defaultMetaDataBuilder, // 引用修改后的builder函数
  cssOverrideFile: './report-styles.css' // 指定自定义CSS路径
});

// 把reporter添加到Protractor的配置中
exports.config = {
  // ...其他配置
  onPrepare: function() {
    jasmine.getEnv().addReporter(reporter);
  }
};

这样修改后，你的测试报告Passed列就会显示Passed（绿色）和Failed（红色），完全符合你的需求啦！

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