Ant

For the total runtime to be shown at the top of the page, you have to set the testNgXslt.showRuntimeTotals parameter to true as follows:

<param name="testNgXslt.showRuntimeTotals" expression="true"/>

How to add SVG in overview.html

Summary of how I did to insert SVG in overview.html:

• Extract data(failed, passed, skipped) from overview.html using XSL.
• Convert data extracted into an input file for ChartSVG.
• Process the input file with ChartSVG.
• Insert the resulting SVG in overview2.html.

Step by step

1)In testng-results.xsl, change

<xsl:result-document href="{testng:absolutePath('overview.html')}" format="html">

to

<xsl:result-document href="{testng:absolutePath('overview.html')}" method="xhtml">

2)Download ChartSVG from http://www.hardcoded.net/chartsvg/.

Decompress chartsvg.zip. In lib_pie.xsl, comment out

<xsl:script implements-prefix="math"
      language="java"
      src="java:java.lang.Math" />

3)Apply XSL sheets. Here, I use Ant but you can use other XSLT processors.

<!--
////////////////////////////////////
Adapt to your environment.
////////////////////////////////////
-->
<target name="chart">

	<!-- Remove namespaces from overview.html -->
	<xslt in="${basedir}/testng_nice_report/overview.html" style="removeNamespaces.xsl"
	      out="${basedir}/testng_nice_report/overview.xml">
		<classpath refid="myClasspath"/>
	</xslt>	
	
	<!-- Extract data from overview.html and transform the extracted data into ChartSVG input file format. -->
	<xslt in="${basedir}/testng_nice_report/overview.xml" style="overview2chartSvg.xsl"
	      out="${basedir}/testng_nice_report/overview2.csvg">
		<classpath refid="myClasspath"/>
	</xslt>	
	
	<!-- Create SVG using ChartSVG. -->
	<xslt in="${basedir}/testng_nice_report/overview2.csvg" style="chartsvg.xsl"
	      out="${basedir}/testng_nice_report/overview2.svg">
		<classpath refid="myClasspath"/>
	</xslt>
	
	<!-- Copy clean version of overview.html(overview.xml) and insert SVG -->
	<xslt in="${basedir}/testng_nice_report/overview.xml" style="cpNinsert.xsl"
	      out="${basedir}/testng_nice_report/overview2.html">
		<classpath refid="myClasspath"/>
	</xslt>			

</target>

XSL sheets needed

<?xml version="1.0" encoding="UTF-8"?>
<!-- removeNamespaces.xsl: Remove Namespace -->
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="*">
      <!-- remove element prefix (if any) -->
      <xsl:element name="{local-name()}">
        <!-- process attributes -->
        <xsl:for-each select="@*">
          <!-- remove attribute prefix (if any) -->
          <xsl:attribute name="{local-name()}">
            <xsl:value-of select="."/>
          </xsl:attribute>
        </xsl:for-each>
        <xsl:apply-templates/>
      </xsl:element>
  </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<!--overview2chartSvg.xsl: Extract data from overview.html and transform the extracted data into ChartSVG input file format. -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="xml" indent="yes"></xsl:output>
    
    <xsl:template match="/">
        <xsl:for-each select="//body/table">
            <!--<xsl:value-of select="tr/td[contains(@style, 'FFBBBB')]" />-->
	<xsl:call-template name="ng2svg">
	    <xsl:with-param name="chartName"><!--<xsl:value-of select="tr/td[@width='100%']" />--></xsl:with-param>
	    <xsl:with-param name="failedCnt"><xsl:value-of select="tr/td[contains(@style, 'FFBBBB')]/div" /></xsl:with-param>
	    <xsl:with-param name="passedCnt"><xsl:value-of select="tr/td[contains(@style, 'lightgreen')]/div" /></xsl:with-param>
	    <xsl:with-param name="skippedCnt"><xsl:value-of select="tr/td[contains(@style, 'FFFFBB')]/div" /></xsl:with-param>
	</xsl:call-template>
	    
        </xsl:for-each>	
    </xsl:template>
    
    <xsl:template name="ng2svg">
        <xsl:param name="chartName"/>
        <xsl:param name="failedCnt"/>
        <xsl:param name="passedCnt"/>
        <xsl:param name="skippedCnt"/>
	
	<!-- ChartSVG input file format -->
	<hsgraph>
		<title><xsl:value-of select="$chartName"/></title> 
		<charttype>pie</charttype> 
		<showlegend chartfitpos="0" showpercent="y"/> 
		<bgcolor>white</bgcolor> 
		<series showvalues="y"> 
			<serie explode="y"> 
				<name>Failed</name> 
				<color>red</color> 
				<xsl:element name="point">
				    <xsl:attribute name="x">0</xsl:attribute>
				    <xsl:attribute name="y"><xsl:value-of select="$failedCnt"></xsl:value-of></xsl:attribute>
				</xsl:element>
				
			</serie>
			
			<serie> 
				<name>Passed</name> 
				<color>green</color> 
				<xsl:element name="point">
				    <xsl:attribute name="x">0</xsl:attribute>
				    <xsl:attribute name="y"><xsl:value-of select="$passedCnt"></xsl:value-of></xsl:attribute>
				</xsl:element>
			</serie>
			
			<serie> 
				<name>Skipped</name> 
				<color>yellow</color> 
				<xsl:element name="point">
				    <xsl:attribute name="x">0</xsl:attribute>
				    <xsl:attribute name="y"><xsl:value-of select="$skippedCnt"></xsl:value-of></xsl:attribute>
				</xsl:element>
			</serie>
		</series>
	</hsgraph>	
	
	
    </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<!-- cpNinsert.xsl: Copy clean version of overview.html(overview.xml) and insert SVG -->
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <xsl:output method="html" version="2.0" encoding="UTF-8" indent="yes" omit-xml-declaration="no"/>
    
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
    
    <xsl:template match="table/tr[last()]">
        <xsl:element name="tr">
	<xsl:element name="td">
		<xsl:attribute name="align">center</xsl:attribute>
		<xsl:attribute name="colspan">6</xsl:attribute>
		    <xsl:element name="embed">
			<xsl:attribute name="src">overview2.svg</xsl:attribute>
			<xsl:attribute name="type">image/svg+xml</xsl:attribute>
			<xsl:attribute name="name">emap</xsl:attribute>
			<xsl:attribute name="width">800</xsl:attribute>
			<xsl:attribute name="height">600</xsl:attribute>
		    </xsl:element>
	</xsl:element>
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

TestNG-XSLT now supports SVG reports out of the box, so the above method is not necessary if you need a pie chart with the results overview.

Thanks to Xuan for the suggestions and the help to get this working.

In the report that I generate, there is no pie chart. Based on the last comment, the pie chart (SVG report) should work in TestNG out of the box. Just wondering what I'm missing. Is there any library that need to be added to my environment other than saxon?

OK. It does not work with IE8 but works fine with googlechrome. I think a SVG viewer plugin is needed for IE8. I couldn't find it yet.

hai, i am new to maven.but i need to create the test report in the form of pie chart. can u share the details of pom.xml along with corresponding xslt stylesheets, please.......