文章目录

  • python自动化之BeautifulReport显示异常的解决方案
  • 1、显示异常
  • 2、解决过程
  • (1)问题分析
  • (2)推断验证
  • (3)解决方案
  • ① cdnjs
  • ② 国内加速
  • ③ 新问题,页面数据有,排版有问题
  • ④ BootCDN
  • (4)最终替换链接
  • 3、伪一劳永逸的方法
  • 总结
  • 解决方案一
  • 解决方案二


python自动化之BeautifulReport显示异常的解决方案

1、显示异常

早起,开心的来到公司,批量运行着我那闪耀的IOS设备,一切正常,非常完美。

我愉快的点开测试报告,出现了以下另我痛彻心扉的一幕~

python自动化之BeautifulReport显示异常的解决方案_css

真的,大家相信我,领导也要相信我,昨天下午我下班前运行之后报告还是很完美的,非常好的。

我点开昨天的报告,令我瞠目结舌的一幕出现了,竟然和上图显示的完全一致,我是,失忆了?

注:我的版本是BeautifulReport-0.1.3,镜像源是 http://pypi.douban.com/simple

我委屈,我惶恐,我羞恼啊!

西克秀,我堂堂一名,一名,点王!对,就是点王,我就不信我结局不了这个小问题,无非是上天让我再水一篇文罢了(不是)!

2、解决过程

(不想看解决过程的小伙伴可以直接拉到最后的总结哦,直接搬运即可!)

(1)问题分析

首先,它在前端页面显示不正常,并且我的数据,也都显示不出来,右侧的饼图也是没有显示出来。

其次,看过BeautifulReport源码的小伙伴们都知道,它的报告是以template下的template.html文件作为模板生成的,数据是由我们测试用例里面运行传输过去的。

最后,由于我昨天的报告显示是正常的,今天打开却显示不正常,故,我大胆推断,是前端资源加载出了问题!

(2)推断验证

既然我们推断出,是前端资源加载出现了问题,那这个事情就好办了,打开页面,直接按F12,ctrl+r强制刷新,看下Network即可发现端倪。

python自动化之BeautifulReport显示异常的解决方案_ajax_02

原来是资源404了,找不着了(一般可能由于cdn有波动导致的,过几个小时或者等一天就会恢复,但正常来说,不知道是这个原因的,肯定头都裂开,再说,万一今天领导就要看报告呢?)

(3)解决方案

既然是资源加载的问题,那我们找到template.html的所有href和src,把它们都修改掉

template.html所在的目录为Lib\site-packages\BeautifulReport\template\template.html

修改源头,一劳永逸。如果是你当前的报告看不了,那也是找到所有的link进行修改。

python自动化之BeautifulReport显示异常的解决方案_自动化_03


python自动化之BeautifulReport显示异常的解决方案_css_04

为什么修改的是这两个呢?

前面我们的分析和验证结果就是,资源加载出错,你可以根据前端的报错,把对应的资源换掉,当报错太多,懒得一个个去看去核对,那可以直接找准这些引用了外部资源的代码,宁可错杀一千,不可放过一个!

这时候,问题又来了,我知道是它出了问题,那我怎么改???

① cdnjs

这篇文章的第一个重点来了,讲了这么多就是为了引出它,cdnjs,网址为https://cdnjs.com/libraries

python自动化之BeautifulReport显示异常的解决方案_css_05

那么如何找我们需要的资源呢?举个例子

<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

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

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

python自动化之BeautifulReport显示异常的解决方案_自动化_06

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>

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

python自动化之BeautifulReport显示异常的解决方案_自动化_07

F12检查,资源没有任何问题,控制台有个看不懂的报错

python自动化之BeautifulReport显示异常的解决方案_自动化_08

我们一个一个排查,去报告里面锁定这一行

python自动化之BeautifulReport显示异常的解决方案_ajax_09

按住ctrl+鼠标左键进入这个tooltip,我们发现跳转到了一个bootstrap.min.js文件

python自动化之BeautifulReport显示异常的解决方案_自动化_10

那现在问题很显然,我们的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

python自动化之BeautifulReport显示异常的解决方案_ajax_11

直接搜索我们需要找的bootstrap,点击进入

python自动化之BeautifulReport显示异常的解决方案_运维_12

python自动化之BeautifulReport显示异常的解决方案_bootstrap_13

找到我们需要的,这里我找出来了

<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.不能做永远的懒汉。