前端测试工具介绍

js_test_framework

该工具主要用于web前端单元测试，通过直接在浏览器中调用js方法，实现界面上的现场测试

git地址:

流程

1. 通过testLive在现场录制所需要的请求，testLive会记录期间所有的请求，同时可以重新运行

2. 将testLive录制后的请求，通过output方法输出至控制台，将输出的data写入自定义模块的RequestData中，同时在定义data后注册进requestFactory

3. 编写自定义模块的Test.js，通过调用requestFactory中的网络请求，同时编写需要判断的断言，将各个模块的单元测试和流程测试，注册至testManager中

4. 运行testManager中的测试用例，查看测试执行中的结果，同时分析结果

文件目录结构样例

basic：核心模块

testLive
requestFactory
testManager

module：外部模块，仅为样例

user

userRequestData
userTest

product

productRequestData
productTest
...

三大模块

模块间都各自独立，可自定义单独替换

---

testLive

    前端录制现场,通过调用回调接口,记录下用户在前端界面的所有操作记录

对外接口

• startRecord 开始录像,name为录像的名称

• stopRecord 结束录像

• output 输出所有录像的结果集

• runRecord 运行录像

• shouRequest 查看所有录像的目录结构和详情

• callback 对外回调函数，外部函数可在方法调用出，调用此回调

拓展方法

• ajaxOverride 重写ajax请求，将所有jquery的ajax加入回调

---

requestFactory

    请求工厂,主要用于收集用户的所有请求记录

对外接口

• registerMethod 注册方法，通过此方法外部调用可在requestFactory中注册方法

• registerData 注册数据，此方法与registerMethod类似，只是参数结构不同

• getMethod 通过方法名获得方法 {name:自定义方法名,url:网络请求地址,methodType:请求方式,run:执行方法}

• getMethod.run 在通过getMethod后可直接调用run函数，进行方法执行，返回结果{costTime:开销时间,requestData:请求参数,type:请求方式,url:网络请求地 址,responseData:服务器返回结果,success:此次请求是否成功}

• showMethods 显示requestFactory中所有的请求

---

testManager

    测试集成,用于管理测试,将测试模块化,以及结果的展示

对外接口

• registerMethod 注册方法，通过此方法外部调用可在testManager中注册方法

• registerData 注册数据，此方法与registerMethod类似，只是参数结构不同

• run 运行方法,返回值为本次运行的结果详情
  目录结构为｛assertQueue:所有断言结果集合,responseQueue:所有请求结果集合,errAssertQueue:所有断言失败集合,errorResponseQueue:所有网络请求失败集合,spendTime:请求时间开销,success:是否成功｝

• showAll 展示测试所有模块的目录结构

• showMethods 通过模块名，展示该模块下所有测试方法

• 基于网页分析工具：

• 1. 阿里测

• 2.　　 百度应用性能检测中心

• 2. Web PageTest

• 3. PingDom Tools

• 4. GTmetrix

• 基于浏览器分析工具：

• 1. Chrome自带工具F12

• 2. Firefox插件：YSlow（Yahoo工具）

• 3. Page Speed（google）

内部工具类

assertQueue 断言队列 该类用于记录与判断用户的目标结果与实际结果是否一致，同时输出结果集

• result 相关数据

• recordResponse 用于记录网络请求的结果

• assert 用户设置的断言

以上就是前端测试工具介绍的详细内容，更多请关注其它相关文章！