阅读 526

前端 postman 进阶指南

本文适于对于需要自己写接口,自己测试的人,如果没此需求的人,可收藏后续学习。

最近不少时间在写接口,发现之前用的多但是不深的 postman 让我惊艳,原来它不仅能做发送请求,而且包含了:

  • 层级管理
  • 环境管理
  • 自动化测试
  • 团队协作
  • 其他功能

今天就从前端视角为大家一一介绍一下。

一、层级管理

postman 的层级分为四层,分别为:

  • workspace
  • collection
  • request
  • example

workspace

workspace 工作空间,你可以理解为不同的身份和组,比如你在家自己写的项目和公司的项目就不应该在一个 workspace,你在 A 组借调到 B 组,也应该创建不同的 workspace,具体操作如下: image.png 我们点击 postman 左上角的 workspaces 即可弹出 workspaces 的列表。 image.png 我们可以点击 ··· 进行编辑操作。

至于编辑界面和新增多个 workspace 这里就不做演示了,相信大家都懂。

collection

一个 workspace 可以创建多个 collection,collection 相当于项目的含义,例如你所在项目组有小程序和后端系统,那就应该建立两个 collection。

collection 不仅可以有一个级别,而是多个级别,我推荐是根据 controller 去创建,一一对应,并且如果接口有参数,请需要为每个接口创建一个文件件,其最后的结构大概如此: image.png

request 和 example

request 就是单个请求,至于怎么发请求,之类的,相信用过的都会,这里就不做演示了。至于 example ,只是为了展示测试用例,并不能真正执行,作为前端也用不到,这里也不做赘述。

二、环境管理

创建环境

在日常开发中,我们有本地开发环境、测试环境、预发布环境、生产环境,不同环境之间的除了请求地址和个别点不同外,其他都是相同的,以前都是 CV 大法,现在 postman 给我们提供了好用的环境管理,具体操作如下: image.png 点击左侧的 Environments,然后点击 号,就可以创建环境: image.png 我们在每个环境中都建立 domain 字段,例如:

环境使用

image.png 首先我们圈 1 中环境列表下拉框,选择一个环境,然后再我们要使用的地方,使用 {{变量}} 的语法即可引用到此变量,这也就是是 postman 的变量使用方式。

postman 中的变量,不仅可以出现在 URL 中,而是可以出现在任何能输出东西的地方,包括 body 参数和 params。

自动化测试

我们自己在写接口时,时长需要去比对结果是否与预期一致,而且需要确保上到测试环境和预发布后的正常,这就需要做的工作比较多了,而 postman 提供了简单易用的自动化测试方法。

console 和控制台

image.png 我们在请求中可以看到 Tests 这样的菜单,此处就是我们写测试的地方,并且在左下角还有类似 console 的控制台,方面我们做调试和输出,例如上面我们就输出了 ----hello world---

基本使用

image.png 我们在右侧看到它有很多的代码提示片段,我们点击 Status code: Code is 200,然后就会发现左侧内容区多出了如下内容:

pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});
复制代码

然后我们点击 Send 发送按钮后,在底部的 Test Results(1/1) 中就有结果,绿色的 PASS 说明通过了。

pm 对象和断言

上面的测试代码实际包含了两个重要内容,一个是 pm 对象及内容,另一个是断言的写法。首先说明 pm 对象就是 postman 的简写,而其断言实际用的就是 Chai 断言库。 image.png 对于 Chai 断言库,网上已经有较多的教程了,包括官网,我这里就不做赘述,接下来注重讲解一下 pm 的对象。

pm 对象主要包含了三点功能:

  • 断言功能
  • 获取请求和响应结果
  • 获取和设置变量

断言功能

  • pm.test("string", fn) 一个 test 相当于一个用例
  • pm.expect(xxx).to 是 Chai 库断言的 expect 写法
  • pm.response.to.be 对 response 进行断言

获取请求和响应结果

  • pm.request. 获取请求相关信息
  • pm.response. 获取响应相关信息
    • pm.response.json() 将响应结果的的 data 转为 json 格式
    • pm.response.code 状态码
  • pm.cookies 获取和设置 cookie
    • pm.cookies.get("xx")获取一个 cookie
    • pm.cookies.set("xx", "xxx") 设置一个 cookie

获取和设置变量

  • pm.environment 获取和设置环境变量
    • pm.environment.get("xxx") 获取一个环境变量
    • pm.environment.set("xxx", "xxx") 设置一个环境变量
  • pm.globals 获取和设置一个全局变量(全局变量后面会再提起)
    • pm.globals.get("xxx") 获取一个全局变量
    • pm.globals.set("xxx", "xxx") 设置一个全局变量
  • pm.collectionVariables 获取和设置一个集合例的变量(用法同上)
  • pm.variables 获取和设置变量(以上三者设置的变量都可以获取到)

