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">
1

这条使我们template.html里面找不到资源的一条，那我们如何找到可替代它的呢？

直接搜索bootstrap，找到我们需要的那一个

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css
1

其他的以此类推。

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">
1
2
3
4

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>
1
2
3
4

但是有个问题，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">
1
2
3
4

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>
1
2
3
4

③ 新问题，页面数据有，排版有问题

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>    
1
2
3

所以，这又该如何解决呢？这里就引出我们第二个重点——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>
1
2
3

但由于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">
1
2
3
4

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
4

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">
1
2
3
4

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
4

解决方案二

把这次我们的这些链接一个个去浏览器中打开，右键全选复制，自己再创建一个文件夹，创建对应名字的文件，把内容粘贴过去，这样，就再也不用担心访问出错的问题了。

弊端

1.需要绝对路径，如果是相对路径，你还需要在生成报告的地方将文件夹再次复制到同等的相对路径下

2.发给别人，别人看不了，因为别人本地没有。

3.不能做永远的懒汉。