前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >接口测试平台代码实现42:各个请求体自动显示

接口测试平台代码实现42:各个请求体自动显示

作者头像
我去热饭
发布2022-05-19 08:58:21
6670
发布2022-05-19 08:58:21
举报
文章被收录于专栏:测试开发干货

本节主要是用来在用户打开调试弹层后,能自动显示弹层的接口请求体的功能。

本节之后,将会进行数节的 接口后台实际请求的代码实现。

打开P_apis.html:找到我们上节没写完的那个打开显示的函数:

首先我们记得,不同的展示窗口,显示的不一样,主要分俩类:

一类是:

form-data和x-www....的表格类显示。

另一类是raw的五种子选项的多行文本框的显示效果。

很明显,第二类要简单很多, 所以我们先从第二类入手,迅速解决掉这五个多行本文框的显示,再集中精力对付较难的第一类表格显示。

如上图五种,用五个if判断搞定了这个显示效果。有同学可能会说,其实这五种一开始不用5个多行文本框,用一个就可以了,5个的话很麻烦。这里的话其实也是可以的。但是后续的话可能要少一点灵活性。不过这里全凭大家自选哈。就算现在这种五个输入框,也都是写好一个,直接复制粘贴成5个。也没啥太多成本。

到这为止。我们还剩下俩个编码格式:form-data和x-www....

写好一个,另一个基本就是复制改改。

如下图,是form-data的显示代码:

在正式写之前,我们要思考下这里要如何填充好呢?作者看了下第三方这个表格,并没有自动填充的方法,只能我们手动拼接了看来。

所以步骤为:

  1. 给这个表格进行初始化,清除掉旧数据。(不然的话,你每次切换到这里这里搞不好数据会重复累加显示),但是因我们在整个显示函数中的一开始就触发了clear清除函数,所以这步我就不用再写了。
  2. 拿到请求体列表,作为循环主体
  3. 遍历这个请求体列表,获取每一对key-value,然后我们获取表格的所有子标签,也就是获取到一堆tr,和tr内部的一对td。
  4. 然后tr的下标就是我们遍历这个循环的下标,td应该只有2个,第一个放key,第二个放value,我们对其分别赋值,值就是从这个请求体列表拿到的。
  5. 最后我们别忘了代码要点击一下这个表格的新增参数按钮。不然下一对key-value你就没地方放了,因为这个第三方表格我们设定一开始就带一行空的。所以顺序就是先填key-value,再新增空行。不要担心空行最后多出来,我们可以在最后一次遍历的时候结尾不点击新增参数按钮,即便我们点击了。我们的保存函数也可以过滤掉空行不保存。

好了,看下代码:

可复制代码如下:

代码语言:javascript
复制
if(ret.body_method == 'form-data'){
    var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
    body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
    for(var i=0;i<body.length;i++){ // 遍历这个请求体列表
        key = body[i][0]; //拿出每一个键值对的key
        value = body[i][1];//拿出每一个键值对的value
        var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表
        // 每个tr下的children得到的是 td列表,只有俩个。
        childs_tr[i].children[0].innerText = key; //第一个td放key
        childs_tr[i].children[1].innerText = value;//第二个td放value
        //判断是否是最后一次遍历,来决定是否点击新增参数按钮
        if(i<body.length-1){
            document.getElementById('add').click()
        }
    }
}

然后我们刷新页面,直接点击调试,看看是否能成功显示了:

可以看到,已经可以默认显示成功了。

接下来再如法炮制,去写x-www....,注意其中几个修改的地方:

然后我们再次刷新页面,看看效果:

好了,到这里,我们就可以进行完整的保存显示 测试了。各个编码格式大家都可以试一下,确保全部正常后,本节即可结束。

注意js中的各种括号,千万不要写错了。之前很多反馈报错的小伙伴都是这种问题。一定要细心一点奥~。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发干货 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档