问题描述 #

我的代码仓库包含两个文件夹：

• backend/ - 存放基于xUnit和Specflow的.NET Core API测试用例
• frontend/ - TypeScript项目，包含基于Jasmine的测试（执行命令为ng test）

我的构建流水线流程如下：构建后端、运行后端单元测试（使用vsTest任务）、运行后端集成测试（使用vsTest任务）、构建前端、运行前端测试（执行ng test）。

请问是否可以生成包含所有后端测试与前端测试的合并覆盖率报告，并进行可视化展示？

当然可以！要实现前后端测试覆盖率的合并与可视化，你可以按照以下步骤来操作：

1. 分别生成前后端的标准格式覆盖率报告 #

后端（.NET Core） #

首先让vsTest任务生成兼容的覆盖率报告格式（推荐Cobertura，这是多数合并工具支持的标准格式）：

• 在你的后端测试项目中，安装coverlet.collector NuGet包
• 调整vsTest任务的运行参数，添加--collect:"XPlat Code Coverage"，执行后会在TestResults目录下生成Cobertura格式的覆盖率XML文件

前端（Angular/Jasmine） #

修改ng test命令，指定生成Cobertura格式的报告：

• 直接执行命令：ng test --no-watch --code-coverage，默认会在前端项目的coverage目录下生成报告
• 也可以在angular.json的test配置中，添加coverageReporter节点指定格式：

"coverageReporter": {
  "dir": "./coverage",
  "reporters": [
    { "type": "cobertura" },
    { "type": "html" }
  ]
}

2. 使用工具合并覆盖率报告 #

推荐使用reportgenerator这个工具，它支持合并多语言、多格式的覆盖率数据，并生成可视化报告：

• 先安装工具：通过.NET CLI执行dotnet tool install -g dotnet-reportgenerator-globaltool
• 运行合并命令，指定前后端的覆盖率文件路径、输出目录和报告格式：

reportgenerator "-reports:./backend/TestResults/**/coverage.cobertura.xml;./frontend/coverage/**/cobertura-coverage.xml" "-targetdir:./combined-coverage" "-reporttypes:Html;HtmlSummary"

执行后会在combined-coverage目录下生成HTML格式的可视化报告，包含整体覆盖率汇总、前后端各自的详细覆盖率统计，甚至可以查看具体文件的代码覆盖情况。

3. 在构建流水线中集成流程 #

把上述步骤加入到你的现有流水线里：

• 在完成前后端测试任务后，添加一个任务安装reportgenerator（比如Azure DevOps中的「.NET Core工具安装」任务）
• 执行合并命令生成报告
• 最后添加一个「发布构建工件」任务，把combined-coverage目录保存为流水线产物，方便后续查看；如果是Azure DevOps，还可以用「发布代码覆盖率结果」任务直接读取合并后的报告，在流水线界面内直接展示覆盖率统计

注意事项 #

• 确保前后端都生成Cobertura格式的报告，这是合并成功的关键
• Specflow测试的覆盖率数据会被coverlet自动收集，不需要额外配置，只要测试用例正常执行即可
• 如果需要更定制化的可视化，还可以选择其他工具（比如lcov配合genhtml），但reportgenerator对.NET和Angular的兼容性最好

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