【测试数据准备-绕过后端,前端测试】

article/2025/10/9 4:34:29

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、 Charles 简单介绍
  • 二、本文使用场景
  • 三、Charles 通过修改后端返回值,在前端展示。
    • 1.工具安装和注册
    • 2.使用端点功能修改接口返参数
  • 总结


前言

测试过程中,某些需求不关心后端逻辑计算,但是需要走前端某些逻辑(四舍五入/单位换算)等,如果使用造测试数据的方式,会浪费大量的时间和精力,此时可以考虑使用工具,绕过后端接口逻辑,来模拟接口返回数据,进而达到测试目的,以下将从市面上常用的2个工具来介绍,分析其优缺点,来分享如何实现。


提示:以下是本篇文章正文内容,下面案例可供参考

一、 Charles 简单介绍

Charles 是一款常用的抓包软件,它不但可以满足日常的pc和app端的抓包工作,他支持windows ,mac, ios 和 Android 的手机系统,主要用于http/https 接口,同时提供断言功能,本文章就将使用“断言” 功能实现,修改接口返回数据,达到绕过后端把预期数据展示在前端页面。

二、本文使用场景

例如:页面报表中增加了大数据量“万亿” 单位,或者页面某些数据存在前端计算逻辑逻辑(四舍五入/单位换算)等。

三、Charles 通过修改后端返回值,在前端展示。

1.工具安装和注册

1. 安装包下载地址:     https://blog.csdn.net/guozhuanchen/article/details/105866345
2. 正常按着安装提示进行安装即可
3. 注册:进入注册地址:https://www.charles.ren/, 注册用户名,并生成授权码![在这里插入图片描述](https://img-blog.csdnimg.cn/9e02a254aa5b4a3a86d1f7635cd42a92.png)
  1. 回到工具页面点击-help–>register Charles 进行登陆即可,登陆后需要重新打开工具。如图:工具就可以正常使用了。
    在这里插入图片描述
    提示:如果只需要抓取http协议,到此步骤就可以了,如果需要抓取https协议,需要认证。

2.使用端点功能修改接口返参数

  1. 添加需要修改接口断点设置
    在工具栏中Proxy–>Breakpoint Settings。
    提示:不要添加Query 中的内容,不然会住去不到接口。
    在这里插入图片描述
  2. 添加完成后,可以从页面触发想要修改的接口,Charles 会抓取接口。
    在这里插入图片描述
  3. 查看修改修改结果:job_count字段值修改为9000,执行完成后,在页面上查看数据结果
    在这里插入图片描述
  4. 如果需要停止断点,让页面数据展示为实际接口返回的数据,可以停止断点。(黑色为停止状态)
    在这里插入图片描述

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了Charles 的断点使用,还有其他工具也可以实现该需求,后续文档中会给大家提供一下Fiddler的使用方式


http://chatgpt.dhexx.cn/article/IHmIOnXD.shtml

相关文章

前端测试一共有哪几种?

前言 哈喽,大家好,我是海怪。 最近有不少朋友找到我聊了聊测试相关的内容,发现他们对测试的分类有些迷茫。实际上测试一共就 3 种:E2E,集成,单测,其它的功能测试、UI 测试、界面测试只是它们中…

聊聊前端测试那点事儿

虽然如今前端测试这个事已经被大家所认可了,但我见过做前端测试的团队并不多,能把前端测试做好的团队,就更加凤毛麟角了。 这个现象背后的逻辑是:编写前端测试其实非常困难。 在编写测试代码时,我们有很多事情要考虑…

前端测试如何做?

前端测试大家天天做。但是你知道前端测试是怎么做的吗? 什么是前端测试? 前端测试是测试图形用户界面(GUI)、web应用程序或软件的功能和可用性的一种测试技术。前端测试的目标是测试整体功能,以确保web应用程序或软件的表示层在连续更新中没有缺陷。 …

前端测试

1.什么是测试 测试是一种验证我们的代码是否可以按预期工作的方法。 换句话说就是写一些代码来验证一段代码是否能得到预期设计代码时所期望的结果。 被测试对象可以是样式,功能,流程,组件等。 2.前端测试的意义(这里主要指单元…

Oracle一次插入多条数据(批量插入)

语法: INSERT ALLINTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n)INTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n)INTO tableName (column1, column2, column_n) VALUES (expr1, expr2, expr_n) SELECT c…

oracle建表和插入数据

