---
# System prepended metadata

title: SideeX Test Suite File Specification
tags: [English]

---

---
tags: English
---

# SideeX Test Suite File Specification


This specification describes the test suite file format of SideeX. A file contains only one test suite. The file is a general HTML file with file extension name ```.html``` or a JSON file with ```.json```

>  - [HTML Format](#HTML-Format)
> - [JSON Format](#JSON-Format)

## HTML Format
- Starting with ```<!DOCTYPE html>```, and containing a ```head```, and a ```body```
- An example
    ```html
    <!DOCTYPE html>
    <html>
        <head>
            ...
        </head>
        <body>
            ...
        </body>
    </html>
    ```
### The head part
- contains some ```<meta>``` data, ```<title>``` tag, and css style with ```<style>```, and ```<title>```
    - meta tags
        - the charset is "UTF-8"
        - sideex file version
        - set viewport
    - title tag
        - test suite name
    - style tag
        - tac style: hide the long tac value
        - table style
        - th, td style
- An example
    ```html
    <head>
      <meta charset="UTF-8">
      <meta name="application-name" content="sideex">
      <meta name="description" content="version=2.0.0">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Untitled Test Suite</title>
      <style>
        .tac {
          display: none;
        }

        table {
          table-layout: fixed;
          border-collapse: collapse;
          width: 90%;
          word-wrap: break-word;
        }

        th,
        td {
          padding: 5px;
          border: 1px solid black;
        }

        .text-align-center {
          text-align: center;
        }

        .margin-auto {
          margin: auto;
        }
      </style>
    </head>
    ```
### The body part
- contains the main data of the test suite, its test cases and some js code.
    - test suite
        - A ```<div>``` with ```suite``` class
        - A ```<h3>``` with ```suite-title``` class. The text content is the test suite name as the title.
            - An example
            ```html
            <div class="suite">
              <h3 class="suite-title text-align-center">Untitled Test Suite</h3>
              ...
            </div>
            ```
    - test case
        - A test case is a ```<table>``` with ```case``` class
        - It has a ```data-ns``` attribute
        - The text content of the ```<th>``` in ```<thread>``` is the test case name with ```case-title``` class
            - An example
            ```html
            <table class="case margin-auto" data-ns="13.69">
                <thead>
                    <tr><th class="case-title" rowspan="1" colspan="3">Untitled Test Case</th></tr>
                </thead>
                <tbody>
                    <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0">
                    ...
                    </tr>
                    ...
                </tbody>
            </table>
            ```
    - command
        - Each ```<tr>``` with ```command``` class in ```<tbody>``` represents a command.
        - It has attributes: ```data-pbw```, ```data-paw```, ```data-prw```, ```data-pdw``` (Their values are auto-generated)
        - td tag
            - name of command
                - with ```command-name``` class
            - targets of command
                - with ```command-target``` class
                - containing options in ```<option>``` in ```<datalist>``` 
            - values of command
                - with ```command-value``` class
                - containing options in ```<option>``` in ```<datalist>``` 
        - An example
            ```html
            <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0">
                <td class="command-name">open</td>
                <td class="command-target"><datalist data-used-index="0"><option class="type-other">http://sideex.org/</option></datalist><span class="target-tac tac"></span></td>
                <td class="command-value"><datalist data-used-index="0"><option class="type-other"></option></datalist><span class="value-tac tac"></span></td>
            </tr>
            ```
    - script code
        - Code to display the target and value of each command while opening the html file on browser.
        - An example
            ```html
            <script>
                let modes = ["target", "value"];
                for (let mode of modes) {
                    let tds = document.querySelectorAll(`.command-${mode}`);
                    for (let td of tds) {
                        let index = parseInt(td.querySelector("datalist").dataset.usedIndex);
                        let options = td.querySelectorAll("option");
                        td.appendChild(document.createTextNode(options[index].textContent));
                    }
                }
            </script>
            ```
### An example of a complete SideeX file
```html
<!DOCTYPE html>
<html>

  <head>
    <meta charSet="UTF-8" />
    <meta name="application-name" content="sideex" />
    <meta name="version" content="format=2.0.1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Test Suite</title>
    <style>
      .tac {
        display: none;
      }

      table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 90%;
        word-wrap: break-word;
      }

      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }

      .suite-div {
        text-align: center;
      }

      .suite-title {
        text-align: center;
      }

      .case {
        margin: auto;
      }

      .comment {
        color: #d3d3d3;
      }

      pre {
        font-size: 15px;
      }
    </style>
  </head>

  <body>
    <div data-enable-on-playing="true" class="suite">
      <div class="suite-div ">
        <h2 class="suite-title">My Test Suite</h2><pre class="suite-description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
      </div>
      <table class="case margin-auto" data-ns="10.21" data-enable-on-playing="true">
        <thead>
          <tr>
            <th class="case-div" rowspan="1" colSpan="4">
              <h3 class="case-title"> My Test Case 1</h3><pre class="case-description" style="font-family:initial;font-size:16px;font-weight:initial;white-space:pre-wrap"></pre>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0" data-comment="false">
            <td class="command-name">open</td>
            <td class="command-target"><datalist data-used-index="0">
                <option class="type-other"><pre>https://sideex.io/</pre>
                </option>
              </datalist><span class="target-tac tac"></span><pre class="show-text" style="font-family:initial;font-size:16px;white-space:pre-wrap">https://sideex.io/</pre>
            </td>
            <td class="command-value"><datalist data-used-index="0">
                <option class="type-other"><pre></pre>
                </option>
              </datalist><span class="value-tac tac"></span><pre class="show-text " style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
            <td class="command-description "><pre class="show-text description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
          </tr>
          <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0" data-comment="false">
            <td class="command-name">clickAt</td>
            <td class="command-target"><datalist data-used-index="0">
                <option class="type-xpath:idRelative"><pre>//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[3]/a[1]</pre>
                </option>
                <option class="type-xpath:position"><pre>//div[3]/a[1]</pre>
                </option>
                <option class="type-xpath:link"><pre>//a[contains(text(),&#x27;Free Download&#x27;)]</pre>
                </option>
                <option class="type-xpath:href"><pre>//a[@href=&#x27;/download&#x27;]</pre>
                </option>
                <option class="type-css:position"><pre>css=a.mr-md-3.btn.home-btn.home-downloadBtn</pre>
                </option>
                <option class="type-link"><pre>link=Free Download</pre>
                </option>
              </datalist><span class="target-tac tac"></span><pre class="show-text" style="font-family:initial;font-size:16px;white-space:pre-wrap">//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[3]/a[1]</pre>
            </td>
            <td class="command-value"><datalist data-used-index="0">
                <option class="type-other"><pre>146,28</pre>
                </option>
              </datalist><span class="value-tac tac"></span><pre class="show-text " style="font-family:initial;font-size:16px;white-space:pre-wrap">146,28</pre>
            </td>
            <td class="command-description "><pre class="show-text description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="case margin-auto" data-ns="10.21" data-enable-on-playing="true">
        <thead>
          <tr>
            <th class="case-div" rowspan="1" colSpan="4">
              <h3 class="case-title"> My Test Case 2</h3><pre class="case-description" style="font-family:initial;font-size:16px;font-weight:initial;white-space:pre-wrap"></pre>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0" data-comment="false">
            <td class="command-name">open</td>
            <td class="command-target"><datalist data-used-index="0">
                <option class="type-other"><pre>https://sideex.io/download</pre>
                </option>
              </datalist><span class="target-tac tac"></span><pre class="show-text" style="font-family:initial;font-size:16px;white-space:pre-wrap">https://sideex.io/download</pre>
            </td>
            <td class="command-value"><datalist data-used-index="0">
                <option class="type-other"><pre></pre>
                </option>
              </datalist><span class="value-tac tac"></span><pre class="show-text " style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
            <td class="command-description "><pre class="show-text description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
          </tr>
          <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0" data-comment="false">
            <td class="command-name">clickAt</td>
            <td class="command-target"><datalist data-used-index="0">
                <option class="type-xpath:idRelative"><pre>//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[4]/div[1]</pre>
                </option>
                <option class="type-xpath:position"><pre>//div[4]/div[1]</pre>
                </option>
                <option class="type-css:position"><pre>css=div.cursor-pointer.dropdown</pre>
                </option>
              </datalist><span class="target-tac tac"></span><pre class="show-text" style="font-family:initial;font-size:16px;white-space:pre-wrap">//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[4]/div[1]</pre>
            </td>
            <td class="command-value"><datalist data-used-index="0">
                <option class="type-other"><pre>201,16</pre>
                </option>
              </datalist><span class="value-tac tac"></span><pre class="show-text " style="font-family:initial;font-size:16px;white-space:pre-wrap">201,16</pre>
            </td>
            <td class="command-description "><pre class="show-text description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
          </tr>
          <tr class="command" data-pbw="0" data-paw="0" data-prw="0" data-pdw="0" data-comment="false">
            <td class="command-name">clickAt</td>
            <td class="command-target"><datalist data-used-index="0">
                <option class="type-xpath:idRelative"><pre>//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[4]/div[2]/div[1]/div[1]/div[2]/div[2]/a[1]</pre>
                </option>
                <option class="type-xpath:position"><pre>//div[2]/a[1]</pre>
                </option>
                <option class="type-xpath:link"><pre>//a[contains(text(),&#x27;Version History&#x27;)]</pre>
                </option>
                <option class="type-xpath:href"><pre>//a[@href=&#x27;/download/version&#x27;]</pre>
                </option>
                <option class="type-css:position"><pre>css=a.p-0.text-center.text-sm-left</pre>
                </option>
                <option class="type-link"><pre>link=Version History</pre>
                </option>
              </datalist><span class="target-tac tac"></span><pre class="show-text" style="font-family:initial;font-size:16px;white-space:pre-wrap">//div[@id=&#x27;root&#x27;]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[4]/div[2]/div[1]/div[1]/div[2]/div[2]/a[1]</pre>
            </td>
            <td class="command-value"><datalist data-used-index="0">
                <option class="type-other"><pre>52,14</pre>
                </option>
              </datalist><span class="value-tac tac"></span><pre class="show-text " style="font-family:initial;font-size:16px;white-space:pre-wrap">52,14</pre>
            </td>
            <td class="command-description "><pre class="show-text description" style="font-family:initial;font-size:16px;white-space:pre-wrap"></pre>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>
```

## JSON Format
- It follows the standard JSON format with two spaces for indent

### Keys
- time
    - Description:
        - a number that represents milliseconds since 1 January 1970 UTC
    - Type: ```Number```
- version
    - Description:
        - version of this file
    - Type: ```Object```
    - Children
        - sideex
            - Description:
                - the version of SideeX where this file is exported from
            - Type: ```Array``` with there ```Number```s
        - format
             - Description:
                - the version of the file format
            - Type: ```Array``` with there ```Number```s
- suites
     - Description:
        - all test suites
        - each element is a test suite
    - Type: ```Array``` with ```Object```
    - Children
        - title
            - Description:
                - the name of this suite
            - Type: ```String```
        - cases
            - Description:
                - all test cases of this suite
                - each element is a test case
            - Type: ```Array``` with ```Object```
            - Children
                - title
                    - Description:
                        - the name of this case
                    - Type: ```String```
                - records
                    - Description:
                        - all records of this case
                    - Type: ```Array``` with ```Object```
                    - Children
                        - name
                            - Description:
                                - the name of this record
                            - Type: ```String```
                        - target
                            - Description:
                                - the targets of this record
                                - usedIndex is the index of the option selected
                            - Type: ```Object```
                        - value
                            - Description:
                                - the targets of this record
                                - usedIndex is the index of the option selected 
                            - Type: ```Object```
### Example
```jsonld=
{
  "time": 1568602889855,
  "version": {
    "sideex": [3, 0, 1],
    "format": [2, 0, 0]
  },
  "suites": [
    {
      "title": "Untitled Test Suite",
      "cases": [
        {
          "title": "Untitled Test Case",
          "records": [
            {
              "name": "open",
              "target": {
                "usedIndex": 0,
                "options": [
                  {
                    "type": "other",
                    "value": "https://sideex.io/"
                  }
                ],
                "tac": ""
              },
              "value": {
                "usedIndex": 0,
                "options": [
                  {
                    "type": "other",
                    "value": ""
                  }
                ],
                "tac": ""
              },
              "pwt": {
                "pbw": 0,
                "paw": 0,
                "prw": 0,
                "pdw": 0
              }
            },
            {
              "name": "clickAt",
              "target": {
                "usedIndex": 0,
                "options": [
                  {
                    "type": "xpath:idRelative",
                    "value": "//div[@id='root']/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/h1[1]"
                  },
                  {
                    "type": "xpath:position",
                    "value": "//h1[1]"
                  },
                  {
                    "type": "css",
                    "value": "css=h1"
                  }
                ],
                "tac": ""
              },
              "value": {
                "usedIndex": 0,
                "options": [
                  {
                    "type": "other",
                    "value": "770,42"
                  }
                ],
                "tac": ""
              },
              "pwt": {
                "pbw": 0,
                "paw": 0,
                "prw": 0,
                "pdw": 0
              }
            }
          ]
        }
      ]
    }
  ]
}
```