接口测试平台代码实现66: 多接口用例-6
我们本节继续研究 小步骤接口的 增删设置功能。
打开我们的P_cases.html,找到这个增加小步骤的按钮,给它添加onclick:
然后我们找个地方写好这个js函数:
这个函数很简单,我们直接请求后台增加一个空的步骤就可以,然后调动刷新步骤列表的函数来刷新,这样就可以看到来。下图我们需要获取大用例的id。
然后去写urls.py:
最后去views.pys实现这个函数:
好了,我们重启服务 刷新页面 试着增加几个步骤:
发现了这种情况。看着成功了,但是代码还不全面。因为他们的顺序貌似排列有问题。我们在一开始的时候就设计了他们的执行顺序。但是貌似这些步骤并没按照执行顺序排列。所以我们在创建的代码中,要加入顺序标志index,它应该默认是已有步骤数量的总和+1:
然后服务重启页面刷新后,我们再添加一下试试:
新创建了三个,然后去后台看看这三个有顺序的对不对:
看来没问题了。
然后我在后台准备删除掉之前的那些之前的步骤,却发现了报错:
遇到这种问题不要慌,先仔细看看为什么:
上面说,__str__函数返回了个空字符串是NoneTyep。原来我之前不小心创建了三个没有name的步骤,然后无论是点开还是删除它们都会报错。因为我的models.py中设置好这个__str__函数必须返回字符串的name的,所以这里报错了。
这种就属于脏数据了。那么我们要怎么删除他们呢?
其实有三种办法:
不去理会,等我们开发出我们自己的删除步骤功能后,再用我们的功能删除它们,这种是可以办到的。
利用sqlite3 的命令行命令删除,先sqlite3 你的数据库文件 ,然后tables; 列出所有表,然后用sql语句删除,delete from....
我们直接改models.py文件,让它先别返回这个name,然后我们就可以删除了,然后再改回来。
因为3最简单,所以我们选3:
然后重启服务,刷新页面。注意虽然我改的是models.py,但是我并没有动数据结构,所以不用执行那两句同步命令。 直接重启服务就生效了。
好,现在后台的步骤列表显示的都是这个id了:
然后我们把他们一股脑都删了吧~
删除完了~
怎么样,很多问题是不是惊叹于作者有各种解决方法,其实这都是踩过的坑,全是泪啊~
然后我们把models.py改回去:
好,这个小插曲完毕,让我们开启下一个小插曲:
就是这个滑动出来的步骤列表,关闭按钮还没好使:
如上图,我们给它加上onclick函数,关闭左侧div。
然后在下面新建这个函数,很简单就一行代码。
好的。
现在让我们开始最后一个小插曲,就是有同学反应,左侧菜单居然被这个步骤列表给遮住了~
其实这种层级遮盖问题,我是用z-index来解决,最大是999。
我们把这个步骤列表的div 的z-index 从998 改成 2 即可:
这样既能比用例列表这种1的大,又能低于左侧菜单。
然后刷新页面看看效果:
发现已经可以成功显示左侧菜单了。
好,我们回归主线。这时候我们似乎忘记了一个重要的事情,就是删除项目/用例的时候,要自动删除下面的步骤。所以我们回到views.py中找到删除用例的代码,新增如下行:
删除项目的时候稍微麻烦了一点:因为一个项目下有多个用例,一个用例下有多个步骤,但是步骤的字段中并没有存储所属项目id,这种情况我们怎么办呢?
最简单的方法是,写个循环遍历删除:
。好的,让我们测试一下:
我新建了个新的项目-接口-用例-步骤。然后删除项目,然后去后台看看是否都删除干净了。
好的,全部删除干净了~ 具体过程就不截图了。
然后我们回到主线。写这个小步骤的删除功能:
首先在P_cases.html中找到这个小步骤后面的删除按钮应该写入的位置,就是我们的刷新步骤的函数中~
写好后如下:
注意,此处js比较复杂,最好复制。我们做了一个button,当作删除按钮,button的onclick属性必须在此写好。然后内部url中夹杂了这个步骤的id,怎么传进来的呢?我是用的土方法,给这个按钮设置自身的idd属性,然后this.idd就是获取自身的idd的值。
function refresh_left_div(case_id) { // 刷新小用例列表专用 var d = document.getElementById('small_list'); d.innerHTML = ''; //清空旧数据 $.get('/get_small/',{ 'case_id':case_id },function (ret) { //开始解析ret,并展现。 res = eval(ret); all_steps = res.all_steps; for(var i=0;i<all_steps.length;i++){ //这里写 生成小用例步骤的button代码 var bu = document.createElement('button'); bu.style = 'margin-top: 5px;width: 90%;background-color: #f5f3f3;'; bu.className = 'btn btn-defaul'; bu.innerText = all_steps[i].name; bu.id = 'step_btn_'+all_steps[i].id; //小步骤的删除按钮 var del = document.createElement('button'); del.className ='btn btn-default'; del.style.fontSize = 'xx-small'; del.innerText = 'delete'; del.style.height = '28px'; del.style.cssFloat='right'; del.style.marginTop='8px'; del.idd = all_steps[i].id; del.onclick = function(){ $.get('/delete_step/'+this.idd+'/',{ },function (ret) { refresh_left_div(document.getElementById('Case_id').innerText) }) }; d.appendChild(bu); d.appendChild(del); } }) }复制代码
效果如下:
然后去写urls.py:
最后去后台实现:
重启服务/刷新页面,我们测试一下:
发现已经成功删除~ 。
但是你以为到这就结束了么?
不~
我们忽略了一个问题:
我现在要在页面上显示出 这些步骤的index执行顺序,以便我们之后调试。
然后不要忘了,我们之前刷新功能获取的,只有id和name,现在的话,因为要考虑到排序顺序,所以得增加上index:
改成:
然后重启服务,刷新页面:
看看效果:
好的,现在是按照执行顺序 排列的。
那么问题来了:
假如我删除了 序号为2的步骤,那么剩下的步骤怎么办?序号是1 和 3,还是 1和2(3自动变成2)呢?
按照我们的使用习惯,肯定是希望 后者。那么我们的步骤删除后台函数中。就需要对 该步骤之后的所有此大用例下的步骤的 序号,依次前进一个~
好了,打开views.py,我们重写del_step函数~
其中,首次运用了双筛选和 大于写法 字段__gt =
我们重启服务,刷新页面。测试一下,删除中间的第二条后的效果:
如图可见,第三条的执行顺序 从3 变成了2
我们还可以多增加一些,然后删除看看效果:
现在我要删除第三条:
删除第一条:
删除最后一条:
好的,全部成功,没有报错。且剩下的步骤的执行顺序 依然严丝合缝~
本节内容稍难,欢迎大家加讨论群里讨论~v: qingwanjianhua
作者:我去热饭
链接:https://juejin.cn/post/7048089154327937031