无网络Jenkins环境下Cucumber.js HTML报告样式异常解决及工具推荐咨询

我之前也碰到过一模一样的情况——离线环境里cucumber-html-reporter因为拉不到CDN上的CSS、JS资源，生成的报告直接变成了乱糟糟的纯文本样式，完全没法正常查看。下面给你两种思路解决：要么修复现有报告的离线支持，要么换更适配离线环境的工具。

一、修复cucumber-html-reporter的离线显示问题 #

核心矛盾是默认配置会引用在线的Bootstrap、Font Awesome等资源，离线环境根本拿不到。按下面步骤调整就能解决：

1. 把依赖的静态资源下载到本地 #

最方便的方式是通过npm安装对应版本的依赖包（版本要和报告默认用的一致，不然会有样式兼容问题，你可以打开生成的坏报告看源码里的CDN链接，比如默认Bootstrap是3.3.7，Font Awesome是4.7.0）：

npm install bootstrap@3.3.7 font-awesome@4.7.0 --save-dev

2. 修改报告生成配置，替换CDN路径 #

在你的报告生成脚本里，添加overrideCSS和overrideScripts选项，把在线资源地址替换成本地文件路径：

const reporter = require('cucumber-html-reporter');

const options = {
  theme: 'bootstrap',
  jsonFile: './reports/cucumber-report.json',
  output: './reports/cucumber-report.html',
  reportSuiteAsScenarios: true,
  launchReport: false,
  // 替换CDN资源为本地node_modules中的文件
  overrideCSS: [
    './node_modules/bootstrap/dist/css/bootstrap.min.css',
    './node_modules/font-awesome/css/font-awesome.min.css'
  ],
  overrideScripts: [
    './node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
};

reporter.generate(options);

3. 确保Jenkins能访问到静态资源 #

• 构建时同步静态文件：在Jenkins的构建步骤里加一条命令，把本地依赖的静态文件复制到报告输出目录，比如：

cp -r ./node_modules/bootstrap/dist/css ./reports/
cp -r ./node_modules/font-awesome ./reports/

• 调整Jenkins的内容安全策略（CSP）：如果Jenkins阻止加载本地脚本和样式，进入「Manage Jenkins > Script Console」（脚本控制台），执行以下命令修改CSP：

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'")

注意：修改CSP会降低Jenkins的安全性，仅限内部离线环境使用。

二、推荐更适合离线环境的替代报告工具 #

如果觉得上面的配置太繁琐，试试这些天生支持离线的工具：

• Allure Report（allure-cucumberjs）
  这是我最推荐的工具，交互性强、样式专业，所有资源都是本地生成的，完全不需要网络。步骤：

  1. 安装依赖：npm install allure-cucumberjs allure-commandline --save-dev
  2. 在Cucumber配置中添加Allure格式化器
  3. 运行测试后会生成allure-results目录
  4. 生成HTML报告：npx allure generate allure-results -o allure-report
     Jenkins上可以安装Allure插件，直接在构建后展示报告，还支持历史趋势对比。

• cucumber-reporting
  这个工具生成的是单文件HTML报告，所有静态资源都内嵌在HTML里，完全独立，不需要任何外部依赖，配置简单，适合需求不复杂的场景。

• Mochawesome
  如果你的测试可以适配Mocha框架，Mochawesome生成的报告离线友好，样式简洁美观，还支持合并多个报告。需要用cucumber-mocha适配器把Cucumber测试转成Mocha格式，适合已经熟悉Mocha的项目。

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