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

2024-01-07

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

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

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


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • GCC 的代码覆盖率选项如何工作?

    考虑以下命令 gcc fprofile arcs ftest coverage main c 它生成文件 main gcda gcov 将使用该文件来生成覆盖率分析 那么main gcda是如何生成的呢 仪器仪表是如何完成的 我可以看到检测
  • 从 Jest 到 stdout 再到 GitLab 的代码覆盖率

    我正在 GitLab CI 中运行代码覆盖率的玩笑测试 GitLab 从 gitlab 中运行程序的标准输出捕获百分比 jest coverage在 stdout 中生成覆盖范围 并且 gitlab 使用以下命令捕获它 All files
  • ASP.NET Core Angular 模板:app.module.client 与 app.module.server

    Microsoft 提供了一个很棒的模板 用于在 ASP NET Core 中开发 Angular 不是 AngularJS 如他们的文章中所述 使用 JavaScriptServices 在 ASP NET Core 上构建单页应用程序
  • 衡量 Kotlin 代码的测试覆盖率?

    有没有办法衡量 Kotlin 代码的测试覆盖率 Jacoco 给出错误的结果 因为无法确定自动生成的代码 还有其他解决办法吗 如果您正在使用 IntelliJ IDEA 此链接将对您有所帮助 https www jetbrains com
  • 使用 Android NDK 的本机代码的代码覆盖率

    我正在使用 Android NDK r16 为我的 Android 项目构建本机代码 我希望能够获得本机单元测试的代码覆盖率 这可能吗 根据我的研究 Android 中似乎没有默认提供此功能 我们需要在 Clang 中使用自定义编译器 链接
  • 使用 Jenkins Sonar 插件成功构建后,Sonar 不显示代码覆盖率

    我正在尝试使用 Sonar 和 Jenkins 来获得代码覆盖率 我看到 Jenkins 的 Sonar 插件成功执行了 JUnit 测试用例并成功完成了构建 但 Sonar 不会在项目上显示代码覆盖率结果 代码覆盖率始终显示 0 0 但声
  • 使用浏览器缓存进行增量更新

    客户端 AngularJS 应用程序 从服务器获取相当大的列表 列表可能有数百或数千个元素 这可能意味着未压缩的几兆字节 并且一些用户 管理员 获得更多数据 我不打算让客户端获得部分结果 因为排序和过滤不应该打扰服务器 压缩效果很好 大约为
  • 单页应用程序 Angular + .Net Core 上的 Bootstrap 4

    任何人试图提出申请 dotnet new install Microsoft AspNetCore SpaTemplates dotnet new angular 就像这个例子一样https blogs msdn microsoft com
  • 根据属性检查 firebase 是否存在现有对象,防止重复

    我想检查我的 firebase 看看我是否已经存储了一个与两个属性匹配的对象 为了将这个问题放在上下文中 想象一个仅存储歌曲的应用程序 具有 艺术家 和 歌曲名 等属性 如下所示 var wishlist new Firebase http
  • 如何使用 --timid 标志来覆盖鼻子

    我想使用运行 nosetests with coverage 内德 巴切尔德 Ned Batchelder 的报道模块 http nedbatchelder com code coverage 但将 timid 标志传递给覆盖模块 有没有办
  • AngularJS 中 $routeChangeStart 的 Jasmine 单元测试用例

    嗨 我正在使用构建一个应用程序AngularJS现在我开始对我的应用程序进行单元测试 我知道如何为服务 控制器等编写单元测试用例 但我不知道如何编写它 routeChangeStart 我的 app js 中有以下代码 app run fu
  • 伊斯坦布尔纽约排除测试文件

    我目前正在最终报道中获取我的测试文件 这可能是因为它们与我的组件并排放置 而不是拥有自己的组件test文件夹 我怎样才能将这些排除在承保范围之外 我已经安装了istanbul and nyc我正在使用mocha 我的脚本如下所示 test
  • 为 PHP CLI 安装 Xdebug

    我在用着XAMPP http www apachefriends org tr index html在 Mac OS 上 尝试使用PHPUnit http phpunit de的代码覆盖率检查 这需要XDebug http phpunit
  • 有哪些工具可用于使用浏览器自动化测试来计算代码覆盖率

    我有一个用 ASP NET MVC 3 编写的网站 我已经整理了一些针对该网站的浏览器自动化测试 我想使用同一组测试来计算网站代码的代码覆盖率 我知道 NCover 会做这种工作 但据我所知 有两个问题 第一 NCover 给出了框架代码和
  • HttpParams 在 Angular 中不起作用,出现 502 错误

    我用的是角度8 我在用HttpParams通过以下方式将数据发送到服务器Post method 我正进入 状态502状态码错误 通过HttpPrams发送数据 ERROR HttpErrorResponse 标头 HttpHeaders 状
  • lambda 函数的代码覆盖率

    我有以下带有 lambda 函数的代码 obj method param gt code here 如何通过测试覆盖 lambda 函数中的代码 您可以使用反射 但这可能容易出错并且适得其反 我建议你调用使用 lambda 的方法
  • .NET 中的 Cookie 和会话过期

    我有一个 MVC4 单一应用程序页面 登录页面有 3 个字段 用户 密码和 记住我 复选框 C 登录代码是这样的 if WebSecurity Login model UserName model Password persistCooki
  • Angular PWA 离线存储

    我正在构建一个新的 Web 应用程序 即使没有互联网连接 它也需要无缝工作 我选择了 Angular 并正在构建一个 PWA 因为它具有使应用程序离线工作的内置功能 到目前为止 我已经让服务工作人员完美工作并由清单文件驱动 这很好地缓存了静
  • 发生未处理的异常:工作区中未设置配置“生产”

    您好 在 Angular 8 中创建了一个项目 最初它仅支持一种默认语言 US EN 然后我应用了本地化 在准备生产构建的本地化之前 我曾经给出以下命令 ng build prod base href Windchill com qiwkC
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这

随机推荐