examples/project-example/test_report.html



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Network App Testing Tool</title>
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@b00a2d0486596e73dd7326beacf352c639623a0e/commons/img/logo.png">
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@b00a2d0486596e73dd7326beacf352c639623a0e/commons/img/logo.png">
<link href="https://cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@c43b89d03a7c43dae8bb8f0f078bad1997af6b3b/spark/css/spark-style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/extent-framework/extent-github-cdn/7cc78ce/spark/js/jsontree.js"></script>
<style type="text/css"></style></head><body class="spa -report standard">
  <div class="app">
    <div class="layout">
<div class="header navbar">
<div class="vheader">
<div class="nav-logo">
<a href="#">
<div class="logo" style="background-image: url('https://cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@b00a2d0486596e73dd7326beacf352c639623a0e/commons/img/logo.png')"></div>
</a>
</div>
<ul class="nav-left">
<li class="search-box">
<a class="search-toggle" href="#">
<i class="search-icon fa fa-search"></i>
<i class="search-icon-close fa fa-close"></i>
</a>
</li>
<li class="search-input"><input id="search-tests" class="form-control" type="text" placeholder="Search..."></li>
</ul>
<ul class="nav-right">
<li class="m-r-10">
<a href="#"><span class="badge badge-primary">Test report</span></a>
</li>
<li class="m-r-10">
<a href="#"><span class="badge badge-primary">Sep 15, 2024 08:30:15 PM</span></a>
</li>
</ul>
</div>
</div><div class="side-nav">
<div class="side-nav-inner">
<ul class="side-nav-menu">
<li class="nav-item dropdown" onclick="toggleView('test-view')">
<a id="nav-test" class="dropdown-toggle" href="#">
<span class="ico"><i class="fa fa-list"></i></span>
</a>
</li>
<li class="nav-item dropdown" onclick="toggleView('category-view')">
<a id="nav-category" class="dropdown-toggle" href="#">
<span class="ico"><i class="fa fa-tag"></i></span>
</a>
</li>
<li class="nav-item dropdown" onclick="toggleView('dashboard-view')">
<a id="nav-dashboard" class="dropdown-toggle" href="#">
<span class="ico"><i class="fa fa-bar-chart"></i></span>
</a>
</li>
</ul>
</div>
</div>      <div class="vcontainer">
        <div class="main-content">
<div class="test-wrapper row view test-view">
  <div class="test-list">
    <div class="test-list-tools">
<ul class="tools pull-left">
<li><a href="#"><span class="font-size-14">Tests</span></a></li>
</ul>
<ul class="tools text-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-exclamation-circle"></i></a>
<ul id="status-toggle" class="dropdown-menu dropdown-md p-v-0">
<a class="dropdown-item" status="pass" href="#"><span>Pass</span><span class="status success"></span></a>
<div class="dropdown-divider"></div>
<a status="clear" class="dropdown-item" href="#"><span>Clear</span><span class="pull-right"><i class="fa fa-close"></i></span></a>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-tag"></i></a>
<ul id="tag-toggle" class="dropdown-menu dropdown-md p-v-0">
<a class="dropdown-item" href="#">Suitename1</a>
</ul>
</li>
</ul>
</div>    <div class="test-list-wrapper scrollable">
      <ul class="test-list-item">
        <li class="test-item"  status="pass" test-id="1"
          author=""
          tag=""
          device="">
          <div class="test-detail">
            <p class="name">Test root initialization</p>
            <p class="text-sm">
              <span>20:30:15 PM</span> / <span>00:00:00:000</span>
              <span class="badge pass-bg log float-right">Pass</span>
            </p>
          </div>
          <div class="test-contents d-none">
