TRX to HTML using XSLT and JavaScript

Here is another simple way to generate HTML reports from Visual Studio Team System 2008, test execution result files (.trx). I have already described how you can use only XSLT to convert TRX to HTML in my earlier write up - Generating HTML reports from TRX using XSLT. This article describes another similar method which requires xslt, but using JavaScript on the HTML page. Now, the difference here is to make the trx and xslt files independent.
If you have read the earlier article on Generating HTML reports from TRX using XSLT, you will rememeber that, if you want to apply your report generating xslt to the trx file, you need to edit the trx to put in the xslt file name. Applying xslt to trx in your report html saves that step and make two files independent of each other. This way, it is easy to set up a small report server where the trx to html conversion happens in the html.

I am not going to repeat the trx and xslt format here, you can always see the example from Generating HTML reports from TRX using XSLT article!

I am directly going into the html page you will need to do the job. Here is what you need to put in your HTML file -

<html>
<script language="javascript" type="text/javascript">
function loadXMLDoc(fname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
function displayResult()
{
xml=loadXMLDoc("results.trx");
xsl=loadXMLDoc("viewResults.xslt");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
<body id="example" onload="displayResult()">
</body>
</html>

Also, don't forget to remove any attributes from the first node of the trx file, it should look just as . If you keep the attributes from , for some reason none of the xml parsing functions would work.

Save above code in report.html in the same location where the results.trx and viewResults.xslt are located. View report.html in browser to see the resultant html!