自动化测试（二）02——单元测试类工具-Karma、Jasmine、Mocha、Jest、AVA & E2E测试类工具-cypress、nightmare、nightwatch、testcafe

最新推荐文章于 2024-05-07 02:09:41 发布
最新推荐文章于 2024-05-07 02:09:41 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 架构和运维 文章标签： 单元测试 自动化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/122954627
版权

自动化测试（二）02——单元测试类工具-Karma、Jasmine、Mocha、Jest、AVA & E2E测试类工具-cypress、nightmare、nightwatch、testcafe、webdriverio

单元测试类工具

npm trends: 点击链接

在这里插入图片描述

1、Karma

Karma是一个Runner（即运行环境），具体详细的介绍见 后面的章节Karma

A test runner is the library or tool that picks up an assembly (or a source code directory) that contains unit tests, and a bunch of settings, and then executes them and writes the test results to the console or log files.
there are many runners for different languages. See Nunit and MSTest for C#, or Junit for Java.

karma 设计目标主要有下面四点：

高效
扩展性
运行在真实设备
无缝的使用流程

karma 是一个典型的 C/S 程序，包含 client 和 server ，通讯方式基于 Http ，通常情况下，客户端和服务端基本都运行在开发者本地机器上。

一个服务端实例对应一个项目，假如想同时运行多个项目，得同时开启多个服务端实例。

Karma 的优点是能通过插件和配置的方式集成大部分的主流的测试框架和前端库，能方便的一次在多浏览器环境执行测试用例，并集成了测试覆盖率生成功能，生成页面形式覆盖率报告并能导出不同形式的覆盖率报告数据。

它的缺点是，对测试页面环境的搭建和资源文件的加载不是常见的形式，最开始搭建环境时会有很多跟预期不一致的情况，配置不直观。

2、Jasmine

Jasmine 带有 assertions(断言)，spies (用来模拟函数的执行环境)和 mocks (mock 工具)，Jasmine 初始化设置简单，同时，如果你需要一些单元功能的时候你仍然可以加一些库进来。

3、Mocha

Mocha 是一个灵活的库，提供给开发者的只有一个基础测试结构。然后，其它功能性的功能如 assertions， spies和mocks，这些功能需要引用添加其它库/插件来完成。

5、Jest

被 Facebook 和各种 React 应用推荐和使用，Jest 得到了很好的支持。Jest 也被发现是一个非常快速的测试库在平行测试报告中。

对于小型项目来说你可能在开始的时候不用过多担心，而性能的提高，对于希望全天持续部署的大型应用 app 来说是非常之好的。

而开发人员主要是用 Jest 去测试 React 应用，Jest 可以很容易地集成到其它应用程序中充许你使用更独特的特性在其它地方

快照测试是一个非常好用的工具，去确保你的应用 UI 不会有超出预期的错误，在产品发布替换的期间发生。虽然大部分功能，专门设计都是使用在 React 上。

Jest 有着很广阔的 API 。

6、AVA

AVA 它的优势是 JavaScript 的异步特性和并发运行测试.

利用了 JavaScript 的异步特性优势，优化了在部署的时间等待

保留了简单的 API 为你提供你所需要的功能。

如果搭配 mocking 来使用它会显得更加友好，但是必须安装一个单独的库。

E2E测试类工具

npm trends: 点击链接

在这里插入图片描述

最佳实践

测试有很多好处，但不代表一上来就要写出100%场景覆盖的测试用例。

最佳的实践：基于投入产出比来做测试

由于维护测试用例也是一大笔开销（毕竟没有多少测试会专门帮前端写业务测试用例，而前端使用的流程自动化工具更是没有测试参与了）。

对于像基础组件、基础模型之类的不常变更且复用较多的部分，可以考虑去写测试用例来保证质量。个

先写少量的测试用例覆盖到80%+的场景，保证覆盖主要使用流程。

一些极端场景出现的bug可以在迭代中形成测试用例沉淀，场景覆盖也将逐渐趋近100%。

但对于迭代较快的业务逻辑以及生存时间不长的活动页面之类的就别花时间写测试用例了，维护测试用例的时间大了去了，成本太高。

大型项目，可以使用Jest快速形成配置并且开始单元测试。

需要测试快照，则可以选择Jest或者Ava。

对于配置性要求高，对测试框架性能有要求的可以选择mocha。

对模拟还原浏览器业务操作有很大的需求的，可以选择nightmare

配合CI工具完成自动化测试、测试覆盖率、测试结果推送。
Ava。

对于配置性要求高，对测试框架性能有要求的可以选择mocha。

对模拟还原浏览器业务操作有很大的需求的，可以选择nightmare

配合CI工具完成自动化测试、测试覆盖率、测试结果推送。

