HTML Reference

This HTML reference explains all supported HTML tags and attributes if you want to send fields with rich formatting to Testmo.

You can submit fields with HTML values for your automated tests. This is useful to include richer data with your tests, including tables, source code, test steps, lists and rich text formatting. If you are unsure about how to use fields with automated tests, take a look at our documentation on test fields. Below you can find a full reference of supported HTML tags and attributes, plus various examples.

Automation fields with rich HTML formatting, test steps & code syntax highlighting

Supported HTML tags

Not all HTML tags and attributes are supported (to ensure that the content can be displayed nicely and doesn't affect the rest of Testmo's interface). Unsupported tags and attributes are automatically ignored.

Tags and attributes

See below for a list of supported tags and their attributes (in square brackets).

a[href], b, br, code[class], del, em, figure[class|style], h1, h2, h3, h4, hr, i, img[title|alt|src|class|style], li, mark[class], ol, p[style], pre[class], s, strong, table, test-steps, test-step[status], test-step-subfield[name], tbody, td[colspan|rowspan], th[colspan|rowspan], thead, tr, u, ul

CSS classes and styles

See below for a list of supported CSS classes. Not all CSS classes make sense for all HTML tags of course. See below for some examples.

code-block, editor-*, image, image-inline, image-style-block-align-left, image-style-block-align-right, language-*, marker-blue, marker-green, marker-pink, marker-red, marker-yellow, pen-green, pen-red, table

The following style values are allowed:

text-align (paragraphs), width (images)

Example: Text formatting

You can use various HTML tags to nicely format your text, e.g. with headings, color markers, lists, font styles and more. Here's an example for some typical text formatting:

<h1>This is an H1 header</h1>
<h2>This is an H2 header</h2>
<h3>This is an H3 header</h3>
<h4>This is an H4 header</h4>

<p>
    A text paragraph with various styles such as <strong>bold</strong>, 
    <em>italic</em>, <u>underline</u>, <s>strikethrough</s> and 
    <code>code</code>. You can also include links:
    <a href="https://www.testmo.com">Testmo</a>.
</p>

External images, including screenshots, can also be referenced:

<img src="https://www.testmo.com/images/branding/logo-dark.svg" />

You can also highlight text with various colors:

<mark class="marker-blue">Blue background</mark>
<mark class="marker-green">Green background</mark>
<mark class="marker-pink">Pink background</mark>
<mark class="marker-red">Red background</mark>
<mark class="marker-yellow">Yellow background</mark>

<mark class="pen-green">Green color</mark>
<mark class="pen-red">Red color</mark>

<ul>
    <li>Unorderd list</li>
    <li>Another item</li>
    <li>And another one</li>
</ul>

<ol>
    <li>Ordered list</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Example: Tables & data

It can often be useful to include data in tables, e.g. if you want to display sample data or configurations. Here's an example for a full featured table:

<figure class="table">
    <table>
        <thead>
            <tr>
                <th>Operating system</th>
                <th>Browser</th>
                <th>Test site</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Windows</td>
                <td>Chrome</td>
                <td>www.microsoft.com</td>
            </tr>
            <tr>
                <td>Linux</td>
                <td>Firefox</td>
                <td>www.wikipedia.org</td>
            </tr>
            <tr>
                <td>maxOS</td>
                <td>Safari</td>
                <td>www.apple.com</td>
            </tr>
        </tbody>
    </table>
</figure>

Example: Code highlighting

You can also render code with syntax highlighting. This can be useful if you want to include some of your test scripts, such as Gherkin/BDD code or similar code.

<pre class="code-block language-gherkin"><code>Feature: Generate report as HTML document

# Initial HTML report creation and export
Scenario: Export new report to an HTML file
    Given the empty reporting center
    When adding a new report for template "Team workload"
        And adjusting settings with attached input example
        And scheduling report for "daily"
        And clicking export to HTML file
    Then the new report should be generated successfully
        And the HTML document download should start automatically
        And the HTML document includes all report details</code></pre>

Currently we have enabled the following syntax highlighters. You can also use this code block without specifying any language- class for syntax highlighting. Feel free to let us know if you need any other language:

basic, c, clike, cpp, csharp, css, dart, gherkin, go, html, java, javascript, json, kotlin, markup, markup, objectivec, pascal, perl, php, plain, python, r, ruby, rust, shell, sql, swift, typescript, yaml

Example: Test steps

Testmo can also display test steps. The steps are displayed just like manual steps in the test case repository and in manual test runs. You can optionally also include a result status for each step, as well as optional sub fields.

Note: Testmo can add steps automatically

If you are using JUnit XML files and our Testmo CLI tool to submit your test results, then Testmo can automatically format and add steps for you. You would simply use step fields/properties, and there is no need to manually format the test step HTML tags then (except sub fields).

A basic example with steps and result statuses:

<test-steps>
    <test-step status="passed">
      This is the first step.
    </test-step>
    <test-step status="passed">
      This is the second step.
    </test-step>
    <test-step status="failed">
      This is the third step.
    </test-step>
    <test-step status="untested">
      This step is untested.
    </test-step>
    <test-step>
      This step has no status.
    </test-step>
</test-steps>

This example has test steps with sub fields:

<test-steps>    
    <test-step status="passed">
      <test-step-subfield name="Step">
        This is the <em>description</em>.
      </test-step-subfield>
      <test-step-subfield name="Expected">
        And the <em>expected results</em>.
      </test-step-subfield>
    </test-step>

    <test-step status="failed">
      <test-step-subfield name="Step">
        This is the <em>description</em>.
      </test-step-subfield>
      <test-step-subfield name="Expected">
        And the <em>expected results</em>.
      </test-step-subfield>
    </test-step>
</test-steps>