# 10 天 高级 WebDriver – JUnit 报告自定义续。

> 原文： [https://javabeginnerstutorial.com/selenium/10d-advanced-webdriver-junit-report-customization-part2/](https://javabeginnerstutorial.com/selenium/10d-advanced-webdriver-junit-report-customization-part2/)

嗨冠军！ 如果您没有让[之前的文章](https://javabeginnerstutorial.com/selenium/10c-advanced-webdriver-junit-report-customization/)发挥您的想象力，那么我今天将帮助您做到这一点。

我们将成为，

*   添加或删除列
*   改变风格
*   在标题部分添加徽标
*   修改静态文字

## 添加或删除列

这真是小菜一碟。 添加或删除`<th>`和`<td>`标签可实现此任务。 让我们来看一个场景，在“`All Tests`”表中，添加`Executed By`列。

```java
<!-- 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>
```

在此模板下，`<xsl:template match="testcase" mode="print.test">`

连同现有的栏一起为新创建的“执行者”栏添加一个值。

```java
 <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 adding column](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20703%20219'%3E%3C/svg%3E)

<noscript><img alt="Before adding column" class="alignnone size-full wp-image-13133" height="219" src="img/84b0d9a3e774aca418746f37ade3cea2.png" width="703"/><h3>之后<em></em></h3><p><img alt="After adding a column" class="alignnone size-full wp-image-13134" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/19_CustomColAfter-1.jpg" height="226" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20776%20226'%3E%3C/svg%3E" width="776"/></p><noscript><img alt="After adding a column" class="alignnone size-full wp-image-13134" height="226" src="img/e4eeb80cc04eebc2a725bfb1f5fcb85b.png" width="776"/><h2>改变风格</h2><p>努力思考如何更改生成的报告中的样式？ 无需为此费心！ 因为和其他网页一样，我们也有一个 CSS 样式表来处理此报告的样式。 只需在“ junit-frames.xsl”文件中搜索名称为“ stylesheet.css”的模板即可。</p><pre><code class="language-xml">&lt;!-- this is the stylesheet css to use for nearly everything --&gt; &lt;xsl:template name="stylesheet.css"&gt;</code></pre><p>主体，表，标题，栈跟踪，错误，失败，段落，属性的样式均在此模板中指定。 继续前进，戴上帽子！ 对 CSS 的每一行进行试验，并查看呈现的更改。 是的，您也可以添加自己的 CSS！</p><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>让我们来看一个入门的小例子。 表的详细信息和失败样式如下所示，</p><pre><code class="language-xml">table.details tr th{ font-weight: bold; text-align:left; background:#a6caf0; } .Failure { font-weight:bold; color:purple; }</code></pre><p>让我们将这些更改如下：</p><ol><li>所有表格标题均居中对齐</li><li>表格标题行的背景颜色为“绿色黄色”（# ADFF2F）</li><li>失败文字颜色变为栗色</li></ol><pre><code class="language-xml">table.details tr th{ font-weight: bold; text-align:center; background:#ADFF2F; } .Failure { font-weight:bold; color:maroon; }</code></pre><h3><em>BEFORE</em></h3><p><img alt="Before changing styles" class="alignnone size-full wp-image-13135" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/20_StylesBefore-1.jpg" height="458" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201095%20458'%3E%3C/svg%3E" width="1095"/></p><noscript><img alt="Before changing styles" class="alignnone size-full wp-image-13135" height="458" src="img/27f8f130e1cca67cd5d99f7988b85882.png" width="1095"/><h3><em>AFTER</em></h3><p><img alt="After changing the styles" class="alignnone size-full wp-image-13136" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/21_StylesAfter.jpg" height="437" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201058%20437'%3E%3C/svg%3E" width="1058"/></p><noscript><img alt="After changing the styles" class="alignnone size-full wp-image-13136" height="437" src="img/fe7ac3a7f76a08a05e580ed21c64bea7.png" width="1058"/><p>我知道，它看起来并不吸引眼球，但我们证明了我们想要的。 所以，你去了！</p><h2><strong>在标头部分</strong>中添加徽标</h2><p>我们大多数人都喜欢生成的报告上的徽标。 谁不喜欢个性化和一点营销？ 如果您懂一点 HTML，就非常简单。 在名为“ pageHeader”的模板上，添加一个图像标签，并在 src 属性中指定路径。 我已将徽标图像放置在生成 index.html 文件的项目的“ junit”文件夹中。</p><pre><code class="language-xml">&lt;xsl:template name="pageHeader"&gt; &lt;!-- &lt;h1&gt;&lt;xsl:value-of select="$TITLE"/&gt;&lt;/h1&gt; --&gt; &lt;h1&gt;Custom JUnit Report&lt;/h1&gt; &lt;table width="100%"&gt; &lt;tr&gt; &lt;td align="left"&gt;&lt;/td&gt; &lt;td align="right"&gt;&lt;img width="50" height="50" alt="Selenium" src="myLogo.jpg"/&gt; Designed by ninjas!&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;hr size="1"/&gt; &lt;/xsl:template&gt;</code></pre><h3><em>结果</em></h3><p><img alt="Adding a Logo" class="alignnone size-full wp-image-13137" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/22_Logo.jpg" height="208" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201089%20208'%3E%3C/svg%3E" width="1089"/></p><noscript><img alt="Adding a Logo" class="alignnone size-full wp-image-13137" height="208" src="img/4d78e6dc472ceb1d9f1e11333fc47113.png" width="1089"/><p><strong>修改静态文本</strong></p><p>这是锦上添花（哦！您现在已经知道了）。 要修改报告中显示的任何静态文本，您只需在“ junit-frames.xsl”文件中进行更改。 是的，你没看错。 就这么简单！</p><p>假设在报告的摘要表中，而不是“测试”，我希望它是“测试数量”。 只需在 h2 标签上显示“摘要”的正文部分更改文本，</p><pre><code class="language-xml">&lt;table class="details" border="0" cellpadding="5" cellspacing="2" width="95%"&gt; &lt;tr valign="top"&gt; &lt;th&gt;Number of Tests&lt;/th&gt; &lt;th&gt;Failures&lt;/th&gt; &lt;th&gt;Errors&lt;/th&gt; &lt;th&gt;Skipped&lt;/th&gt; &lt;th&gt;Success rate&lt;/th&gt; &lt;th&gt;Time&lt;/th&gt; &lt;/tr&gt;</code></pre><h3><em>RESULT</em></h3><p><img alt="Modifying static text" class="alignnone size-full wp-image-13132" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/05/23_staticText.jpg" height="243" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201028%20243'%3E%3C/svg%3E" width="1028"/></p><noscript><img alt="Modifying static text" class="alignnone size-full wp-image-13132" height="243" src="img/95e2e8910446d894375595f166f57c3f.png" width="1028"/><p>是时候对我们到目前为止所学到的东西进行反思。</p><p>在另一篇文章中再见。 定制愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/selenium/10e-advanced-webdriver-generating-pdf-report/" title="10e. Advanced WebDriver – Generating a PDF report"> 10e。 Advanced WebDriver – 生成 PDF 报告</a></h5></div></div> </body> </html></noscript>