Hoppscotch快速上手环境变量、Pre-Request脚本与Post-Request测试实战教程【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotchHoppscotch 是一款开源、免费的 API 调试工具可离线、可自托管、也有云端版本支持 Web、桌面端和 CLI常被视为 Postman 与 Insomnia 的开源替代方案。本教程带你用三个实战功能快速上手环境变量让同一套请求在不同环境下复用Pre-Request 脚本在发送请求前自动执行准备逻辑Post-Request 测试在拿到响应后自动断言校验。掌握这三件套你的 API 开发效率会显著提升。为什么需要环境变量告别硬编码地址调试 API 时开发、测试、生产环境的域名和密钥都不一样。如果地址直接写死在 URL 里每换一次环境就得改一遍既慢又容易出错。环境变量的用法非常简单打开 Hoppscotch 左侧的环境面板新建一个环境如dev添加键值对例如BASE_URLhttps://dev-api.example.com在请求 URL 中用双花括号引用{{BASE_URL}}/users切换环境时只需在顶部下拉框选择另一个环境所有{{变量}}自动替换小贴士URL、Header、Body、Params 中都支持{{变量}}语法一个请求可以同时引用多个环境的值。环境面板的核心界面实现可以参考 environments/index.vue变量的导入导出则位于 environments/ImportExport.vue。Pre-Request 脚本发送前的自动准备工作Pre-Request 脚本会在每次请求发送前自动运行适合做这些事生成时间戳、随机数、签名参数计算鉴权 token 并写入环境变量动态构造请求参数打开任意 REST 请求页切换到Script标签即可编写。右侧面板还内置了现成的代码片段Snippets点击即可插入省去记忆 API 的麻烦片段名称作用Set an environment variable设置一个环境变量Set timestamp variable写入当前时间戳Set random number variable生成随机数例如在请求前生成一个时间戳供 URL 使用const currentTime Date.now(); pw.env.set(timestamp, currentTime.toString());之后在 URL 里写{{timestamp}}即可。Hoppscotch 脚本运行在沙箱中通过pw命名空间操作环境变量这套 API 的定义见 pw-namespace.ts脚本编辑器的界面逻辑在 PreRequestScript.vue内置片段源码见 preRequestScriptSnippets.ts。Post-Request 测试用断言守护接口质量接口返回 200 不代表结果正确。在Tests标签页编写 Post-Request 测试脚本Hoppscotch 会在收到响应后自动执行断言结果直观显示在请求页底部✅ 通过 / ❌ 失败。右侧同样内置常用断言片段覆盖最常见的场景Status code is 200 / 2xx / 3xx / 4xx / 5xxCheck JSON response property校验响应中的某个字段一个典型的状态码 字段双重断言长这样pw.test(Status code is 200, () { pw.expect(pw.response.status).toBe(200); });断言片段的完整清单在 testSnippets.ts测试编辑器界面见 Tests.vue。批量运行一键回归整条请求链单个请求可以手动点发送但当你把几十个带测试的请求放进集合Collection后就可以用内置的Runner一键批量执行自动按顺序发送并汇总每个断言的通过情况实现轻量级的接口回归测试。运行结果面板见 test/RunnerResult.vue集合执行逻辑位于 helpers/runner/ 目录。三者组合实战登录取 Token 再请求受保护接口把三个功能串起来就是完整的自动化调试链路环境变量dev环境中配置BASE_URL和ACCESS_TOKEN先留空Pre-Request登录请求请求前用pw.env.set(ACCESS_TOKEN, ...)把响应中的 token 写回环境Pre-Request业务请求引用{{ACCESS_TOKEN}}自动携带鉴权Post-Request业务请求断言pw.expect(pw.response.status).toBe(200)确保接口返回符合预期整条链路的请求调度由 RequestRunner.ts 驱动你只需要专注写业务脚本。快速上手清单步骤操作位置①新建环境并添加BASE_URL等变量左侧环境面板②URL 中引用{{BASE_URL}}请求编辑区③Script 标签写pw.env.set(...)REST 请求页④Tests 标签写pw.test(...)断言REST 请求页⑤Runner 批量回归集合Collection 面板延伸阅读与源码导航脚本沙箱 API 定义pw-namespace.ts脚本执行入口RequestRunner.ts桌面端运行体验hoppscotch-desktop/离线/自托管部署说明README.md现在打开 Hoppscotch建一个环境、写一个pw.env.set、加一条pw.test断言——五分钟你就能体会到这套脚本化 API 开发工作流的爽快。【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hoppscotch快速上手：环境变量、Pre-Request脚本与Post-Request测试实战教程
Hoppscotch快速上手环境变量、Pre-Request脚本与Post-Request测试实战教程【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotchHoppscotch 是一款开源、免费的 API 调试工具可离线、可自托管、也有云端版本支持 Web、桌面端和 CLI常被视为 Postman 与 Insomnia 的开源替代方案。本教程带你用三个实战功能快速上手环境变量让同一套请求在不同环境下复用Pre-Request 脚本在发送请求前自动执行准备逻辑Post-Request 测试在拿到响应后自动断言校验。掌握这三件套你的 API 开发效率会显著提升。为什么需要环境变量告别硬编码地址调试 API 时开发、测试、生产环境的域名和密钥都不一样。如果地址直接写死在 URL 里每换一次环境就得改一遍既慢又容易出错。环境变量的用法非常简单打开 Hoppscotch 左侧的环境面板新建一个环境如dev添加键值对例如BASE_URLhttps://dev-api.example.com在请求 URL 中用双花括号引用{{BASE_URL}}/users切换环境时只需在顶部下拉框选择另一个环境所有{{变量}}自动替换小贴士URL、Header、Body、Params 中都支持{{变量}}语法一个请求可以同时引用多个环境的值。环境面板的核心界面实现可以参考 environments/index.vue变量的导入导出则位于 environments/ImportExport.vue。Pre-Request 脚本发送前的自动准备工作Pre-Request 脚本会在每次请求发送前自动运行适合做这些事生成时间戳、随机数、签名参数计算鉴权 token 并写入环境变量动态构造请求参数打开任意 REST 请求页切换到Script标签即可编写。右侧面板还内置了现成的代码片段Snippets点击即可插入省去记忆 API 的麻烦片段名称作用Set an environment variable设置一个环境变量Set timestamp variable写入当前时间戳Set random number variable生成随机数例如在请求前生成一个时间戳供 URL 使用const currentTime Date.now(); pw.env.set(timestamp, currentTime.toString());之后在 URL 里写{{timestamp}}即可。Hoppscotch 脚本运行在沙箱中通过pw命名空间操作环境变量这套 API 的定义见 pw-namespace.ts脚本编辑器的界面逻辑在 PreRequestScript.vue内置片段源码见 preRequestScriptSnippets.ts。Post-Request 测试用断言守护接口质量接口返回 200 不代表结果正确。在Tests标签页编写 Post-Request 测试脚本Hoppscotch 会在收到响应后自动执行断言结果直观显示在请求页底部✅ 通过 / ❌ 失败。右侧同样内置常用断言片段覆盖最常见的场景Status code is 200 / 2xx / 3xx / 4xx / 5xxCheck JSON response property校验响应中的某个字段一个典型的状态码 字段双重断言长这样pw.test(Status code is 200, () { pw.expect(pw.response.status).toBe(200); });断言片段的完整清单在 testSnippets.ts测试编辑器界面见 Tests.vue。批量运行一键回归整条请求链单个请求可以手动点发送但当你把几十个带测试的请求放进集合Collection后就可以用内置的Runner一键批量执行自动按顺序发送并汇总每个断言的通过情况实现轻量级的接口回归测试。运行结果面板见 test/RunnerResult.vue集合执行逻辑位于 helpers/runner/ 目录。三者组合实战登录取 Token 再请求受保护接口把三个功能串起来就是完整的自动化调试链路环境变量dev环境中配置BASE_URL和ACCESS_TOKEN先留空Pre-Request登录请求请求前用pw.env.set(ACCESS_TOKEN, ...)把响应中的 token 写回环境Pre-Request业务请求引用{{ACCESS_TOKEN}}自动携带鉴权Post-Request业务请求断言pw.expect(pw.response.status).toBe(200)确保接口返回符合预期整条链路的请求调度由 RequestRunner.ts 驱动你只需要专注写业务脚本。快速上手清单步骤操作位置①新建环境并添加BASE_URL等变量左侧环境面板②URL 中引用{{BASE_URL}}请求编辑区③Script 标签写pw.env.set(...)REST 请求页④Tests 标签写pw.test(...)断言REST 请求页⑤Runner 批量回归集合Collection 面板延伸阅读与源码导航脚本沙箱 API 定义pw-namespace.ts脚本执行入口RequestRunner.ts桌面端运行体验hoppscotch-desktop/离线/自托管部署说明README.md现在打开 Hoppscotch建一个环境、写一个pw.env.set、加一条pw.test断言——五分钟你就能体会到这套脚本化 API 开发工作流的爽快。【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考