前端自动化测试(一):揭秘自动化测试秘诀
目录
- @[TOC](目录)
- 前言
- 自动化测试 VS 手动测试
- 测试分类
- 何为单元测试
- 单元测试的优缺点
- 优点
- 缺点
- 测试案例
- 测试代码
- 测试函数的封装
- 实现 `expect` 方法
- 实现 `test` 函数
- 结语
目录
- @[TOC](目录)
- 前言
- 自动化测试 VS 手动测试
- 测试分类
- 何为单元测试
- 单元测试的优缺点
- 优点
- 缺点
- 测试案例
- 测试代码
- 测试函数的封装
- 实现 `expect` 方法
- 实现 `test` 函数
- 结语
正文开始
,如果觉得文章对您有帮助,请帮我三连+订阅,谢谢
💖💖💖
前言
在日常开发中,我们常会遇到下面的问题:
- 每次在版本发布上线之前,需要在电脑前蹲上好几个小时甚至更长时间对你的应用进行测试,这个过程非常枯燥而痛苦。
- 当代码的复杂度达到一定级别,且维护者的数量不止你一个时,你会逐渐察觉到在开发新功能或修复 bug 时会变得越发小心翼翼。即使代码看起来没问题,你心里还是会犯嘀咕:这个 Feature 会不会带来其他 Bug?这个 Fix 会不会引入其他 “Feature”?
- 当你想要对项目中的代码进行重构时,会花费大量时间进行回归测试。
以上这些问题大多源于开发者使用的最基本的手动测试方式。解决这些问题的根本在于引入自动化测试方案。
自动化测试 VS 手动测试
特性 | 自动化测试 | 手动测试 |
---|---|---|
速度 | 快速,可以连续运行多个测试用例。 | 慢,需要逐个测试用例手动执行。 |
一致性 | 高,每次执行结果一致。 | 低,可能因人为因素导致结果不一致。 |
覆盖率 | 高,可以覆盖大量测试用例。 | 低,可能遗漏一些测试用例。 |
成本 | 初始成本高,需要编写和维护测试脚本。 | 初始成本低,但随着测试用例增加,成本可能增加。 |
维护 | 需要维护测试脚本,但一旦建立,维护成本较低。 | 每次更改需求或功能时,需要重新执行所有测试用例。 |
灵活性 | 低,测试用例需要预先定义。 | 高,可以根据需要随时调整测试用例。 |
准确性 | 高,可以精确执行测试用例。 | 低,可能因人为因素导致测试结果不准确。 |
重复性 | 高,可以重复执行测试用例。 | 低,重复执行测试用例可能会出错。 |
资源 | 需要专门的测试工具和环境。 | 需要测试人员和测试设备。 |
发现问题 | 可以发现一些手动测试难以发现的问题。 | 可以发现一些自动化测试难以发现的问题。 |
适用场景 | 适用于回归测试、持续集成等场景。 | 适用于探索性测试、用户验收测试等场景。 |
可扩展性 | 随着测试用例的增加,可以扩展测试范围。 | 随着测试用例的增加,执行时间可能显著增加。 |
风险 | 测试脚本可能存在缺陷,导致测试结果不准确。 | 测试人员可能因疲劳或疏忽导致测试结果不准确。 |
测试分类
前端开发最常见的测试主要是以下几种:
- 单元测试:验证独立的单元是否正常工作。
- 集成测试:验证多个单元协同工作。
- 端到端测试:从用户角度以机器的方式在真实浏览器环境验证应用交互。
- 快照测试:验证程序的 UI 变化。
何为单元测试
- 单元测试是对应用程序最小的部分(单元)运行测试的过程。通常,测试的单元是函数,但在前端应用中,组件也是被测单元。
- 单元测试可以单独调用源代码中的函数并断言其行为是否正确。
- 与端到端测试不同,单元测试运行速度很快,只需几秒钟即可完成,因此你可以在每次代码变更后运行单元测试,从而快速得到变更是否破坏现有功能的反馈。
- 单元测试应该避免依赖性问题,比如不存取数据库、不访问网络等,而是使用工具虚拟出运行环境。这样可以最小化测试成本,不需花大力气搭建各种测试环境。
单元测试的优缺点
优点
- 提升代码质量,减少 Bug。
- 快速反馈,减少调试时间。
- 让代码维护更容易。
- 有助于代码的模块化设计。
- 代码覆盖率高。
缺点
- 由于单元测试是独立的,无法保证多个单元一起运行时是否正确。
测试案例
上面提到单元测试的单元是函数,我们可以写两个函数,然后进行测试。看下面的例子:
// math.js
function sum (a, b) {return a + b;
}function subtract (x, y) {return x - y;
}module.exports = {sum,subtract
};
测试代码
通过测试代码可以很方便地帮助验证代码的正确性。
const { sum, subtract } = require('./math');const result = sum(1, 2);
const expected = 3;if (result !== expected) {throw new Error(`1 + 2 应该等于 ${expected},但是结果却是 ${result}`);
}const result2 = subtract(2, 1);
const expected2 = 1;if (result2 !== expected2) {throw new Error(`2 - 1 应该等于 ${expected2},但是结果却是 ${result2}`);
}
测试函数的封装
之前示例的测试代码太过繁琐,可以思考如何封装得更简便一些,例如:
expect(sum(1, 2)).toBe(3);
expect(subtract(2, 1)).toBe(1);
这样的测试代码就像自然语言说话一样,很舒服。
实现 expect
方法
function expect (result) {return {toBe (actual) {if (result !== actual) {throw new Error(`预期值和实际值不相等,预期 ${result},实际 ${actual}`);}}};
}
实现 test
函数
增加错误提示信息:
const { sum, subtract } = require('./math');test('测试加法', () => {expect(sum(1, 2)).toBe(3);
});test('测试减法', () => {expect(subtract(2, 1)).toBe(1);
});function test (description, callback) {try {callback();console.log(`${description} 通过测试`);} catch (err) {console.error(`${description} 没有通过测试:${err}`);}
}function expect (result) {return {toBe (actual) {if (result !== actual) {throw new Error(`预期值和实际值不相等,预期 ${result},实际 ${actual}`);}}};
}
结语
自动化测试是前端开发中提升效率、保证质量的利器。它不仅能够减轻手动测试的繁重工作,还能在代码发生变动时迅速提供反馈,确保代码的稳定性和可靠性。通过本文的介绍,相信你已经对自动化测试有了简单理解,后面我会继续介绍更多使用的测试工具
在实际项目中,合理地引入自动化测试,不仅能够大幅度提升开发效率,还能让你在面对复杂的项目需求和频繁的代码变更时更加从容。
相关文章:
前端自动化测试(一):揭秘自动化测试秘诀
目录 [TOC](目录)前言自动化测试 VS 手动测试测试分类何为单元测试单元测试的优缺点优点缺点 测试案例测试代码 测试函数的封装实现 expect 方法实现 test 函数结语 正文开始 , 如果觉得文章对您有帮助,请帮我三连订阅,谢谢💖&…...
《Python实战进阶》No37: 强化学习入门:Q-Learning 与 DQN-加餐版1 Q-Learning算法可视化
在《Python实战进阶》No37: 强化学习入门:Q-Learning 与 DQN 这篇文章中,我们介绍了Q-Learning算法走出迷宫的代码实践,本文加餐,把Q-Learning算法通过代码可视化呈现。我尝试了使用Matplotlib实现,但局限于Matplotli…...
将ZABBIX结合AI实现自动化运维
1. 执行摘要 评估将ZABBIX监控系统与人工智能(AI)相结合,以实现自动化IT运维的可行性。这种集成具有显著的潜力,能够提升IT运维的效率、可靠性和主动性。通过利用ZABBIX强大的监控和告警功能,以及AI在异常检测、根因分…...
Go 语言规范学习(2)
文章目录 VariablesTypesBoolean typesNumeric typesString typesArray typesSlice typesStruct typesPointer typesFunction typesInterface typesBasic interfacesEmbedded interfacesGeneral interfaces【泛型接口】Implementing an interface【实现一个接口】 Map typesCha…...
XCode中使用MonkeyDev开发iOS版的Comand-line Tool的daemon程序
前提条件:iphone手机越狱ios15,cydia/Sileo中安装好ssh,ldid等相关的常用插件 备注:如何iphone是ios15以下的越狱机,可直接看11步 1. 安装MonkeyDev sudo /bin/sh -c "$(curl -fsSL https://raw.githubusercon…...
Nodejs上传文件的问题
操作系统:window和linux都会遇到 软件环境:v20.10.0的Nodejs 1、前端代码如下: 2、后端Nodejs 2.1、注册接口 2.2、上传接口 其中memoryUpload方法代码如下: 3、用页面上传文件 查看具体报错原因: TypeError: sourc…...
SpringMVC 拦截器详解与实战
在 SpringMVC 框架中,拦截器(Interceptor)是一种强大的机制,它允许开发者在控制器方法执行前后进行拦截,从而实现诸如用户权限验证、日志记录、性能监控等各种功能。本文将深入探讨 SpringMVC 拦截器的相关知识&#x…...
5.3 MVVM模型
一、MVVM的基本概念 MVVM的基本概念:Model、View、ViewModel 组件职责示例内容Model封装业务数据User类,包含姓名、年龄属性View负责UI呈现XAML界面,包含数据绑定ViewModel连接View和Model,处理视图逻辑MainViewModel包含命令和…...
6、进程理论和简单进程创建
一、了解进程推荐看这个视频,很详细 1、概念 进程(Process)程序的运行过程,是系统进行资源分配和调度的独立单元程序的运行过程:多个不同程序 并发,同一个程序同时执行多个任务。 就需要很多资源来实现这个过程。 每个进程都有一…...
python面试-基础
Python 面试题:解释 filter 函数的工作原理 难度: ⭐⭐ 特点: filter 函数是 Python 内置的高阶函数,用于过滤序列中的元素。这道题考察面试者对函数式编程概念的理解以及对 filter 函数的实际应用能力。和 map 函数类似, Python 3 中的 filter 返回一…...
全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练
全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练 1.2025新版懒人精灵-实战红果搜索关键词刷视频:https://www.bilibili.com/video/BV1eK9kY7EWV 2.懒人精灵-全分辨率节点识别(红果看广告领金币小实战):https://www.bili…...
前后端常见模型以及相关环境配置介绍
一、前端常见框架 Vue.js 特点:采用数据驱动的响应式编程,组件化的开发模式使得代码结构清晰,易于维护,且学习成本相对较低,适合初学者和快速迭代的项目。应用场景:广泛应用于各类 Web 应用开发ÿ…...
西电考研目前缺额专业,调剂助力上岸!
注意啦!准备调剂的兄弟们看过来:今天带大家梳理【西电调剂】的相关内容。助力大家上岸西安电子科技大学研究生 调剂必须在短时间内迅速做出决策,收集信息、筛选院校、准备复试,每一个环节都容不得丝毫懈怠!现在除了关注…...
英语四六级听力考试网络广播系统建设方案:助力大学英语四六级听力考试清晰度与可靠性升级
英语四六级听力考试网络广播系统建设方案:助力大学英语四六级听力考试清晰度与可靠性升级 北京海特伟业科技有限公司任洪卓发布于2025年3月26日 一、建设背景:听力考试的重要性与现有系统的痛点 英语四六级考试听力部分作为学生英语听力能力的直接检验…...
性能比拼: Rust vs C++
本内容是对知名性能评测博主 Anton Putra 1个月前 Rust vs C Performance 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 介绍 在本视频中,将对比 Rust 和 C。 会使用 Axum 框架的一个稍微改进的版本,该框架基于 Hyper 和 Tokio 运行时&am…...
b站视频提取mp4方案
引言 对于b站视频,有些视频是不能提取字幕的,所以我们想把对应的视频下载下来,然后进行对应的本地处理,获得所需的自由处理,吞食视频。 整体思路 下载b站客户端 ----> 把缓存路径修改------> 下载所需视频---…...
PyQt6实例_批量下载pdf工具_exe使用方法
目录 前置: 工具使用方法: step one 获取工具 step two 安装 step three 使用 step four 卸载 链接 前置: 1 批量下载pdf工具是基于博文 python_巨潮年报pdf下载-CSDN博客 ,将这个需求创建成界面应用,达到可…...
【java笔记】泛型、包装类、自动装箱拆箱与缓存机制
一、泛型:类型安全的基石 1. 泛型的本质与原理 Java 泛型(Generics)是 JDK 5 引入的特性,通过类型参数化实现代码的通用性。泛型类、接口和方法允许在定义时声明类型参数(如 T、E、K、V),这些…...
计算机网络——传输层(TCP)
传输层 在计算机网络中,传输层是将数据向上向下传输的一个重要的层面,其中传输层中有两个协议,TCP,UDP 这两个协议。 TCP 话不多说,我们直接来看协议报头。 源/目的端口号:表示数据从哪个进程来࿰…...
Go 语言规范学习(1)
文章目录 IntroductionNotation示例(Go 语言的 if 语句): Source code representationCharacters例子:变量名可以是中文 Letters and digits Lexical elementsCommentsTokensSemicolons例子:查看程序所有的token Ident…...
深入理解椭圆曲线密码学(ECC)与区块链加密
椭圆曲线密码学(ECC)在现代加密技术中扮演着至关重要的角色,广泛应用于区块链、数字货币、数字签名等领域。由于其在提供高安全性和高效率上的优势,椭圆曲线密码学成为了数字加密的核心技术之一。本文将详细介绍椭圆曲线的基本原理…...
nginx优化(持续更新!!!)
1.调整文件描述符 # 查看当前系统文件描述符限制 ulimit -n# 永久修改文件描述符限制 # 编辑 /etc/security/limits.conf 文件,添加以下内容 * soft nofile 65535 * hard nofile 65535# 编辑 /etc/sysctl.conf 文件,添加以下内容 fs.file-max 655352.调…...
ARCGIS PRO SDK 创建右键菜单
ArcGIS Pro SDK中的弹出式右键菜单常见的在地图视图、布局视图、文件目录等地方,随便右键点击某个文件、要素、要素类,一般都会弹出一个右键菜单。 操作对象右键菜单 refID要素图层esri_mapping_layerContextMenushp图层esri_mapping_unregisteredLaye…...
编译原理——LR分析
文章目录 LR分析概述一、LR分析概述二、LR(0)分析概述(一)可归前缀和子前缀(二)识别活前缀的有限自动机(三)活前缀及可归前缀的一般计算方法(四)LR(0)项目集规范族的构造 三、SLR(1)…...
css100个问题
一、基础概念 CSS的全称及作用是什么?行内样式、内部样式表、外部样式表的优先级?解释CSS的层叠性(Cascading)CSS选择器优先级计算规则伪类与伪元素的区别?举例说明!important的作用及使用注意事项如何继承父元素字体…...
js文字两端对齐
目录 一、问题 二、原因及解决方法 三、总结 一、问题 1.text-align: justify; 不就可以了吗?但是实际测试无效 二、原因及解决方法 1.原因:text-align只对非最后一行文字有效。只有一行文字时,text-align无效,要用text-alig…...
Java-面向对象-多态和抽象类
目录 什么是多态? 多态的优点 多态存在的三个必要条件 虚函数 重写 多态的实现方式 什么是抽象类? 继承抽象类 实现抽象方法 抽象类总结 什么是多态? 多态就是一个行为具有多种不同的表现形式。 举例: 我们按下 F1 键…...
前端性能优化:深入解析哈希算法与TypeScript实践
/ 示例:开放寻址哈希表核心实现 class OpenAddressingHashTable<T> {private size: number;private keys: (string | null)[];private values: (T | null)[];private tombstone Symbol(Deleted);constructor(size: number 53) {this.size size;this.keys …...
车架号查询车牌号接口如何用Java对接
一、什么是车架号查询车牌号接口? 车架号查询车牌号接口,即传入车架号,返回车牌号、车型编码、初次登记日期信息。车架号又称车辆VIN码,车辆识别码。 二、如何用Java对接该接口? 下面我们以阿里云接口为例࿰…...
linux input子系统深度剖析
input 就是输入的意思,因此 input 子系统就是管理输入的子系统,和 pinctrl 、 gpio 子系统 一样,都是 Linux 内核针对某一类设备而创建的框架。比如按键输入、键盘、鼠标、触摸屏等 等这些都属于输入设备,不同的输入设备…...
香蕉派 BPI-CM6 工业级核心板采用进迭时空K1 8核 RISC-V 芯片开发
BPI-CM6 产品介绍 香蕉派BPI-CM6是一款工业级RISC-V核心板,它采用SpacemiT K1 8核RISC-V芯片设计,CPU集成2.0 TOPs AI计算能力。8/16G DDR和8/16/32/128G eMMC。设计了板对板连接器,以增强稳定性,与树莓派CM4尺寸相同,…...
9.4分漏洞!Next.js Middleware鉴权绕过漏洞安全风险通告
今日,亚信安全CERT监控到安全社区研究人员发布安全通告,Next.js 存在一个授权绕过漏洞,编号为 CVE-2025-29927。攻击者可能通过发送精心构造的 x-middleware-subrequest 请求头绕过中间件安全控制,从而在未授权的情况下访问受保护…...
【Unity3D实现UI轮播效果】
系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示👉二、实现步骤👉2-1、搭建UI👉2-2、代码实现👉2-3、代码挂载使用👉三、扩展实现👉壁纸分享👉总结👉前言 功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更…...
谈谈 Webpack 中的 Loader 和 Plugin,它们的区别是什么?
Webpack Loader与Plugin深度解析 作为前端工程化的核心工具,Webpack的Loader和Plugin机制是其强大扩展能力的基石。 理解它们的差异和适用场景,是构建高效打包体系的关键。 我们将从底层原理到实际应用,深入剖析两者的区别。 核心概念对比…...
C#单例模式
单例模式 (Singleton),保证一个类仅有一个实例,并提供一个访问它的全局访问点。通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化对个对象,一个最好的办法就是,让类自身负责保护它的唯一实例。这个类可以保证没…...
Oracle 数据库通过exp/imp工具迁移指定数据表
项目需求:从prod数据库迁移和复制2个表(BANK_STATE,HBS)的数据到uat数据库环境。 数据库版本:Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 迁移工具:客户端exp/imp工具 -- 执行命令 从Prod数据库导出数据exp us…...
MongoDB 与 Elasticsearch 使用场景区别及示例
一、核心定位差异 MongoDB 定位:通用型文档数据库,侧重数据的存储、事务管理及结构化查询,支持 ACID 事务。典型场景: 动态数据结构存储(如用户信息、商品详情)。需事务支持的场景…...
PyTorch生成式人工智能实战:从零打造创意引擎
PyTorch生成式人工智能实战:从零打造创意引擎 0. 前言1. 生成式人工智能1.1 生成式人工智能简介1.2 生成式人工智能技术 2. Python 与 PyTorch2.1 Python 编程语言2.2 PyTorch 深度学习库 3. 生成对抗网络3.1 生成对抗网络概述3.2 生成对抗网络应用 4. Transformer4…...
蓝桥杯高频考点——二分(含C++源码)
二分 基本框架整数查找(序列二分的模版题 建议先做)满分代码及思路solution 子串简写满分代码及思路solution 1(暴力 模拟双指针70分)solution 2(二分 AC) 管道满分代码及思路样例解释与思路分析solution 最…...
VUE3项目VITE打包优化
VUE3项目VITE打包优化 代码加密依赖配置效果对比图 自动导入依赖配置 代码压缩依赖配置效果对比图 图片压缩依赖配置效果对比图 字体压缩总结与实践运用效果 代码加密 依赖 npm install -D vite-plugin-bundle-obfuscator配置 import vitePluginBundleObfuscator from "…...
IP 分片重组与 TCP 会话重组
1. IP 分片重组(IP Fragmentation & Reassembly) (1)分片原因 当 IP 数据包长度超过 MTU(Maximum Transmission Unit)(如以太网默认 1500 字节)时,路由器或发送端会…...
《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战
第34集:卷积神经网络(CNN)图像分类实战 摘要 卷积神经网络(CNN)是计算机视觉领域的核心技术,特别擅长处理图像分类任务。本集将深入讲解 CNN 的核心组件(卷积层、池化层、全连接层)…...
【Django】教程-1-安装+创建项目+目录结构介绍
欢迎关注我!后续会更新django教程。一周2-3更,欢迎跟进,本周会更新第一个Demo的单独一个模块的增删改查【Django】教程-4-一个增删改查的Demo【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍 1.项目创建 1.1 安装 Djan…...
力扣DAY29 | 热100 | 删除链表的倒数第N个结点
前言 中等 √ 链表心得:考虑好边界情况。 题目 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2: 输入&#…...
渗透测试过-关于学习Token、JWT、Cookie等验证授权方式的总结
关于学习Token、JWT、Cookie等验证授权方式的总结 目录 一、为什么Cookie无法防止CSRF攻击,而Token可以? 二、为什么无论采用Cookie-session的方式,还是Token(JWT)的方式,在一个浏览器里,同一个…...
C#从入门到精通(3)
目录 第九章 窗体 (1)From窗体 (2)MDI窗体 (3)继承窗体 第十章 控件 (1)控件常用操作 (2)Label控件 (3)Button控件 &…...
greenhill编译出现:3201原因错误
ecom800: 21Mar25 16:26:45.609351: No licenses available for ecom800 Reason: ecom800 (3201): The License Manager cannot be contacted. 解决方式:重新加载lincese驱动。 检查是否安装正确: 检查驱动是否正确识别: 以上检查都正常,…...
Docker 快速入门指南
Docker 快速入门指南 1. Docker 常用指令 Docker 是一个轻量级的容器化平台,可以帮助开发者快速构建、测试和部署应用程序。以下是一些常用的 Docker 命令。 1.1 镜像管理 # 搜索镜像 docker search <image_name># 拉取镜像 docker pull <image_name>…...
RISC-V AIA学习2---IMSIC
我在学习文档这章时,对技术术语不太理解,所以用比较恰当的比喻来让自己更好的理解。 比较通俗的理解: 将 RISC-V 系统比作一个工厂: hart → 工厂的一条独立生产线IMSIC → 每条生产线配备的「订单接收员」MSI 中断 → 客户通过…...
C#基础学习(五)函数中的ref和out
1. 引言:为什么需要ref和out? 问题背景:函数参数默认按值传递,值类型在函数内修改不影响外部变量;引用类型重新赋值时外部对象不变。核心作用:允许函数内部修改外部变量的值,实现“双向传参…...