1.背景介绍
当开发人员需要调试一个网页是否运行正常,并不是简简单单地调试网页的HTML、CSS、脚本等信息是否运行正常,更加重要的是网页能够正确是处理各种HTTP请求,毕竟网页的HTTP请求是网站与用户之间进行交互的非常重要的一种方式,在动态网站中,用户的大部分数据都需要通过HTTP请求来与服务器进行交互。Postman插件就充当着这种交互方式的“桥梁”。
2.知识剖析
Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试。
它能够发送任何类型的HTTP requests (GET, HEAD, POST, PUT..),附带任何数量的参数+ headers;
支持不同的认证机制(basic, digest, OAuth),接收到的响应语法高亮(HTML,JSON或XML);
Postman 能够保留了历史的请求,这样我们就可以很容易地重新发送请求,有一个“集合”功能,用于存储所有请求相同的API/域。
1.下载安装postman,postman安装方法教程
2.有时需要在不同的环境下跑相同的测试,此时可以通过设置环境变量来动态选择。点击右上角的设置按钮:Manage Environments,填写该环境的名称:如测试环境,并在key和value中填写需要的键值,创建好所有环境后,在右上角下拉列表选择需要的环境就好
postman界面介绍:
1、postman调试的历史记录,保留了每次测试时的请求参数;
2、在Postman中,Collection类似文件夹,可以把同一个项目的请求放在一个Collection里方便管理和分享,Collection里面也可以再建文件夹;
3、设置environment variables(环境变量)和global variables(全局变量),点击右边的眼睛可以快速查看当前的变量;
4、选择HTTP 请求类型的地方,各种常见的不常见的非常全;
5、请求URL,两层大括号表示这是一个环境变量,可以在3的位置选择当前的environment,环境变量就会被替换成该environment里variable的值;
6、点击可以设置URL参数的key和value;
7、点击发送请求;
8、点击保存请求到Collection,如果要另存为的话,可以点击右边的下箭头;
9、设置鉴权参数,可以用OAuth之类的;
10、自定义HTTP Header;
11、设置Request body;
12、显示发起请求之前执行的脚本;
13、在收到response之后执行的测试;
14、返回数据的格式,Pretty可以看到格式化后的JSON,Raw就是未经处理的数据,Preview可以预览HTML页面。
3.常见问题
post请求里面,有多种传参方式:
1.form-data
这种方式需要在header里面声明Content-Type,然后再添加表单内容,另外需要注意的是,有文件上传操作的时候,是可以使用表单上传的,参数里面是可以选择文件的。后端获取的时候要注意,有些框架对同时存在参数和文件的请求获取顺序是有要求的,必须先获取文件再获取其他参数,不然会报错。
2.x-www-form-urlencoded
同样的需要在header里面声明Content-Type,x-www-form-urlencoded类型的数据会将表单转换成键值对。
3.raw
可以上传json/javascript等格式的数据,需要在header里声明不同的Content-Type,以前遇到过传对象时,使用form-data无法完成,就手动用raw拼成了json对象
4.编码实战
POSTMAN的断言
1.判断HTTP返回状态码为200 2.判断响应正文中是否包含:"statusCode":200 3. 解析响应正文,并判断statusCode的值是200,message的值是”Success.在SNIPPETS中,往下拉,有一项”Status code:Code is 200”,这个就是为场景中的第一条准备的,就是判断HTTP返回状态码是否为200。点击这一项,可以看到在其左边出现了:
其中tests["Status code is 200"]中的tests是一个内置对象,tests["Status code is 200"]是指为这个断言起个名称叫”Status code is 200”,这个名称可以自行修改。responseCode.code === 200中的responseCode是内置对象,responseCode对象中有个属性是code,是指HTTP状态码的code,判断code是否为200.综合起来,这句代码的意思是:名称为”Status code is 200”的断言中,判断responseCode对象的code属性值是否为200.同样在SNIPPETS中,找到一项”Response body:Contains string”,点击后,在其左边出现了:
我们需要修改一下:
在第三条,很显然我们需要解析JSON串,所以,在SNIPPETS中找到”Response body:JSON value check”并点击,在其左边出现了:
这里面其实是JS代码,jsonData变量其实是解析完JSON后的对象,在JS中,一个JSON对象获取其属性的值,直接是用jsonData.value,于是,我们把代码给修改一下:
这样一来,我们可以看到一共有tests的断言4个,点击Send,发送请求,在响应区内可以看到如下图: