APP测试的极简Mock方法——Mock服务端接口
本文适用的场景:在对移动端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的官方文档进行查阅。