10c. Advanced WebDriver – JUnit Report Customization

Customization! Who doesn’t like some uniqueness in their creations? Let us add some icing to our Apache ANT generated JUnit Report and make it look all the more beautiful by bringing in some goodness to it.

As a first step towards customizing the auto-generated report, let us understand the code behind it (from Build.xml),

<junitreport todir="junit">
    <fileset dir="junit">
        <include name="TEST-*.xml"/>
    </fileset>
    <report format="frames" todir="junit/report"/>
</junitreport>

JunitReport task of Apache ANT generates the report by performing the following steps,

• All the individual XML files that are generated by the JUnit tasks are merged and named as TESTS-TestSuites.xml
• CSS styles are applied to the merged document
• A final browsable report is available in HTML format

<junitreport todir="junit">

The attribute ‘todir’ specifies the directory to which the merged XML file is to be saved. If nothing is specified, then it defaults to the current directory.

<fileset dir="junit">
    <include name="TEST-*.xml"/>
</fileset>

Sticky Note: All the individual JUnit tests are executed with the ‘junit’ ANT task and the resultant XML files are generated with a name that is specified using the ‘outfile’ attribute. If name is not mentioned, then the default is ‘TEST-name’ (where name is the name of the test as specified in the name attribute of junit task).

Using <fileset> element, junitreport collects all the individual XML files from the given directory mentioned in ‘dir’ and considers all the files starting with the name ‘TEST-‘ as per the above code snippet.

<report format="frames" todir="junit/report"/>

This is the exact task that generates the browsable report from the merged file.

The attribute ‘format’ specifies one of the two available formats in which the report can be generated. They must be ‘frames’ or ‘noframes’. If nothing is specified, then the default is ‘frames’ format. The attribute ‘todir’ specifies the directory to which the generated report must be saved to.

• ‘frames’ format will generate a report which will comprise of multiple files provided with redirection and a stylesheet is used to achieve this effect. This is a more readable format.
• ‘noframes’ format generates a single file called ‘junit-noframes.html’ without any frames and does not use redirecting of any kind. This kind is more suitable for sending it as an attachment in an email or generating a pdf file.

Now that you have an understanding of how things work under the hood, let us get into the fun part (maybe less fun than having a Sundae)!

Say goodbye to those boring auto-generated reports and welcome Customization!! Which means, we are going to either write or edit something. And that something is an XSL file sitting in the ‘etc’ directory of the downloaded apache-ant-1.10.2-bin.zip. Let us take the easy route, EDITING it is!

Remember, we have two formats? So, to customize:

• frames – edit junit-frames.xsl
• noframes – edit junit-noframes.xsl

In my case, both these XSL files are present in “E:\apache-ant-1.10.2\etc” path. Let us work on ‘frames’ format as part of this post. Which means we are going to edit ‘junit-frames.xsl’ file. Copy this file and paste it in the project path. Do not rename the file. For all the changes to work as expected, add an attribute ‘styledir’ to the report task as shown below. This specifies the location of the defined stylesheet, junit-frames.xsl. “.” Specifies that this stylesheet is located in the current directory (same as that of the buildfile).

<report styledir="." format="frames" todir="junit/report"/>

We will dive into the following today,

• Changing the title and description
• Increasing the stack trace font size

As part of our following post we will also look at,

• Add or delete a column
• Changing the styles
• Adding a logo to the header section
• Modifying static text

Sticky Note: All the changes are thus made to ‘junit-frames.xsl’ that is placed in the project directory, “E:\Selenium\” (where Selenium is the project name in my case).

Changing the report title and description

In ‘junit-frames.xsl’ stylesheet from the project location,

1. Change the text of param name as TITLE to ‘JUnit Report’.

BEFORE

<xsl:param name="TITLE">Unit Test Results.</xsl:param>

AFTER

<!-- <xsl:param name="TITLE">Unit Test Results.</xsl:param> -->
<xsl:param name="TITLE">JUnit Report</xsl:param>

2. ‘Page HEADER’ section is responsible for displaying the heading and the description shown on the right. Change them to ‘Custom JUnit Report’ and ‘Designed by ninjas!’ respectively.

BEFORE

<!-- Page HEADER -->
<xsl:template name="pageHeader">
    <h1><xsl:value-of select="$TITLE"/></h1>
    <table width="100%">
    <tr>
        <td align="left"></td>
        <td align="right">Designed for use with <a href="http://www.junit.org/">JUnit</a> and <a href="http://ant.apache.org/">Ant</a>.</td>
    </tr>
    </table>
    <hr size="1"/>
</xsl:template>

AFTER

<xsl:template name="pageHeader">
   <!-- <h1><xsl:value-of select="$TITLE"/></h1>  -->
   <h1>Custom JUnit Report<h1>
    <table width="100%">
    <tr>
        <td align="left"></td>
        <!-- <td align="right">Designed for use with <a href="http://www.junit.org/">JUnit</a> and <a href="http://ant.apache.org/">Ant</a>.</td> -->
        <td align="right">Designed by ninjas!</td>
    </tr>
    </table>
    <hr size="1"/>
</xsl:template>

Save the changes and generate the JUnit report from eclipse.

Increasing the stack trace font size

The stack trace information that we see upon a failure is pretty small and difficult to read. In order to increase its font size, just add a couple lines to the template with the name as stylesheet.css.

<xsl:template name="stylesheet.css">
.StackTrace {
    font-size: 100%;
}

Then add this class to the ‘code’ tag of ‘display-failures’ template which is responsible for displaying the stack trace information.

BEFORE

<code
    <xsl:call-template name="br-replace">
        <xsl:with-param name="word" select="."/>
    </xsl:call-template>
</code>

AFTER

<code class="StackTrace">
    <xsl:call-template name="br-replace">
        <xsl:with-param name="word" select="."/>
    </xsl:call-template>
</code>

Now it is time to throw your hat in the ring. May the power of ANT be with you.

See you again in another post. Happy Customizing!