前端 postman 进阶指南

超杰_
2,422 阅读8分钟

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

最近不少时间在写接口，发现之前用的多但是不深的 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 cURL。 image.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 应该是最简单也是最符合前端需求的自动化接口测试框架。

avatar
文章
阅读
粉丝