1.8 reportNg之overview.html.vm修改

最新推荐文章于 2022-03-03 19:45:30 发布

原创最新推荐文章于 2022-03-03 19:45:30 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reportNg定制

ReportNg 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在测试报告中增加作者信息，并使用百度的ECharts库生成饼图以直观展示测试结果，包括通过率、失败率和跳过率。

1、overview.html.vm修改后的源码如下

注：

①增加了overview页面的作者

②增加了饼图显示，饼图引用的是百度的echars.min.js，需要在HTMLReporter.java中添加一行代码，请看2中的方法。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="$messages.locale.language" lang="$messages.locale.language">
<head>
  <title>$meta.reportTitle - $messages.getString("overview")</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="description" content="TestNG unit test results." />
  <link href="reportng.css" rel="stylesheet" type="text/css" />
##  #if ($meta.stylesheetPath)
##  <link href="custom.css" rel="stylesheet" type="text/css" />
##  #end
    <script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<div id="meta">
  $messages.getString("generatedBy")
  $messages.getString("atTime") $meta.reportTime $messages.getString("onDate") $meta.reportDate
  <br /><span id="systemInfo">$meta.user&nbsp;/&nbsp;$meta.javaInfo&nbsp;/&nbsp;$meta.platform</span>
</div>

<h1>$meta.reportTitle</h1>
#if (!$utils.allOutput.empty)
  <p>
    <a href="output.html">$messages.getString("logOutput")</a>
    #if ($meta.coverageLink)
      &#183; <a href="$meta.coverageLink" target="_top">$messages.getString("coverageReport")</a>
    #end
  </p>
#end
<div>$messages.getString("author")</p></div>
<div id="mains" style="width: 500px;height:500px;margin:0px auto"></div>
#foreach ($suite in $suites)
<table class="overviewTable">
  #set ($suiteId = $velocityCount)
  #set ($totalTests = 0)
  #set ($totalPassed = 0)
  #set ($totalSkipped = 0)
  #set ($totalFailed = 0)
  <tr>
    <th colspan="6" class="header suite">
      <div class="suiteLinks">
        #if (!$suite.invokedMethods.empty)
        ##<a href="suite${suiteId}_chronology.html">$messages.getString("chronology")</a>
        #end
        #if ($utils.hasGroups($suite))
        <a href="suite${suiteId}_groups.html">$messages.getString("groups")</a>
        #end        
      </div>
      ${suite.name}
    </th>
  </tr>
  <tr class="columnHeadings">
    <td>&nbsp;</td>
    <th>$messages.getString("duration")</th>
    <th>$messages.getString("passed")</th>
    <th>$messages.getString("skipped")</th>
    <th>$messages.getString("failed")</th>
    <th>$messages.getString("passRate")</th>
  </tr>
  #foreach ($result in $suite.results)
  #set ($notPassedTests = $result.testContext.skippedTests.size() + $result.testContext.failedTests.size())
  #set ($total = $result.testContext.passedTests.size() + $notPassedTests)
  #set ($totalTests = $totalTests + $total)
  #set ($totalPassed = $totalPassed + $result.testContext.passedTests.size())
  #set ($totalSkipped = $totalSkipped + $result.testContext.skippedTests.size())
  #set ($totalFailed = $totalFailed + $result.testContext.failedTests.size())
  #set ($failuresExist = $result.testContext.failedTests.size()>0 || $result.testContext.failedConfigurations.size()>0)

  #if (($onlyReportFailures && $failuresExist) || (!$onlyReportFailures))
  <tr class="test">
    <td class="test">
      <a href="suite${suiteId}_test${velocityCount}_results.html">${result.testContext.name}</a>
    </td>
    <td class="duration">
      $utils.formatDuration($utils.getDuration($result.testContext))s
    </td>

    #if ($result.testContext.passedTests.size() > 0)
    <td class="passed number">$result.testContext.passedTests.size()</td>
    #else
    <td class="zero number">0</td>
    #end

    #if ($result.testContext.skippedTests.size() > 0)
    <td class="skipped number">$result.testContext.skippedTests.size()</td>
    #else
    <td class="zero number">0</td>
    #end

    #if ($result.testContext.failedTests.size() > 0)
    <td class="failed number">$result.testContext.failedTests.size()</td>
    #else
    <td class="zero number">0</td>
    #end

    <td class="passRate">
      #if ($total > 0)
      #set ($passes = $total - $notPassedTests)
      $utils.formatPercentage($passes, $total)
      #else
      $messages.getString("notApplicable")
      #end
    </td>
  </tr>
  #end
  #end

    <tr class="suite">
    <td colspan="2" class="totalLabel">$messages.getString("total")</td>
      #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
    <td class="passRate suite">
      #if ($totalTests > 0)
      #set ($totalPasses = $totalTests - $totalSkipped - $totalFailed)
      $utils.formatPercentage($totalPasses, $totalTests)
      #else
      $messages.getString("notApplicable")
      #end
    </td>
  </tr>
</table>
#end
<script type='text/javascript'>
    pcount=document.getElementById("tpn").innerHTML;
    fcount=document.getElementById("tfn").innerHTML;
    scount=document.getElementById("tsn").innerHTML;
    var myChart = echarts.init(document.getElementById('mains'));
     option = {
        title : {
            text:'Test Chart',
           // subtext: '纯属虚构',
           x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['passed','failed','skiped']
        },
         textStyle : {
            fontSize:18},
        series : [
            {
                name: '用例分布',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:pcount, name:'passed',itemStyle:{color:'#1bad14'}},
                    {value:fcount, name:'failed',itemStyle:{color:'#d31a17'}},
                    {value:scount, name:'skiped',itemStyle:{color:'#FFA500'}},

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

2、HTMLReporter源码修改

private void copyResources(File outputDirectory) throws IOException
{
    copyClasspathResource(outputDirectory, "reportng.css", "reportng.css");
    copyClasspathResource(outputDirectory, "reportng.js", "reportng.js");
//增加了下面这行代码，目的是将其复制到测试报告的目录里
    copyClasspathResource(outputDirectory, "echarts.min.js", "echarts.min.js");
    // If there is a custom stylesheet, copy that.
    File customStylesheet = META.getStylesheetPath();