Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >接口测试平台代码实现45: 接口调试层异常处理

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

作者头像
我去热饭
发布于 2022-05-19 01:00:25
发布于 2022-05-19 01:00:25
42600
代码可运行
举报
文章被收录于专栏:测试开发干货测试开发干货
运行总次数:0
代码可运行

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

所以我们每写完一个复杂点的业务逻辑 和功能函数,都要充分考虑下各种异常,然后对其进行捕获和处理,俗称测试和修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:

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

效果如下:

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

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

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
接口测试平台代码实现40:修改bug
我们的这个系列已经进行了长达12章成品预览和40章纯开发章节,但是基本还没做过完全一点的测试修复bug章节,每次新开发的功能也仅仅停留在单元/函数层面上的自测。 
我去热饭
2022/05/19
4260
接口测试平台代码实现40:修改bug
接口测试平台代码实现33:接口调试
首先我们要做一个简单的弹层,和上节课的备注弹层一样的做法,这里就给大家快速贴源码了用到的技术都是之前学过的。注意一点,打开弹层后,一定要在弹层的某个地方放入接口id,以便我们之后调试保存时,发出的请求中可以知道当前用户打开的是哪个接口。
我去热饭
2022/05/19
1.1K0
接口测试平台代码实现33:接口调试
接口测试平台代码实现39:接口数据全部保存
我们之前的章节已经解决了各种接口的数据的提取问题,本节的任务就是把这些传给后端,然后保存成功。
我去热饭
2022/05/19
6560
接口测试平台代码实现39:接口数据全部保存
接口测试平台代码实现49:自动异常测试-2
本节开始之前先感谢有同学反馈并主动过修复的一个bug:就是在某些接口的返回值中,中文会显示乱码的问题
我去热饭
2022/05/19
4930
接口测试平台代码实现49:自动异常测试-2
接口测试平台代码实现38: 请求体保存-end
本节课我们处理完剩余请求体,内容较多。因为是直播撸码,所以难免会有一些不完美的地方。大家自行优化。
我去热饭
2022/05/19
4370
接口测试平台代码实现38: 请求体保存-end
接口测试平台代码实现88: 全局请求头-3
本节我们就一起来研究,在接口库调试页面,用例库步骤详情页 这俩个地方如何加入这些项目公共请求头吧。
我去热饭
2022/05/19
4060
接口测试平台代码实现88: 全局请求头-3
接口测试平台代码实现32:接口列表备注功能
让我们制作一个简单的备注输入框和保持/取消按钮,然后用户点击备注按钮就会显示这个输入框+保持/取消按钮。 保持和取消都会让输入框消失,但是保存功能多了一个像后台发送请求的过程,把备注内容给后台保存起来。
我去热饭
2022/05/19
6020
接口测试平台代码实现32:接口列表备注功能
接口测试平台代码实现107:登录态接口-3
首先先改正一下 榜一大哥提出的bug,就是当选择完公共请求头后取消选择,然后再请求就会报错的问题:
我去热饭
2022/05/19
5220
接口测试平台代码实现107:登录态接口-3
接口测试平台代码实现37:接口请求的保存和取消
本节主要来讲一下,使用者在打开接口调试面板后,点击保存按钮,就会成功保存好,并且再次打开后,能显示出来呢?可能大家会觉得本节课没什么难度,就是简单的保存而已,但是实际上,本节是非常复杂的。因为接口的不同编码格式,我们保存起来的基本只有一个大字符串。要如何存储和展示是需要进行特殊设计的,类似 加密和解密,压缩和解压缩。
我去热饭
2022/05/19
5430
接口测试平台代码实现37:接口请求的保存和取消
接口测试平台代码实现46:接口调试用户异常操作处理
经过45节的学习,很多同学已经达到了一个不错的水准,可以自主找到一些问题并修复和提出改进方法,我很欣慰。
我去热饭
2022/05/19
8810
接口测试平台代码实现46:接口调试用户异常操作处理
接口测试平台代码实现31:接口列表继续开发
在调试和删除 俩个按钮中间 加入 备注/复制/异常值测试 三个按钮 ,按钮顺序尽量按照使用习惯 和频率 来设计。
我去热饭
2022/05/19
4630
接口测试平台代码实现31:接口列表继续开发
接口测试平台代码实现41:调试窗口显示接口内容
接口调试层打开后,目前并没有显示这个接口的所有数据。本节就一句一句的把这些数据显示出来吧。
我去热饭
2022/05/19
4920
接口测试平台代码实现41:调试窗口显示接口内容
接口测试平台代码实现149:加密算法的增删改查
我们目前要做的加密算法是一个实体,或者说一个表达式。那么它就自然而然的要考虑下面几点:
我去热饭
2022/05/19
3360
接口测试平台代码实现149:加密算法的增删改查
接口测试平台代码实现35:请求体
http://down.htmleaf.com/1801/201801271505.zip
我去热饭
2022/05/19
7970
接口测试平台代码实现35:请求体
接口测试平台代码实现106:登录态接口-2
大部分内容我们仍然可以借鉴普通接口调试层的内容,所以打开P_apis.html,找到那个登陆态的div,开始进行添加内部控件,但是也不能全都照搬过来,有一些就不需要,比如接口名字。而因为这个接口一个项目基本也就设置一次,所以优化便利性这种事的优先级不高,精力还是留给那些使用频率高的功能上吧
我去热饭
2022/05/19
1K0
接口测试平台代码实现106:登录态接口-2
接口测试平台代码实现48: 自动异常测试-1
本功能属于番外,不是必须的。长度大概3章节。难度不高,也算给大家休息一下。
我去热饭
2022/05/19
5510
接口测试平台代码实现48: 自动异常测试-1
接口测试平台代码实现114:登录态接口-10
这位博主在上一节课,成功实现了登陆状态嵌入到接口库的功能,本节会继续嵌入到用例库中。
我去热饭
2022/05/19
3160
接口测试平台代码实现114:登录态接口-10
接口测试平台代码实现111:登录态接口-7
我们先在打开项目的P_apis.html,找到调试弹层,先找个位置给它加上这个登陆态的开关:
我去热饭
2022/05/19
2510
接口测试平台代码实现111:登录态接口-7
接口测试平台代码实现104:GraphQL-4
本节开始我要一步搞定用例库相关的设置,首先打开P_cases.html,找到步骤详情页的请求体类型部分,然后添加相关dom:
我去热饭
2022/05/19
2350
接口测试平台代码实现104:GraphQL-4
接口测试平台代码实现58-首页重构6
我们记得,我们都是用a标签超链接 来显示一个一个的请求记录。那么他们点击的href属性,我们指定的是触发一个叫home_log_show()的js函数,传入这个记录的id,当然这个函数还没有写。
我去热饭
2022/05/19
6140
接口测试平台代码实现58-首页重构6
推荐阅读
相关推荐
接口测试平台代码实现40:修改bug
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档