接口测试平台-74: 多接口之大用例：运行前端部分+修复bug

最新推荐文章于 2022-05-26 20:24:04 发布

向往的美好生活

最新推荐文章于 2022-05-26 20:24:04 发布

阅读量132

点赞数

原文链接：https://blog.csdn.net/qq_22795513/category_10122661.html?spm=1001.2101.3001.4235

版权

接口测试平台专栏收录该内容

112 篇文章 15 订阅

订阅专栏

1. 修复UI的bug，样式重叠

就是上图这样的排版问题。这是因为右侧的div的高度是固定的，所以导致五个多行文本框超出了。现在来修改一下右边这个div 的高度，打开P_cases.html，把这个高度100% 改成最小高度100% ，min-height：

看看效果：

2. 看一下多用例模块目前剩余功能：

4.步骤详情页的提取返回值功能

5.步骤详情页的断言返回值功能

9.用例实际执行的后台实现

10.报告的生成和保存

11.报告的展示

12.报告的word导出

13.步骤的mock功能

关于提取返回值和断言返回值的前端已经写完。具体的后台实现，得等到用例实际执行的代码写完后再加入了。所以本节先去写好这个执行函数吧。

3. 用例实际执行的后台实现

在P_cases.html中找到每条大用例的运行按钮,给他写好onclick属性。

然后去下面找个风水宝地，写好这个函数：

<!--  大用例函数  -->
<script>
    function Run_Case(Case_id) {
        $.get('/Run_Case/',{
            "Case_id": Case_id
        },function (ret) {

        })
    }
</script>

对后台发出了指令，让其开始运行这条大用例。然后再写俩句能让人看出正在运行的代码，就是反馈效果。比如点击运行按钮，运行按钮就变成：正在运行，运行结束后再变成：运行

为了精准的控制这个运行按钮，给每个运行按钮都加了id, 区分不同的大用例，id中必须有变化的部分-用例id。然后补充Run_Case函数：

<!--  大用例函数  -->
<script>
    function Run_Case(Case_id) {
        document.getElementById('Run_btn_' + Case_id).innerText = '正在运行...';
        $.get('/Run_Case/',{
            "Case_id": Case_id
        },function (ret) {
            document.getElementById('Run_btn_' + Case_id).innerText = '运行';
        })
    }
</script>

添加映射：

urls.py：

url(r'^Run_Case/$', Run_Case),  # 运行大用例

views.py：

# 运行大用例
def Run_Case(request):
    Case_id = request.GET['Case_id']

现在要开始构思一下这个Run_Case函数了。它都要做什么？

它已经获取到了要运行的大用例的id，然后可以去数据库中拿到这个大用例下的所有小步骤，这些小步骤按执行顺序排好，然后按个执行，最终把结果生成报告即可。

这里有俩种设计：

很简单的循环执行所有小步骤的接口。然后把结果保存到数据库，等前端点击查看报告的时候，调取数据库结果组成自行设计的测试报告。
引入如unittest这样的单测框架，让这个大用例下的所有小步骤动态组成unittest的一个大测试类，然后依次运行，最后生成html的测试报告，前端点击查看报告就直接展示这个html的测试报告。

在这俩个设计内，提取返回值和断言返回值的算法会有略微不同。而从本身来说，第一种非常简单明了，自由度高。第二种正规可靠，可学到更多奇招巧术。