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

前端测试

场景

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

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

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

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

解决方案

测试类型

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

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

单元测试

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

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

UI 测试

UI 测试的测试对象是 UI。

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

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

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

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

接口测试

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

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

衡量测试的效果

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

工具库

相关推荐
小二·7 小时前
Python Web 开发进阶实战:AI 原生安全防护 —— 在 Flask + Suricata 中构建智能网络威胁狩猎平台
前端·人工智能·python
葡萄城技术团队7 小时前
SpreadJS V19.0 新特性解密:设计器容器行列合计,让报表数据汇总更灵活
前端
晚霞的不甘7 小时前
Flutter for OpenHarmony:从零到一:构建购物APP的骨架与精美UI
前端·javascript·flutter·ui·前端框架·鸿蒙
小二·7 小时前
Python Web 开发进阶实战:AI 原生硬件接口 —— 在 Flask + MicroPython 中构建边缘智能设备控制平台
前端·人工智能·python
码农水水7 小时前
京东Java面试被问:分布式会话的一致性和容灾方案
java·开发语言·数据库·分布式·mysql·面试·职场和发展
ElasticPDF-新国产PDF编辑器7 小时前
基于 PDF.js 的 PDF 文字编辑解决方案,纯前端 SDK,跨平台、框架无关、Web 原生
前端·javascript·pdf
带带弟弟学爬虫__7 小时前
速通新Baidu Frida检测
前端·javascript·vue.js·python·网络爬虫
indexsunny7 小时前
互联网大厂Java求职面试实录:Spring Boot微服务在电商场景中的应用及技术深度解析
java·数据库·spring boot·缓存·微服务·面试·电商
有时间要学习7 小时前
面试150——第四周
算法·面试
好学且牛逼的马7 小时前
ES6 核心语法精讲
前端·ecmascript·es6