自动化测试系列（10）—— reportng登场（自定义页面代码版）
程序员文章站
2022-05-12 20:05:08
...
自动化测试系列（10）—— reportng登场（自定义页面代码版）
第一次改源码还有点小激动……
参考文章
reportng定制修改
其实自定义页面，也就是把上次导入的reportng.1.1.4.jar包的源码，改成自己想要样子，再打包放到原来的位置，就是下面pom.xml代码中的这个包
<!--https://mvnrepository.com/artifact/org.uncommons/reportng-->
<dependency>
<groupId>org.uncommons</groupId>
<artifactId>reportng</artifactId>
<version>1.1.4</version>
<scope>test</scope>
</dependency>首先去Reportng的源码地址把源码下载下来，用idea打开，可以看到源码的项目结构如下
先来改pom.xml，本项目用的6.14.3的testng，2.22.0的maven-surefire-plugin和1.7版本的JDK
<dependencies>
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>6.14.3</version>
</dependency>
<dependency>
<groupId>velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.4</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.0</version>
<configuration>
<systemPropertyVariables>
<org.uncommons.reportng.escape-output>false</org.uncommons.reportng.escape-output>
</systemPropertyVariables>
</configuration>
</plugin>
<!--配置JDK版本-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
</plugins>
</build>添加饼图
import后，先来添个饼图，打开overview.html.vm，导入ichart组件（开源图形插件）
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>接下来添加饼图的div，本项目把饼图放到了总览表格的下面，点击查看图片参考，个人觉得这样比放在表格上方更好看
</table>
#end
<div id='ichart-render'></div>
</body>
</html>给总数，失败总数和跳过总数添加id，方便后面的js代码获取他们的值
#if ($totalPassed > 0)
<td id="tpn" class="passed number">$totalPassed</td>
#else
<td id="tpn" class="zero number">0</td>
#end
#if ($totalSkipped > 0)
<td id="tsn" class="skipped number">$totalSkipped</td>
#else
<td id="tsn" class="zero number">0</td>
#end
#if ($totalFailed > 0)
<td id="tfn" class="failed number">$totalFailed</td>
#else
<td id="tfn" class="zero number">0</td>
#end饼图显示的js代码，放在饼图的div下方即可
<script type='text/javascript'>
pcount=document.getElementById("tpn").innerHTML;
fcount=document.getElementById("tfn").innerHTML;
scount=document.getElementById("tsn").innerHTML;
$(function(){
var chart = iChart.create({
render:"ichart-render",
width:800,
height:400,
background_color:"#fefefe",
gradient:false,
color_factor:0.2,
border:{
color:"BCBCBC",
width:0
},
align:"center",
offsetx:0,
offsety:0,
sub_option:{
border:{
color:"#BCBCBC",
width:1
},
label:{
fontweight:500,
fontsize:11,
color:"#4572a7",
sign:"square",
sign_size:12,
border:{
color:"#BCBCBC",
width:1
}
}
},
shadow:true,
shadow_color:"#666666",
shadow_blur:2,
showpercent:false,
column_width:"70%",
bar_height:"70%",
radius:"90%",
subtitle:{
text:"",
color:"#111111",
fontsize:16,
font:"微软雅黑",
textAlign:"center",
height:20,
offsetx:0,
offsety:0
},
footnote:{
text:"",
color:"#111111",
fontsize:12,
font:"微软雅黑",
textAlign:"right",
height:20,
offsetx:0,
offsety:0
},
legend:{
enable:false,
background_color:"#fefefe",
color:"#333333",
fontsize:12,
border:{
color:"#BCBCBC",
width:1
},
column:1,
align:"right",
valign:"center",
offsetx:0,
offsety:0
},
coordinate:{
width:"80%",
height:"84%",
background_color:"#ffffff",
axis:{
color:"#a5acb8",
width:[1,"",1,""]
},
grid_color:"#d9d9d9",
label:{
fontweight:500,
color:"#666666",
fontsize:11
}
},
label:{
fontweight:500,
color:"#666666",
fontsize:11
},
type:"pie2d",
data:[
{
name:"通过",
value:pcount,
color:"#44aa44"
},{
name:"失败",
value:fcount,
color:"#ff4444"
},{
name:"跳过",
value:scount,
color:"#FFD700"
}
]
});
chart.draw();
});
</script>到这里饼图就算添加完成了
添加截图
参考文章
reportNG定制化之失败截图，包括reportNG打包
首先要明确知道，测试用例报错的时候才会截图，打开results.html.vm，找到#if ($failedTests.size() > 0)…#end，改成以下代码
#if ($failedTests.size() > 0)
<table class="resultsTable">
<tr><th colspan="5" class="header failed">$messages.getString("failedTests")</th></tr>
#foreach ($testClass in $failedTests.keySet())
<tr>
<td colspan="1" class="group">$testClass.name</td>
<td colspan="1" class="group">$messages.getString("duration")</td>
<td colspan="1" class="group">$messages.getString("log")</td>
<td colspan="1" class="group">$messages.getString("screenshot")</td>
</tr>
#set ($classResults = $failedTests.get($testClass))
#parse ("org/uncommons/reportng/templates/html/class-results.html.vm")
#end
</table>
#end对应的，在reportng.properties最底下加上这两行
log=Log Info
screenshot=Screen Shot打开ReportNGUtils.java，新增两个方法getImageString()和removeImage()
//提取含有img标签的字符串
public String getImageString(String s)
{
String regex = "(<img(.*?)/>)";
Pattern pattern = Pattern.compile(regex);
Matcher matcher = pattern.matcher(s);
while (matcher.find()) {
String group = matcher.group(1);
return group;
}
return "";
}
//去除带有img标签的字符串
public String removeImage(String s)
{
return s.replaceAll("<img(.*?)/>","");
}打开class-results.html.vm，在倒数第二行加入一列来显示图片，在这里用到了ReportNGUtils.java新增方法的其一
<td class="screenshot">
#set ($output = $utils.getTestOutput($testResult))
#if ($output.size() > 0)
<div class="screenshotimage">
#foreach( $line in $output )
#if ($meta.shouldEscapeOutput())
$utils.getImageString($line)<br/>
#else
$utils.getImageString($line)<br/>
#end
#end
</div>
#end
</td>打开ReportNGUtils.java……我已经忘记这里有没有改什么了，自己对照一下吧
/**
* Replace any angle brackets, quotes, apostrophes or ampersands with the
* corresponding XML/HTML entities to avoid problems displaying the String in
* an XML document. Assumes that the String does not already contain any
* entities (otherwise the ampersands will be escaped again).
* @param s The String to escape.
* @return The escaped String.
*/
public String escapeString(String s)
{
if (s == null)
{
return null;
}
StringBuilder buffer = new StringBuilder();
for(int i = 0; i < s.length(); i++)
{
buffer.append(escapeChar(s.charAt(i)));
}
return buffer.toString();
}
/**
* Converts a char into a String that can be inserted into an XML document,
* replacing special characters with XML entities as required.
* @param character The character to convert.
* @return An XML entity representing the character (or a String containing
* just the character if it does not need to be escaped).
*/
private String escapeChar(char character)
{
switch (character)
{
case '<': return "<";
case '>': return ">";
case '"': return """;
case '\'': return "'";
case '&': return "&";
default: return String.valueOf(character);
}
}
/**
* Works like {@link #escapeString(String)} but also replaces line breaks with
* <br /> tags and preserves significant whitespace.
* @param s The String to escape.
* @return The escaped String.
*/
public String escapeHTMLString(String s)
{
if (s == null)
{
return null;
}
StringBuilder buffer = new StringBuilder();
for(int i = 0; i < s.length(); i++)
{
char ch = s.charAt(i);
switch (ch)
{
case ' ':
// All spaces in a block of consecutive spaces are converted to
// non-breaking space ( ) except for the last one. This allows
// significant whitespace to be retained without prohibiting wrapping.
char nextCh = i + 1 < s.length() ? s.charAt(i + 1) : 0;
buffer.append(nextCh==' ' ? " " : " ");
break;
case '\n':
buffer.append("<br/>\n");
break;
default:
buffer.append(escapeChar(ch));
}
}
return buffer.toString();
}添加截图在这里告一段落
调整测试结果显示顺序
测试详情中的结果是按照名称排列的，现在调整为按照测试顺序排列，打开TestResultComparator.java，修改代码如下
public int compare(ITestResult result1, ITestResult result2)
{
//return result1.getName().compareTo(result2.getName());
int longresult2 = 0;
if(result1.getStartMillis() < result2.getStartMillis()){
longresult2 = -1;
} else {
longresult2 = 1;
}
return longresult2;
}字符转换
在这里填一个我遇到的坑，后期用到jenkins的时候，在jenkins里显示的测试报告会显示中文乱码，需要修改AbstractReporter.java文件的generateFile方法如下，使显示字符转换成utf-8
/**
* Generate the specified output file by merging the specified
* Velocity template with the supplied context.
*/
protected void generateFile(File file,
String templateName,
VelocityContext context) throws Exception
{
//Writer writer = new BufferedWriter(new FileWriter(file));
OutputStream out=new FileOutputStream(file);
Writer writer = new BufferedWriter(new OutputStreamWriter(out,"utf-8"));
try
{
Velocity.mergeTemplate(classpathPrefix + templateName,
ENCODING,
context,
writer);
writer.flush();
}
finally
{
writer.close();
}
}ant打包
现在自定义了总览饼图，错误截图，展示顺序，差不多该打包reportng项目了，右键build.xml，点击Add as Ant Build File
可以看到右侧出现ant打包步骤，双击release进行打包
点击idea下方的messages查看打包信息，可以看到已经打包完成
可以看到打包好的压缩包，解压后复制jar包到maven的本地仓库
更新一下项目再测试一遍，就可以得到饼图和按执行顺序排序的测试结果了，截图的测试用例还要再写
有问题请留言。