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

Question

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

在高层，我可以想到一些使用 istanbul 来检测我的 Angular JavaScript 代码的机制。Istanbul 将通过在浏览器中加载应用程序来记录 selenium java 代码执行 e2e 测试用例时的代码覆盖率。

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

Answer 1

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

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

2. 使用当前的 Istanbul 命令检测 dist 文件夹中存在的 JS 文件，nyc我们正在进行就地检测，因此提供了 --in-place 选项。

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

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

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 报告。