常见断言

我们以如下响应结果为例,讲解一下常见的断言:

{
    "errno": 0,
    "data": [
        {
            "k": "a",
            "v": "art. 一(个); 每一(个); 任一(个)"
        },
        {
            "k": "A",
            "v": "n. 英语字母表的第一个字母; A音; 第一等; 第一个 abbr. 安培"
        },
        {
            "k": "a.",
            "v": "abbr. adjective 形容词"
        }
    ]
}
复制代码
  • 状态码断言
pm.test("status code is 200", () => {
    pm.expect(pm.response.code).to.eq(200)
})
复制代码
  • 错误码为 0

在我们工作中,很多时候并不以状态码作为判断依据,而是根据响应结果例的 errno 或者 code 作为判断依据,例如:

pm.test("errno is 0", () => {
    const response = pm.response.json()
    pm.expect(response.errno).to.eq(0)
})
复制代码
  • 判断响应结果为对象或者数组类型

因为接口返回的数据,我们并不能精确知道结果,例如我们通过把 {"name": "张三"} 作为判断依据,因为当用用户是李四的时候,测试就通不过了,所以一般仅需要判断其类型和重点之处即可:

pm.test("data is arrray", () => {
    const response = pm.response.json()
    pm.expect(response.data).to.be.a("array")
    pm.expect(response.data.length).greaterThan(0)
})
复制代码
  • 判断是否存在
expect('foobar').to.include('foo');
expect([1, 2, 3]).to.include(2);
expect('foobar').to.match(/^foo/);
expect({a: 1}).to.have.property('a');
expect({a: 1, b: 2}).to.have.all.keys('a', 'b');
expect({a: 1, b: 2}).to.have.all.keys(['a', 'b']);
expect({a: 1, b: 2}).to.have.any.keys('a');
复制代码

批量执行

image.png 当我们选中文件夹时,看到它身上也有 Tests,所以我们可以将共性的测试用例放到这里面,这样所有自用例都会执行,然后我们点击右上角的 Run 会弹出如下界面: image.png 点击 Run my-blog后,会出现如下界面: image.png 我们看到 status code is 200在每个接口上都执行了。

接口联动和变量

在我们日常开发中经常遇到需要先登录然后才能调用其他接口,或者创建一个文章,返回文章 id 后再将其删除,这就涉及到接口联动了。

postman 的解决思路简单,就是在不同的请求之间通过变量进行值的传递,我们以登录为例: image.png 首先在登录接口判断登录是否成功,如果成功,则设置全局环境变量:

    const response = pm.response.json()
    pm.globals.set("access_token", response.access_token); // 设置环境变量
复制代码

我们可以点击右上角的眼睛图案,可以看到已经设置成功了: image.png

然后我们发起其他请求,就可以携带上 access_token 参数了: image.png 我们看到控制台中 access_token 已经被替换成之前设置的全局变量了。这样就达到了跨接口的参数传递了。

参数签名

为了安全考虑,业务中通常会对参数做签名防止参数被篡改,那么我们在 postman 中怎么做呢? postman 处理方式也很简单,就是在真正发起请求之前,可以执行一段脚本,这段脚本中你可以任意修改请求参数,这样就达到了对参数做签名处理的目的。 image.png 首先 postman 提供了 Pre-request Script,其次它提供了功能做各种加密功能的 CryptoJS,然后我们获取到 body参数,并对其做了简单处理后增加了 sign属性,最后在右下角控制台看到了 sign已经被我们加到请求 body 里。

其他实用功能

导入 Chrome 请求

日常开发中在排查问题时,需要发起重复请求,所以能够将 Chrome 中的 network 请求导入到 postman 中重复发起。

第一步:打开 network,找到需要导入的请求,右键,点击 Copy 选择 Copy as cURLimage.png 第二步:点击 postman 的 Import image.png 第三步:选择 Raw text,并将复制的内容粘贴,点击 Continue image.png 第四步:点击 Import image.png 然后就看到可以导入成功了 image.png

生成代码

我们可以导入,也可以导出,方法如下: image.png 点击 postman 的代码图标 image.png 选择自己想要复制的语言即可。

结束语

postman 还有团队协作、mock 数据等功能,这里我用的不多也不做过多介绍。总体来说,接口自动化测试的方式有很多,包括 postman、JMeter、Python 代码或者其他任意语言的测试框架,但是 postman 应该是最简单也是最符合前端需求的自动化接口测试框架。

文章分类
前端
文章标签