背景
因?yàn)榻诠ぷ餍枰３Ｒ獙y(cè)試結(jié)果/數(shù)據(jù)統(tǒng)計(jì)、匯總和展示，因此會(huì)有寫靜態(tài)HTML的需求，本文記錄下python寫靜態(tài)HTML的小技巧
靈感
靈感時(shí)來源于unittest測(cè)試框架最常用的報(bào)告插件：HTMLTestRunner，該插件本身基于python2且已經(jīng)更新了，好在@蟲師一直在維護(hù)和更新這個(gè)插件，使得它能繼續(xù)被大家所使用，了解詳情請(qǐng)移步：SeldomQA/HTMLTestRunner
回到HTMLTestRunner報(bào)告插件，閱讀源碼發(fā)現(xiàn)，作者只用了一個(gè)python文件便巧妙的將寫HTML、頁面繪制和數(shù)據(jù)嵌入搞定了。進(jìn)一步分析可以看到，作者先是在Template基類中定義了測(cè)試報(bào)告的HTML結(jié)構(gòu)模板和各個(gè)模塊/表格模板，然后再以格式化輸入的形式給每一個(gè)模板中填充目標(biāo)數(shù)據(jù)，再將填充好的模板以格式化輸入的形式填充到HTML結(jié)構(gòu)模板中，最后再將所有內(nèi)容寫成一個(gè)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> |
+------------------------+
"""
可以看到，這樣的設(shè)計(jì)其實(shí)優(yōu)點(diǎn)在于非常小巧和輕量，缺點(diǎn)在于可維護(hù)和可移植性差，數(shù)據(jù)量小還尚可，不太適合大量數(shù)據(jù)的統(tǒng)計(jì)和繪制。
技巧
這種設(shè)計(jì)的關(guān)鍵在于建模板，然后按需填充數(shù)據(jù)，最后再寫HTML，通常我的做法是：
- 網(wǎng)上找到想要的頁面或著表格，copy其HTML結(jié)構(gòu)，將變動(dòng)的部分（需要?jiǎng)討B(tài)填充數(shù)據(jù)的部分）提取出來，并用格式化輸入形式替代，如：
%(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>設(shè)備</th>
<th>環(huán)境</th>
<th>耗時(shí)</th>
<th>結(jié)果</th>
<th>統(tǒng)計(jì)</th>
<th>報(bào)告</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
- 將變動(dòng)的部分單拎出來，形成模板，依然用格式化輸入形式替代
TBODY_TOTAL_TMPL = """
<tr>
<th> 合計(jì) </th>
<th colspan="6"> 通過率: {passing_rate}% 失敗率: {failure_rate}%
錯(cuò)誤率: {error_rate}% 跳過率: {skip_rate}% </th>
</tr>
"""
- 按照模板格式，組裝數(shù)據(jù)并填充
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))
- 最后將所有數(shù)據(jù)填充到主模板，并寫HTML
# write reporter
with open(filepath, 'w', encoding='utf-8') as wf:
wf.write(HTML_TMPL % dict(rows=rows, total=total, style=STYLE_TMPL))
