XML/XSL Transformation: Using Styles
Parent page: Generating Test Reports
Let’s now take the examples from the previous post, and add more style.
Here’s our XML record simulating log data of a test session.
XML Source
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href=".\LogView3.xsl"?> <log> <step type="#note"> <time>21/04/2011 11:45:31 AM</time> <description>Typed data [User1234] in edit box [Username] </description> </step> <step type="#note"> <time>21/04/2011 11:46:03 AM</time> <description>Typed data [Password1234] in edit box [Password]</description> </step> <step type="#bug"> <time>21/04/2011 11:46:13 AM</time> <description>Edit box [Password] didn't accept [!@#$] chars</description> </step> <step type="#idea"> <time>21/04/2011 11:46:37 AM</time> <description>Explore "Remember Me" functionality</description> </step> <step type="#note"> <time>21/04/2011 11:47:01 AM</time> <description>Clicked on button [Login]</description> </step> <step type="#bug"> <time>21/04/2011 11:47:22 AM</time> <flags screenshot="YES" /> <screenshot>20111145_012852.jpg</screenshot> <description>Unfriendly error dialog</description> </step> </log>
Did you notice the following line?
<?xml-stylesheet type=”text/xsl” href=”.\LogView3.xsl”?>
This is how we instruct the web browser to use XSL script for visualization of XML data.
Web-page Report
And here’s the source code of the script
XSL Source
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema"> <!-- variables --> <xsl:variable name="CHAR_SPC"> </xsl:variable> <xsl:template match="/"> <html> <head> <LINK REL="STYLESHEET" HREF=".\logstyle.css" TYPE="text/css" /> <title>automation-beyond.com | TestLog XML/XSL Transformation Example by </title> </head> <body bgcolor="#c0c0c0"> <H1 align="center">Test Log</H1> <H4 align="center">XML/XSL Transformation Example by <A HREF="http://automation-beyond.com/about/"></A></H4> <BR /> <P /> <h3 align="center">Test Steps</h3> <BR /> <TABLE id="automation-beyond-2010" BORDER="1" width="650" align="center"> <TR> <TH width="150">Step Name</TH> <TH width="500">Step Description</TH> </TR> <xsl:for-each select="log/step"> <xsl:choose> <xsl:when test = " @type = '#note' "> <xsl:call-template name="Display_Note" /> </xsl:when> <xsl:when test = " @type = '#idea' "> <xsl:call-template name="Display_Idea" /> </xsl:when> <xsl:when test = " @type = '#bug' "> <xsl:call-template name="Display_Bug" /> </xsl:when> <xsl:otherwise> <TR> <TD>Error</TD> <TD>XML data error</TD> </TR> </xsl:otherwise> </xsl:choose> </xsl:for-each> </TABLE> <BR /> <BR /> <BR /> <BR /> <div class="PageBottomLine" align="center"> <A HREF="http://automation-beyond.com/chapters/tutorials/test-reports/">Home</A> </div> <BR /> </body> </html> </xsl:template> <!-- **************Sub-Templates****************************************** --> <!-- **************Test Note****************************************** --> <xsl:template name="Display_Note"> <TR> <TD> <xsl:attribute name="title"><xsl:value-of select = "time" /></xsl:attribute> Test Note </TD> <TD><xsl:value-of select = "description" /><xsl:value-of select = "$CHAR_SPC" /></TD> </TR> </xsl:template> <!-- **************Test Idea****************************************** --> <xsl:template name="Display_Idea"> <TR> <TD> <xsl:attribute name="title"><xsl:value-of select = "time" /></xsl:attribute> <IMG src=".\test_idea.png" /> Test Idea </TD> <TD><xsl:value-of select = "description" /><xsl:value-of select = "$CHAR_SPC" /></TD> </TR> </xsl:template> <!-- **************Logged Bug****************************************** --> <xsl:template name="Display_Bug"> <TR> <TD> <xsl:attribute name="title"><xsl:value-of select = "time" /></xsl:attribute> <IMG src=".\bug.png" /> Bug </TD> <xsl:choose> <xsl:when test=" flags/@screenshot = 'YES' "> <TD> <xsl:attribute name="title">Click on the link to view the image attached</xsl:attribute> <A style="text-decoration: none" TARGET="_blank"> <xsl:attribute name="href"> <xsl:value-of select="screenshot" /> </xsl:attribute> <IMG border="0" src=".\picture_save.png" onmouseover="this.style.cursor='hand'" /> </A> <xsl:value-of select = "$CHAR_SPC" /> <span class="stFAIL_m1"><xsl:value-of select = "description" /></span> </TD> </xsl:when> <xsl:otherwise> <TD> <span class="stFAIL_m1"><xsl:value-of select = "description" /><xsl:value-of select = "$CHAR_SPC" /></span> </TD> </xsl:otherwise> </xsl:choose> </TR> </xsl:template> </xsl:stylesheet>
How To
- Create CSS template (or reuse one from the archive) and link it
- Use style classes applied to HTML elements by default of explicitely
And here is the package containing the original XML, XSL, CSS, and image files.
