一、背景
使用testng框架+extentreports生成报告时，碰到css/js样式加载不出来，报告很丑的问题。网上搜了一波几乎全是说用一个新的监听类重写静态文件的DNS, 使用ResourceCDN.EXTENTREPORTS作为新的DNS，从这里读取加载CSS、JS文件，就能正常加载样式。
但实际尝试后发现从这个DNS处获取css文件现在也失效了，无法加载到样式。从别的站点加载css/js总会有失效的一天，也许前一天还好好的，第二天就访问不了咯。因此杨叔自行对监听类做了简单的二次开发，直接读取本地的css/js文件，从而永久解决css/js样式加载问题。
二、解决思路
testng自带的测试报告样式不怎么好看，extentreports的报告样式看起来就要高级和好看很多，因此采用extentreports作为testng自动化测试框架下的报告模板输出：
extentreports使用比较简单，问题出在extentreports是国外开发的报告模板，原生的模板报告页面加载时会调用国外网站链接加载css/js样式文件，进而导致样式加载不出来：
如何解决这个问题？网上百度一搜，反复的说法都是新增一个Listener类文件，文件中重写静态文件的DNS, 使用ResourceCDN.EXTENTREPORTS作为新的DNS，从这里读取加载CSS、JS文件：
从extentreports的源码中也能看出有这段逻辑：
相当于只是把从cdn.rawgit.com获取css文件改为了从http://extentreports.com/resx/dist/css/extent.css获取。
做法就是新增一个ExtendTestNGIReporterListenerNew监听类，然后testng.xml中重新制定监听器为这个类：
<listeners>
<!--<listener class-name="com.vimalselvam.testng.listener.ExtentTestNgFormatter"></listener>-->
<!--直接使用我们自己写的监听器，可以跳过翻墙的Js文件，不然报告一致转圈圈加载不出来-->
<listener class-name="com.xxxx.autotestdemo.utils.ExtendTestNGIReporterListenerNew" >
</listeners>
实际使用过程中发现，extentreports.com这里获取css文件现在也失效了，无法再获取到css文件：
解决思路：既然从别的地方获取css/js文件，始终会面临失效无法访问的一天，那不如直接将css/js下载到本地，放入项目工程中，生成报告时直接使用本地工程中的css/js，则永远不会出现样式失效的一天。
杨叔自己用的extentreports的版本为：3.0.6，pom.xml中增加依赖：
<!-- 测试报告extentsreport需要的依赖 -->
<dependency>
<groupId>com.relevantcodes</groupId>
<artifactId>extentreports</artifactId>
<version>2.41.1</version>
</dependency>
<dependency>
<groupId>com.vimalselvam</groupId>
<artifactId>testng-extentsreport</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>com.aventstack</groupId>
<artifactId>extentreports</artifactId>
<version>3.0.6</version>
</dependency>
先去GitHub上下载报告需要的css/js文件：https://github.com/anshooarora/extentreports-java
github打不开的话，可以在文末我的百度网盘地址下载。
然后放到本地工程的resources目录下：
测试报告生成的目录是test-output下，如下图：
查看生成的html报告文件，对应位置将文件的css/js引用路径换为引用本地的css、js文件：
…/src/test/resources/css/extent.css，
…/src/test/resources/js/extent.js，
即可正确得到样式加载：
因此计划在监听类中增加代码，实现生成html report报告之后，修改html文件中的样式文件获取路径为本地路径，即可解决问题。
三、具体代码实现
新增监听类ExtendTestNGIReporterListenerNew，在网上其他文章提供的通用代码上，增加changeContent方法，修改生成的HTML文件中的样式文件路径为从项目的resources目录下获取：
四、步骤总结
1、下载css/js文件到本地，保存到项目的resources目录下；
2、新增监听类ExtendTestNGIReporterListenerNew，在网上其他文章提供的通用代码上，增加changeContent方法，修改生成的HTML文件中的样式文件路径为从项目的resources目录下获取；
3、testng.xml文件中listener使用第2步新增的监听类ExtendTestNGIReporterListenerNew
至此，报告可以永久正常加载css/js样式文件，不用再担心某一天外部链接无法下载了：
报告需要的css/js文件和ExtendTestNGIReporterListenerNew.java文件，我已上传至我的百度网盘，需要的朋友可以自行下载。下载地址：
链接: https://pan.baidu.com/s/1sLfnXchr2vh206Ln4q3WaQ
提取码: vc55
END
以上，如果对你有帮助，欢迎点赞+收藏+分享，一键三连哦~
关注加入我们，一起学习进步
