在实际使用HTMLTestRunner时,会觉得默认报告样式不够好,不能直观展示用例执行情况,所以需要给HTMLTestRunner报告增加一些直观样式。
楼主选用的是饼状图,各位小伙伴也可以根据自己喜好选择。修改HTMLTestRunner样式需要HTML、CSS等基础,Python就不用说了吧。。。哈哈
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
修改效果展示:鼠标悬停在饼状图,增大显示,并给出数量和占比
在不破坏原有报告样式情况下,增加了饼状图显示
修改思路:
1、首先,你先要找到自己喜欢的样式,比如饼状图、柱状图等等,我们这个例子使用饼状图
2、在网上搜索HTML饼状图代码,获得以下源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 215px"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; app.title = '环形图'; var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:['#93D8A9','#FFB99D','#AF7DCC','#FFD83D','#bbe2e8'], legend: { orient: 'horizontal', x: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [{ name: '访问来源', type: 'pie', radius: ['30%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] }] }; if(option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
效果展示:
3、确定HTMLTestRunner.py文件中生成HTML样式部分代码,笔者经过一凡坎坷后已经确定了
4、修改HTMLTestRunner源码
第一步
第二步
第三步,把饼状图代码添加在REPORT_TMPL最后面
第四步,这样我们还没完成最终修改,还需要修改第三步中饼状图代码,具体修改位置就不详细表述了,大家一看就明白
<!-- /*自己修改部分Start*/ --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container_tu"); var myChart = echarts.init(dom); var app = {}; app.title = '环形图'; var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%%)" }, color:['red','#c60','#6c6','#bbe2e8'], legend: { orient: 'horizontal', x: 'left', data: ['失败', '未通过', '通过', '总用例'] }, series: [{ name: '访问来源', type: 'pie', radius: ['30%%', '70%%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: %(error)s, name: '失败' }, { value: %(fail)s, name: '未通过' }, { value: %(Pass)s, name: '通过' }, { value: %(count)s, name: '总用例' } ] }] }; if(option && typeof option === "object") { myChart.setOption(option, true); } </script> <!-- #/*自己修改部分End*/ -->