fiddler-10-结合 Mock.js 伪接口数据进行测试(下)

前言

你会mock吗?第三方支付接口怎么测?数据只有一条,测不到前端的分页功能?

常见的 Mock 方式:

  • 将模拟数据直接写在代码里
  • 利用 JavaScript 拦截请求
  • 利用 Charles、 Fiddler 等代理工具拦截请求

本篇利用 fiddler 拦截,当您学会使用 fiddler 拦截 + Mock.js 后你会认识到它的强大的原因之一,不扯了直接开始吧。

一、生成多条数据进行测试

1、fiddler 抓包将接口返回数据拿下。

2、粘贴至 mock.js 创建接口,点击一下【格式化】美化您的数据:

3、删减,我们只要一条数据就好了,如下:

4、开始 Mock.js 常用语法表演:

{
  "msg": "查询成功",
  "obj": {
    "current": 1,
    "field1": "",
    "field2": "",
    "item": null,
    "pages": 1,
    "records|10": [{                    // 每页 10 条数据,我们写固定10条显示
      "updateDate": "@datetime",        // 随机日期 + 时间
      "num": 100,
      "delFlag": "0",
      "type": "1",
      "cateName": "加盟优惠券:@cname",  // 随机名称
      "isUp": "1",
      "updateBy": "@id",                // 随机id
      "premise": "0",
      "scope": "3",
      "showHide": "1",
      "startTime": "@datetime",         // 随机日期 + 时间
      "id": "@id",
      "state": "1",
      "isRepeat": "0",
      "day": 0,
      "createDate": "@datetime",       // 随机日期 + 时间
      "useExplain": "会场活动:@cname", // 随机名称
      "howMany": 0,
      "timeLimit": "1",
      "limitGet": "55",
      "createBy": "@id",             // 随机id
      "money|100-1000": 100,         // 随机面值: 100-1000
      "name": "满减优惠:@cname",    // 随机名称
      "endTime": "@datetime",
      "remarks": ""
    }],
    "size": 10,
    "total|5-25": 5                 // 10个一页,随机 5-15 个,那么将有1-3页
  },
  "status": "1",
  "success": true
}

5、回到 fiddler ,点击 AutoResponder,将左侧需要造的接口拖拽进来:

6、更改为 Mock.js 造数据的地址,复制粘贴至 fiddler 中:

7、fiddler 粘贴地址,及开启拦截:

8、前端查询数据测试,有没有分页看你的了:(发现没有分页,那就可以去提bug了)

二、支付 mock

1、编写您的数据,首先您的知道当什么时候返回充值状态的数据,而且返回的数据有哪些?

比如简单的:1-3 表示:成功,失败,待确认

2、当前端某个出发请求支付状态,我们就可以造各种数据进行模拟支付测试,当然还以一种办法,直接充钱,找公司财务报销。。。

支付 mock 不细说,大家可以按照这样的方法进行 mock 支付测试,最好结合接口文档进行,不然就是自己在瞎搞了。欢迎来QQ交流群一起学习:482713805

原文地址:https://www.cnblogs.com/gsxl/p/12173906.html

时间: 2024-07-30 05:32:08

fiddler-10-结合 Mock.js 伪接口数据进行测试(下)的相关文章

fiddler-9-结合 Mock.js 伪接口数据进行测试(上)

前言 fiddler 结合 Mcok.js 伪接口数据究竟如何使用呢?我将站在测试的角度出发进行使用,当然前端开发人员也是可以使用,本篇是首先熟悉 Mock.js 的基本使用和基本语法. 如果您需要安装 Mcok.js 请参考:https://www.cnblogs.com/gsxl/p/12173856.html 一.简单了解 Mock.js 使用 1.登录页面如下:  2.输入任意账号密码(不存在账号密码则是新注册) 3.添加项目:  4.创建接口:  5.Mock.js 语法:竖杠大法 |

vue中使用axios(异步请求)和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu

Mock.js开发中拦截Ajax

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插

Mock.js使用

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki 安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js"></script>; 数据模板格式: 'name|rule': val

Mock.js 与 fiddler 前端模拟数据与拦截请求

最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 http://mockjs.com/ 什么入门之类的 看官网就会~~~ Fiddler   web调试利器 便于我们调试前后端数据等. Fiddler是一个web调试代理.它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,

前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开发的应用(嘿嘿,毕竟这个mock应用的开发人员较多). 内容 1.Mock的安装 根据官方文档安装mock,运行安装命令安装即可. npm install mockjs 2.Mock的简单介绍 2.1.mock数据模板定义 根据官方文档示例介绍,输出一个随机数的‘*’字符串来展示mock的数据模板,

前后端分离——前端项目使用Mock.js 模拟数据

一.简单介绍一下Mock.js 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富支持生成随机的文本.数字.布尔值.日期.邮箱.链接.图片.颜色等.(详情见官网) 拦截 Ajax 请求不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据.安全又便捷 文章会用到的API(也是Mock经常使用的API): Mock.mock(url, type, data) 参数名 参数需求 参数描述 例子 url 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock ty

使用RAP2和Mock.JS实现Web API接口的数据模拟和测试

最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微信小程序或者APP团队大家可以同步开发,在最初约定一些接口的输入JSON数据和输出JSON数据,但是随着项目的进度开展,这些数据结构一直有所变化,那么我们模拟的JSON数据格式也需要协同变化,但是很不幸既然大家忙着开发,接口协调的事情肯定优先级没那么高,即使每次记得协调接口数据,也不一定能够完全一致