hoppscotch 学习

沿途的风景X
4,942 阅读5分钟

前言

Hoppscotch，原名Postwoman，是一个轻量级的，类似于Postman的API测试工具。 我学习它主要是看重它以下几点。

  1. 它开源，且在github上有很多star
  2. 它支持在docker里部署，管理起来方便。不用再安装一个套壳浏览器了（一个Electron应用就是一个套壳浏览器）。
  3. 完全免费

而且它的界面好看。另外，它还使用了我喜欢的Vue 和 Postgres

另外，它的官方文档写的也挺好。这是它的文档docs.hoppscotch.io/

本篇文章，简单介绍一下，如何使用hoppscotch进行Rest接口测试，和Hoppscotch的一些feature。

基础

部署和使用方式

  1. 最简单的使用方式就是直接进官网首页hoppscotch.io/。直接在操作界面操作即可。这叫Hoppscotch Cloud。
  2. 自建。这是我看重它的一个点。如果公司需要一个API测试平台，不用花钱买，建一个公用的给大家用，就行了。而且数据可以保存在指定的数据库里。
  3. Hoppscotch CLI 通过命令行来使用hoppscotch。有了它可以在脚本中使用hoppscotch，比如在CI中。
  4. Hoppscotch Enterprise 还没公开，不知道具体情况。

如何在浏览器里测试本地服务的接口

本来我觉得，要想再浏览器里进行接口测试，要么得在docker里部署，要么使用内网穿透。但其实不用，因为它可以利用Chrome插件，直接向本地发起请求。

简单的接口测试

如何测试一个http client？

Hoppscotch 也可以看做一个http client。如何测试它？两个方法

自己起一个http service

先写一个脚本，比如这样

from flask import Flask, request

app = Flask(__name__)


@app.route('/<path:any_path>', methods=['GET', 'POST'])
def test(any_path: str):
    return {
        "path": any_path,
        "headers": dict(request.headers),
        "method": request.method,
        "values": dict(request.values),
    }


if __name__ == '__main__':
    app.run(debug=True, port=10005)

然后再启动，即可。自由度高但有点麻烦。

使用通用的http请求/响应工具，例如httpbin.org/

httpbin.org 是一个HTTP请求和响应的测试网站，可以用来测试HTTP客户端的请求和响应。它提供了多种HTTP请求和响应的测试功能，包括获取请求头、响应头、请求参数、响应状态码、cookies、重定向等信息，还可以模拟POST、PUT等请求方法，以及上传、下载文件等功能。httpbin.org可以帮助开发人员测试和调试HTTP客户端的请求和响应，以及检查API接口的正确性和可靠性。 image.png 如图所示，它支持给出各种响应。你按照它给出的规则，来发送各种请求，如果得到了预期的响应，就可以认为你的请求是对的。

测试

它支持给接口设置

  1. Parameters
  2. Body
  3. Headers
  4. Authorization
  5. Pre-request Script
  6. Tests

其中前3个很简单，对大部分情况，也应该够了。以下是一个例子，我给测试接口的了包括参数，请求体和请求头。

image.png

image.png

image.png

以下是结果。

image.png

很简单吧？其实学到这里就已经能进行简单的后端接口测试了。

高级

Authorization

授权。它支持多种授权方式。这里以Bearer Token为例。在飞书开放平台API就是用的这种授权。

image.png github api也支持这种token image.png 这里有Bearer Token的介绍 swagger.io/docs/specif… 简单地说就是发送请求时，给出这样一个Header，Authorization: Bearer <token>。其中token是一个随机的字符串，应用层用此字符串来鉴权。 尝试了一下

image.png 结合httpbin的此接口的源代码，

image.png 可知和我预期一致。

image.png 通过生成的代码来看，也能看出来。

Environment

Environment 就是一组环境变量。 如果没有环境变量，每个接口的各种设置都得硬编码，那也太麻烦了。 hoppscotch接口的参数、路径等设置，都支持引用环境变量。 举个例子。现在有两套环境变量，

image.png 把env设置为它，是向http://localhost:10005/all发请求。

image.png 把env设置为它，是向https://httpbin.org/anything发请求。

Pre-request script

是一段Js代码。它可以通过设置环境变量，来动态设置请求。 值得注意的是，它对环境变量的设置，会保存到Environment里，而不只是给当前的请求使用。

在这里，你可以使用pw.env.set来设置环境变量。

Post-request tests

也是一段js代码。类似单元测试，它用来测试响应。

image.png

管理，协作和账号体系

管理请求

可以把请求保存下载，以备以后的测试。 请求会保存到Collection里。Collection就像一个文件夹，而且，Collection内的文件夹还能嵌套。

image.png

每个Workspace可以有多个Collections。 我推测它的schema大概是这样的。

type Request = Record<string, any>;

interface Folder {
    requests: Request[],
    subFolder: Folder[],
}

interface Collection {
    folders: Folder[],
}

interface Workspace {
    collections: Collection[],
}
interface Team {
    worksapce: Workspace,
}

其中，Team和用户，是多对多的关系。Team和workspace一一对应，官网上把这两个名词混用。 另外，Collection还能通过json导入导出。

账号体系和协作

支持通过Google Microsft Github账号登录，绝大多数开发者都能一键登录吧。 image.png 通过邮件邀请，可以让一个Team里有多个用户。且用户按照权限分为了3个级别。 image.png

小技巧

导入来自cURL格式的请求

在这里，可以把cURL看做一种把请求序列化为文本的方式。 你可以从chrome中以cURL格式导出请求，再导入hoppscotch.

image.png

image.png

把请求转化为各种语言的脚本

点击show code image.png 可以转化为各种语言写的，用来发这个请求，使用的脚本。

image.png

avatar
文章
阅读
粉丝