mock方式进行客户端分析【Web前端+App】

最新推荐文章于 2024-04-12 01:41:42 发布
最新推荐文章于 2024-04-12 01:41:42 发布
阅读量388 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LittleGirl_orBoy/article/details/104587669
版权

设计mock响应结果，满足调用链整体需要，验证前端调用链是否正确

需求须知

  • 业务逻辑
  • mock接口设计及调用链说明

注意点

  • 所有的请求，都不会传到服务端
  • 所有的响应都是人为模拟
  • 不管是页面请求还是模拟响应都必须覆盖完整

测试点

  • 页面展示：基础展示
  • 页面交互：基础交互
  • 请求数据验证：验证调用mock接口入参正确【可通过抓包验证】
  • 响应数据前端处理验证：传参显示、 响应渲染（异常响应数据渲染、大数据量渲染、小数据量渲染）、 参数处理
  • 是否存在接口轮询需求
  • 客户端加解密测试
  • 其他专项测试

测试工具

  • 公司自研mock系统，进行相关接口的mock设计
  • charles代理工具：map remote远程文件（模拟跳转预发布的网站）、map local本地文件（使用本地文件替换线上关键资源）、rewrite挡板（基于原有数据做修改–修改请求、响应等）

mock接口测试方式

  • 全mock，前后端分离，即服务端、客户端测试完全分开的情况。这种情况需要结合整体的项目测试流程考虑，需求分析-开发文档分析-测试分析-设计测试用例-冒烟测试、分支提测时间【服务端、客户端】、联调时间、主干测试时间-验收测试-发布上线、线上监控-测试复盘，其中根据实际情况，需要确认专项测试：App版本兼容、设备兼容、浏览器兼容、设备版本兼容、升级测试、网络测试、性能、安全、降级、中断、干扰测试等，在哪个环节测试，这些需体现在测试计划中。
  • 部分mock，一些特殊情况，如：数据储备不足、响应情况复杂不易得等。该情况属于集成测试中一种测试手段，前后端测试不十分分离，只一些特殊情况用到mock工具进行即可。当然mock是一种模拟响应的手段，必要时也可设计测试桩进行。

若有不同意见或补充建议，欢迎指正

