接口测试平台代码实现65: 多接口用例-5

我去热饭

发布于 2022-05-19 09:15:11

2080

发布于 2022-05-19 09:15:11

文章被收录于专栏：测试开发干货

接上节课。我们继续开始开发小用例的数据层。

models.py如下,新增DB_step，我们从这开始，把小用例或者说接口，称为步骤。一个大用例含有多个步骤step 组成，步骤有执行顺序，本体是一个接口，额外还有提取返回值/断言返回值的设计。

具体字段如下：

class DB_step(models.Model):
    Case_id = models.CharField(max_length=10,null=True) #所属大用例id
    name = models.CharField(max_length=50,null=True) #步骤名字
    index = models.IntegerField(null=True) #执行步骤
    api_method = models.CharField(max_length=10,null=True) # 请求方式
    api_url = models.CharField(max_length=1000,null=True) #url
    api_host = models.CharField(max_length=100,null=True) #host
    api_header = models.CharField(max_length=1000,null=True) #请求头
    api_body_method = models.CharField(max_length=10,null=True) #请求体编码类型
    api_body = models.CharField(max_length=10,null=True) #请求体
    get_path = models.CharField(max_length=500,null=True) #提取返回值-路径法
    get_zz = models.CharField(max_length=500,null=True) #提取返回值-正则
    assert_zz = models.CharField(max_length=500,null=True) #断言返回值-正则
    assert_qz = models.CharField(max_length=500,null=True) #断言返回值-全文检索存在
    assert_path = models.CharField(max_length=500,null=True) #断言返回值-路径法

    def __str__(self):
        return self.name

然后让我们执行同步命令：

然后去admin.py中注册：

然后我们重启服务，刷新页面，进入后台，试着添加一条步骤：

Case_id 就写我们已经创建的大用例的id吧～

好，我们现在已经创造了一个小步骤，并且所属于我的第一个大用例下。

然后我们去修改urls.py，把这个获取小用例的接口给完善好：

然后去views.py中写好对应函数：

# 获取小用例步骤的数据
def get_small(request):
    case_id = request.GET['case_id']
    steps = DB_step.objects.filter(Case_id= case_id).order_by('index')
    ret = {"all_steps":list(steps.values("id","name")) }
    return HttpResponse(json.dumps(ret),content_type='application/json')

注意，这里我们只需要拿到小用例的名字即可，其他的都不太重要，因为如果小用例的全部内容都一起拿走的话，那么这个请求返回的数据会很大导致很卡。

等用户去点击某步骤，然后右侧滑动出现该步骤的具体内容的时候，我们再发一次请求专门获取这一个步骤的内容即可。

为什么要用list(.values())的方法呢，因为要给js使用，这个方法是非常温和稳定的，相比较queryset类型来说。

好我们回到P_cases.html中，找到我们刷新步骤的方法

refresh_left_div

开始对其返回值代码进行补全：

我们先来理解一下这段js，

首先是清空那个小div的内容。然后请求接口，获取目标步骤列表后，写个循环。循环体内会给小div 增加一个一个的小步骤。

然后让我们删除之前方便展示用的小demo，变成下面的样子。

然后我们开始补全这个js中循环体的部分。

完整代码如下：

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;
            d.appendChild(bu);
        }
    })
}

我们刷新页面，再点击设置按钮，看看效果：