测试用例重要性无需多言,保障接口质量,避免发布引起的现网事故,拒绝背锅
另外我们平常调试接口都是使用postman之类的,接口调试用例无法沉淀,自己构造自己用,别人无法共用,所以接口用例的持久化也很有必要。
今天介绍 httpyac,简化我们在调试阶段用例构造成本,让调试更加便利。跟随项目管理,便于共用。可自动执行所有用例,保障所有接口质量
其实整体来说是比较简单的,只要你肯花一点时间去学习
简介
上手其实非常简单,只是会碰到一些坑,复杂的用法也需要实践
先来看下简单一个操作流程
只需要在项目中新建一个*.http文件,然后接口用例像下面这样,点击 send 就可以发送请求
send 之后,就可以在控制台输出看到 请求详细信息
文件总结一下都有什么用法
1、安装
2、基本用法
3、配置代理
4、变量
5、多环境
6、请求附加脚本
7、请求依赖请求
8、cli 终端用法
这里只会总结常用的功能,没有列举出所有,更多可以参考
https://httpyac.github.io/
安装
1、安装npm包
npm install -g httpyac
2、安装vscode 插件
httpYac - Rest Client,安装了之后才会使用接口用例,并出现 send 按钮
基本用法
1、在项目中新建 xxxx.http 文件,httpyac 的vscode插件会自动识别它并找到里面的用例
2、在 xxxx.http 文件中新建一个接口用例,如下
POST http://test.com/test?a=b HTTP/1.1
Content-Type: application/json
Cookie: bar=foo
{id:111111}
结构比较清晰简单,body 参数需要至少空一行,没有空行的表示 header,但是这个json 无法识别成header 格式,所以header 不会有这个
代理
这里我们学习 httpyac 也需要用到代理,方便我们进行各种接口用例的测试 主要是通过whsitle ,如果还不懂 whsitle 的人,求求你赶紧学一下,对你工作帮助很大 👉【开发体验】前端调试必备-whistle 入门
1、在 whsitle 中给一个接口创建返回假数据
test.com/json file://{success.json}
```success.json
{
"retcode":0
}
```
2、vscode 配置代理
首选项->设置->搜索代理
设置成 whsitle 开启的端口
如果你的用例是使用 https ,最好指定 协议是 HTTP/1.1,因为 https 默认是 HTTP2,会走不到我们的代理
变量
多个请求用例,避免不了会有重复数据的情况,我们可以使用变量来解决这个问题
基础变量
@name=2222
GET https://test.com/json?name={{bar}} HTTP/1.1
###
@params=2
@name=3
POST https://test.com/json HTTP/1.1
{
"template": "My {{params}} {{name}}template!!"
}
变量可以填充到用例的 url 、 body,header 、另外的变量上
注意!!
如果设置的变量只为某一个用例使用,那么需要用 ### 隔开 上一个用例
比如像这样
如果你没有使用 ### 隔开上一个用例,那么这个变量无效
发送请求会报错找不到变量
而且这个### 你不能加任何东西,比如当成注释,不然变量也会无效
全局变量
如果你想设置一个变量,整个文件都能使用,而不是给某一个用例
我们通常是放在文件顶部,并且需要用 ### 隔开下面的用例,否则变量只会属于最近的一个用例
但是其实放置的位置无所谓,可以放在用例中间,不过要把### 把变量包起来
可以放在最底部
如果有多个相同名称的全局变量,以最后一个为主
复杂脚本变量
有时我们设置的变量,可能需要写一些复杂的计算脚本等,如下
{{+
const token = "test";
exports.bbbb = token;
exports.defaultHeaders = {
'Content-Type': 'text/html',
'Authorization': `Bearer ${token}`
};
}}
GET https://test.com/{{bbbb}} HTTP/1.1
...defaultHeaders
你需要导出变量,另外 + 号是必须的
行内脚本变量
直接在行内添加脚本变量
GET http://test.com/json?q={{new Date()}}&num={{Math.random()}}
可选变量
有时一个接口我们需要验证发送不同的参数的效果,可以通过可选变量的方式进行,而不需要写多个用例
比如某个参数有 4种值,abcd,只需要像下面这样列举出来
@query = {{$pick select app? $value: a,b,c,d}}
GET https://test.com/anything?q={{query}} HTTP/1.1
发送请求的时候,会弹出选择框让我们选择值,然后才开始发送
内置静态变量
host
配置一次host,全局免写host
@host=http://aaa.com
###
GET /anything HTTP/1.1
GET /json HTTP/1.1
GET /test HTTP/1.1
内置动态变量
如 随机数,日期等
GET /anything?q={{$randomInt -50 -100}} HTTP/1.1
GET /anything?q={{$timestamp]}} HTTP/1.1
更多请参数官方文档
https://httpyac.github.io/guide/variables.html#rest-client-dynamic-variables
多环境配置
除了可以在 用例的文件中放置变量,还可以在一个专门的环境文件中存放各种变量
然后在发送请求时选择环境,便可使用到该环境的所有变量
多环境一般是用于我们区分 开发、测试 和正式环境
所以一般文件环境我们分为三种,dev,test,prod
1、项目根目录新建 env 文件夹
2、env 文件夹下 新建 dev.env,test.env,prod.env 三个环境文件
3、在文件中放置变量,比如
// dev.env
envConfig=dev
// test.env
envConfig=test
// prod.env
envConfig=prod
4、选择环境
点击env 就会弹出环境选择框
比如选择了 dev,该用例文件所有请求发送都会读取 dev 这个环境的变量
公共环境
多环境下,肯定会涉及到一些每个环境都有的公共的变量,每个环境都定义就比较浪费
[.env] 这个文件就是用于存放 所有环境共用的变量,可以存放host 和测试账号信息啥的
和其他环境文件放在一起即可
请求附加脚本
我们可以在请求 前后都加一段脚本,加入一些自定义的请求处理逻辑
比如最简单像这样
###
{{
console.log("before");
}}
GET http://test.com/json
{{
console.log("after");
}}
###
请求前面的脚本会在请求发送前执行,后面的则在 请求响应后执行
注:前面的脚本一定要使用 ### 隔开上一个请求用例,否则脚本无效
断言脚本
通常我们是用脚本来做断言的,判断请求是否成功,像这样
###
GET http://test.com/json/1212 HTTP/1.1
{{
const { equal } = require('assert');
test('status code 200', () => {
equal(response.statusCode, 200);
});
}}
然后发送请求就可以直接看用例成功与否,除开调试外,其实我们是不太关心请求的详细信息的
异步脚本
比如下面这样,会等待异步脚本执行完,才会发送请求
###
{{
async function wait(){
const date = new Date();
return new Promise(res=>{
setTimeout(()=>{
res(12121212)
},1000)
})
}
exports.wait = wait();
}}
GET http://test.com/anything?delay={{wait}} HTTP/1.1
全局脚本
和 全局变量一样,通常放在文件顶端即可,用 ### 隔开下面所有用例,这样所有请求发送前都会 执行这段脚本
同理,公共脚本放在末尾也是一样的,所有请求都会执行到
请求依赖请求
一个请求发送需要依赖于另一个请求的响应结果,这里也支持
比如下面这个用例,aaa 这个接口需要用到 bbb 接口的响应结果
# @name json
GET http://test.com/bbb
###
# @ref json
POST http://test.com/aaa/{{json.slideshow.author}}
1、bbb 接口设置一个 name = json
2、aaa 接口 reference 引用 ref 这个 json 即可
这个 json 就是bbb 结果的响应body
aaa 接口依赖 bbb 接口,所以说在 发送 aaa 之前,会先发送 bbb 接口
这里默认会缓存 bbb 的响应结果,免得每次都需要发送两条接口
如果你不想用到缓存,可以暴力引用 forceRef
# @name json
GET http://test.com/bbb
###
# @forceRef json
POST http://test.com/aaa/{{json.slideshow.author}}
###
# @forceRef json
POST http://test.com/cccc/{{json.slideshow.author}}
Cli 终端
命令
终端命令也比较简单,列举几个常用的,更多请看
https://httpyac.github.io/guide/installation_cli.html#intallation
进入到接口用例文件,使用 httpyac 命令执行你需要的 用例文件,并加上参数
httpyac base.http -all -o short -e dev
-all, 表示执行文件所有测试用例
-o ,output 的意思,表示执行的输出信息,可以选择输出 responce,body,headers
cli 命令执行的时候一般选择 short 就好,简化输出信息,只需要看接口状态即可
-e ,选择环境文件,就前面配置的 test.env,prod.env 等
配置项-代理
在 cli 执行用例的时候,是不会走 vscode 配置的代理的,我们需要给 httpyac 添加一个配置文件
在根目录下新建 httpyac.config.js
module.exports = {
proxy: 'http://127.0.0.1:8010', // 这个代理只会在使用shell的情况起效,使用vscode的插件时,走的vscode代理
};
这样,cli 执行用例也可以通过代理
配置项-请求钩子
我们还可以在配置项中添加一些钩子,在请求或者 响应时执行
钩子的执行顺序和你添加的顺序有关
async function getCookie() {
const res = await axios.get('http://xxxxx');
return res.data.result.cookie;
}
module.exports = {
configureHooks: function (api) {
// 请求前钩子
api.hooks.onRequest.addHook('add_cookie', async (request) => {
request.headers.cookie = await getCookie();
console.log('req-1');
});
api.hooks.onRequest.addHook('add_cookie', async (request) => {
console.log('req-2');
});
// 响应后钩子
api.hooks.onResponse.addHook('res-hook1', async (res) => {
console.log('res-1');
});
api.hooks.onResponse.addHook('res-hook2', async (res) => {
console.log('res-2');
});
},
};
配置项-其他
还可以进行一些其他的配置,比如公共 headers
module.exports = {
defaultHeaders: {
referer: 'https://test.com',
},
}
设置 https 不校验证书
module.exports = {
request: {
https: {
rejectUnauthorized: false,
},
}
}
如果不设置,cli 执行用例时可能会证书校验错误