探讨下前端测试的常见场景

前端测试

场景

这边指的测试是指白盒测试,用代码来测试代码。

测试有利于提升代码质量。

  • 代码功能和需求一致。根据需求,写测试。测试通过了,则表明需求实现了。
  • 保证代码重构后,未改坏以前的功能。代码重构后,能通过原有的测试。

测试的另一个好处是,可以通过现有测试,来直观的了解需求。

解决方案

测试类型

根据测试对象类型不同,测试包含如下类型:

  • 单元测试
  • UI 测试
  • 接口测试

单元测试

单元测试的测试对象主要是函数和组件。

测试传不同的参数或属性值,返回值是否和预期一致,报错情况是否与预期一致,回调函数的执行情况是否和预期一致,造成的副作用是否和预期一致。副作用包括 DOM 操作,BOM 操作。

UI 测试

UI 测试的测试对象是 UI。

测试在页面未做过交互或交互(如点击,输入)后,UI 的结果是否和预期一致。

手写 UI 测试用例工作量很大。常用的 2 种 替换方式是:截图比较(Snapshot Testing) 和 UI 自动化测试。

截图比较是当前程序生成的 UI 的截图 和 之前程序生成的 UI 的截图比较。第一次运行程序要生成截图。当 UI 改动后,可以更新截图。截图适用用检查代码重构后,是否改坏了 UI。

UI 自动化测试 需要 录制测试脚本。根据测试脚本生成对应的测试用例代码。以后每次运行测试用例,就是执行录制脚本中的操作。具体看 UI 自动化录制工具: UI Recorder

接口测试

接口测试的测试对象是 API 接口。

调 API 接口,传不同的参数,接口返回的结果是否和预期一致。

衡量测试的效果

用测试覆盖率来衡量测试的效果。

工具库

相关推荐
落霞的思绪40 分钟前
CSS复习
前端·css
咖啡の猫3 小时前
Shell脚本-for循环应用案例
前端·chrome
uzong4 小时前
面试官:Redis中的 16 库同时发送命令,服务端是串行执行还是并行执行
后端·面试·架构
关键帧-Keyframe5 小时前
音视频面试题集锦第 26 期
面试·音视频
百万蹄蹄向前冲5 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5816 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路6 小时前
GeoTools 读取影像元数据
前端
ssshooter6 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry7 小时前
Jetpack Compose 中的状态
前端
dae bal8 小时前
关于RSA和AES加密
前端·vue.js