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 Albert Gareev</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/">Albert Gareev</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.
