前端开发小技巧之Postman

专职前端开发也有很长一段时间(10 months) =.= 了 其中用到各种各样小技巧 小工具。 零零散散的,今天决定把他们陆陆续续记录下来,O(∩_∩)O哈哈~

今天的主题是接口测试工具-Postman,它是Chrome浏览器上的一款半免费扩展工具
主要用来调试各种RestFul 接口。当然你需要才能拥有它。不愿意的童鞋也莫要惊慌,文章的末尾放上了Postman和Postman-Interceptor的网盘地址.(“为啥不直接放这里???!!!” “没错! 我就是要忽悠大家看完这篇文章 嘿嘿嘿~”)

场景

产品开发流程中 常常很耗时的一块就是前后端程序员的接口联调,动辄 数据类型不对,”我要的数组,你为啥传个对象啊~~” “为啥我一POST, Status Code就500啊” 总总问题。当前后端好不容易联调完,抛给测试,测试有需要重新在页面里输入一个个数据验证表单结果对否。。简直是灾难。。

解决

如果能有一个东西又能从当接口文档,又能反复多次测试接口,还能在团队之间共享,接口的理想反馈,那该多好!于是Postman出现了!
前端开发小技巧之Postman_第1张图片

一个Postman 大概就长成上面这样
[1号区域] 你可以不停的创建新的接口实例
[2号区域] 敲上你的接口地址 选着对应的method(POST or GET) params 可以编辑参数
[3号区域] 点击蓝色Send按钮 就可在这里看到返回结果啦!!! 是对是错,拉出来溜溜

POST 接口

GET型的方法都很容易将参数写在params里或者直接放在URL上但是POST 方法怎么办呢?别急看下面两张图

前端开发小技巧之Postman_第2张图片

前端开发小技巧之Postman_第3张图片

第一张图是大家都很熟悉的我们调用了POST接口后,相应的参数会显示在Form Data 里,我们只需利用 Ctrl+C Ctrl+V
将其粘贴到 图二的body form-data(bulk edit模式)里去就行了,喜欢Key-Value模式的同学也可以点击 “Key-Value Edit” 按钮 去自由编辑 这样一来我们想怎么调用接口就可以轻松实现啦~~~ 再也不用在页面里点来点去 填写一大堆数据然后满怀期待的点击 “提交” 了。。。

Tests

对接口撰写测试用例也是常见的事,我们可以在Tests栏目里写些 希望Status Code = 200 之类,不了解语法也没事,右边的snippets 提供很多常用的语句

前端开发小技巧之Postman_第4张图片

Runner

写完Tests 之后当然就是跑这些case了,我们可以点击左上角的Runner 选择好对应的Collection 和environment 后就可以Run Tests啦 !有没有很兴奋?测试同学再也不用在网页上瞎JB点了

前端开发小技巧之Postman_第5张图片

Collections & Environment

Postman的左边栏可已创建文件夹一样的collection,我们可以根据系统将不同的接口归类。再利用Environment来配置环境变量,比如一个系统可能有local test dev omg exp build 多种环境

理想的工作流

每一个项目的Collection可以在后端 前端 测试之间完美share

Last but not Least

我要说的是Interceptor. 作为插件Postman的插件 =。=可以获取到浏览器的Cookie等认证信息。即,如果你需要测试的接口需要登录,开启Interceptor后你就可以自由使用啦

对对对 还有网盘地址

点这里

你可能感兴趣的:(web前端基础)