前端测试之E2Etest介绍

通常web测试有两种类型测试 : 单元测试和E2E(端到端 End - to - End)

1. 什么是单元测试:

“单元”, 将代码分解为易于测试的小部件, 通常单元是个函数, 也可能是类或复杂的算法
单元测试 的关键概念是函数的给定输入应始终产生相同的输出
例如:

// Function we want to test
const add = (x,y) => x + y;

// Unit Test
test("should add two numbers", () => (
  const result = add(2,3);
  expect(result).toBe(5);
});

组件测试:
Vue中的单元是一个组件而不是一个函数, 使用像Vue Test Utils这样的库, 可以在内存中安装Vue组件并创建一个"包装器"对象, 然后可以查询包装器以对呈现的HTML进行断言

单元测试优点:
调试运行快, 因为功能单一
测试精确, 允许识别确切问题
缺点:
为应用程序每个方面编写测试非常耗时
尽管单元测试通过, 整个应用程序可能仍然无法正常工作

2. 什么是E2E测试:

与单元测试不同 , 不会将应用分解为更小的部分测试, 而是测试整个应用

E2E测试案例:

1. 加载网站
2. 点击"注册"
3. 为注册表单中的输入提供一些信息
4. 单击"注册"
5. 如果身份验证令牌已存储在Cookie中并且应用程序重定向到配置文件页面, 则通过测试

E2E测试优点:
可以一次性隐式测试很多东西
e2e测试可确保拥有一个工作系统
缺点:
运行缓慢- 通常需要5到10分钟才能运行一个站点
测试很脆弱 - 一个无关紧要的变化, 如改变组件逻辑, 就需要重新设计测试
测试无法查明失败的原因

所以, 主要的业务流程可能会写E2E, 不过规模要小很多, 主要目的是:
便于给PM展示
便于修改Bug之后的回归

3. E2E测试工具介绍:

1. Cypress
   基于Mocha, 使用TS编写. 主要测试chrome, 测试safari或其他可以用nightwatch

describe('My first test', function() {
	it('Does not do much', function () {
		expect(true).to.equal(true)
	})
})

describe('My Second test', function() {
	it('Does not do much', function () {
		expect(false).to.equal(true)
	})
})

测试文档的前面使用
<reference types="Cypress" />

2. Nightwatch
   基于Node.js的测试框架, 使用Selenium WebDriver API将Web应用测试自动化, 提供了简单的语法, 支持使用JS和CSS选择器, 来编写运行在Selenium服务器上的E2E测试

简单工作原理:
Nightwatch向WebDriver Api发一些请求, 接收到请求WD操作对应浏览器, 浏览器返回结果, 收到数据返回到Nightwatch

---

3. TestCafe
   node.js工具

特点:
创建稳定的测试案例
支持TS
类似ESLint 监测JS错误
并行测试, 效率高
REST API
持续集成支持 (Travis, Jenkins)

4. E2E 测试案例:

Cypress Vue项目:

测试流程:

1. 通知测试部分
2. 开始测试
3. 对结果状态断言

以vue-cli工程化项目为例

1. 访问网页
2. 查询元素, 进行交互
3. 断言页面上的内容

cy.contains 监测有没有
click 点击事件
should
dbclick
eq
…
.