背景

因为近期工作需要，常常要将测试结果/数据统计、汇总和展示，因此会有写静态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，通常我的做法是：

网上找到想要的页面或着表格，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>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                %(total)s
            </tr>
        </tbody>
    </table>
</body>
</html>
"""     # style, rows, total

将变动的部分单拎出来，形成模板，依然用格式化输入形式替代

TBODY_TOTAL_TMPL = """
                <tr>
                <th> 合计 </th>
                <th colspan="6"> 通过率: {passing_rate}% &nbsp;&nbsp; 失败率: {failure_rate}% 
                &nbsp;&nbsp; 错误率: {error_rate}%  &nbsp;&nbsp; 跳过率: {skip_rate}% </th>
                </tr>
"""

按照模板格式，组装数据并填充

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))

最后将所有数据填充到主模板，并写HTML

# write reporter
with open(filepath, 'w', encoding='utf-8') as wf:
    wf.write(HTML_TMPL % dict(rows=rows, total=total, style=STYLE_TMPL))

扩展

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

积跬步，至千里