测试管理 ReportNg 测试报告的定制修改

saii · 2015年11月09日 · 最后由 斯拉 回复于 2016年09月11日 · 274 次阅读
本帖已被设为精华帖!

参考文章:
Custom reporting engine with ReportNG
利用 ReportNG 生成美观易读的测试报告

前言


前段时间在 Testerhome 上面看到了测试报告生成系列之 ------- 如何用 testNG 生成测试报告 简单的描述了一些测试报告的生成,接着有人在评论中回复说可以针对 reportNg 的测试报告做一些定制化的修改,并且还附上了一张截图。这里我们看下修改后的效果图

这里写图片描述
确实是比 reportNg 原生的测试报告好看多了。

这里写图片描述,那下来我们就来看看如何去修改我们的 reportNg

正文


我们先从 github 上拉下 reportNg 的源代码 reportng , 我们先看下整体的目录结构:

这里写图片描述

因为我们是要修改 html 的生成,所以说我们大部分要修改的内容都是在 resources 下进行。

  1. reportng.properties 增加部分类表项
    这里我们直接在末尾添加

    log=Log Info
    screenshot=Screen Shot
    duration=Duration
    
  2. results.html.vm 修改结果的 html,我们目前只修改 fail 的情况下。

    #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
    
  3. class-results.html.vm 这里是修改具体的内容显示

    ## Show logger output for the test.
        #set ($output = $utils.getTestOutput($testResult))
        #if ($output.size() > 0)
        <div class="testOutput">
          #foreach( $line in $output )
            #if ($meta.shouldEscapeOutput())
              $utils.escapeHTMLString($utils.removeImage($line))<br />
            #else
                $utils.removeImage($line)<br />
            #end
          #end
        </div>
        #end
    

    修改以上部分

    <td class="screenshot">
        #set ($output = $utils.getTestOutput($testResult))
        #if ($output.size() > 0)
            <div class="screenshotimage">
                #foreach( $line in $output )
                    #if ($meta.shouldEscapeOutput())
                        $utils.escapeHTMLString($utils.getImageString($line))<br />
                    #else
                        $utils.getImageString($line)<br />
                    #end
                #end
            </div>
        #end
    </td>
    

    新增以上部分
    上面出现的两个方法 getImageString,removeImage。 就是提取含有 img 标签的字符串和去除带有 img 标签的字符串

  4. ReportNGUtils.java 新增两个方法

    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
            return group;
        }
        return "";
    }
    
    public String removeImage(String s)
    {
        return  s.replaceAll("<img(.*?)/>","");
    }
    

    以上就是 reportNg 修改源代码的位置了

  5. 下来就是我们的测试代码了。实际上很简单 直接一个断言,接着在用例结束的时候判断结果是否失败,是的话就截图。

    @Test
    public void careInterfaceSmoke(){
        Assert.assertEquals(1,2);
    }
    
    @AfterMethod(alwaysRun = true)
    public void afterMethod(ITestResult result) throws Exception {
        if (!result.isSuccess())
            catchExceptions(result);
    }
    
    public void catchExceptions(ITestResult result) {
        System.out.println("result" + result);
        String methodName = result.getName();
        System.out.println(methodName);
        if (!result.isSuccess()) {
            File file = new File("");
            Reporter.setCurrentTestResult(result);
            System.out.println(file.getAbsolutePath());
            Reporter.log(file.getAbsolutePath());
            String filePath = file.getAbsolutePath();
            filePath  = filePath.replace("/opt/apache-tomcat-7.0.64/webapps","http://172.18.44.114:8080");
            Reporter.log("<img src='"+filePath+"/"+result.getName()+".jpg' height='100' width='100'/>");
            int width = 100;
            int height = 100;
            String s = "这是一张测试图片";
            File screenShotFile = new File(file.getAbsolutePath()+"/"+result.getName()+".jpg");
    
            Font font = new Font("Serif", Font.BOLD, 10);
            BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics2D g2 = (Graphics2D)bi.getGraphics();
            g2.setBackground(Color.BLACK);
            g2.clearRect(0, 0, width, height);
            g2.setPaint(Color.RED);
    
            FontRenderContext context = g2.getFontRenderContext();
            Rectangle2D bounds = font.getStringBounds(s, context);
            double x = (width - bounds.getWidth()) / 2;
            double y = (height - bounds.getHeight()) / 2;
            double ascent = -bounds.getY();
            double baseY = y + ascent;
    
            g2.drawString(s, (int)x, (int)baseY);
    
            try {
                ImageIO.write(bi, "jpg", screenShotFile);
            } catch (IOException e) {
                e.printStackTrace();
            }
    
    

    catchExceptions 方法中图片只是为了测试生成了一张图片,实际可以通过对应的测试框架的 api 方法进行截图操作的。

以上就是基本的内容了,但是还一定要记得在 pom.xml 配置的时候增加一句

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-surefire-plugin</artifactId>
    <version>2.18.1</version>
    <configuration>
       <systemPropertyVariables>
           <org.uncommons.reportng.escape-output>false</org.uncommons.reportng.escape-output>            
       </systemPropertyVariables>
       ....
    <configuration>

上面配置的做用是为了报告中的显示不会单纯的显示出 html,而且能够正确的加载出 html,生成的报告结果就如下了。

这里写图片描述

总结


感觉上面的方法还是有点取巧的了,感觉真正的方法应该不是如此,不过实在是 google 了很久,都没有相应的代码,希望有经验的大神,能够指教下正确的做法。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 23 条回复 时间 点赞

@testly 大神过来~

@testly 大神过来~

鄙视楼上两位~

楼主,我这边说一下我的看法:

第一:你把报告里面放截图我个人觉得不实用,因为你想一下如果这份报告给别人看的话内容太多需要滚动条拉下去好几页,别人根本不会去看!
第二:我个人觉得你在一轮测试的时候重点应该把重要得东西放在报告里面,比如说失败的测试用例呈现在报告里面而而错误的重要 log 标题可以选择高亮(最好加一些自己的打点来定位问题)

saii #5 · 2015年11月10日 Author

#4 楼 @testly 其实我到时觉得测试报告里面放置截图并没有什么不妥,另外其实我想说的截图并不是一个重点,因为我只是提供一个思路去修改 reportNg 完成可以根据自己公司的需要来修改,只是我觉得这种修改方式貌似不太对。

@testly 大神说的好

求大神指导~为什么我这样做了以后,显示的报告并没用什么改变呢?

saii #8 · 2015年12月11日 Author

#7 楼 @verainmay 你改了你的 reportNg 的源代码了吗? 另外替换了原先的 jar 包吗?

我用 python,其中有个 pyh 可以自己自动以结果模板

saii #10 · 2015年12月14日 Author

#9 楼 @284772894 这个主要是针对 java 代码的测试报告。另外 python 那个不是有个 HTMLTestRunner 为什么还要用 pyh 自己去写 html 呢。

#8 楼 @zsx10110 我修改了源码,也替换了 jar 包,我去掉某个字符是可以的,就是不能出现你的效果

#10 楼 @zsx10110 用 html 可以自定义

@zsx10110 请教一下是用 maven 把源码导入 eclipse 吗?修改完之后怎么在打成 JAR?

saii #14 · 2016年03月24日 Author

#13 楼 @alanrun 不是这样子的,maven 是我的测试项目用的。
reportng 是用的是 ant。修改完后直接点击下图的

就可以打成 jar 包了。
ps:我用的编译器是 IDEA

@zsx10110 先请教一下怎么把源码导入 eclipse? 因为源码中只有一个 pom.xml 和 build.xml,没有.project 文件的,所以我不知道如何处理了

saii #16 · 2016年03月24日 Author

#15 楼 @alanrun 我错了,确实是导入一个 maven 的项目就可以了。就是你下载源码里面有个文件夹叫 reportng 的 导入它实际上就可以了。它是一个 maven 的项目。
我之前直接通过 IDEA 导入,也没怎么注意过这个。刚才试了下 导入里面的 reportng 通过 complie 就能够编译出 jar 包

@zsx10110 额能具体描述一下怎么编译出 jar 包么?用的什么工具?

saii #18 · 2016年03月24日 Author

#17 楼 @alanrun 用的就是 maven 的命令啊,有个 complie 的 你了解下 maven 就知道了。或者使用 IDEA 编译器,因为 eclipse 我没怎么使用了。

@zsx10110 pom.xml 需要修改什么东西么?我编译的是空 JAR 包
pom.xml:==========
<?xml version="1.0" encoding="UTF-8"?>
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
4.0.0
ReportNG
org.uncommons
reportng
1.1.5
jar
https://reportng.dev.java.net/


Apache License, Version 2.0
http://www.apache.org/licenses/LICENSE-2.0.html
repo




org.testng
testng
[5.0,)


velocity
velocity
1.4


@zsx10110 我编译后 JAR 里面基本没有东西

21楼 已删除

#20 楼 @alanrun 直接用 ant 在根目录下也可以打包

楼主可以发一下 修改后的 reportNG 的 jar 包吗 ?

楼主按照你的修改后,我的 Log Info 和 Screen Shot 都为空

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册