HTMLreport报告（五） -- 测试报告中添加截图

一、需求痛点

　　HTMLreport报告没有截图

 

二、实现办法

　　1、思路：使用viewer.js图片查看器，用cdn；后端部分用 unittest.test_result中的内容

　　2、实现步骤

　　　　1）viewer.js 和 viewer.css

　　　　

　　　　2）js部分 和 截图弹窗的html

　　　　

  　　　　3）新增  截图  的标题列

 　　　　

  　　　　4）截图  的内容列

　　　　

  　　　　5）截图的详细内容（和截图的html模板关联）

　　　　

  　　　　6）截图的html模板

　　　　

  　　　　7）正则匹配unittest中test_result内容中的截图（自己定义匹配规则）

　　　　re规则（很重要，想了很久）：(?:[A-Z]:|\\|(?:\.{1,2}[/\\])|/+)[\w+\\\s_\(\)/]+(?:\.png|\.jpg|\.jpeg|\.gif)

　　　　

 

 　　　　注：有个小问题，这里的图片写了个相对路径，需要根据自己项目的截图保存路径修改，暂时水平有限，还没想到怎么用 js 来实现动态的路径

 

 

三、使用方法

　　输出内容到test_result中，用print 、logger都行

　　

 

 

四、最终效果

　　1、

 

 

  　　2、

 

 

  　　3、

　　

 

 

四、最后

　　如果需要报告模板，私信或者留言。