超硬核！全网最全前端测试工具清单，满满干货记得收藏

欢迎大家来到IT世界,在知识的湖畔探索吧!

概念

单元测试

UnitTesting，简称UT。是指对软件中的最小测试单元进行检查和验证，这是最低级别的测试活动，前端开发中单元可以是一个function也可以是一个class，也可以是一个组件。

对他们的输出做断言检查，是一个白盒测试，一般由开发者进行编写，开发者可以通过编写执行UT来判断自己的逻辑是否正确。

集成测试

Integration Testing，其实集成测试就是根据业务功能需要把多个单元整合起来进行测试。引用 React 官网上的说法：“单元测试”和“集成测试”之间的差别可能会很模糊。

如果你在测试一个表单，用例是否应该也测试表单里的按钮呢？一个按钮组件又需不需要有他自己的测试套件？重构按钮组件是否应该影响表单的测试用例？不同的团队或产品可能会得出不同的答案。

端到端测试

end-to-end，简称e2e，也被称作功能测试（Functional Testing）或者浏览器测试或者冒烟测试，是指从使用者的角度出发，对真实系统进行测试。

e2e测试本质上是一种黑盒测试，相当于模拟用户访问应用程序，主要检查界面或功能是否正确，自动化测试不完善的时候通常是由人工来完成这项测试工作。

界面测试

User Interface Testing，简称UI测试，与e2e测试存在大量重叠，通常在做e2e的时候就能够覆盖UI测试。

TDD

Test Drive Development，即测试驱动开发。

简单地说就是先根据需求写测试用例，再代码实现，接着测试，循环此过程直到产品的实现。

可以看出来，TDD 的基本思路就是通过测试来推动整个开发的进行，但测试驱动开发并不只是单纯的测试工作，而是把需求分析，设计，质量控制量化的过程。

BDD

Behavior Drive Development，即行为驱动开发，BDD可以看作是对TDD的一种补充，或者说是TDD的一个分支。

在TDD中，我们并不能完全保证根据设计所编写的测试就是用户所期望的功能。BDD将这一部分简单和自然化，用自然语言来描述，让开发、测试、BA以及客户都能在这个基础上达成一致。

BDD更加依赖于需求行为和文档来驱动开发，这些文档的描述跟测试代码很相似。e2e测试更多是和BDD的开发模式进行结合。

综上所述，后文主要会针对单元测试和端到端测试常用的工具进行使用说明和对比。

前端测试工具

前端测试工具有很多，可以分为几类：

• 断言库
• 测试覆盖率工具
• 测试框架

断言库

测试的时候我们需要使用断言来判断代码是否到达目的，如果没有断言，我们的测试也将失去意义。

assert

assert是Node.JS内置的断言库，下面是一个简单的例子：

const assert = require('assert');assert(1 === 2);
const test = 'hello world';assert.strictEqual('hello world', test);

欢迎大家来到IT世界,在知识的湖畔探索吧!

chai

这个断言库很全很强大，提供了常用的assert、should、expect断言关键字。

power-assert

如果你在使用assert的话，无需使用 require(‘power-assert’)来引入power-assert，它的API与assert一样，而且拥有强大的提示信息，如下图所示。

安装：

• npm i power-assert

（左右滑动查看完整代码）

测试覆盖率工具

Istanbul

这个软件以土耳其最大城市伊斯坦布尔命名，因为土耳其地毯世界闻名，而地毯是用来覆盖的。

安装：

欢迎大家来到IT世界,在知识的湖畔探索吧!npm install -g istanbul

（左右滑动查看完整代码）

运行：

istanbul cover path

（左右滑动查看完整代码）

测试框架

测试框架的作用是提供一些方便的语法来描述测试用例，比如可以对一组用例进预处理和后处理（beforeAll、beforeEach、afterAll、afterEach等），使用describe函数表示一组用例。

下面将会列举一些常见的测试框架，并做简单的分析。

Jest

Jest 是Facebook出品的一个测试框架，算是一个大而全的测试框架，内置断言、测试覆盖率工具、Mock工具，开箱即用，支持浏览器和 NodeJS，支持BDD写法（也就是expect语法）是React官方推荐使用的测试框架。

