Angular应用结合Selenium远程测试时如何生成代码覆盖率报告？

1. 添加依赖与配置Angular构建规则 #

首先安装所需的webpack构建工具和Istanbul插桩依赖：

npm install --save-dev @angular-builders/custom-webpack istanbul-instrumenter-loader source-map-support

修改angular.json，新增一个专门用于测试覆盖率的构建配置（可复制现有production/development配置后修改）：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "configurations": {
      // 保留原有配置...
      "test-coverage": {
        "sourceMap": {
          "scripts": true,
          "styles": true,
          "vendor": true
        },
        "customWebpackConfig": {
          "path": "./webpack.coverage.config.js"
        },
        "optimization": false,
        "namedChunks": true,
        "extractLicenses": false,
        "sourceMap": true
      }
    }
  }
}

2. 编写自定义Webpack配置文件 #

在项目根目录创建webpack.coverage.config.js，配置Istanbul插桩规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/, /\.spec\.ts$/],
        use: {
          loader: 'istanbul-instrumenter-loader',
          options: { esModules: true }
        },
        enforce: 'post'
      }
    ]
  }
};

该配置会在TypeScript编译后，自动对业务代码进行Istanbul插桩，排除依赖包和测试文件。

3. 构建测试环境用的Angular应用 #

执行以下命令构建带插桩的应用：

ng build --configuration test-coverage

构建产物会输出到dist/目录，包含插桩后的代码和完整的source maps。

4. 部署测试环境容器 #

编写专门的测试环境Dockerfile（示例用Nginx部署）：

FROM nginx:alpine
COPY dist/your-angular-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

启动容器后，访问应用时浏览器全局对象window.__coverage__会自动生成，用于后续数据收集。

5. 在JUnit/Selenide测试中收集覆盖率数据 #

在测试套件的收尾方法中，执行脚本获取覆盖率数据并保存到本地文件：

import com.codeborne.selenide.WebDriverRunner;
import java.io.FileWriter;
import java.io.IOException;

@AfterClass
public static void collectCoverage() {
    String coverageJson = WebDriverRunner.getWebDriver()
        .executeScript("return JSON.stringify(window.__coverage__);").toString();
    try (FileWriter writer = new FileWriter("coverage/coverage-from-selenium.json")) {
        writer.write(coverageJson);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

确保本地提前创建coverage/目录用于存储数据文件。

6. 生成可视化覆盖率报告 #

安装nyc（Istanbul的命令行工具）：

npm install --save-dev nyc

执行以下命令生成HTML格式的可视化报告：

nyc report --reporter=html --report-dir=coverage-report --temp-dir=coverage

执行完成后，打开coverage-report/index.html即可查看完整的覆盖率详情。

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