前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Appium系列(三十九)展示测试过程中记录的APP性能数据

Appium系列(三十九)展示测试过程中记录的APP性能数据

作者头像
雷子
发布2021-07-29 14:57:48
5650
发布2021-07-29 14:57:48
举报

前言

之前的文章呢,我们做了数据的存储,那么我们如何把它怎么体现在测试报告中呢,本文将带着你去揭秘如何展示

正文

我们如何展示这些数据呢,最简单的方式呢,就是直接展示数据,为了让我们的测试报告更加的高大上呢,我们引入数据展示,选择了百度 的echarts。官网如下:

代码语言:javascript
复制
https://echarts.apache.org/examples/zh/index.html

在官网,我们可以选择很多的漂亮的展示图。我们选择

代码语言:javascript
复制
https://echarts.apache.org/examples/zh/editor.html?c=line-stack

模板作为展示。我们稍微调整下

这样就满足了我们展示的需求,我们可以下载对应的代码,然后在我们的测试报告中去展示我们的数据。我们需要 去改造我们的BSTestRunner.py。

大概的思路,我们去在测试报告的中增加一个div 用于展示测试报告,然后去增加对应js。最后和原来的拼接成新的HTML。

第一,我们去在HTML_TMPL增加echarts的js

代码语言:javascript
复制
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

然后在container后增加scripts

代码语言:javascript
复制
 %(scripts)s

第二步,我们在heading后增加一个div‍

代码语言:javascript
复制
HEADING_TMPL = """<div class='heading'>
<h1>%(title)s</h1>
%(parameters)s
<p class='description'>%(description)s</p>
</div>
<div id='containerchart' style='height: 300px'></div>
"""

第三步,我们去定义一个js的常量,对应的变量用占位符占用

代码语言:javascript
复制
   SCRPICT=r"""
    <script language='javascript' type='text/javascript'>
var dom = document.getElementById('containerchart');
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
    title: {
        text: '性能数据'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['cpu', '内存']
    },
    grid: {
        left: '3%%',
        right: '4%%',
        bottom: '3%%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: %(name)s
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'cpu',
            type: 'line',
            stack: '总量',
            data: %(cpu)s
        },
        {
            name: '内存',
            type: 'line',
            stack: '总量',
            data: %(men)s
        }

    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}



if (option && typeof option === 'object') {
    myChart.setOption(option);
}
output_list = Array();

/* level - 0:Summary; 1:Failed; 2:All */
function showCase(level) {
    trs = document.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        tr = trs[i];
        id = tr.id;
        if (id.substr(0,2) == 'ft') {
            if (level < 1) {
                tr.className = 'hiddenRow';
            }
            else {
                tr.className = '';
            }
        }
        if (id.substr(0,2) == 'pt') {
            if (level > 1) {
                tr.className = '';
            }
            else {
                tr.className = 'hiddenRow';
            }
        }
    }
}


function showClassDetail(cid, count) {
    var id_list = Array(count);
    var toHide = 1;
    for (var i = 0; i < count; i++) {
        tid0 = 't' + cid.substr(1) + '.' + (i+1);
        tid = 'f' + tid0;
        tr = document.getElementById(tid);
        if (!tr) {
            tid = 'p' + tid0;
            tr = document.getElementById(tid);
        }
        id_list[i] = tid;
        if (tr.className) {
            toHide = 0;
        }
    }
    for (var i = 0; i < count; i++) {
        tid = id_list[i];
        if (toHide) {
            document.getElementById('div_'+tid).style.display = 'none'
            document.getElementById(tid).className = 'hiddenRow';
        }
        else {
            document.getElementById(tid).className = '';
        }
    }
}


function showTestDetail(div_id){
    var details_div = document.getElementById(div_id)
    var displayState = details_div.style.display
    if (displayState != 'block' ) {
        displayState = 'block'
        details_div.style.display = 'block'
    }
    else {
        details_div.style.display = 'none'
    }
}
function html_escape(s) {
    s = s.replace(/&/g,'&amp;');
    s = s.replace(/</g,'&lt;');
    s = s.replace(/>/g,'&gt;');
    return s;
}
</script>

</body>
</html>"""

第四步,获取存储的性能数据

代码语言:javascript
复制
 def _getdata(self):
        file_pash=os.path.join(BASH_DIR,perdata)
        reslut=read(file_pash)
        name = []
        cpu = []
        mem = []
        for key, value in reslut.items():
            name.append(key)
            cpu.append(value['cpu'])
            mem.append(value['mem'])
        return name,cpu,mem

第五步实现js的代码拼接,

代码语言:javascript
复制

    def _generate_scrpit(self):
        name,cpu,mem=self._getdata()
        result=self.SCRPICT % dict(name=name,cpu=cpu,men=mem)
        print("result--",result)
        return  result

第六步 测试报告产生的时候增加echarts的代码

代码语言:javascript
复制
    def generateReport(self, test, result):
        report_attrs = self.getReportAttributes(result)
        generator = 'BSTestRunner %s' % __version__
        stylesheet = self._generate_stylesheet()
        heading = self._generate_heading(report_attrs)
        report = self._generate_report(result)
        ending = self._generate_ending()
        scrpit=self._generate_scrpit()
        output = self.HTML_TMPL % dict(
            title=saxutils.escape(self.title),
            generator=generator,
            stylesheet=stylesheet,
            scripts=scrpit,
            heading=heading,
            report=report,
            ending=ending
        )
        self.stream.write(output)

修改完毕,我们直接去 执行即可。展示后结果如下:

代码语言:javascript
复制

最新代码已经提交
https://gitee.com/liwanlei/appiumdemo

后记

发现问题,解决问题。遇到问题,慢慢解决问题即可。

欢迎关注雷子说测试开发,后续将会持续为大家分享更多的技术知识

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 雷子说测试开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档