在 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 应用程序的 JavaScript 代码覆盖率.
We want to measure Angular 8 application code coverage. We have a e2e test cases written in selenium java which loads the angular application which is deployed on another machine in browser and runs some set of e2e test casess. The question is how I can measure the Angular application javascript code coverage.
在高层次上，我可以想到一些使用 istanbul 来检测我的 angular javascript 代码的机制.伊斯坦布尔将通过在浏览器中加载应用程序来记录 selenium java 代码执行 e2e 测试用例时的代码覆盖率.
At the high level i can think of some mechanism using istanbul to instrument my angular javascript code. Istanbul will record the code coverage while selenium java code executing the e2e test cases by loading the application in browser.
寻找详细步骤如何做同样的事情.
Looking for details steps how i can do the same.
推荐答案
经过长时间的努力，我能够解决这个问题.以下是我获取代码覆盖率报告所遵循的步骤.
After long effort I am able to crack this down. Here are the steps I followed to get the code coverage report.
运行 angular 命令行界面 prod 构建.这将创建 dist 文件夹.例如//dis/
Run the angular command line interface prod build. This will create the dist folder. For example //dis/
使用当前的Istanbul nyc 命令检测dist 文件夹中存在的JS 文件，我们正在执行就地检测，因此提供了--in-place 选项.
Instrument the JS files present in the dist folder using the current Istanbul nyc command we are doing the in place instrumentation hence the option --in-place is provided..
nyc instrument dist/myapp dist/myapp --exclude-after-remap=false --complete-copy --in-place
从文件夹 dist 运行本地 http 服务器.打开 Web 应用程序，手动浏览它.
Run the local http server from the folder dist. open the web application browse the it manually.
上述检测代码将添加 window.coverage 变量.当您浏览上述应用程序时，窗口中会添加覆盖信息.覆盖.
The above instrumented code will add window.coverage variable. When you browse the above application, coverage information is added in the window.coverage.
将存储在 window.coverage 中的覆盖信息存储到名为coverage.json 的json 文件中.它可以是任何名称.
store the coverage information stored in window.coverage into a json file with name coverage.json. It could be any name.
将该 json 文件存储在您的 Angular 代码库中.在文件夹 .nyc_output 下.您需要使用 .nyc_output 创建此隐藏文件夹.
Store that json file inside your angular codebase. under the folder .nyc_output. You need to create this hidden folder with .nyc_output.
运行覆盖率报告命令.
纽约市报告 --reporter=lcov --report-dir=coverage-output
以上命令将生成 html 命令.
The above command will genrate the html command.
这篇关于在 selenium Java 或 cypress 中使用 e2e 的 Angular/SPA 应用程序的代码覆盖率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
