10d. Advanced WebDriver – JUnit Report Customization Contd.

Hiya champs! If you had not let your imagination run wild with the previous post, I will help u do just that today.

We will be,

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

Add or delete a column

This is really a piece of cake. Add or delete <th> and <td> tags to achieve this task. Let us see a scenario by adding a column named ‘Executed By’ in ‘All Tests’ table.

<!-- method header -->
<xsl:template name="testcase.test.header">
    <xsl:param name="show.class" select="''"/>
    <tr valign="top">
    <xsl:if test="boolean($show.class)">
        <th>Class</th>
    </xsl:if>
        <th>Name</th>
        <th>Status</th>
        <th width="60%">Type</th>
        <th nowrap="nowrap">Time(s)</th>
        <th>Executed By</th>
    </tr>
</xsl:template>

Under this template, <xsl:template match="testcase" mode="print.test">

along with the existing columns add a value for the newly created ‘Executed By’ column as well.

         <td>
            <xsl:call-template name="display-time">
                <xsl:with-param name="value" select="@time"/>
            </xsl:call-template>
        </td>
        <td>Tester1</td>
    </tr>
</xsl:template>

BEFORE

AFTER

Changing the styles

Thinking hard how to change the styles in the generated report? There is no need to strain your brain on that! Because just like any other webpage, we have a CSS stylesheet taking care of the styles for this report as well. Just search for the template with the name, ‘stylesheet.css’ in the “junit-frames.xsl” file.

<!-- this is the stylesheet css to use for nearly everything -->
<xsl:template name="stylesheet.css">

Styles for the body, tables, headings, stack trace, error, failure, paragraphs, properties, everything is specified in this very template. Just go ahead and throw your hat in the ring! Experiment with each line of CSS and see the changes rendered. And yeah, you can add in your own CSS as well!

Let us just look at one small example for starters. The table details and failure styles are given as below,

table.details tr th{
    font-weight: bold;
    text-align:left;
    background:#a6caf0;
}
.Failure {
    font-weight:bold; color:purple;
}

Let us change these as following,

1. All table headings alignment to center
2. The background color of the table header rows to ‘greenyellow’ (#ADFF2F)
3. Failure text color to maroon

table.details tr th{
    font-weight: bold;
    text-align:center;
    background:#ADFF2F;
}
.Failure {
    font-weight:bold; color:maroon;
}

BEFORE

AFTER

I know, it doesn’t look very appealing to the eye but we proved what we wanted to. So, there you go!

Adding a Logo to the header section

Most of us like our logos on the report that is generated. Who doesn’t like personalizing and a bit of marketing ? If you know a bit of HTML, it’s pretty simple. To the template named, “pageHeader”, add an image tag and specify the path in the src attribute. I have placed my logo image in the ‘junit’ folder of the project where the index.html file is generated.

<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"><img width="50" height="50" alt="Selenium" src="myLogo.jpg"/> Designed by ninjas!</td>
    </tr>
    </table>
    <hr size="1"/>
</xsl:template>

RESULT

Modifying static text

This is the icing on the cake (Oh! You already know it by now). To modify any static text that is displayed in the report, you have to just change it in the “junit-frames.xsl” file. Yes, you read that right. It is that simple!

Let’s say, in the summary table of the report instead of ‘tests’, I want it to be ‘Number of Tests’. Just change the text in the body section where the h2 tag says ‘Summary’,

<table class="details" border="0" cellpadding="5" cellspacing="2" width="95%">
        <tr valign="top">
            <th>Number of Tests</th>
            <th>Failures</th>
            <th>Errors</th>
            <th>Skipped</th>
            <th>Success rate</th>
            <th>Time</th>
        </tr>

RESULT

Time to self-reflect on what we learned so far.

See you again in another post. Happy customizing!