针对 Angular 应用程序（远程）运行 Selenium 时的代码覆盖率报告

Question

我在网上找不到任何适合我的问题的解决方案。

我们正在构建一个后端（Java）和一个 Angular 应用程序，并通过 Docker 将其部署到测试环境。现在，我们正在使用 junit（以及用 Java 编写的 selenium 测试）针对前端 Angular 应用程序运行 Selenium (Selenide) 测试 (e2e)。 （远程网络驱动程序“selenium/standalone-chrome”）

我的问题是如何指示我的 Angular 应用程序报告代码覆盖率？

我找到了一些关于 Istanbul.js 和 JS Testframeworks 的文章，但我不想在 JS 中开始测试！部署的应用程序应该具有源地图和所需的伊斯坦布尔仪器。 即使这意味着我必须构建两次容器（一次用于测试（包含所有这些东西）/一次用于生产）。

根据此存储库，在硒测试中应该可以从窗口获取覆盖范围：

https://github.com/alex028502/istanbulseleniumexample/blob/master/test.py

coverage_info = _driver.execute_script('return JSON.stringify(window.__coverage__);')

所以这不应该是问题 - 但我不知道如何指示我的角度应用程序记录代码覆盖率......

欢迎任何建议...

Answer 1

好吧 - 我想我明白了..

我安装了 nyc 作为开发依赖项

npm i -D nyc

然后我将以下脚本添加到“package.json”中：

 "scripts": {
    "build": "ng build && npm run _nyc-instrument",
    "_nyc-instrument": "nyc instrument dist/your-app dist/your-app --exclude-after-remap=false --complete-copy --in-place",
    "_nyc-report": "nyc report --reporter=lcov --reporter=text-summary --report-dir=.coverage-output"
  },

然后我还通过 angular.json 配置来创建源映射：

  "configurations": {
     "production": {
        "sourceMap": true,
        "budgets": [...

现在，如果您运行

npm run build

，JavaScript 将被检测，并且源映射文件“.map”将位于“/dist”文件夹中。

我们在 nginx docker 容器中部署 Angular 应用程序.. 然后我们针对已部署的堆栈运行硒测试...示例代码：

mvn test -Dgroups=ui-tests -DremoteWebDriverUrl=http://seleniumWebDriverUrl} -DbaseUrl=https://${serverDomainName} -Dheadless=true

在每次测试执行结束时，我们都会从

"window.__coverage__"

下载覆盖率报告 --> 这里有一个示例代码：

String coverageInfo = (String) WebDriver.executeScript("return JSON.stringify(window.__coverage__);");
Files.createDirectories(Paths.get(filePath));
Files.writeString(Paths.get(filePath, filename), coverageInfo);

下载的文件应存储在“.nyc_output/”文件夹中的 Angular 项目中。

现在我们运行报告命令

npm run _nyc-report

，它会在输出文件夹“.coverage-output”中创建“lcov.info”文件。

不幸的是，在我们的例子中，文件路径前缀错误 - 这是一个已知问题...我们使用 sed 修复它（您很可能需要根据您的需要调整 sed 命令）：

 sh "sed -i 's|SF:dist/webapp/de/webpack:/|SF:|g' .coverage-output/lcov.info"

lcov.info 中的条目应如下所示：

SF:src/main.ts
FN:7,(anonymous_3021)
FN:7,(anonymous_3023)
FNF:2
FNH:1
FNDA:0,(anonymous_3021)
FNDA:235,(anonymous_3023)
DA:5,9
DA:7,253
LF:2
LH:2
BRF:0
BRH:0
end_of_record

现在将声纳指向“sonar-project.properties”文件中使用此文件：

sonar.sources=src
sonar.language=ts
sonar.sourceEncoding=UTF-8
sonar.javascript.lcov.reportPaths=.coverage-output/lcov.info

最后运行声纳扫描仪：

sonar-scanner -Dsonar.projectKey=<app-name> -Dsonar.projectVersion=<app-version> ....