python自动化之BeautifulReport显示异常的解决方案
python自动化之BeautifulReport显示异常的解决方案
1、显示异常
周五早起，开心的来到公司，批量运行着我那闪耀的IOS设备，一切正常，非常完美。
我愉快的点开测试报告，出现了以下另我痛彻心扉的一幕~
真的，大家相信我，领导也要相信我，昨天下午我下班前运行之后报告还是很完美的，非常好的。
我点开昨天的报告，令我瞠目结舌的一幕出现了，竟然和上图显示的完全一致，我是，失忆了？
注：
我的版本是BeautifulReport-0.1.3，
镜像源是http://pypi.douban.com/simple
我委屈，我惶恐，我羞恼啊！
西克秀，我堂堂一名，一名，点王！对，就是点王，我就不信我结局不了这个小问题，无非是上天让我再水一篇文罢了（不是）！
2、解决过程
（不想看解决过程的小伙伴可以直接拉到最后的总结哦，直接搬运即可！）
（1）问题分析
首先，它在前端页面显示不正常，并且我的数据，也都显示不出来，右侧的饼图也是没有显示出来。
其次，看过BeautifulReport源码的小伙伴们都知道，它的报告是以template下的template.html文件作为模板生成的，数据是由我们测试用例里面运行传输过去的。
最后，由于我昨天的报告显示是正常的，今天打开却显示不正常，故，我大胆推断，是前端资源加载出了问题！
（2）推断验证
既然我们推断出，是前端资源加载出现了问题，那这个事情就好办了，打开页面，直接按F12，ctrl+r强制刷新，看下Network即可发现端倪。
原来是资源404了，找不着了（一般可能由于cdn有波动导致的，过几个小时或者等一天就会恢复，但正常来说，不知道是这个原因的，肯定头都裂开，再说，万一今天领导就要看报告呢？）
（3）解决方案
既然是资源加载的问题，那我们找到template.html的所有href和src，把它们都修改掉
template.html所在的目录为
Lib\site-packages\BeautifulReport\template\template.html
修改源头，一劳永逸。如果是你当前的报告看不了，那也是找到所有的link进行修改。
为什么修改的是这两个呢？
前面我们的分析和验证结果就是，资源加载出错，你可以根据前端的报错，把对应的资源换掉，当报错太多，懒得一个个去看去核对，那可以直接找准这些引用了外部资源的代码，宁可错杀一千，不可放过一个！
这时候，问题又来了，我知道是它出了问题，那我怎么改？？?
① cdnjs
这篇文章的第一个重点来了，讲了这么多就是为了引出它，cdnjs,网址为https://cdnjs.com/libraries
那么如何找我们需要的资源呢？举个例子
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">这条使我们template.html里面找不到资源的一条，那我们如何找到可替代它的呢？
直接搜索bootstrap，找到我们需要的那一个
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css其他的以此类推。
href替换cdnjs的如下：
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet">scr替换cdnjs的如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>但是有个问题，cdnjs是国外的，我们网络如果不能访问外网，加载则会很慢，甚至一直转圈圈加载不出来，所以这里引出第二个重点，国内cdn加速。
② 国内加速
上面一节说道，cdnjs.cloudflare.com是使用的国外的，现在需要改成国内的，修改方式也非常简单，只需要将所有链接中的cdnjs.cloudflare.com替换成cdn.bootcdn.net即可。
href替换cdnjs的如下：
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet">scr替换cdnjs的如下：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>③ 新问题，页面数据有，排版有问题
F12检查，资源没有任何问题，控制台有个看不懂的报错
我们一个一个排查，去报告里面锁定这一行
按住ctrl+鼠标左键进入这个tooltip，我们发现跳转到了一个bootstrap.min.js文件
那现在问题很显然，我们的cdn里面的bootstrap.min.js是问题的，我们把这两个犯错的孩子伶出来批斗！
你们两个怎么回事？
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script> 所以，这又该如何解决呢？这里就引出我们第二个重点——BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务,网址https://www.bootcdn.cn/
④ BootCDN
直接搜索我们需要找的bootstrap，点击进入
找到我们需要的，这里我找出来了
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.min.js"></script>但由于BeautifulReport这个项目是2019年的，可能会存在兼容方面的问题，故我们需要将大版本保持一致，回到cdnjs中查找发现是有3.3.5这个版本，于是乎我再次替换。（保持大版本一致即可，3开头就行，如3.3.7）。
另外href和src的bootstrap版本也需要一致哦。其他的同理。
最后再去我们报告或者是template.html里面替换掉。
（4）最终替换链接
href替换的如下：
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet">scr替换的如下：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>3、伪一劳永逸的方法
把这次我们的这些链接一个个去浏览器中打开，右键全选复制，自己再创建一个文件夹，创建对应名字的文件，把内容粘贴过去，这样，就再也不用担心访问出错的问题了。
弊端
1.需要绝对路径，如果是相对路径，你还需要在生成报告的地方将文件夹再次复制到同等的相对路径下
2.发给别人，别人看不了，因为别人本地没有。
3.不能做永远的懒汉。
总结
解决方案一
在html报告或者BeautifulReport下的template.html文件中：
href替换的如下：
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet">scr替换的如下：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>解决方案二
把这次我们的这些链接一个个去浏览器中打开，右键全选复制，自己再创建一个文件夹，创建对应名字的文件，把内容粘贴过去，这样，就再也不用担心访问出错的问题了。
弊端
1.需要绝对路径，如果是相对路径，你还需要在生成报告的地方将文件夹再次复制到同等的相对路径下
2.发给别人，别人看不了，因为别人本地没有。
3.不能做永远的懒汉。
CSDN : 梦无矶
可直接复制代码