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

前端测试

请添加图片描述

场景

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

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

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

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

解决方案

测试类型

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

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

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

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

UI 测试

UI 测试的测试对象是 UI。

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

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

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

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

接口测试

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

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

衡量测试的效果

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

工具库

  • 测试框架

    • Jest。 VSCode 插件

      • Jest Runner 单独运行某个用例
      • Jest Snippets
    • Mocha

  • 断言库

    • Power-asset
    • Chai
  • Spies,Stub, Mock, Fake 等

    • SINON.JS
  • E2E 测试

    • Enzyme
    • cypress
    • Nightwatch.js
  • 无头浏览器

    • Puppeteer
    • PhantomJS
  • UI 自动化工具

    • UI Recorder
  • 测试覆盖率

    • istanbul

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文告诉你样机是什么,分享几个常用的样机模板

一个项目的诞生通常需要经历头脑构思、绘制设计和最终着陆。在这个过程中,样机制作往往是在着陆实践之前进行的。俗话说:“样机使用得好,草稿过早”。样机设计是产品或网站最终设计的生动、静态和视觉表现。它为用户提供了一种模拟现实的方式…

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】 课本里章节里所有蓝色字体的思维导图

【uniapp】短信验证码输入框

需求是短信验证码需要格子输入框 如图 网上找了一个案例改吧改吧 直接上代码 结构 <template><view class"verify-code"><!-- 输入框 --><input id"input" :value"code" class"input" :focus"isFocus"…

数据结构之树(图解)

文章目录 前言一、树是什么&#xff1f;二、树的特点三、树的相关概念四、树的表示方法&#xff08;孩子兄弟表示法&#xff09;总结 前言 在学习完线性结构&#xff0c;例如顺序表、链表、栈、队列后&#xff0c;我们要开始学习一个新的数据结构----树 一、树是什么&#xf…

小白如何在一个月写一篇论文(中文核心,SCI)

小白如何半年发3篇sci的我教你如何快速“水”一篇sci论文_哔哩哔哩_bilibili 计算机视觉&#xff0c;cv领域 半年发3篇sci的我教你如何快速“水”一篇sci论文 计算机视觉(辅导 SCI EI 核心) 微信&#xff1a;whbwqq123或主页加up 小白如何快速写出一篇论文并成功发表&…

Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (二)

这是继上一篇文章 “Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;一&#xff09;” 的续篇。在这篇文章中&#xff0c;我主要来讲述 ElasticVectorSearch 的使用。 我们的设置和之前的那篇文章是一样的&#xff…

【C】C语言文件操作

1.为什么使用文件 我们前面学习结构体时&#xff0c;写通讯录的程序&#xff0c;当通讯录运行起来的时候&#xff0c;可以给通讯录中增加、删除数据&#xff0c;此时数据是存放在内存中&#xff0c;当程序退出的时候&#xff0c;通讯录中的数据自然就不存在了&#xff0c;等下…

大彩串口屏读写文件问题

分区 本文使用的是大彩串口屏M系列的&#xff1a; 串口屏内部有三个分区&#xff0c;分别为A、B、C三个区&#xff1a; A区&#xff1a;系统区&#xff0c;存储组态工程文件 B区&#xff1a;数据区&#xff0c;存储配置信息&#xff0c;记录数据、历史曲线等 C区&#xff1a;备…

3.线性神经网络

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 线性回归基础优化算法一、线性回归1、买房案例2、买房模型简化3、线性模型4、神经网络5、损失函数6、训练数据7、参数学习8、显示解9、总结 二、 基础优化算法1、梯度下降2、学习率3、小批量随机梯度下降4、批量大小5、…

docker+playwright

windows10 docker playwright 难点在于windows下docker的安装&#xff0c;以及官方hub被墙的困难。 wsl2 wsl2 ubuntu docker git clone https://gitee.com/lineuman/lcs_playwright.git npm install npx playwright test docker端口怎么映射到主机上面&#xff1f; 设置重…

图、深度优先(DFS)、广度优先(BFS)

图 基本介绍 表示方式 图的创建 from typing import Listclass Graph:vertex_list: List[str] [] # 存储顶点的数组edges: List[list] [] # 存储图中各条边的邻接矩阵num_edges: int 0 # 边的数总数def __init__(self, n: int):"""根据传入的顶点个数初始…

测开(性能测试---LoadRunner)

目录 一、LoadRunner的安装 二、Loadrunner的基本概念 三、开发测试脚本——VUG 3.1 脚本录制 3.2 脚本加强 四、设计场景——Controller LoadRunner是一款开源桌面应用软件&#xff0c;可用来模拟用户负载完成性能测试工作&#xff0c;LoadRunner的功能在版本不断升级的…

JWT详解解读读

&#x1f4d1;前言 本文主要是jwt解读文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力一点&#…

WebDAV之π-Disk派盘 + 读出通知

手机各种推销通知太多,如何避免那些繁琐的通知内容,做出一键就能够阅读重要通知的最佳体验,帮助您更加快速和便捷的体验到那些应用内容?推荐大家使用读出通知。 读出通知APP可以设置接收通知的app,还可以用耳机操作,操作简单,你还可以指定播报设备,还有播报的声音的设置…

数据结构 | 顺序表专题

数据结构 | 顺序表专题 文章目录 数据结构 | 顺序表专题课前准备1. 目标2. 需要的储备知识3. 数据结构相关概念 开始顺序表1、顺序表的概念及结构2、顺序表分类3、动态顺序表的实现初始化顺序表顺序表的销毁顺序表的尾插顺序表的头插检查容量顺序表的尾删打印顺序表顺序表的头删…

【递归、搜索与回溯算法】第五节.129. 求根节点到叶节点数字之和和814. 二叉树剪枝

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;递归、搜索与回溯算法 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&am…

.jnlp

首先配置电脑的java环境。 百度搜索jre下载&#xff0c;会有很多结果&#xff0c;一般选择官网进行下载。 下载正确的jre版本。 我的电脑是windows 64位&#xff0c;根据你自己电脑的情况选择版本进行下载。不懂自己电脑是多少位的可以看下一步。 查看电脑是64位还是32…

如何改善设备综合效率(OEE)并提高工厂的生产力

在现代制造业中&#xff0c;提高设备综合效率&#xff08;Overall Equipment Efficiency&#xff0c;OEE&#xff09;是企业追求高效生产和优化生产能力的重要目标之一。OEE是一个关键的绩效指标&#xff0c;可以帮助企业评估设备的利用效率、生产效率和质量水平。本文将从三个…

Spring源码-refresh(1)

1、Refresh方法简介 refresh 是Spring的核心流程&#xff0c;主要包含13个方法。这13个方法中主要又包含3个方法。 如图&#xff1a; 其中标记星号的代表主要的方法。从方法中后面的分支数据也可以看出&#xff0c;主要的方法中存在大量的逻辑处理&#xff0c;后面我们会慢慢分…

SQL-正则表达式和约束

文章目录 主要内容一.正则表达式1.操作1代码如下&#xff08;示例&#xff09;: 2.操作2代码如下&#xff08;示例&#xff09;: 3.操作3代码如下&#xff08;示例&#xff09;: 4.操作4代码如下&#xff08;示例&#xff09;: 二.约束1.主键约束 2.自增长约束3.非空约束4.唯一…