干货来了，端到端测试中的测试种类及工具的说明

ゝ一纸荒年。 2023-09-26 22:01 12阅读 0赞

**单元测试**

即Unit Testing，简称 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 的开发模式进行结合。

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

前端测试工具

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

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

**断言库**

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

## **0****1** **assert** ##

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

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

## **0****2** **chai** ##

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

![977150145eb9295d656b5f531e34207f.png][]

## **03** **power-assert** ##

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

![25e1b3188384ee3bf9efc019190f0852.png][]

安装：

npm i power-assert

**测试覆盖率工具**

## **0****1** **Istanbul** ##

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

安装：

npm install -g istanbul

运行：

istanbul cover path

**测试框架**

测试框架的作用是提供一些方便的语法来描述测试用例，比如可以对一组用例进预处理和后处理（beforeAll、beforeEach、afterAll、afterEach等），使用 describe函数表示一组用例，下面将会列举一些常见的测试框架，并做简单的分析。

## **0****1** **Jest** ##

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

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

## **0****2** **Mocha** ##

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

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

## **0****3** **Jasmine** ##

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

**e2e测试工具**

## **01** **Cypress** ##

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

## **02** **PhantomJS** ##

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

## **0****3** **NightmareJS** ##

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

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

## **0****4** **Playwright** ##

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

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

### **0****5** **Storybook** ###

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

## **0****6** **Selenium** ##

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

## **0****7** **Nightwatch** ##

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

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

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

## **0****8** **Protractor** ##

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

**测试框架运行环境**

## **0****1** **Karam** ##

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

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

## **0****2** **Puppeteer** ##

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

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

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

**其它测试工具**

## **0****1 AVA** ##

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

**最后：** 为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

### 全套资料获取方式： ###

![9b1ef4bb3ae84db4b77c0d713018771a.gif][]

![59b2b9dee8804cc0932a0009afdc4fbc.gif][]

[977150145eb9295d656b5f531e34207f.png]: https://img-blog.csdnimg.cn/img_convert/977150145eb9295d656b5f531e34207f.png
[25e1b3188384ee3bf9efc019190f0852.png]: https://img-blog.csdnimg.cn/img_convert/25e1b3188384ee3bf9efc019190f0852.png
[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[9b1ef4bb3ae84db4b77c0d713018771a.gif]: https://img-blog.csdnimg.cn/9b1ef4bb3ae84db4b77c0d713018771a.gif
[59b2b9dee8804cc0932a0009afdc4fbc.gif]: https://img-blog.csdnimg.cn/59b2b9dee8804cc0932a0009afdc4fbc.gif