<div class="detail-head">
<div class="p-v-10">
<div class="info">
<h5 class="test-status text-pass">Test root initialization</h5>
<span class='badge badge-success'>09.15.2024 20:30:15</span>
<span class='badge badge-danger'>09.15.2024 20:30:15</span>
<span class='badge badge-default'>00:00:00:000</span>
&middot; <span class='uri-anchor badge badge-default'>#test-id=1</span>
</div>
<div class="m-t-10 m-l-5"></div>
</div>
</div><div class="detail-body mt-4">
<table class="table table-sm">
  <thead><tr><th class="status-col">Status</th><th class="timestamp-col">Timestamp</th><th class="details-col">Details</th></tr></thead>
  <tbody>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:15 PM</td>
        <td>
          <b>[Create Telnet Server]</b> port = 9999, name = "module-1"<br><font color="green">The module with name 'module-1' is running.</font>
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:15 PM</td>
        <td>
          <b>[Run App]</b> "java -jar app/build/libs/app.jar localhost 9999"
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:16 PM</td>
        <td>
          <b>[Wait]</b> 1000
        </td>
      </tr>
  </tbody>
</table>
</div>
          </div>
        </li>
        <li class="test-item"  status="pass" test-id="2"
          author=""
          tag="Suitename1"
          device="">
          <div class="test-detail">
            <p class="name">Case name 1</p>
            <p class="text-sm">
              <span>20:30:15 PM</span> / <span>00:00:00:000</span>
              <span class="badge pass-bg log float-right">Pass</span>
            </p>
          </div>
          <div class="test-contents d-none">
<div class="detail-head">
<div class="p-v-10">
<div class="info">
<h5 class="test-status text-pass">Case name 1</h5>
<span class='badge badge-success'>09.15.2024 20:30:15</span>
<span class='badge badge-danger'>09.15.2024 20:30:15</span>
<span class='badge badge-default'>00:00:00:000</span>
&middot; <span class='uri-anchor badge badge-default'>#test-id=2</span>
</div>
<div class="m-t-15"><span class="badge badge-pill badge-default">Suitename1</span></div>
<div class="m-t-10 m-l-5">Description 1 here</div>
</div>
</div><div class="detail-body mt-4">
<table class="table table-sm">
  <thead><tr><th class="status-col">Status</th><th class="timestamp-col">Timestamp</th><th class="details-col">Details</th></tr></thead>
  <tbody>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:16 PM</td>
        <td>
          <b>[Module Send]</b> name = "module-1", message = "55.4+6.6"<br><font color="green">Message was successfully sent by module <b>'module-1'</b>. Message content: <b>55.4+6.6</b></font>
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:17 PM</td>
        <td>
          <b>[Wait]</b> 1000
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:17 PM</td>
        <td>
          <b>[Assert Equals]</b> value = 62.0, var_name = "module-1-last-msg", tolerance = 0.0<br><font color="green">Assertion succeeded. <b>True</b> was expected as the result. Condition: (Expected value <b>'62.000000'</b> must be same as the value of the variable <b>'62.0'</b>)</font>
        </td>
      </tr>
  </tbody>
</table>
</div>
          </div>
        </li>
        <li class="test-item"  status="pass" test-id="3"
          author=""
          tag="Suitename1"
          device="">
          <div class="test-detail">
            <p class="name">Case name 2</p>
            <p class="text-sm">
              <span>20:30:15 PM</span> / <span>00:00:00:001</span>
              <span class="badge pass-bg log float-right">Pass</span>
            </p>
          </div>
          <div class="test-contents d-none">
<div class="detail-head">
<div class="p-v-10">
<div class="info">
<h5 class="test-status text-pass">Case name 2</h5>
<span class='badge badge-success'>09.15.2024 20:30:15</span>
<span class='badge badge-danger'>09.15.2024 20:30:15</span>
<span class='badge badge-default'>00:00:00:001</span>
&middot; <span class='uri-anchor badge badge-default'>#test-id=3</span>
</div>
<div class="m-t-15"><span class="badge badge-pill badge-default">Suitename1</span></div>
<div class="m-t-10 m-l-5">Description 2 here</div>
</div>
</div><div class="detail-body mt-4">
<table class="table table-sm">
  <thead><tr><th class="status-col">Status</th><th class="timestamp-col">Timestamp</th><th class="details-col">Details</th></tr></thead>
  <tbody>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:17 PM</td>
        <td>
          <b>[Module Send]</b> name = "module-1", message = "4-4+6-20"<br><font color="green">Message was successfully sent by module <b>'module-1'</b>. Message content: <b>4-4+6-20</b></font>
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:18 PM</td>
        <td>
          <b>[Wait]</b> 1000
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:18 PM</td>
        <td>
          <b>[Assert Equals]</b> value = -14.0, var_name = "module-1-last-msg", tolerance = 0.0<br><font color="green">Assertion succeeded. <b>True</b> was expected as the result. Condition: (Expected value <b>'-14.000000'</b> must be same as the value of the variable <b>'-14.0'</b>)</font>
        </td>
      </tr>
  </tbody>