向小雅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
接口自动化中 客户端的 mock的应用
谨言的博客
07-03 313
mock 测试(mocks)是以可控的方式模拟真实的对象行为。程序员通常创造模拟对象来测试对象本身该具备的行为，很类似汽车设计者使用碰撞测试假人来模拟车辆碰撞中人的动态行为。 之所以使用mock测试，是因为真实场景很难实现或者短期实现起来很困难。主要场景有： 真实对象可能还不存在（接口还未完成） 真实对象很难搭建起来（第三方支付联调） 真实对象的行为很难触发（例如：网络错误） 真实对象速度很慢（例如：一个完整的数据库，在测试之前可能需要初始化） 真实对象可能包含不能用作测试（而不是为实际工作）的
mock测试工具
信仰
06-30 6618
什么是mock测试 mock常见场景 mock常用工具 实战 1，什么是mock测试 mock测试就是对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法 2，mock常见场景 （1）无法控制第三方系统某接口的返回，返回的数据不满足要求 （2）某依赖系统还未开发完成，就需要对被测系统进行测试 3，mock常用工具 （1）单元测试级别的mock工具：Easymock、jMock、Mockito、Unitils Mock、PowerMock、JMockit等 （2）接口测试级别的.
mock客户端
12-19
mockplus客户端，最新版本可供下载。官方主页也可下载。
程序设计之测试用例分析，关于客户端开发之我鉴（二）
一个iOS开发者的小窝
01-03 814
上一篇讲到，基础的数据类都已经都准备好了，那就开始我们的变成之旅吧。 有了这些基础的数据类型我们再来仔细梳理一下整个程序的几个简单的测试用例：1用户浏览简讯列表查看自己感兴趣的新闻。2用户找到感兴趣的新闻，浏览新闻的内容。3用户查看新闻的图片下载收藏。4用户登录自己的账号对新闻进行评论，收藏，分享等操作。 通过以上四点，我们可以显而易见的发现，基本上所有的显示出来的数据，都应该是从银河系以内的某个
客户端Mock服务端的JSON数据
u011904605的博客
02-24 972
http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 客户端Mock服务端的JSON数据 场景1：服务端和客户端已经制定了JSON数据的格式，但是数据组还没能给出真实数据，客户端的开发走服务端前面 场景2：客户端工程师已经完成story，而服务端数据一直不正常，影响测
前端开源库-koa-mock-response
08-30
**前端开源库 Koa-Mock-Response** 在前端开发中，常常需要与后端API进行交互，但在某些情况下，如单元测试、快速原型设计或离线开发时，直接依赖真实的后端服务可能会带来不便。这就是`Koa-Mock-Response`这个开源...
前端开源库-supertest-as-promised
08-30
`supertest`是一个非常强大的HTTP客户端库，它允许开发者以一种简洁的方式对Express、Koa、Hapi等Node.js web应用框架进行端到端的测试。它通过模拟HTTP请求来验证服务器的响应，提供了一种优雅的链式API，使得编写...
FandangoDiscover-Mock
07-10
【标签】"JavaScript"：这个标签表明整个项目是用JavaScript语言编写的，JavaScript是一种广泛用于Web开发的脚本语言，特别是在客户端。它允许开发者在用户浏览器上执行代码，创建动态和交互性的网页内容。在...
Node.js-简单的数据mock服务器
08-10
在IT行业中，Mock服务器是一种非常实用的技术，尤其是在前端开发中，它允许开发者在后端服务未完成或不可用时，模拟返回预设的数据，以便进行客户端应用的测试和开发。Node.js作为一款强大的JavaScript运行环境，...
uni-app-pc-demo：与app兼容的uniapp演示
02-18
【uni-app-pc-demo】是一个基于uni-app框架的项目，主要目标是展示如何在PC端实现与移动应用兼容的Web应用程序。uni-app是一款由ECharts团队开发的多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、...
一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！
FungLeo's Blog
05-21 1140
一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！ 这是一个我自己发起的项目，Github 地址是 https://github.com/fengcms/simple-mock ，其完整支持 RESTFul 接口的 Mock 服务。当然，支持非 RESTFul 风格接口也不在话下，关键是使用十分简便。 我在接口演示文件里面，演示了 RESTFul 标准写法、分页列表、上传文件、登录接口等等多种。通过简单配置，还可以支持校验登录状态。此外，还支持将其它的接口代理过来使用。 我本着最不需要额
Mock服务端：客户端Get请求，返回json数据两种方式
weixin_30266885的博客
08-19 511
Mock服务端：客户端Get请求，返回json数据两种方式：1，直接在response中返回json数据 2，通过json文件返回； 准备工作： wiremock-body-transformer-1.1.6.jar wiremock-standalone-2.14.0.jar 安装java运行环境(jdk等） 一，直接在response中返回； 说明： mapping...
工具使用(3)--mock
conlin233的博客
11-15 240
mock测试是以可控的方式模拟真实的对象行为.程序员通常创造模拟对象来测试对象本身该具备的行为 之所以使用mock测试,是因为真实场景很难实现或者短期实现起来困难,主要场景有 -真实对象可能还不存在(接口还没完成开发); -真实对象很难搭建起来(第三方支付联调); -真实对象的行为很难触发(网络错误) -真实的对象是用户界面,或包括用户界面在内 客户端mock 接口自动化测试客户端mock: 如:一个接口还没开发好,就要自己造一个接口的返回值,跟预期结果匹配 import unit
玩转Mock.js，前端也能跑的很溜
wwf1225的博客
03-10 110
https://baijiahao.baidu.com/s?id=1649513234963176773&wfr=spider&for=pc
5 个最佳 Mock 工具_mock工具
最新发布
2401_84239901的博客
04-12 1285
Apifox 以其强大的模拟功能而著称，兼容，并支持 Nunjucks 和自定义脚本，以适应各种场景。它的用户界面友好，你只需定义字段名和类型，Apifox 便会根据你的结构生成丰富的数据。当你需要大量列表数据时，Apifox 简化了创建过程，无需手动输入，只需通过简单的循环结构便可处理重复任务。如果你需要分页数据，该平台可以模拟这些场景并根据你的需求定制总数据点和页面大小。但的模拟功能远不止于此 - 它还能模拟延迟、加载状态和错误条件，使其成为模拟生成、测试和 API 管理的不二之选。
自动化测试Mock神器：轻松模拟HTTP请求！
m0_58026506的博客
11-13 864
在日常测试过程中或者研发开发过程中，目前接口暂时没有开发完成，测试人员又要提前介入接口测试中，测试人员不仅仅只是简单的编写测试用例，也可以通过一些mock的方法进行来提前根据接口测试的情况进行模拟返回接口的信息，进行模拟接口各种场景的异常。
用上这个 Mock 神器，让你的开发爽上天
1
04-20 179
作者：戈城 客户端的痛苦 作为客户端，最痛苦的是什么时候？ 每个迭代，需求文档跟设计稿都出来了，静态页面唰唰两天就做完了。可是做客户端又不是简单地把后端吐出来的数据放到页面上就完了，还有各种客户端处理逻辑啊。 后端接口还没出来，我就得边写代码边测客户端效果，又没有真实数据。有人建议用 Mock 工具，可是每个接口都要自己写 Mock 规则，这得浪费多少时间呀。 等到后端好不容易把接口写出来了，一对接联调，好多字段的数据又跟我 Mock 的数据对不上，又得重新改代码。 每个迭代都是一场折磨。 就是那种，.
AppMock 工具设计及原理
人生若只如初见
07-27 2282
目录 一、目前现状 二、为什么不用Charles 三、如何实现 1、实现方案： 2、实现成本： 3、基本流程 四、实现结果 5、如何使用 一、目前现状 开发过程中和QA测试过程中遇到下列情况： 1、想快速看到当前app api接口请求情况，以及打点请求情况，目标：帮助快速定位和排查问题； 2、制造数据和场景比较复杂时，不能够给自己手机或者模拟器上 的app去 mock某个指定接口（1~n个）的数据返回并且不影响其他人； 3、对于新业务需求，接口的入参和返回定义完后，客户端会被.
众多mock工具，这一次我选对了
热门推荐
官方推荐
07-27 4万+
一款超级好用的mock工具送给大家，助你提升开发效率
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
12-08
为了实现动态路由和用户权限路由，我们需要进行以下步骤： 1. 安装依赖 ```shell npm install vue-router@4 pinia element-plus mock -S npm install @types/mock -D ``` 2. 创建路由配置文件 在src文件夹下创建router文件夹，并在其中创建index.ts文件，用于配置路由。在该文件中，我们需要定义路由的各个页面组件，并根据需要配置路由的子路由和路由守卫。例如： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '@/views/home/indexName.vue' import Login from '@/views/login/index.vue' import NotFound from '@/views/404/index.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, meta: { title: '首页', requireAuth: true // 需要登录才能访问 } }, { path: '/login', name: 'Login', component: Login, meta: { title: '登录' } }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: { title: '404' } } ] const router = createRouter({ history: createWebHistory(), routes }) // 路由守卫 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.meta.requireAuth && !token) { next('/login') } else { next() } }) export default router ``` 3. 在main.ts中挂载路由 在main.ts中，我们需要将路由配置文件挂载到Vue实例中，以便在应用中使用路由。例如： ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 4. 创建权限控制文件 在src文件夹下创建permission文件夹，并在其中创建index.ts文件，用于控制用户权限。在该文件中，我们需要定义用户的权限列表，并根据需要判断用户是否有权限访问某个路由。例如： ```typescript import router from '@/router' const whiteList = ['/login'] // 不需要登录即可访问的页面 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (token) { if (to.path === '/login') { next('/') } else { // 判断用户是否有权限访问该路由 const hasPermission = true // 根据实际情况判断用户是否有权限 if (hasPermission) { next() } else { next('/404') } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next('/login') } } }) ``` 5. 在App.vue中挂载路由渲染入口 在App.vue中，我们需要将路由渲染入口挂载到模板中，以便在应用中渲染路由。例如： ```html <template> <div id="app"> <router-view /> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值