viceen
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Karma、Mocha和Chai自动化测试解决方案
yaya_jn的博客
02-10 1340
Karma、Mocha和Chai自动化测试解决方案
常用的前端自动化测试工具介绍 —— Karma，2024阿里前端笔试总结
03-21 991
初始化完成之后，会在我们的项目中生成一个 karma.conf.js 文件，这个文件就是 Karma 的配置文件。配置文件比较简单，能够比较轻松的看懂，这里我对原始的配置文件进行简单的修改，结果如下：files: [],exclude: [],},})然后创建一个 src 目录和一个 test 目录，在其中分别创建 index.js 和 index.spec.js 文件。我要做的测试内容比较简单，对 index.js 中的两个函数（一个加法函数，一个乘法函数）进行测试。
自动化测试框架[各自动化测试框架大比拼]
Davieyang.D.Y
11-22 1万+
所有的请求会发送给本地主机，其后是环回接口(环回接口用来查错和运行本机内部的网络服务)，网络通信会从OSI模型的第三层即网络层开始，遗传经过传输层、会话层、表示层到达应用层，只有物理层和数据链路层被略过，对于浏览器来说一个请求从本地主机到环回接口返回需要花费的时间决定了代码执行的效率，这就是Selenium/WebDriver执行慢根本原因
2024年软件测试最新常用的前端自动化测试工具介绍 —— Karma(2)，大厂软件测试高级面试题汇总解答
最新发布
2401_84141229的博客
05-07 569
之后会弹出一些选项，其中包含了一些初始化的配置工作，使用上下方向键可以在配置项之间进行切换。要使用 Karma 对代码进行单元测试，首先需要安装一系列的相关插件。初始化完成之后，会在我们的项目中生成一个 karma.conf.js 文件，这个文件就是 Karma 的配置文件。单元测试工具 Karma。
前端单元测试技术方案总结
chengbo_eva的博客
05-18 442
前端单元测试技术方案总结
“覆盖率检测”的实现原理，就这？
前端劝退师
10-15 679
覆盖率检测是用来判断单测完整性的，jest 和 karma 都提供了这种功能：覆盖率就是执行过的代码占总代码的比例，比如执行了多少行（Line），执行了多少个分支（Branch），执行了多...
Karma和Jasmine自动化单元测试
02-20
在Java领域，Apache,Spring,JBoss...Java领域：JUnit做单元测试,Maven自动化单元测试，统一项目管理，构建项目原型模板，包依赖管理。Nodejs让组合变得更丰富，却又在加重我们的学习门槛。我还说不清楚，也看不透！上面
详解Vue单元测试Karma+Mocha学习笔记
11-30
在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。 简介 Karma Karma是一个基于Node.js的JavaScript测试执行过程管理...
软件测试-基于karma+webpack实现的vue单元测试框架.zip
04-02
软件测试_基于karma+webpack实现的vue单元测试框架
karma-jasmine-typescript:使用Karma，Jasmine和Typescript进行单元测试的样本
05-16
本项目"Karma-Jasmine-Ts"提供了一个使用Karma、Jasmine和TypeScript进行单元测试的示例，这对于熟悉这些工具的新手开发者尤其有帮助。让我们深入探讨每个组件以及它们如何协同工作。 **Karma** Karma，也被称为...
几款好用的自动化单元测试框架和工具
m0_50579386的博客
03-30 4055
用自动化单元测试的方式，研发人员（通常建议单元测试由开发人员完成最为高效，但是开发人员通常项目任务紧，时间和精力不够）在用例设计、执行和数据管理上不需要再花费巨量的时间，就可能有足够的精力来真正进行和完成单元测试内容。
Selenium自动化测试工具的介绍与使用
TANGY的博客
06-22 1万+
什么是自动化测试 自动化测试指软件测试的自动化，在预设状态下运行应用程序或者系统，预设条件包括正常和异常，最后评估运行 结果。总的概括即：将人为驱动的测试行为转化为机器执行的过程。 进入今天的主角：selenium学习功能测试自动化首选工具就是selenium，它是一个web自动化测试工具。 selenium的特点 支持多平台：IE、Chrome、Firefox、edge、Safari 支持多语言：Python、C、Java、C#、ruby、js 免费小巧，支持分布式测试用例的执行，..
10大自动化测试工具，你在用哪些？
HSS919的博客
08-07 639
Selenium 是一个测试框架，用于跨各种浏览器和平台（如 Windows、Mac 和 Linux）执行 web 应用程序测试。Selenium 帮助测试人员使用各种编程语言编写测试程序，如 Java、PHP、C#、Python、Groovy、Ruby 和 Perl。它提供记录和回放功能，无需学习 Selenium IDE 即可编写。值得一提的是，Selenium支持一些大型的、知名度高的浏览器供应商，这些供应商将 Selenium 作为浏览器的基础部分。Selenium 无疑是大多数其他软件测试工具的
angular单测框架从Karma切换到Jest
JayXu's Blog
03-04 760
angular单元测试框架从karma jasmine切换为jest，虽然也没有很快，但是写起来方便
前端面试：【前端工程化】自动化测试工具 Jest、Mocha 和 Cypress
weixin_42132860的博客
08-23 718
嗨，亲爱的前端开发者！本文将深入探讨三个流行的前端自动化测试工具：Jest、Mocha 和 Cypress，以帮助你了解它们的用途、特点以及如何选择适合你项目的测试工具。选择合适的测试工具，如Jest、Mocha 或 Cypress，取决于项目需求和你的偏好。亲爱的前端开发者，现在你已经了解了Jest、Mocha 和 Cypress这三个前端自动化测试工具的基本原理和用法。Jest是Facebook开发的JavaScript测试框架，广泛用于React应用和其他前端项目的单元测试、集成测试和快照测试。
前端自动化测试基础概念
DJ355的博客
07-07 319
对于稍微有一些开发经验的开发同学在开发过程中总会有一些经验总结。比如说当代码复杂度达到一定的级别，并且维护者的数量不止一个，就应该察觉到在开发新功能或者修复bug的时候，会变得小心翼翼。即使代码看起来没什么问题，但心里还是难免担忧，这个Feature会不会带来其它bug，这个fix会不会引入其它Feature。当想对项目中的代码进行重构的时候，会花费大量的时间进行回归测试。以上这些问题都是由于大多数开发者所使用最基本的手动测试的方式所带来的问题，解决它的根本原因就在于引入自动化测试方案。
VUE
Cool的博客
03-16 719
VueCLI3--运行单个*.vue文件 1.安装全局扩展 npminstall-g@vue/cli-service-global 2.运行.vue文件 vueserve文件夹名 注意: 如果已经安装过可以直接运行vue serve 文件夹运行时, 会自动生成一个node_modules文件夹 Vue官方api JSON.parse(JSON.stringify(row)) JSON.parse('要转换的数据') JSO...
2021年软件测试工具总结——单元测试工具
热门推荐
zhusongziye的博客
11-23 1万+
在应用程序中，单元是具有一个或多个输入和单个输出的软件中最小可测试部分。单元测试是一种测试软件代码单元的方法，通常包括一个或两个输入，产生一个输出。单元测试主要关注独立模块的功能正确性，目的是确保每个单元都按照预期的方式运行。 要进行单元测试，开发人员需要编写测试代码。单元测试有手动和自动化测试两种类型，自动化通常是首选的方法，可以为开发人员节省大量的时间和精力。 单元测试是自动化测试金字塔模型中占比最大的测试类型，做好单元测试对于保证软件产品的质量非常重要，单元测试可以： 及早发现软件中的缺陷并
盘点15个用于自动化单元测试的人工智能工具
伤心的辣条
04-12 1298
软件开发是一项富有创造性的工作，但其中也不乏繁琐的任务。其中最乏味的是编写 "单元测试"，即验证软件组件是否按预期运行的代码段。单元测试可以帮助开发人员及早发现错误，并确保代码的可维护性。
Angular写一个简单画面，并利用Angular的test类实现自动化测试。详细说明步骤
06-03
好的，下面是详细的步骤： 1. 创建一个新的Angular项目 使用Angular CLI创建一个新的Angular项目。在命令行中输入以下命令： ``` ng new my-app ``` 这会创建一个名为my-app的新项目。 2. 创建一个简单的Angular画面 在src/app目录下创建一个名为app.component.ts的组件文件，并输入以下代码： ``` import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div> <h1>Welcome to my Angular App!</h1> <p>{{ message }}</p> <button (click)="updateMessage()">Update Message</button> </div> ` }) export class AppComponent { message = 'This is a message!'; updateMessage() { this.message = 'The message has been updated!'; } } ``` 这是一个非常简单的画面，只有一个标题，一个消息和一个按钮。当用户单击按钮时，消息会被更新。 3. 创建自动化测试用例 在src/app目录下创建一个名为app.component.spec.ts的测试文件，并输入以下代码： ``` import { TestBed, ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { let component: AppComponent; let fixture: ComponentFixture<AppComponent>; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ] }); fixture = TestBed.createComponent(AppComponent); component = fixture.componentInstance; }); it('should create the app', () => { expect(component).toBeTruthy(); }); it('should update the message', () => { component.updateMessage(); expect(component.message).toEqual('The message has been updated!'); }); }); ``` 在这个测试用例中，我们首先使用TestBed创建一个测试模块，并声明AppComponent。然后，我们使用createComponent方法创建一个AppComponent实例，并保存在fixture变量中。 接下来，我们编写两个测试用例。第一个测试用例测试AppComponent是否被正确创建，它应该返回true。第二个测试用例测试updateMessage方法是否能够正确更新消息。 4. 运行自动化测试 最后，我们可以使用Angular CLI运行这些测试用例，并获得自动化测试结果。在命令行中输入以下命令： ``` ng test ``` 这会启动Karma测试运行器，并运行我们的测试用例。测试运行完成后，我们可以在控制台中看到测试结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值