</table>
</div>
          </div>
        </li>
        <li class="test-item"  status="pass" test-id="4"
          author=""
          tag="Suitename1"
          device="">
          <div class="test-detail">
            <p class="name">Case name 3</p>
            <p class="text-sm">
              <span>20:30:15 PM</span> / <span>00:00:00:000</span>
              <span class="badge pass-bg log float-right">Pass</span>
            </p>
          </div>
          <div class="test-contents d-none">
<div class="detail-head">
<div class="p-v-10">
<div class="info">
<h5 class="test-status text-pass">Case name 3</h5>
<span class='badge badge-success'>09.15.2024 20:30:15</span>
<span class='badge badge-danger'>09.15.2024 20:30:15</span>
<span class='badge badge-default'>00:00:00:000</span>
&middot; <span class='uri-anchor badge badge-default'>#test-id=4</span>
</div>
<div class="m-t-15"><span class="badge badge-pill badge-default">Suitename1</span></div>
<div class="m-t-10 m-l-5">Description 2 here</div>
</div>
</div><div class="detail-body mt-4">
<table class="table table-sm">
  <thead><tr><th class="status-col">Status</th><th class="timestamp-col">Timestamp</th><th class="details-col">Details</th></tr></thead>
  <tbody>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:19 PM</td>
        <td>
          <b>[Module Send]</b> name = "module-1", message = "-2-4-6"<br><font color="green">Message was successfully sent by module <b>'module-1'</b>. Message content: <b>-2-4-6</b></font>
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:20 PM</td>
        <td>
          <b>[Wait]</b> 1000
        </td>
      </tr>
      <tr class="event-row">
        <td><span class="badge log pass-bg">Pass</span></td>
        <td>8:30:20 PM</td>
        <td>
          <b>[Assert Equals]</b> result = false, value = 2.0, var_name = "module-1-last-msg", tolerance = 0.0<br><font color="green">Assertion succeeded. <b>False</b> was expected as the result. Condition: (Expected value <b>'2.000000'</b> must be same as the value of the variable <b>'-14.0'</b>)</font>
        </td>
      </tr>
  </tbody>
