---
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='root']/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(),'Free Download')]</pre>
</option>
<option class="type-xpath:href"><pre>//a[@href='/download']</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='root']/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='root']/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='root']/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='root']/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(),'Version History')]</pre>
</option>
<option class="type-xpath:href"><pre>//a[@href='/download/version']</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='root']/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
}
}
]
}
]
}
]
}
```
Sign in with Wallet
Connect another wallet