title: How to convert XML to HTML using xslt
body: <p>Hi I want to convert my xml data to a HTML report. My sample xml looks somewhat like below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;TestCases&gt;
   &lt;TestCase&gt;
    &lt;TCiD&gt;TC001&lt;/TCiD&gt;
    &lt;Scenario&gt;Verify the login functionality&lt;/Scenario&gt;
    &lt;TSResult&gt;Pass&lt;/TSResult&gt;
    &lt;ScTime&gt;50&lt;/ScTime&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Invoke application and enter a valid "Username"&lt;/Step&gt;
     &lt;Method&gt;enter_Text&lt;/Method&gt;
     &lt;TestData&gt;muralitharan_qac_mem&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;SanpFilePath&lt;/Filepath&gt;
    &lt;/Steps&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Enter the valid "Password"&lt;/Step&gt;
     &lt;Method&gt;enter_Password&lt;/Method&gt;
     &lt;TestData&gt;test!&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;&lt;/Filepath&gt;
    &lt;/Steps&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Tap on the submit button&lt;/Step&gt;
     &lt;Method&gt;click_On_Button&lt;/Method&gt;
     &lt;TestData&gt;&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;&lt;/Filepath&gt;
    &lt;/Steps&gt;    
    &lt;Steps&gt;
     &lt;Step&gt;Tool wait time&lt;/Step&gt;
     &lt;Method&gt;ToolToWaitInMilliSeconds&lt;/Method&gt;
     &lt;TestData&gt;10000&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;&lt;/Filepath&gt;
    &lt;/Steps&gt;    
   &lt;/TestCase&gt;
   &lt;TestCase&gt;
    &lt;TCiD&gt;TC002&lt;/TCiD&gt;
    &lt;Scenario&gt;Verify unsuccessful login for invalid Username&lt;/Scenario&gt;
    &lt;TSResult&gt;Pass&lt;/TSResult&gt;
    &lt;ScTime&gt;60&lt;/ScTime&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Invoke application and enter a invalid "Username"&lt;/Step&gt;
     &lt;Method&gt;enter_Text&lt;/Method&gt;
     &lt;TestData&gt;invalid_mem&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;SanpFilePath&lt;/Filepath&gt;
    &lt;/Steps&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Enter the valid "Password"&lt;/Step&gt;
     &lt;Method&gt;enter_Password&lt;/Method&gt;
     &lt;TestData&gt;test2!&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;&lt;/Filepath&gt;
    &lt;/Steps&gt;
    &lt;Steps&gt;
     &lt;Step&gt;Tap on the submit button&lt;/Step&gt;
     &lt;Method&gt;click_On_Button&lt;/Method&gt;
     &lt;TestData&gt;&lt;/TestData&gt;
     &lt;StepResult&gt;Pass&lt;/StepResult&gt;
     &lt;Time&gt;08/05/15 14:34:27 &lt;/Time&gt;
     &lt;Filepath&gt;&lt;/Filepath&gt;
    &lt;/Steps&gt;     
   &lt;/TestCase&gt;
  &lt;/TestCases&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Now how I want my html report in a to be like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>TestCase   Testcase Name                           Result    Time
  TC001      Verify the login functionality          Pass      50
  TC002      Verify unsuccessful login for           Pass      60
             invalid Username</code></pre>
  </div>
  </div>
  </p>
  
  <p>On clicking TC001 the relevant steps for the testcase would show up as a table (something like a tree structure which can be expanded or collapsed).</p>
  
  <p>Can anyone help me in how this can be achieved.</p>
  
  <p>The xslt which I have created displays the Testcases in table, but I am not able to create a tree structure for the steps. The xslt is given below. </p>
  
  <pre><code>&lt;?xml version="1.0" ?&gt; 
  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:s="http://www.stylusstudio.com/xquery"&gt;
      &lt;xsl:template match="/"&gt;
          &lt;html&gt;
              &lt;head /&gt; 
              &lt;body&gt;
                  &lt;div style="text-align: none;color: #0000FF;"&gt;
                      &lt;table align="none" style="border-style: outset;border-width: 2pt;width: 100%;background-repeat: repeat" cellspacing="1pt"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                      &lt;div style="text-align: none;color: #0000FF;"&gt;
                                          &lt;span style="font-weight: bold;text-decoration: underline;"&gt;
                                              &lt;xsl:text&gt;Test Case ID&lt;/xsl:text&gt; 
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                      &lt;div style="text-align: none;color: #0000FF;"&gt;
                                          &lt;span style="font-weight: bold;text-decoration: underline;"&gt;
                                              &lt;xsl:text&gt;Test Case Name&lt;/xsl:text&gt; 
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                      &lt;div style="text-align: none;color: #0000FF;"&gt;
                                          &lt;span style="font-weight: bold;text-decoration: underline;"&gt;
                                              &lt;xsl:text&gt;Result&lt;/xsl:text&gt; 
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                                  &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                      &lt;div style="text-align: none;color: #0000FF;"&gt;
                                          &lt;span style="font-weight: bold;text-decoration: underline;"&gt;
                                              &lt;xsl:text&gt;Execution Time (Seconds)&lt;/xsl:text&gt; 
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;xsl:for-each select="/TestCases/TestCase"&gt;
                                  &lt;xsl:variable name="TestCase" select="." /&gt; 
                                  &lt;tr&gt;
                                      &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                          &lt;div style="text-align: none;color: #0000FF;"&gt;
                                              &lt;xsl:value-of select="TCiD" /&gt; 
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                          &lt;div style="text-align: none;color: #0000FF;"&gt;
                                              &lt;xsl:value-of select="Scenario" /&gt; 
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                          &lt;div style="text-align: none;color: #0000FF;"&gt;
                                              &lt;xsl:value-of select="TSResult" /&gt; 
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;td style="border-style: inset;border-width: 2pt;padding: 2pt;vertical-align: middle;background-repeat: repeat"&gt;
                                          &lt;div style="text-align: none;color: #0000FF;"&gt;
                                              &lt;xsl:value-of select="ScTime" /&gt; 
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/xsl:for-each&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>