接口测试平台代码实现45: 接口调试层异常处理

我们作为一个测试出身，即便做到了测开，可以写各种代码了，但是依然不要忘了我们的技术比不过专业的开发同事，那就要用我们的优点进行弥补。就是自测

所以我们每写完一个复杂点的业务逻辑 和功能函数，都要充分考虑下各种异常，然后对其进行捕获和处理，俗称测试和修bug时间。所以我们

问题1:

真诚感谢一位小姐姐的bug反馈，这个的确是我之前疏忽的，不是故意留的。

仍然出在这个第三方的表格插件上，bug复现的情况是先切换到调试层的form-data或x-www...上，然后点击取消按钮，再打开就会出现显示错乱等状况。

这个问题会引起很多bug，考虑到我们去修复第三方的插件代价比较大，所以采用最简单粗暴的方式全部绕过去。

就是点击取消按钮后，进行一次页面的刷新，让所有控件都处于一个初始化的状态。

打开P_apis.html，找到取消关闭调试层的js函数：

我们原来的做法，是隐藏掉这个调试弹层

改成，直接刷新当前页面

问题迎刃而解。

问题2:

新创建的接口，首次打开调试弹层，发现请求方式是空白的。

通过console可以看到，这个接口的数据中的请求方式为null：

而我们的目的是想让其定位到none

所以我们这里既可以在后端修复也可以在前端修复。

这里介绍一个简单的后端修复，就是在新建接口的函数中，给接口初始的请求方式设置称字符串的none，而不是不写。

删掉这个旧接口，再新创建的接口则可以正常显示了。

问题3:

新接口首次打开时的顶部接口名称输入框 需要有提示，不然看着空白，用户不知道这个输入框干嘛的：

那我们就在P_apis.html中找到这个输入框，给它加入默认文案：

效果如下：

问题4:

当参数过多时，屏幕放不下，却又没滚动条：

这个问题是因我们这个调试弹层的显示位置脱离了文档流，所以自己很长，浏览器也不知道。解决的办法也很简单要么改变它的位置固定方式，要么用一个js函数撑开浏览器高度。

我们看到之前的位置固定方式代码如下：

试试改成如下：

再看看效果：

问题5:

有同学反馈接口的5个按钮风格不统一，很丑。

那么我就优化一下：

找到html的最开头，找到这个样式，它控制着这三个中间的小按钮的样式,不过我们准备把五个按钮统一风格，所以这个.wqrf_button{}没用了，删了。

然后找到这五个按钮的html代码，我们采用bootstrap3的按钮组写法：

看看效果：

问题6:

有人反应新增项目的按钮，看着很别扭，希望可以改。

好那我们看下原来的样子：

好像确实不太好看，那么就暂时改成下面这样：

删除了原来的新增项目按钮。改成了类似于很多国外技术网站的方式，采用关键字超链接的写法。

<h3 style="padding-left: 10px;color: #353c48">项目列表：
    <span style="font-size: small;color: grey;">
        点击 <a href="#" onclick="javascript:document.getElementById('add_project_div').style.display='block'">新增项目</a>
        即可创建属于您的新项目！
    </span>
</h3>

效果如下：

关于显示效果的优化，后续我们会进行各种大改。

所以小伙伴暂时不要吐槽丑了....

好了今天的分享就到这了。今天发了俩篇文章，大家可以看看第二篇次条位置的点评系列。欢迎点赞和分享～