Java+TestNG+Beautifulreport实现接口测试报告展示

一、介绍

使用了网上看来的beautifulreport的模版，觉得页面table部分不够完善进行了二次开发，增加如下：

1、增加table数据分页功能

2、增加饼图显式展示数量

二、代码

略（显示过长，且格式有问题），有需要的私信我，单独发。

贴下主要修改部分的代码：

1、增加分页组件

• Previous
• Next

2、增加分页逻辑JS部分

function changePage(type) { var intputValue = parseInt($("#pageInfo").val()); var tableStart = 0; var tableEnd = 0; var indexValue = 0; if (type === 0 && intputValue === 0) { toastr.info("暂无前一页！"); return false; } else if (type === 1 && intputValue === (Math.ceil(resultData["testAll"] / 10) - 1)) { toastr.info("暂无后一页！"); return false; } if (type === 0) { $("#pageInfo").val(intputValue - 1); intputValue = parseInt($("#pageInfo").val()); tableStart = intputValue * 10; tableEnd = (intputValue + 1) * 10 - 1; resultValue = new Array(); indexValue = 0; $.each(resultData["testResult"], function (i, n) { if (i >= tableStart && i <= tableEnd){ resultValue[indexValue] = n; indexValue += 1; } }); } else if (type === 1 ) { $("#pageInfo").val(intputValue + 1); intputValue = parseInt($("#pageInfo").val()); tableStart = intputValue * 10; tableEnd = (intputValue + 1) * 10 - 1; resultValue = new Array(); indexValue = 0; $.each(resultData["testResult"], function (i, n) { if (i >= tableStart && i <= tableEnd){ resultValue[indexValue] = n; indexValue += 1; } }); } $('#detailBody tr').remove(); var filterAll = 0; var filterOk = 0; var filterFail = 0; var filterSkip = 0; var buttonIndexPre = null; $.each(resultValue, function (i, n) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "成功"; } else if (n["status"] == '失败') { $.each(resultData["testResult"], function (j, m) { if (n["methodName"] === m["methodName"]){ buttonIndexPre = j; } }); filterFail += 1; status = "失败"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "跳过"; } else { status = "" + n["status"] + ""; } var tr = "" + "" + (i + 1) + "" + "" + n["className"] + "" + "" + n["methodName"] + "" + "" + n["description"] + "" + "" + n["spendTime"] + "" + status + "展开" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); });}

3、修改原来table展示逻辑

function generateResult(className, caseResult) { $("#detailBody").children().remove(); var filterAll = 0; var filterOk = 0; var filterFail = 0; var filterSkip = 0; var indexValue = 0; if (className == "" && caseResult == "") { $.each(resultData["testResult"], function (i, n) { if (i >= 0 && i <= 9){ resultValue[indexValue] = n; indexValue += 1; } }); $.each(resultValue, function (i, n) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "成功"; } else if (n["status"] == '失败') { filterFail += 1; status = "失败"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "跳过"; } else { status = "" + n["status"] + ""; } var tr = "" + "" + (i + 1) + "" + "" + n["className"] + "" + "" + n["methodName"] + "" + "" + n["description"] + "" + "" + n["spendTime"] + "" + status + "展开" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); }); } if (className != "" || caseResult != "") { $.each(resultData["testResult"], function (i, n) { if ((className == "" || n["className"] == className) && (caseResult == "" || n["status"] == caseResult)) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "成功"; } else if (n["status"] == '失败') { filterFail += 1; status = "失败"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "跳过"; } else { status = "" + n["status"] + ""; } var tr = "" + "" + (i + 1) + "" + "" + n["className"] + "" + "" + n["methodName"] + "" + "" + n["description"] + "" + "" + n["spendTime"] + "" + status + "展开" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); } }); }}

4、饼图显式展示数值

function pie() { var option = { title: { text: '测试用例运行结果', subtext: '', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['失败', '跳过', '成功'] }, series: [ { name: '运行结果', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: resultData["testFail"], name: '失败'}, {value: resultData["testSkip"], name: '跳过'}, {value: resultData["testPass"], name: '成功'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: {show: true} } } } ] }; var chart = echarts.init(document.getElementById("echarts-map-chart")); chart.setOption(option);}

5、增加toastr弹窗

 

CSS部分:

.toast-center-center { top: 50%; left: 50%; margin-top: -30px; margin-left: -150px;}

JS部分：

toastr.options = { "closeButton": false, //是否显示关闭按钮 "debug": false, //是否使用debug模式 "positionClass": "toast-center-center",//弹出窗的位置 "showDuration": "300",//显示的动画时间 "hideDuration": "1000",//消失的动画时间 "timeOut": "5000", //展现时间 "extendedTimeOut": "1000",//加长展示时间 "showEasing": "swing",//显示时的动画缓冲方式 "hideEasing": "linear",//消失时的动画缓冲方式 "showMethod": "fadeIn",//显示时的动画方式 "hideMethod": "fadeOut" //消失时的动画方式};

三、效果图

效果图

主要修改用蓝色方框标出。