Jest既可以用来做单元测试，也可以用来做端到端测试，在做端到端测试的时候可以使用jsdom，网络请求使用本地mock数据，这样可以确保毫秒级完成单元测试，如果需要使用真实DOM，还是需要配合其它测试工具。

Mocha

Macha也是一个功能丰富的JS测试框架，支持浏览器和NodeJS，不过没有内置断言库、测试覆盖率工具和Mock工具，需要和其他三方库配合使用，比如配合chai使用 就可以支持TDD写法（也就是assert.equal语法），当然BDD写法也是支持的。

Mocha既可以用来做单元测试，也可以用来做端到端测试，做端到端测试的时候需要配合其它测试工具。

Jasmine

Jasmine是一个BDD测试框架，支持浏览器和NodeJS，内置断言库、mock工具等，经常配合Karam使用，但是随着Jest这种大而全的框架的崛起，Jasmine显得比较老派，现在热度逐年下降，使用的人也越来越少。

e2e 测试工具

Cypress

Cypress一个e2e测试框架，测试界面和文档做到极致的一个产品。

PhantomJS

PhantomJS，一个基于webkit内核的无头浏览器，没有UI界面。用js代码模拟一些web界面上的操作，用起来比较不方便，不太推荐使用。

NightmareJS

NightmareJS，一个轻量级浏览器自动化测试库。基于Electron和PhantomJS类似，但是快了大约2倍且更现代。

Nightmare还有个优点——它提供了一个Chrome插件daydream，该插件可以通过录制屏幕，自动化生成测试代码，不过最近一次更新是在2019年，也不太推荐使用。

Playwright

Playwright为现代web应用程序提供可靠的端到端测试。支持使用NodeJS、python、Java、.net四种编程语言的API，同时支持Google Chrome和 Microsoft Edge（带有Chromium）、Apple Safari（带有WebKit）和 Mozilla Firefox。

Playwright支持所有浏览器和所有平台的无头（无浏览器 UI）和有头（带浏览器 UI）模式。Headed非常适合调试，而Headless速度更快，适合CI/云执行。

Storybook

Storybook是一个开源工具，用于独立构建UI组件和页面。它简化了UI开发、测试和文档编制。

Selenium

Selenium是e2e测试鼻祖级的框架，有多种编程语言的版本，它是基于webdriver而不是webkit内核实现的，所以，Selenium的浏览器兼容性相对于其他浏览器要好很多。

Nightwatch

Nightwatch原Selenium，是一个用于web网站或应用的自动化测试框架，使用node.js和W3C WebDriver API。

他也是一个完整和集成的解决方案，使用BDD方式，用于网络应用程序和网站的端到端测试。它还可用于Node.js单元和集成测试。

Nightwatch的兼容性比较好，Firefox、Chrome、Safari、edge都可以测。

Protractor

Protractor是一个针对Angular的e2e测试框架。

测试框架运行环境

Karam

Karam官网介绍是一个可以在多个浏览器中执行js代码的简单工具。它不是一个完整的测试框架，没有断言库，只是启动了一个http服务器，然后生成测试html文件，执行测试用例的js。

严格来讲Karam其实不算是一个测试框架，而是一个运行测试框架的环境。

Puppeteer

Puppeteer是一个node库，他提供了一组用来操纵Chrome的API，通俗来说就是一个headless chrome浏览器（当然你也可以配置成有UI的，默认是没有的）。

既然是浏览器，那么我们手工可以在浏览器上做的事情Puppeteer都能胜任，另外，Puppeteer 翻译成中文是“木偶”意思，所以听名字就知道，操纵起来很方便。

配合headless-recorder，一个Chrome插件，可以对操作进行录制，录制的操作有puppeteer和playwright两个版本。

其它测试工具

AVA

AVA是Node.JS的测试工具，具有简洁的API、详细的错误输出、支持新语法以及流程隔离。

https://mp.weixin.qq.com/s/5FhJ2cHewkFFFa4sRHyjRg

点击上方链接领取免费资料