BeautifulReport报告页面展示异常解决方法

一、突发异常

某个风和丽日的上午，查看测试报告，页面突然不显示数据

596B2DF2161ABDC903159B8C8D9C7066.png

二、查找原因

基本多年提BUG的经验，首先排除了自己干了点啥给弄完了的嫌疑

1、没升级Python的版本，BeautifulReport已经2年没维护也不可能更新
2、最近没提交过代码，没改过工程文件
3、昨天还是好的，今天莫名其妙就行了

那就只能从源头查起来，先看了看BeautifulReport的源码，就是常规的给模板文件赋值

C82F410ACF0C3445DDD87D20A1690516.png

再查查看是不是执行unittest出现了问题，导致没能获取到执行结过，然后进已生成的报告文件里看了看，发现并没有问题

F591330B3EB8E1B0AB39EF2E0D457686.png

这一系列动作搞完，发现都没有问题，那就只能再看看报错信息了

D730A436-EEAF-4B05-B5F9-7102E6FE3ED2.png

果然，是引入的源文件出现了问题，访问的链接已经404不存在，那这时候就需要更新一下了

三、解决问题

1、找到报错的对应引入库可用链接

cdnjs
输入想要查找的库，复制替换报错的链接

01A9B8A7-F1A5-4032-AC0B-A9EFD7F4DA94.png

2、直接在BeautifulReport库的template.html模板文件中替换

[图片上传中...(4027978BFC1F2A5548990DAF7ED8F4C6.png-719f65-1643255912262-0)] 4027978BFC1F2A5548990DAF7ED8F4C6.png

替换的内容：

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/fontawesome.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.8.rc6/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/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/chosen/1.8.8.rc6/chosen.jquery.js"></script>

四、解决后的效果

DEE36EBD-05B9-49FC-90D8-11DC58844D96.png