使用Jenkins HTML Publisher插件时Mochawesome报告显示空白页

问题原因 #

你遇到的空白页是因为Jenkins的目录浏览器默认会寻找index.html作为入口文件，但Mochawesome生成的是带时间戳的命名文件（比如mochawesome_06272023_160251.html），所以只会显示文件列表而非直接加载报告；另外CSP设置方式不正确也可能导致报告样式/脚本无法加载。

具体解决步骤 #

1. 重命名报告为index.html #

让Mochawesome直接生成或事后重命名为index.html，这样Jenkins目录浏览器会自动加载它：

• 修改Cypress配置：在cypress.config.js里设置固定的报告文件名

  module.exports = {
    e2e: {
      reporter: 'mochawesome',
      reporterOptions: {
        reportFilename: 'index', // 生成index.html和index.json
        overwrite: true,
        html: true,
        json: true
      }
    }
  }
  

• Jenkins构建步骤补全重命名：如果不想修改Cypress配置，在生成报告后加一步命令行操作
  • Linux/macOS：mv ./path/to/reports/mochawesome_*.html ./path/to/reports/index.html
  • Windows：ren .\path\to\reports\mochawesome_*.html index.html

2. 正确配置Mochawesome Jenkins插件 #

确保插件指向正确的报告文件：

• 安装Jenkins的Mochawesome Report Plugin后，在任务配置的构建后操作里添加「Publish Mochawesome Report」
• 设置「Report pattern」为匹配你的报告文件，比如**/mochawesome_*.html（注意路径要和你生成报告的位置一致）
• 保存配置后重新构建，插件会直接解析并显示报告内容，无需依赖目录浏览

3. 修复CSP设置 #

之前的空值设置可能无效，建议设置更具体的CSP规则以允许报告加载脚本和样式：

• 进入Jenkins的「系统管理」→「脚本控制台」
• 执行以下代码：

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

• 重启Jenkins使设置生效

4. 检查报告路径配置 #

确认Jenkins任务中指定的报告路径正确：

• 如果是用「归档HTML报告」功能，要确保「HTML directory to archive」指向包含报告文件的文件夹，并且勾选「Keep past HTML reports」
• 注意路径中的空格（比如你的Job名为「Job 1」），配置时路径无需额外转义，Jenkins会自动处理

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