selenium生成HTML报告及添加查看截图入口的尝试

HTMLTestRunner是unittest单元测试框架的一个扩展，可以用来生成HTML测试报告，需要手动下载HTMLTestRunner.py文件，原始版本是用python2语法写的，需要修改，或者直接找用python3语法重新编辑后的文件。

生成HTML报告

使用方法参考：

from HTMLTestRunner import HTMLTestRunner
suite=unittest.TestSuite()
suite.addTest(TestCase("testcase1"))		#添加用例TestCase.testcase1
suite.addTest(TestCase("testcase2"))		#添加用例TestCase.testcase2
file_path=os.path.join(os.getcwd()+"/report/first_case.html")#报告路径
f=open(file_path,"wb")
runner=HTMLTestRunner(stream=f,title="报告标题",description=u"描述信息",verbosity=1)								#定义测试报告
runner.run(suite) 							#执行用例
f.close()

通过以上代码可以生成html测试报告

经过尝试，貌似如果是用断言失败报的异常，会记录为Fail，如果是其它异常会记录为Error

添加查看截图入口

如果用例失败，可以通过在unittest的tearDown()方法里面添加生成截图的代码，然后在看报告的时候可以根据截图和报错信息分析用例失败的原因。
但是看截图需要去存放截图的文件夹打开截图，不太方便，然后我刚好也在学JavaScript，于是想到了在html报告中添加一个打开截图的的入口。
在不改动HTMLTestRunner的前提下，我采用的方法是在html报告生成后，修改html内容，添加引用js文件的语句，然后在js文件中用jQuery语法给html报告添加打开截图的入口。

实现方法：

python程序
在程序中添加一个方法，在标签前面添加引用js文件的语句，用replace的方法实现，这样方便定位修改。需要传入报告文件的路径。用jQuery方便定位，所以这里也导入了jQuery的库文件，adjust.js是用来添加a标签的js文件，两个文件都放在html报告文件的同级目录下。在生成报告后使用该方法修改html报告文件。

def adjustReport(file_path):
    """
        在HTML报告中引用jQuery库文件和adjust.js文件
        js文件的作用是添加查看截图的a标签
    """
    text_to_be="<script src='jquery-3.4.1.js'></script>\n<script src='adjust.js'></script>\n</body>"
    with open(file_path,"r",encoding="UTF-8") as f:
        oldHtml=f.read()
    with open(file_path,"w",encoding="UTF-8") as f:
        newHtml=oldHtml.replace("</body>",text_to_be)
        f.write(newHtml)

adjust.js
作用是给Fail和Error的用例添加查看截图的入口，用的是a标签，效果是能直接在页面点击查看截图，在新标签页打开截图。href是该用例对应的截图的路径，原本的想法是在上面的adjustReport()方法中把用例名称和截图路径组合成js语句的字符串添加到html报告中，但是由于这几天刚学JavaScript，还不太熟悉，所以没有成功实现，这里采用的方法是截图的时候就根据用例名称命名，而在adjust.js中可以获取到用例名（模板中已经添加进去，可以通过选择器获取文本），就可以得到合适的href的值了.

function showScreenShot(x){
    for(var i=0;i<x.length;i++){
        var divText=x.eq(i).text();
        x.eq(i).next().append("<br><a class='popup_link' href="+divText+".png"+" target='_blank'>截图</a>");
    }    
}

//fail用例
var tdFailCase=$("td.failCase");
showScreenShot(tdFailCase);
//error用例
var tdErrorCase=$("td.errorCase");
showScreenShot(tdErrorCase);

实现效果

这样在打开html报告的时候就会引用到adjust文件生成查看截图的入口，修改后的网页如下

点击截图会在新标签页打开截图