在 selenium Java 或 cypress 中使用 e2e 的 Angular/SPA 应用程序的代码覆盖率

Code coverage for Angular/SPA application with e2e in selenium Java or cypress

我们要测量 Angular 8 个应用程序代码覆盖率。我们有一个用 selenium java 编写的 e2e 测试用例,它加载了 angular 应用程序,该应用程序部署在另一台机器上的浏览器中,并运行一些 e2e 测试用例集。问题是我如何测量 Angular 应用程序 java 脚本代码覆盖率。

在高层次上,我可以想到一些使用伊斯坦布尔来检测我的 angular java 脚本代码的机制。 Istanbul 将记录代码覆盖率,而 selenium java 代码通过在浏览器中加载应用程序来执行 e2e 测试用例。

正在寻找我如何做同样事情的详细步骤。

经过长时间的努力,我能够解决这个问题。以下是我获取代码覆盖率报告所遵循的步骤。

  1. 运行 angular 命令行界面产品构建。这将创建 dist 文件夹。例如 //dis/

  2. 使用当前的伊斯坦布尔 nyc 命令检测 dist 文件夹中存在的 JS 文件我们正在执行就地检测,因此提供了选项 --in-place..

    nyc instrument dist/myapp dist/myapp --exclude-after-remap=false --complete-copy --in-place

  3. 运行 文件夹 dist 中的本地 http 服务器。打开 Web 应用程序并手动浏览它。

  4. 上面的检测代码将添加 window.__coverage__ 变量。当您浏览上述应用程序时,覆盖信息会添加到 window.__coverage__.

  5. window.__coverage__ 中存储的覆盖率信息存储到名称为 coverage.json 的 json 文件中。可以是任何名字。

  6. 将 json 文件存储在 angular 代码库中。在文件夹.nyc_output 下。您需要使用 .nyc_output.

    创建此隐藏文件夹
  7. 运行 覆盖报告命令。

    nyc report --reporter=lcov --report-dir=coverage-output

  8. 以上命令将生成 html 报告。