前端测试之E2Etest介绍

浅浅的花香味﹌ 2022-11-29 00:54 200阅读 0赞

通常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" />

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

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

--------------------

1.  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  
…  
.