通常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测试案例:
- 加载网站
- 点击"注册"
- 为注册表单中的输入提供一些信息
- 单击"注册"
- 如果身份验证令牌已存储在Cookie中并且应用程序重定向到配置文件页面, 则通过测试
E2E测试优点:
可以一次性隐式测试很多东西
e2e测试可确保拥有一个工作系统
缺点:
运行缓慢- 通常需要5到10分钟才能运行一个站点
测试很脆弱 - 一个无关紧要的变化, 如改变组件逻辑, 就需要重新设计测试
测试无法查明失败的原因
所以, 主要的业务流程可能会写E2E, 不过规模要小很多, 主要目的是:
便于给PM展示
便于修改Bug之后的回归
3. E2E测试工具介绍:
- 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" />
- Nightwatch
基于Node.js的测试框架, 使用Selenium WebDriver API将Web应用测试自动化, 提供了简单的语法, 支持使用JS和CSS选择器, 来编写运行在Selenium服务器上的E2E测试
简单工作原理:
Nightwatch向WebDriver Api发一些请求, 接收到请求WD操作对应浏览器, 浏览器返回结果, 收到数据返回到Nightwatch
- TestCafe
node.js工具
特点:
创建稳定的测试案例
支持TS
类似ESLint 监测JS错误
并行测试, 效率高
REST API
持续集成支持 (Travis, Jenkins)
4. E2E 测试案例:
Cypress Vue项目:
测试流程:
- 通知测试部分
- 开始测试
- 对结果状态断言
以vue-cli工程化项目为例
- 访问网页
- 查询元素, 进行交互
- 断言页面上的内容
cy.contains 监测有没有
click 点击事件
should
dbclick
eq
…
.