接口测试平台-90: 全局请求头之 多接口-接口库选择

按照前面成功把公共请求头安装进接口库的方法，把其插入到多用例中。

打开P_cases.html，直接找到这个header后面的html，给它加上倒三角按钮。

注意上图，因为要放在同一行，所以要缩短input的宽度 给留出空间。图中的宽度 高度都是调过的，可以放心使用，效果如下：

然后去复制承载请求头的那个div 放在下面：

虽然它现在是none的，看不到效果，继续去开发即可。现在在下面js的那一堆上加一个script，专门用来写公共请求头的:

大家如果代码没有太大的变化，可以对照左侧的行标来确定位置。

 

现在可以知道，这个用例库依然看不到任何请求头，那是因后端函数并没有给它返回这个请求头数据，所以去views.py中去增加：

重启服务，刷新页面，看看效果：

可以看到 ，点击了倒三角后，成功显示出来了项目当前的俩个请求头。

 

接下来要处理的是，在选择/切换 顶层的 仓库接口 的时候，下面请求头能跟得上更新。

首先找到

这个ready样子的，不用看，这就是监听。监听的什么事件？就是下面写的，id=apis的那个输入框 的内容change改变就会触发后面的那个funcitonn函数。

点击这个... ，打开这个函数，在里面加入公共请求头相关的代码

 

1. 首先是这个函数中的初始化代码块。遍历并全部清空选择。

var project_headers = document.getElementById('ts_project_header_li').children;
for (var i=0; i< project_headers.length; i++) {
    project_headers[i].children[0].checked = false;
}

2. 然后是按照返回值中的数据进行选中。

// 公共请求头
var project_headers = ret.public_header.split(',');
for (var i=0; i<project_headers; i++) {
    try {
        document.getElementById('checkbox_' + project_headers[i]).checked = 'checked';
    } catch (e) { }
}

现在刷新页面 来测试一下：

首先是接口库中这个接口 选中的请求头如下：

去用例的步骤详情页，套用这个接口，会发现 选中了一样的请求头。

所以这里成功搞定。

 

本节内容到此为止，下节要搞定多用例底层发送请求的部分 嵌入这个公共请求头哦。