UI自动化Selenium BeautifulReport报告样式错乱解决

有一天开开心心上班，打开我的自动化测试报告，整个人都不好了，出现了让我意想不到的事情——样式错乱、数据出不来；懵逼了；

咋回事昨天晚上下班还好好地，难道是啥插件自动升级导致不兼容，各种找；变成这个鬼样子了；

最后打开报告F12查看，发现是报告依赖的js和css文件网络访问不了了；依赖的资源404，找不到了；

咋办？首先找到依赖的资源地址，通过分析发现BeautifulReport报告生成都是根据一个模板文件，依赖的资源地址配置在模板文件中；

python安装目录下的\Lib\site-packages\BeautifulReport\template 目录中；

需要修改2部分：css文件和js文件

解决方案有2种：

1、将资源文件下载到本地目录，模板中指定本地路径

      优势：本地稳定，不再依赖于网络加载

      不足：如果报告发给别人开，别人本地没有资源文件，报告打开还是样式错乱；

2、找到网上稳定的资源地址，替换网络路径

      优势：报告发给任何人都能看

      不足：依赖网络，如果不稳定或者别人环境不能联网，也会出现样式错乱；

基于作者工作环境，选择方案2

1、打开template.html文件，替换css和js网络地址

新：
<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">

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

2、重新运行自动化case生成新的报告完美；