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

   nyc

   命令对 dist 文件夹中存在的 JS 文件进行检测，我们正在进行就地检测，因此提供了 --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 报告。

Answer 2

3. 从文件夹 dist 运行本地 http 服务器是什么意思？打开网络应用程序并手动浏览它。您能详细说明一下吗？