资讯专栏INFORMATION COLUMN

APP测试的极简Mock方法——Mock服务端接口

godiscoder / 1533人阅读

摘要:本文适用的场景在对移动端的纯移动端功能或者前端页面的纯前端功能进行测试时,服务端接口返回的数据不满足要求,或者制造测试数据比较复杂,需要使用方法来快速构造数据。进入官网后,首先创建一个项目,一个项目包含若干个接口,我们最终模拟的是接口。

本文适用的场景:在对移动端APP的纯移动端功能或者前端H5页面的纯前端功能进行测试时,服务端接口返回的数据不满足要求,或者制造测试数据比较复杂,需要使用Mock方法来快速构造数据。

Mock这个单词有模拟、效仿的意思,在软件开发中,通常指一个模拟的对象。这个模拟对象是真实对象的替代品,有了Mock,团队成员之间可以并行工作,而不必等待需要依赖的其他接口完成后才能开始工作。

在开发阶段,尤其是联调之前,Mock经常被开发人员用来进行调试;

在测试阶段,测试人员也可以用Mock提高我们的测试效率,不止在单元测试的测试脚本中可以应用,也可以应用在系统级别的测试上;

那怎么进行服务端接口级别的Mock呢,非常简单,只需要两个工具:

抓包工具Charles

Easy Mock

Charles是一款抓包工具,我们要用Charles做移动端APP的代理,目的是为了把Request路由到Easy Mock的接口上,得到我们的Mock数据。

Easy Mock是一个可视化、能快速生成模拟数据的持久化服务,正如其名,Easy Mock能使Mock变得非常简单,令使用者爱不释手。


下面开始进入正题,Mock服务端接口的步骤如下:

1、Easy Mock创建接口

Easy Mock有着非常友好的可视化界面,操作起来非常简单。进入Easy Mock官网后,首先创建一个项目,一个项目包含若干个接口,我们最终模拟的是接口。

(1)我们创建了一个命名为test的项目,如下图,这个项目的基础url是/api。

(2)接下来,创建接口,如下图,左边是我们想要构造的接口返回的JSON数据,右边是这个接口的配置。

(3)将这个接口补充完成,如下图,这个接口配置的URL是/index/v6,实际的URL就是/api/index/v6,也就是父路径是这个接口所属的项目的基础URL。

(4)创建完成后,点击预览,这个接口就可以被访问了,完整的URL是https://www.easy-mock.com/moc...,我们把最后的#!method=get去掉,依然可以正常访问,所以这个URL就是我们的移动端APP应该去请求的接口。

本次进行Mock的场景是服务端接口已经存在,但是数据不满足要求,所以Response是通过Charles里的Copy Response复制到输入框里,然后在这个基础上做修改,这样比完全创造Response要简单得多。

现在, 要解决的问题就是怎么让移动端APP的请求重定向到这个URL上,就可以得到我们想要的Mock数据了。

2、Charles修改路由(Map Remote)

(1)我们把Charles设置成移动端APP的代理服务器,这样可以拦截到请求,再借助Charles的Map Remote功能,就可以把请求重定向到我们的Easy Mock的URL上。

(2)我们用移动端APP来请求这个接口,通过Charles可以看到,移动端APP的请求URL从http://backend.test.env/api/i...://www.easy-mock.com/mock/5b6ce6ccbf1ebd4a1974c563/api/index/v6这个接口上,而我们的请求参数query都完整地带着。

这样,移动端APP就能收到我们的模拟数据了,通过修改Easy Mock的JSON,可以很轻松地Mock我们想要的数据。


Easy Mock的简单介绍

在上面的方法中,我们是通过手动的方式修改Easy Mock的Response,实际上,Easy Mock还支持一些比较好的特性,可以引入在单元测试的自动化测试脚本中,比如:

Mock.js,支持生成随机的数据、支持扩展更多数据类型、支持自定义函数和正则;

支持基于Swagger创建项目,以节省手动创建接口的时间;

通过Easy Mock CLI可自动生成API;

支持通过请求对象编写逻辑,实现响应式数据,支持自定义响应;

支持RESTful

具体可移步到Easy Mock的官方文档进行查阅。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/8852.html

相关文章

  • 浅谈前端mock

    摘要:引言前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用方式来避免这个问题。可能会涉及到门技术,分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。 引言 前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用mock方式来避免这个问题。本人参考了大量文章,结合自己的经验,给出自己在mock上的一些理解。 1. 原理 何为mock,我认为mock主要就是通...

    elina 评论0 收藏0
  • 浅谈前端mock

    摘要:引言前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用方式来避免这个问题。可能会涉及到门技术,分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。 引言 前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用mock方式来避免这个问题。本人参考了大量文章,结合自己的经验,给出自己在mock上的一些理解。 1. 原理 何为mock,我认为mock主要就是通...

    xialong 评论0 收藏0
  • 前端开发如何做好本地接模拟

    摘要:前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟前后端并行开发,讲到过本地接口模拟,但不太细致。有哪些途径本地接口模拟一般分为工具层面和代码层面。因为本地接口模拟功能主要是针对的返回值为格式的异步请求,所以这种方式主要用文件。 前端开发如何做好本地接口模拟 之前有写过一篇 本地化接口模拟、前后端并行开发,讲到过本地接口模拟,但不太细致。这次细细的说说本地接口模拟。 1. 有什么...

    ACb0y 评论0 收藏0
  • vue-vue项目中mock.js的使用

    摘要:表示需要拦截的请求类型。添加信息拦截请求,调用函数先看一下这个是什么获取信息更改后输入标题,点击提交,再点击获取,可以看到返回了我们提交的数据,并且是对象的形式,拿到数据后就可以做进一步的操作了。 mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求...

    Object 评论0 收藏0
  • 浅谈前后端分离与实践(一)

    摘要:前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。 一、起源 (故事纯属虚构,如有雷同,纯属巧合)传说在很久很久以前,我们有志之士有了个创业的想法,于是乎开始了自己的创业之梦,但是人手不足啊,于是乎所有角色老子一个人全包了: Roles: PM, DBA, RD, FED, Des...

    dantezhao 评论0 收藏0

发表评论

0条评论

godiscoder

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<