</table>
</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
<div class="test-content scrollable">
<div class="test-content-tools">
<ul><li><a class="back-to-test" href="#"><i class="fa fa-arrow-left"></i></a></li></ul>
</div>
<div class="test-content-detail"><div class="detail-body"></div></div>
</div></div>
<div class="test-wrapper row view category-view attributes-view">
<div class="test-list">
<div class="test-list-tools">
<ul class="tools pull-left"><li><a href=""><span class="font-size-14">Category</span></a></li></ul>
<ul class="tools text-right"><li><a href="#"><span class="badge badge-primary">1</span></a></li></ul>
</div>
<div class="test-list-wrapper scrollable">
<ul class="test-list-item">
<li class="test-item">
<div class="test-detail">
<span class="meta">
<span class='badge log pass-bg'>3</span>
</span>
<p class="name">Suitename1</p>
<p class="duration text-sm">3 tests</p>
</div>
<div class="test-contents d-none">
<div class="info">
<h4>Suitename1</h4>
<span status="pass" class='badge log pass-bg'>3 passed</span>
</div>
<table class='table table-sm mt-4'>
<thead>
<tr>
<th class="status-col">Status</th>
<th class="timestamp-col">Timestamp</th>
<th>TestName</th>
</tr>
</thead>
<tbody>
<tr class="tag-test-status" status="pass">
<td><span class="badge log pass-bg">Pass</span></td>
<td>20:30:15 PM</td>
<td>
<a href="#" class="linked" test-id='2' id='2'>Case name 1</a>
</td>
</tr>
<tr class="tag-test-status" status="pass">
<td><span class="badge log pass-bg">Pass</span></td>
<td>20:30:15 PM</td>
<td>
<a href="#" class="linked" test-id='3' id='3'>Case name 2</a>
</td>
</tr>
<tr class="tag-test-status" status="pass">
<td><span class="badge log pass-bg">Pass</span></td>
<td>20:30:15 PM</td>
<td>
<a href="#" class="linked" test-id='4' id='4'>Case name 3</a>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
</div>
<div class="test-content scrollable">
<div class="test-content-detail">
<div class="detail-body"></div>
</div>
</div>
</div><div class="container-fluid p-4 view dashboard-view">
<div class="row">
<div class="col-md-3">
<div class="card"><div class="card-body">
<p class="m-b-0">Started</p>
<h3>Sep 15, 2024 08:30:15 PM</h3>
</div></div>
</div>
<div class="col-md-3">
<div class="card"><div class="card-body">
<p class="m-b-0">Ended</p>
<h3>Sep 15, 2024 08:30:15 PM</h3>
</div></div>
</div>
<div class="col-md-3">
<div class="card"><div class="card-body">
<p class="m-b-0 text-pass">Tests Passed</p>
<h3>4</h3>
</div></div>
</div>
<div class="col-md-3">
<div class="card"><div class="card-body">
<p class="m-b-0 text-fail">Tests Failed</p>
<h3>0</h3>
</div></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h6 class="card-title">Tests</h6>
</div>
<div class="card-body">
<div class="">
<canvas id='parent-analysis' width='115' height='90'></canvas>
</div>
</div>
<div class="card-footer">
<div><small data-tooltip='100%'>
<b>4</b> tests passed
</small>
</div>
<div>
<small data-tooltip='0%'><b>0</b> tests failed,
<b>0</b> skipped, <b data-tooltip='0%'>0</b> others
</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h6 class="card-title">Log events</h6>
</div>
<div class="card-body">
<div class="">
<canvas id='events-analysis' width='115' height='90'></canvas>
</div>
</div>
<div class="card-footer">
<div><small data-tooltip='100%'><b>12</b> events passed</small></div>
<div>
<small data-tooltip='0%'><b>0</b> events failed,
<b data-tooltip='%'>0</b> others
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row"><div class="col-md-12">
<div class="card"><div class="card-header"><p>Timeline</p></div>
<div class="card-body pt-0"><div>
<canvas id="timeline" height="120"></canvas>
</div></div>
</div>
</div></div>
<script>
var timeline = {
"Test root initialization":0,"Case name 1":0,"Case name 2":0.001,"Case name 3":0
};
</script>
<div class="row">
<div class="col-md-4 category-container">
<div class="card">
<div class="card-header"><p>Tags</p></div>
<div class="card-body pb-0 pt-0"><table class="table table-sm table-bordered">
<thead><tr class="bg-gray"><th>Name</th><th>Passed</th><th>Failed</th><th>Skipped</th><th>Others</th><th>Passed %</th></tr></thead><tbody>
<tr>
<td>Suitename1</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>100%</td>
</tr>
</tbody>
</table></div>
</div>
</div>
</div>
</div>
<script>
var statusGroup = {
parentCount: 5,
passParent: 4,
failParent: 0,
warningParent: 0,
skipParent: 0,
childCount: 5,
passChild: 0,
failChild: 0,
warningChild: 0,
skipChild: 0,
infoChild: 0,
grandChildCount: 5,
passGrandChild: 0,
failGrandChild: 0,
warningGrandChild: 0,
skipGrandChild: 0,
infoGrandChild: 0,
eventsCount: 5,
passEvents: 12,
failEvents: 0,
warningEvents: 0,
skipEvents: 0,
infoEvents: 0
};
</script>        </div>
      </div>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/gh/extent-framework/extent-github-cdn@14e9bb345ef7e2ed3a102f271d84e9f0267c88e7/spark/js/spark-script.js"></script>
<script type="text/javascript"></script></body>
</html>