如何将Cypress.io生成的代码覆盖率发布到Azure DevOps覆盖率标签页

第一步：生成Azure DevOps支持的Cobertura格式报告 #

Istanbul（nyc）原生支持Cobertura格式输出，无需额外格式转换工具：

• 若未安装nyc依赖，先执行安装命令：npm install nyc --save-dev
• 新增Cobertura输出配置，二选一即可：
  1. package.json中新增nyc配置字段：

  {
    "nyc": {
      "reporter": ["html", "cobertura"]
    }
  }
  

  2. 在cypress.config.js的code-coverage插件配置中指定reporter：

  const { defineConfig } = require('cypress')
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        require('@cypress/code-coverage/task')(on, config, {
          nyc: {
            reporter: ['html', 'cobertura']
          }
        })
        return config
      }
    }
  })
  

• 重新执行Cypress测试，coverage目录下会生成cobertura-coverage.xml文件，即为符合要求的覆盖率文件。

第二步：配置Azure DevOps流水线发布任务 #

修改你的CI流水线YAML文件，添加覆盖率发布任务：

- task: PublishCodeCoverageResults@1
  inputs:
    codeCoverageTool: 'Cobertura'
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
    # 可选配置：上传原始HTML报告，可在Azure DevOps中直接查看明细
    reportDirectory: '$(System.DefaultWorkingDirectory)/coverage'
    failIfCoverageEmpty: true

可选：生成JaCoCo格式报告 #

如果需要使用JaCoCo格式，只需额外安装JaCoCo格式的nyc reporter：

• 执行安装命令：npm install @istanbuljs/nyc-config-jacoco nyc-jacoco-reporter --save-dev
• 在上述nyc的reporter配置中新增jacoco字段，运行测试后会生成jacoco.xml文件，流水线发布任务中将codeCoverageTool改为JaCoCo、summaryFileLocation对应到jacoco.xml路径即可。

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