ExtentReports官网: http://extentreports.com/
3.x GitHub地址: https://github.com/anshooarora/extentreports-java
4.x GitHub地址: https://github.com/extent-framework/extentreports-java
自动化测试使用extentreports生成html测试报告，会碰到html样式无法加载的问题，如下图：
样式异常.png
该问题的原因是extentreports报告的样式资源文件需从作者提供的地址远程加载，而该地址失效，3.x和4.x版本分别截图如下：
- 3.x版本
3.x版本css.png
3.x版本js.png
- 4.x版本
4.x版本css.png
4.x版本js.png
以3.x版本为例，以上问题终极解决办法如下：
- github下载3.x版本源码，源码链接
- 源码dist目录中的资源文件放到自己的文件服务器，或是自己的项目中，以备用作本地离线报告
源码资源文件.png
文件服务器.png
-
找到下图中的源码文件
修改源码文件.png
- index.ftl文件找到对应代码，修改如下
<#assign cdn = config.getValue('cdn')>
<#if cdn == 'extentreports'>
<!-- 此处修改为你的文件服务器地址 -->
<script src='http://文件服务器地址/js/extent.js' type='text/javascript'></script>
<#else>
<!-- 此处可改可不改，可修改为本地相对路径，用作离线报告 -->
<script src='js/extent.js' type='text/javascript'></script>
</#if>
- head.ftl文件找到对应代码，修改如下
<link href='${ config.getValue('protocol') }://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css' />
<link href="${ config.getValue('protocol') }://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<#if cdn == 'extentreports'>
<!-- 此处修改为你的文件服务器地址 -->
<link href='http://文件服务器地址/css/extent.css' type='text/css' rel='stylesheet' />
<#else>
<!-- 此处可改可不改，可修改为本地相对路径，用作离线报告 -->
<link href='css/extent.css' type='text/css' rel='stylesheet' />
</#if>
<title>${ config.getValue('documentTitle') }</title>
- 修改好后，源码打个本地jar包（参考链接），自己项目pom中引入该jar包，注意需引入该jar包的其他依赖，如下面的freemarker，bson
<!-- <dependency>-->
<!-- <groupId>com.aventstack</groupId>-->
<!-- <artifactId>extentreports</artifactId>-->
<!-- <version>4.0.9</version>-->
<!-- </dependency>-->
<!-- 依赖extentreports源码生成本地jar包 -->
<dependency>
<groupId>com.gd</groupId>
<artifactId>extentreports</artifactId>
<version>3.1.5</version>
<scope>system</scope>
<systemPath>${pom.basedir}/libs/extentreports-3.1.5-test.jar</systemPath>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.23</version>
</dependency>
<dependency>
<groupId>org.mongodb</groupId>
<artifactId>bson</artifactId>
<version>3.3.0</version>
</dependency>
<!-- 依赖extentreports源码生成本地jar包 -->
- 最后，可以通过修改ResourceCDN配置，来使用你自己的文件服务器地址在线加载测试报告html文件，或是本地生成离线html文件了
//设置静态文件的DNS 如果cdn.rawgit.com访问不了，可以设置为：ResourceCDN.EXTENTREPORTS 或者ResourceCDN.GITHUB
//本地jar包版本，ResourceCDN.EXTENTREPORTS 对应远程资源文件地址：http://192.168.0.174:9008
// ResourceCDN.GITHUB 对应为本地资源文件相对目录，和html文件同级的css, js目录
htmlReporter.config().setResourceCDN(ResourceCDN.EXTENTREPORTS);
//htmlReporter.config().enableOfflineMode(true);
extent = new ExtentReports();
extent.attachReporter(htmlReporter);
extent.setReportUsesManualConfiguration(true);
本分割线以下的内容可以视为对源码的分析学习
该问题网友常见处理办法为添加修改如下配置：
//设置静态文件的DNS 如果cdn.rawgit.com访问不了，可以设置为：ResourceCDN.EXTENTREPORTS 或者ResourceCDN.GITHUB
loggerReporter.config().setResourceCDN(ResourceCDN.EXTENTREPORTS);
实际上这个配置只是配置使用作者提供的不同的远程加载地址，当作者提供的资源都无法访问时，我们需要使用离线配置，可以不用联网查看测试报告。
以4.x版本举例，操作步骤如下：
- maven框架的pom文件升级extentreports版本
<dependency>
<groupId>com.aventstack</groupId>
<artifactId>extentreports</artifactId>
<version>4.0.9</version>
</dependency>
- 修改extentreports类文件，主要修改init()方法，如下图，左边为3.x版本，右边为4.x版本
代码变更.png
此时就可以生成并查看离线测试报告
离线测试报告文件.png
不过离线测试报告为阉割版，并未包含完整的线上样式资源文件，查看源代码可以看出是作者有意为之，离线报告的样式文件对应getJSFiles(), getCSSFiles(), getIconFiles(), getImgFiles()方法的处理
- 相关源代码
/**
* Defines configuration settings for the HTML reporter
*/
public class ExtentLoggerFormatterConfiguration
extends RichViewReporterConfiguration {
public ExtentLoggerFormatterConfiguration(AbstractReporter reporter) {
super(reporter);
}
/**
* Creates the HTML report, saving all resources (css, js, fonts) in the same location, so the
* report can be viewed without an internet connection
*
* @param offline Setting to enable an offline accessible report
*/
public void enableOfflineMode(Boolean offline) {
usedConfigs.put("enableOfflineMode", String.valueOf(offline));
usedConfigs.put("offlineDirectory", getReporter().getReporterName() + "/");
if (offline) {
File f = getTargetDirectory(((ExtentLoggerReporter)getReporter()).getFileFile());
String s = "/";
String resourcePackagePath = ExtentReports.class.getPackage().getName().replace(".", s);
resourcePackagePath += s + "offline" + s;
String[] resx = combine(getJSFiles(),
getCSSFiles(),
getIconFiles(),
getImgFiles());
OfflineResxDelegate.saveOfflineResources(resourcePackagePath, resx, f.getAbsolutePath());
}
}
private File getTargetDirectory(File f) {
String dir;
if (FileUtil.isDirectory(f)) {
dir = f.getAbsolutePath().replace("\\", "/");
} else {
dir = f.getAbsolutePath().replace("\\", "/");
dir = new File(dir).getParent();
}
dir += "/" + getReporter().getReporterName();
return new File(dir);
}
private String[] combine(String[]... array) {
String[] result = new String[] {};
for (String[] arr : array) {
result = Stream.of(result, arr).flatMap(Stream::of).toArray(String[]::new);
}
return result;
}
private String[] getJSFiles() {
String commonsPath = "commons/js/";
String reporterPath = getReporter().getReporterName() + "/js/";
String[] files = {
commonsPath + "attr.js",
commonsPath + "dashboard.js",
reporterPath + "logger-scripts.js"
};
return files;
}
private String[] getCSSFiles() {
String stylesPath = "css/";
String reporterPath = getReporter().getReporterName() + "/" + stylesPath + "/";
String[] files = {
reporterPath + "logger-style.css",
};
return files;
}
private String[] getIconFiles() {
String path = "commons/css/icons/";
String iconDirPath = "fontawesome/";
String[] files = {
path + "font-awesome.min.css",
path + iconDirPath + "fontawesome-webfont.eot",
path + iconDirPath + "fontawesome-webfont.svg",
path + iconDirPath + "fontawesome-webfont.ttf",
path + iconDirPath + "fontawesome-webfont.woff",
path + iconDirPath + "fontawesome-webfont.woff2",
path + iconDirPath + "FontAwesome.otf",
};
return files;
}
private String[] getImgFiles() {
String path = "commons/img/";
String[] files = {
path + "logo.png"
};
return files;
}
}
- 源码里的完整样式文件
完整样式文件.png
- jar包里阉割后的样式文件
jar包里的样式文件.png
PS：目前碰到一个问题还需排查解决，当有failed的测试用例时，4.x版本生成html文件失败
该问题因log数据为null导致，需加入判空处理，修复如下：
extentreports错误case生成报告问题修复.png
网友评论