Python写静态HTML

背景

因为近期工作需要,常常要将测试结果/数据统计、汇总和展示,因此会有写静态HTML的需求,本文记录下python写静态HTML的小技巧

灵感

灵感时来源于unittest测试框架最常用的报告插件:HTMLTestRunner,该插件本身基于python2且已经更新了,好在@虫师一直在维护和更新这个插件,使得它能继续被大家所使用,了解详情请移步:SeldomQA/HTMLTestRunner

回到HTMLTestRunner报告插件,阅读源码发现,作者只用了一个python文件便巧妙的将写HTML、页面绘制和数据嵌入搞定了。进一步分析可以看到,作者先是在Template基类中定义了测试报告的HTML结构模板和各个模块/表格模板,然后再以格式化输入的形式给每一个模板中填充目标数据,再将填充好的模板以格式化输入的形式填充到HTML结构模板中,最后再将所有内容写成一个HTML文件即可。

class Template_mixin(object): ''' Define a HTML template for report customerization and generation. Overall structure of an HTML report HTML +------------------------+ |<html> | | <head> | | | | STYLESHEET | | +----------------+ | | | | | | +----------------+ | | | | </head> | | | | <body> | | | | HEADING | | +----------------+ | | | | | | +----------------+ | | | | REPORT | | +----------------+ | | | | | | +----------------+ | | | | ENDING | | +----------------+ | | | | | | +----------------+ | | | | </body> | |</html> | +------------------------+ '''

可以看到,这样的设计其实优点在于非常小巧和轻量,缺点在于可维护和可移植性差,数据量小还尚可,不太适合大量数据的统计和绘制。

技巧

这种设计的关键在于建模板,然后按需填充数据,最后再写HTML,通常我的做法是:

  1. 网上找到想要的页面或着表格,copy其HTML结构,将变动的部分(需要动态填充数据的部分)提取出来,并用格式化输入形式替代,如:%(style)s, %(rows)s
HTML_TMPL = r'''<!DOCTYPE html><html lang='en'><head><title>Overview</title><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1'>%(style)s</head><body>    <h1> 总览 </h1>    <table class='pure-table pure-table-bordered'>        <thead>            <tr>                <th>#</th>                <th>设备</th>                <th>环境</th>                <th>耗时</th>                <th>结果</th>                <th>统计</th>                <th>报告</th>            </tr>        </thead>        <tbody>            <tr>                %(rows)s            </tr>            <tr>                <td> </td>                <td> </td>                <td> </td>                <td> </td>                <td> </td>                <td> </td>                <td> </td>            </tr>            <tr>                %(total)s            </tr>        </tbody>    </table></body></html>'''     # style, rows, total
  1. 将变动的部分单拎出来,形成模板,依然用格式化输入形式替代
TBODY_TOTAL_TMPL = ''' <tr> <th> 合计 </th> <th colspan='6'> 通过率: {passing_rate}%    失败率: {failure_rate}%    错误率: {error_rate}%    跳过率: {skip_rate}% </th> </tr>'''
  1. 按照模板格式,组装数据并填充
total += TBODY_TOTAL_TMPL.format(        passing_rate=np.mean(p_rates).round(2),        failure_rate=np.mean(f_rates).round(2),        error_rate=np.mean(e_rates).round(2),        skip_rate=np.mean(s_rates).round(2))
  1. 最后将所有数据填充到主模板,并写HTML
# write reporterwith open(filepath, 'w', encoding='utf-8') as wf: wf.write(HTML_TMPL % dict(rows=rows, total=total, style=STYLE_TMPL))

扩展

  • 目前python自动化测试常用的报告插件还有,allure
  • 除过本文介绍写HTML的方法之外,还可以使用,jinjia2
(0)

相关推荐