1.建表 File-->New-->Table 2.建表字段,如果写int的话,会报错 3.建立主键 4.点击应用 5.查看自己建好的表格 6.插入数据(日期这样子) INSERT INTO T_USER(USER_ID,USER_ACCOUNT,REAL_NAME,SEX,BIRTHDAY) VALUES(2,LiSi,李四,1,to_date(2020-2-2,…

Oracle数据库建表与插入数据

Oracle数据库建表和数据插入 本机环境表的建立插入数据 本机环境 windows10-64位 oracle12c 时间:2020-05-26 使用SQL Developer 表的建立 create table tableName ( 属性名 类型 约束, 属性名 类型 约束, . . . 属性名 类型 约束);如&…

oracle一次插入多条数据(insert all)

分享一个零基础,通俗易懂,而且非常风趣幽默的人工智能教程(如不能直接点击访问,请以“右键”->“在新标签页中打开链接”方式打开)网站,网址:https://www.cbedai.net/gnailoug/ 问题 公司的项目,有个功…

oracle数据库创建表并插入数据

这里以创建一个学生表student为例子,表里面字段有id,name,sex,age,math,english,其中id是主键,其他的不为空,语法如下所示: create table student(id number…

Oracle数据库----表中数据的操作(插入、更新、删除数据)

文章目录 一、插入数据插入多行数据的简单方法:1、将表一的全部数据添加到表二中创建副本Courses1,只复制Courses的结构将Courses表中的数据拷贝到Courses1中创建副本的同时复制结构和数据 2、一次性向单个或多个表中插入不同的数据 二、更新数据使用UPD…

Vue 视频教程分享

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js) 大小:6.62G 解压密码:无 链接:https://pan.baidu.com/s/1uBAxS0RvyXCD8uoFU7NXQA 提取码:h4fd

Vue零基础实战教程

Vue零基础实战教程 带有基本 Vue js 应用程序的 Vue。Vue.js 是一个流行的前端 JavaScript 框架。学习vuejs,成为vue开发者 课程英文名:Vue from Scratch with Real Life Vue JS Web Application 此视频教程共8.0小时,中英双语字幕&#x…

Vue基础教程

title: Vue基础教程 date: 2022-01-26 21:09:30 tags: [前端框架,Vue] categories: 前 端 cover: Vue基础入门 基础知识: HTMLJavaScriptCSSNode环境和npm(依赖管理 )webpack(可选) 官方文档: 学习任何…

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]

视频链接:尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P001-050]_小白桶子的博客-CSDN博客 P51-100:尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P051-100]_小白桶子…

Vue 视频音频播放

<hlsPlayer :rowData"rowData" ref"child" /> <videoPlayer :rowData"rowData" ref"childTwo" /> 1.安装video.js依赖 npm install --save video.js 2.全局引入 import Video from video.js import video.js/dist/vide…

vue3 vue2 视频 图片 懒加载插件

一个npm的小插件&#xff0c;只有8kb左右的轻量级插件 可以设置图片和视频加载时的占位图&#xff0c;图片加载错误占位图&#xff0c;规定加载的区域 vue3的话具体可以看文档v3-lazyload-hyw - npm (npmjs.com) vue2的话文档在这里 v2-lazyload-hyw - npm (npmjs.com) 安装…

Vue3视频播放器组件Vue3-video-play入门教程

Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。 1、支持快捷键操作 2、支持倍速播放设置 3、支持镜像画面设置 4、支持关灯模式设置 5、支持画中画模式播放 6、支持全屏/网页全屏播放 7、支持从固定时间开始播放 8、支持移动端&#xff0c;移动…

Vue3全套教程合集

Vue3全套教程合集 点击跳转具体教程&#xff0c;以下所有教程基于脚手架书写&#xff0c;运行代码需要在脚手架环境。 一、Vue3学习-初识Vue3、创建Vue3.0工程 二、Vue3学习-分析工程结构、初识setup 三、Vue3学习-ref函数、reactive函数、Vue3响应式原理 四、Vue3学习-Vue3的…

vue怎么设置封面_vue设置视频封面教程 vue如何修改标题

现在使用vue的伙伴很多&#xff0c;可以说是视频编辑美化软件排前几的软件&#xff0c;能够使用的功能非常多&#xff0c;有用户就想知道如何才能进行标题的修改&#xff0c;视频的封面又是怎么设置的&#xff0c;想知道的伙伴&#xff0c;可以在iefans看看详细的操作方法哦&am…