前言

Pytest框架可以使用两种测试报告,其中一种就是使用pytest-html插件生成的测试报告,但是报告中有一些信息没有什么用途或者显示的不太好看,还有一些我们想要在报告中展示的信息却没有,最近又有人问我pytest-html生成的报告,能不能汉化?答案是肯定的,那么今天就教大家如何优化和汉化pytest-html测试报告解决上述问题

生成报告

我们先编写一个简单的测试代码,生成一份原始的测试报告,来看看哪些需要修改

测试代码

test_pytest_html.py

"""------------------------------------@Time : 2019/8/28 19:45@Auth : linux@File : test_pytest_html.py@IDE  : PyCharm@Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!@QQ   : 28174043@qq.com@GROUP: 878565760------------------------------------"""import pytestdef login(username, password):    """模拟登录"""    user = "linux"    pwd = "linux"    if user == username and pwd == password:        return {"code": 1001, "msg": "登录成功", "data": None}    else:        return {"code": 1000, "msg": "用户名或密码错误", "data": None}test_data = [    # 测试数据    {        "case": "用户名正确, 密码正确",        "user": "linux",        "pwd": "linux",        "expected": {"code": 1001, "msg": "登录成功", "data": None}    },    {        "case": "用户名正确, 密码为空",        "user": "linux",        "pwd": "",        "expected": {"code": 1000, "msg": "用户名或密码错误", "data": None}    },    {        "case": "用户名为空, 密码正确",        "user": "",        "pwd": "linux",        "expected": {"code": 1000, "msg": "用户名或密码错误", "data": None}    },    {        "case": "用户名错误, 密码错误",        "user": "linux",        "pwd": "linux",        "expected": {"code": 1000, "msg": "用户名或密码错误", "data": None}    }]class TestLogin(object):    @pytest.mark.parametrize("data", test_data)    def test_login(self, data):        result = login(data["user"], data["pwd"])        assert result == data["expected"]if __name__ == '__main__':    pytest.main(['-sv', "D:\PythonTest\MyPytestHtml\pytest_html_optimization", "--html", "report.html"])

原始报告

Environment更改

①在报告中有一个Environment环境变量选项,如图所示:

②通过下图可以看到Environment显示的信息为当前项目运行的环境【metadata关键字对应的值信息】,可以修改Environment信息使其显示更贴近我们的项目。

③在conftest.py文件中加入以下代码。就放在更改标题代码的下方。

def pytest_configure(config):    config._metadata.clear()    config._metadata['测试项目'] = "测试示例项目"    config._metadata['测试地址'] = "www.project.com"

⑤重新运行测试用例,查看测试报告:可以看到pytest-html测试报告的Environment信息已经更新。

⑥运行时可以通过控制台查看metadata关键字对应的值信息已经变成代码中设置的信息。【当然我们可以在代码中设置保留原始Environment信息并添加新的Environment信息,如三代码所示】

修改Summary

原始的Summary部分只显示了测试用例数及用例执行时间,那么如果我们想在这个位置添加测试人员等一些信息该如何实现?同样在conftest.py文件中添加如下代码

@pytest.mark.optionalhookdef pytest_html_results_summary(prefix):    prefix.extend([html.p("所属部门: xx测试中心")])    prefix.extend([html.p("测试人员: L")])

修改后的效果

修改Results

Results主要展示的是测试结果信息,而且这里也有一些不符合我们实际需求的信息,比如Test列显示的内容很长,它主要是测试用例所在的路径及测试类,测试用例及测试数据拼接而成的,可读性很差,从这个描述根本看不出来我们的测试用例测试的是什么,所以我们希望它能这样显示:测试+用例名称[user:用户名-pwd:密码] ,如:测试用户名正确,密码正确[user:Linux超-pwd:Linux超哥],下面我们就来实现这样的效果

优化Test

先手我们分析一波源码,看一下原始的测试报告的Test列表的信息是怎么生成的。找到我们pytest-html插件的安装位置,打开plugin.py文件,你会发现这样一块代码

1    class TestResult:2         def __init__(self, outcome, report, logfile, config):3             self.test_id = report.nodeid4             if getattr(report, "when", "call") != "call":5                 self.test_id = "::".join([report.nodeid, report.when])6             self.time = getattr(report, "duration", 0.0)7             self.outcome = outcome

第3行,5行,就是报告中Test信息的来源了,test_pytest_html.py::TestLogin::test_login[data0] 这样一条信息,实际是用例的nodeid,而【data0】是测试用例参数化时的每个参数,我之前写过一篇关于参数化方法@pytest.mark.parametrize(“data”, test_data)的参数ids作用的文章,ids的作用主要就是用来标记测试用例(不知道的可以去看一下那篇文章),增加测试用例执行后输出信息的可读性,因此我们可以使用这个参数来改变【data0】,让它显示我们的测试数据,ok,在我们的测试代码中添加并修改如下代码

# 改变输出结果ids = [    "测试:{}->[用户名:{}-密码:{}-预期:{}]".        format(data["case"], data["user"], data["pwd"], data["expected"]) for data in test_data]class TestLogin(object):    # 添加ids参数    @pytest.mark.parametrize("data", test_data, ids=ids)    def test_login(self, data):        result = login(data["user"], data["pwd"])        assert result == data["expected"]

修改完之后再次执行我们的测试代码,生成测试报告

很遗憾,中文部分显示的都是乱码,还得继续修改

解决中文乱码

在conftest.py文件中继续添加如下代码

import pytestfrom py._xmlgen import html@pytest.mark.hookwrapperdef pytest_runtest_makereport(item):    outcome = yield    report = outcome.get_result()    getattr(report, 'extra', [])    report.nodeid = report.nodeid.encode("utf-8").decode("unicode_escape")  # 解决乱码

再次执行测试代码,查看报告输出

中文已经可以正常显示了,很开心,但是前面还是有一堆的目录及测试类,我仍然不想要,那么我们继续修改

删除多余部分

要删除前面多余的部分,接下来只能通过修改报告的html了,因为源码中我实在没找到在哪里能够修改这个显示,我们查看一下html报告的页面元素属性

看到这里,你想到用什么方法来修改了嘛?我想到的是使用js代码改变这个元素的innerText, 我们先实验一下,切换到【控制台】依次执行如下代码

// 找到Test列中所有的表格元素var test_name = document.getElementBysClassName("col-name");// 修改第1个表格的innerText属性test_name[0].innerText = test_name[0].innerText.split("\[")[1].split(["\]")[0];  // 以[符号分割一次,再以]分割一次,得到目标字符串

以上带代码只能修改一个表格,所以要修改多个表格只能使用循环了,再次重写js代码

var case_name_td = document.getElementsByClassName("col-name")    for(var i = 0; i < case_name_td.length; i++)        try{            case_name_td[i].innerText = case_name_td[i].innerText.split("\[")[1].split("\]")[0];        }        catch(err){            // 如果表格中没有[]会抛异常,如果抛异常我就显示null,如果你想显示别的东西自己改吧,因为通常只要我们使用参数化就有[]显示            case_name_td[i].innerText = "null";        }

js代码我们已经写好了, 但是我们要放在哪里讷,又是个问题?通过查看报告的html源码我发现在html代码的开头引入了这样一些代码

在pytest-html插件的源码中,发现插件的resource目录下有一个main.js文件,里面的代码就是上述html代码中的js脚本,一模一样的

而且在main.js中确实存在一个init()方法,通过以上分析,应该不难猜测生成测试报告时,会自动把main.js文件加载到html中,而且是从init()方法开始的,因此我们尝试一下把我们编写的js代码放到init()方法内部实验一下

function init () {    reset_sort_headers();    add_collapse();    show_filters();    toggle_sort_states(find('.initial-sort'));    find_all('.sortable').forEach(function(elem) {        elem.addEventListener("click",                              function(event) {                                  sort_column(elem);                              }, false)    });    // 修改用例报告显示的用例名称 add by linux超    var case_name_td = document.getElementsByClassName("col-name")        for(var i = 0; i < case_name_td.length; i++)            try{                case_name_td[i].innerText = case_name_td[i].innerText.split("\[")[1].split("\]")[0];            }            catch(err){                // 如果表格中没有[]会抛异常,如果抛异常我就显示null,如果你想显示别的东西自己改吧,因为通常只要我们使用参数化就有[]显示                case_name_td[i].innerText = "null";            }};

添加完之后记得保存,再次执行测试代码,查看测试报告

修改后的效果

你没有看错,确实成功了,小小成就感还是有的,哈哈!

删除Links

报告中的links从来没看见有内容过,所以我打算把这一列删除,在contest.py文件中添加如下代码

@pytest.mark.optionalhookdef pytest_html_results_table_header(cells):    cells.pop(-1)  # 删除link列@pytest.mark.optionalhookdef pytest_html_results_table_row(report, cells):    cells.pop(-1)  # 删除link列

修改后的效果

汉化报告

最后一步,汉化我们的测试报告,因为都是英文的,可能有的同学不太喜欢或者说领导不太喜欢,接下来就开始我们的汉化之路,汉化还是比较简单的, 只要小心谨慎即可

声明:以下修改的所有文件均存在pytest-html插件的源码目录下

修改plugin.py

plugin.py文件主要用来生成测试报告的html代码的,因此汉化肯定离不开修改这个文件了,接下来一步一步按照我的步骤修改吧(注释部分是源码,紧接着的是我修改后的代码)

# if len(log) == 0:#     log = html.div(class_='empty log')#     log.append('No log output captured.')if len(log) == 0:        log = html.div(class_='empty log')       log.append('未捕获到日志')additional_html.append(log)
# head = html.head(#     html.meta(charset='utf-8'),#     html.title('Test Report'),#     html_css)head = html.head(         html.meta(charset='utf-8'),       html.title('测试报告'),       html_css)
# outcomes = [Outcome('passed', self.passed),#             Outcome('skipped', self.skipped),#             Outcome('failed', self.failed),#             Outcome('error', self.errors, label='errors'),#             Outcome('xfailed', self.xfailed,#                     label='expected failures'),#             Outcome('xpassed', self.xpassed,#                     label='unexpected passes')]outcomes = [Outcome('passed', self.passed, label="通过"),            Outcome('skipped', self.skipped, label="跳过"),            Outcome('failed', self.failed, label="失败"),            Outcome('error', self.errors, label='错误'),            Outcome('xfailed', self.xfailed,                    label='预期失败'),            Outcome('xpassed', self.xpassed,                    label='预期通过')]
# if self.rerun is not None:#     outcomes.append(Outcome('rerun', self.rerun))if self.rerun is not None:    outcomes.append(Outcome('重跑', self.rerun))# summary = [html.p(#     '{0} tests ran in {1:.2f} seconds. '.format(#         numtests, suite_time_delta)),#     html.p('sfsf',#            class_='filter',#            hidden='true')]summary = [html.p(     '执行了{0}个测试用例, 历时:{1:.2f}秒 . '.format(        numtests, suite_time_delta)),    html.p('(取消)勾选复选框, 以便筛选测试结果',           class_='filter',           hidden='true')]
# cells = [#     html.th('Result',#             class_='sortable result initial-sort',#             col='result'),#     html.th('Test', class_='sortable', col='name'),#     html.th('Duration', class_='sortable numeric', col='duration'),#     html.th('Links')]cells = [    html.th('通过/失败',            class_='sortable result initial-sort',            col='result'),    html.th('用例', class_='sortable', col='name'),    html.th('耗时', class_='sortable numeric', col='duration'),    html.th('链接')]
# results = [html.h2('Results'), html.table([html.thead(#     html.tr(cells),#     html.tr([#         html.th('No results found. Try to check the filters',#                 colspan=len(cells))],#             id='not-found-message', hidden='true'),#     id='results-table-head'),#     self.test_logs], id='results-table')]results = [html.h2('测试结果'), html.table([html.thead(      html.tr(cells),    html.tr([        html.th('无测试结果, 试着选择其他测试结果条件',                colspan=len(cells))],            id='not-found-message', hidden='true'),    id='results-table-head'),    self.test_logs], id='results-table')]
#html.p('Report generated on {0} at {1} by '.format( html.p('生成报告时间{0} {1} Pytest-Html版本:'.format(  
# body.extend([html.h2('Summary')] + summary_prefix#             + summary + summary_postfix)body.extend([html.h2('用例统计')] + summary_prefix              + summary + summary_postfix)
# environment = [html.h2('Environment')]environment = [html.h2('测试环境')]  #

plugin.py文件到这就修改完了,你可以生成报告查看以下效果,接下来修改main.js

修改main.js

/*function add_collapse() {    // Add links for show/hide all    var resulttable = find('table#results-table');    var showhideall = document.createElement("p");    showhideall.innerHTML = 'Show all details / ' +                            'Hide all details';    resulttable.parentElement.insertBefore(showhideall, resulttable);*/function add_collapse() {  //     // Add links for show/hide all    var resulttable = find('table#results-table');    var showhideall = document.createElement("p");    showhideall.innerHTML = '显示详情 / ' +                            '隐藏详情';    resulttable.parentElement.insertBefore(showhideall, resulttable);

修改style.css

最后修改style.css,这个文件主要用来美化测试报告的,如果你对css比较熟悉,可以自定义报告样式

.expander::after {    content: " />

到目前为止,所有的汉化都已经完成了,接下来我们执行一下测试代码,查看一下报告的效果

最后报告效果