二次开发了个寂寞之HttpRunnerManager接口测试管理平台

文章目录

- - 一、背景
  - - 1、二次开发
    - - 1.1、首页
      - 1.2、项目列表
      - 1.3、用例列表
      - 1.4、新增用例
      - 1.5、测试套件
      - 1.6、查看报告
  - 二、总结

一、背景

自入职起，就在公司内部引入开源接口测试平台，选一个大家勉强看得懂源码的开源项目，方便后续的二次开发，不管是功能优化还是功能定制，至少有动手的能力，同时又能避免重复造轮子(既没有造轮子的时间也没有那么多精力)。那么二次开发到底是做什么？首先需要先熟悉它本身的功能实现和框架架构，不要因为他本身就是个平台，就感觉无从下手，因为它并不完美。

1、二次开发

1.1、首页

主要是对样式的改造，增加一列灰色显示失败用例，光标移动显示用例具体数据效果，时间轴跨度；
在这里插入图片描述

index.html改到的源码：

***
legend: {data: ['跳过用例', '失败用例', '成功用例', '通过率']
},
***
series: [{name: '跳过用例',type: 'bar',data: [],color: "#696969"},{name: '失败用例',type: 'bar',data: [],color: "#e6194B"},{name: '成功用例',type: 'bar',data: [],color: "#3cb44b"},{name: '总用例数',type: 'bar',data: [],color: "#00BFFF"},{name: '通过率',type: 'line',yAxisIndex: 1,data: [],color: "Pink"}
]
***
option.xAxis[0].data = xAxis_data;
option.series[0].data = {{ total.skip }};
option.series[1].data = {{ total.fail }};
option.series[2].data = {{ total.pass }};
option.series[3].data = {{ total.sum }};
option.series[4].data = {{ total.percent }};
***
function getDay(day) {var today = new Date();var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day * -1;today.setTime(targetday_milliseconds); //注意，这行是关键代码var tYear = today.getFullYear();var tMonth = today.getMonth();var tDate = today.getDate();tMonth = doHandleMonth(tMonth + 1);tDate = doHandleMonth(tDate + 2);// 多显示两天return tYear + "-" + tMonth + "-" + tDate;
}
***

至于views.py源码，是树状数据的显示，找到index方法里面的get_total_values；对应变量名去修改自己想要的效果

***
total = {'skip': [],'pass': [],'fail': [],'percent': [],'sum': []
}
***
# 用例失败数=总数-成功数-跳过数
total['fail'].append(total_run - total_success - total_skipped)
total['percent'].append(total_percent)
total['skip'].append(total_skipped)
total['sum'].append(total_run)

1.2、项目列表

优化了批量导入功能
在这里插入图片描述

平台的底层框架是httprunner工具，它本身支持charles录制导出的har数据文件，进行转换成json或yml格式的用例

for file in files:file_suffix = os.path.splitext(file)[1].lower()if file_suffix == '.json':with io.open(file, encoding='utf-8') as data_file:try:content = json.load(data_file)except JSONDecodeError:err_msg = u"JSONDecodeError: JSON file format error: {}".format(file)logging.error(err_msg)elif file_suffix in ['.yaml', '.yml']:with io.open(file, 'r', encoding='utf-8') as stream:content = yaml.load(stream, Loader=yaml.FullLoader)

1.3、用例列表

这个列表改造的功能就比较多了，如新增字段：状态、更新人、接口url等，还有时间优化、查询条件优化
在这里插入图片描述

这里涉及的改动就多了，要看得懂数据库表字段涉及、代码重构、前端样式调整

***
# 搜索项目--用例
elif belong_project and name is not '':obj = obj.filter(belong_project__contains=belong_project).filter(Q(request__contains=name) | Q(name__contains=name))
#  搜索模块--用例
elif belong_module and name is not '':obj = obj.filter(belong_module__module_name__contains=belong_module).filter(Q(request__contains=name) | Q(name__contains=name))***

1.4、新增用例

对于上一个功能设计的，新增是否执行status状态列，是因为httprunner工具对于用例是有skip
在这里插入图片描述

add_case.html同时也隐藏了创建者字段

***
<div class="form-group"><div class="input-group col-md-4 col-md-offset-1"><div class="input-group-addon" style="color: #0a628f">是否执行</div><select id="is_excuted" name="skip" class="form-control"><option value="False" selected>默认执行</option><option value="True">跳过执行</option></select></div>
</div>
***
<div class="form-group" hidden="hidden"><div class="input-group col-md-4 col-md-offset-1"><div class="input-group-addon" style="color: #0a628f">编写人员</div><input type="text" class="form-control" id="author" name="author"placeholder="用例编写人员" value="{{ account }}" readonly><!-- 默认获取当前登录用户 --></div>
</div>
***

1.5、测试套件

时间格式的调整，新增更新者字段
在这里插入图片描述

这里面涉及的知识点，前面也有引用，suite_list.html

***
<td>{{ foo.create_time|handle_time }}</td>
<td>{{ foo.update_time|handle_time }}</td>
***

自定义custom_tags.py过滤器

@register.filter(name='handle_time')
def handle_time(value):"""处理时间格式"""return value.strftime("%Y-%m-%d")

1.6、查看报告

这里改造的东西也是比较多的，如新增执行人、备注字段，实现可以知道谁执行的测试、失败的用例可以备注什么原因、更能支持批量删除报告功能
在这里插入图片描述

report_list.html增加编辑窗口实现备注，是由commons.js实现update_data_ajax

<div class="form-group"><label class="control-label col-sm-3" for="mark"style="font-weight: inherit; font-size: small ">报告备注：</label><div class="col-sm-9">{#                            <input name="mark" type="text" id="mark" class="form-control"#}{#                                   placeholder="报告备注" value="请输入备注内容!">#}<textarea type="text" rows="5" class="form-control" id="mark" name="mark"aria-describedby="inputSuccess3Status" placeholder="报告备注" value="报告备注"style="color: red;"></textarea><!-- 是个icon样式 -->{#                            <span class="glyphicon glyphicon-paperclip form-control-feedback" aria-hidden="true"></span>#}</div>
</div>
***
<script type="text/javascript">function edit(id, report_name, report_result, mark) {$('#index').val(id);$('#report_name').val(report_name);$('#report_result').val(report_result)$('#mark').val(mark);$('#my-edit').modal({relatedTarget: this,onConfirm: function () {update_data_ajax('#report_list', '/api/report_list/1/')},onCancel: function () {}});}
***

curd.js要实现批量删除报告，全选、多选报告进行删除

function ckAll() {var flag = document.getElementById("select_all").checked;var cks = document.getElementsByName("input[]");for (var i = 0; i < cks.length; i++) {cks[i].checked = flag;}
}//批量删除
function MultiDel(id) {if (!confirm("确定删除这些吗?删除后回到第一页!")) {return;}var cks = document.getElementsByName("input[]");var str = "";//拼接所有的idfor (var i = 0; i < cks.length; i++) {if (cks[i].checked) {str += cks[i].value + ",";}}//去掉字符串未尾的','str = str.substring(0, str.length - 1);location.href = '/api/del_reports?ids=' + str;
}