Skip to content

Instantly share code, notes, and snippets.

@DannyDainton
Last active August 16, 2020 06:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DannyDainton/42e9124fcfc89bc2cbae772dc8668810 to your computer and use it in GitHub Desktop.
Save DannyDainton/42e9124fcfc89bc2cbae772dc8668810 to your computer and use it in GitHub Desktop.
A template that can be used with Newman htmlextra which has the request and response headers collapsed by default. To use this template, save locally and add to your Newman command using the `--reporter-htmlextra-template <filename>.hbs` flag
<!DOCTYPE html>
<html lang="en" style="overflow-y: scroll;">
<head>
<meta charset="UTF-8">
<title>{{browserTitle}}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github-gist.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
<style>
.theme-dark {
--background-color: #222;
--bg-card-deck: #444444;
--text-color: #ccd2d8;
--tab-border: solid 1px #444;
--success: #3c9372;
--failure: #c24a3f;
--warning: #d28c23;
--info: #4083b6;
--badge-outline: #3c9372;
--badge-bg: #cdd3db;
--badge-text: #ccd2d9;
--failure-row: #c24a3f;
--warning-row: #d28c23;
--card-bg: #444;
--card-footer: #4f5758;
--form-input: #ececb5;
--hov-text: #d2dae5;
--h4-text: #ccd1d9;
}
.theme-light {
--tab-border: solid 1px #fff;
--text-color: #000000;
--success: #42a745;
--failure: #dc3544;
--warning: #f4c10b;
--info: #49a1b8;
--badge-outline: #040411;
--badge-bg: #f8f9fa;
--badge-text: #fff;
--failure-row: #f5c6cb;
--warning-row: #ffeeba;
--card-bg: #f7f7f7;
--hov-text: #fff;
--h4-text: #ffffff;
}
body {
padding-top:30px;
background-color: var(--background-color)!important;
color: var(--text-color);
}
#execution-data {
padding: 10px;
border: var(--tab-border);
border-top: none;
}
.nav-tabs {
padding-top: 10px;
height: 105px;
overflow-y: auto;
}
body.theme-dark .card-header {
background-color: #444;
}
body.theme-light .card-header {
background-color: #f7f7f7;
}
.card-footer {
padding: .75rem 1.25rem;
background-color: var(--card-footer);
}
.card-deck {
background-color: var(--bg-card-deck)!important;
}
.form-control {
background: var(--form-input);
}
.custom-tab {
padding: 10px 15px;
margin-right: 0px;
height: 46px;
width: 59px;
text-align: center;
border: var(--tab-border);
border-bottom: none;
cursor:pointer;
}
body.theme-dark .text-white {
color: #ccd2d9!important;
}
h4 {
color: var(--h4-text);
}
body.theme-dark h1 {
color: #ccd2da;
}
body.theme-dark .bg-light>td {
background: #4f5858!important;
}
body.theme-dark .hljs {
background: #0f0f0f82!important;
color: #8d8787!important;
}
.bg-info {
background-color: var(--info)!important;
}
.bg-success {
background-color: var(--success)!important;
}
.alert-success {
background-color: var(--success)!important;
}
.alert-warning {
background-color: var(--warning)!important;
}
.alert-info {
background-color: var(--info)!important;
}
.bg-warning {
background-color: var(--warning)!important;
}
.badge-warning {
color: var(--badge-text)!important;
background-color: var(--warning)!important;
}
.table-warning>td {
background-color: var(--warning-row);
}
.alert-danger {
background-color: var(--failure)!important;
}
body.theme-dark .alert-dark {
background-color: #636467!important;
}
body.theme-dark .text-dark {
color: #d1dae4!important;
}
body.theme-dark .badge-light {
color: #212529;
background-color: #cdd3db;
}
body.theme-light .badge-light {
color: #212529;
background-color: #f8f9fa;
}
body.theme-light .bg-danger {
background-color: var(--failure)!important;
}
body.theme-dark .bg-danger {
background-color: var(--failure)!important;
}
.table-danger>td {
background-color: var(--failure-row);
}
body.theme-dark .table .thead-light th {
background-color: #4f5858!important;
border-color: #dee2e6!important;
color: #ccd2d8!important;
}
.itPassed {
background: var(--success);
color: white;
}
.itFailed {
background: var(--failure);
color: white;
}
.resultsInfoPass {
color: var(--success);
padding-top: 4px;
}
.resultsInfoFail {
color: var(--failure);
padding-top: 4px;
}
.badge-outline-success {
color: var(--success);
border: 1px solid var(--success);
background-color: transparent;
}
.badge-outline {
color: var(--badge-outline);
border: 1px solid var(--badge-outline);
background-color: transparent;
}
.btn-outline-success {
color: var(--success)!important;
border-color: var(--success)!important;
}
.backToTop:hover {
background-color: var(--success);
border-color: var(--success);
color: var(--hov-text)!important;
}
.btn-outline-success:hover {
background-color: var(--success);
border-color: var(--success);
color: var(--hov-text)!important;
}
.btn-outline-secondary {
background-color: var(--success)!important;
color: var(--hov-text)!important;
}
body.theme-dark .env-heading {
color: #ccd2d9!important;
}
body, html {
height:100%;
}
.card {
overflow:hidden;
}
body.theme-dark .card-body {
background-color: #444;
}
body.theme-light .card-body {
background-color: #f7f7f7;
}
body.theme-dark .card-body .bg-danger {
background-color: var(--failure)!important;
}
body.theme-light .card-body .bg-danger {
background-color: var(--failure)!important;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: #14141426;
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
.dyn-height {
max-height:350px;
overflow-y:auto;
}
.nav-pills .nav-link.active {
background-color: transparent!important;
}
.backToTop {
display: none;
position: fixed;
bottom: 10px;
right: 20px;
z-index: 99;
font-size: 15px;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.card-header .fa {
transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
transform: rotate(90deg);
}
.single-line-tabs {
padding-top: 10px;
height: 60px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 20px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 0px;
bottom: 4px;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-transition: 0.4s;
transition: 0.4s;
box-shadow: 0 0px 15px #2020203d;
background: white;
background-repeat: no-repeat;
background-position: center;
}
input:checked + .slider {
background-color: #4083b6;
}
input:focus + .slider {
box-shadow: 0 0 1px #4083b6;
}
input:checked + .slider:before {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
background: white;
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
table.dataTable td, table.dataTable tr {
vertical-align: middle;
}
</style>
</head>
<body class="">
<div class="container">
<div class="container">
<label>Light</label>
<label id="switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>
<label>Dark</label>
</div>
{{#with summary}}
<div class="card">
<div class="card-header">
<ul class="nav nav-pills mb-3 nav-justified" id="pills-tab" role="tablist">
<li class="nav-item bg-info active" data-toggle="tooltip" title="Click to view the Summary">
<a class="nav-link text-white" id="pills-summary-tab" data-toggle="pill" href="#pills-summary" role="tab" aria-controls="pills-summary" aria-selected="true">Summary</a>
</li>
<li class="nav-item bg-success" data-toggle="tooltip" title="Click to view the Requests">
<a class="nav-link text-white" id="pills-requests-tab" data-toggle="pill" href="#pills-requests" role="tab" aria-controls="pills-requests" aria-selected="false">Total Requests <span class="badge badge-light">{{stats.requests.total}}</span></a>
</li>
<li class="nav-item bg-danger" data-toggle="tooltip" title="Click to view the Failed Tests">
<a class="nav-link text-white" id="pills-failed-tab" data-toggle="pill" href="#pills-failed" role="tab" aria-controls="pills-failed" aria-selected="false">Failed Tests <span class="badge badge-light">{{failures.length}}</span></a>
</li>
<li class="nav-item bg-warning" data-toggle="tooltip" title="Click to view the Skipped Tests">
<a class="nav-link text-white" id="pills-skipped-tab" data-toggle="pill" href="#pills-skipped" role="tab" aria-controls="pills-skipped" aria-selected="false">Skipped Tests <span class="badge badge-light">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</span></a>
</li>
</ul>
{{/with}}
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-summary" role="tabcard" aria-labelledby="pills-summary-tab">
<div class="row">
<div class="col-md-9 col-lg-12 main">
<h1 class="display-{{titleSize}} text-center">{{title}}</h1>
<h5 class="text-center">{{timestamp}}</h5>
{{#with summary}}
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="card text-white card-success">
<div class="card-body {{#gt failures.length 0}}bg-danger{{else}}bg-success{{/gt}}">
<div class="rotate">
<i class="fa fa-retweet fa-5x"></i>
</div>
<h6 class="text-uppercase">Total Iterations</h6>
<h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{stats.iterations.total}}</h1>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card text-white card-danger">
<div class="card-body bg-success">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Total Assertions</h6>
<h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{totalTests stats.assertions.total skippedTests.length}}</h1>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card text-white card-info">
<div class="card-body {{#gt failures.length 0}}bg-danger{{else}}bg-success{{/gt}}">
<div class="rotate">
<i class="fa fa-plus-circle fa-5x"></i>
</div>
<h6 class="text-uppercase">Total Failed Tests</h6>
<h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{failures.length}}</h1>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card text-white card-warning">
<div class="card-body {{#gt skippedTests.length 0}}bg-warning{{else}}bg-success{{/gt}}">
<div class="rotate">
<i class="fa fa-share fa-5x"></i>
</div>
<h6 class="text-uppercase">Total Skipped Tests</h6>
<h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</h1>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card border-info">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">File Information</h5>
<span><i class="fas fa-file-code"></i></span><strong> Collection:</strong> {{collection.name}}<br>
{{/with}}
{{#if folders}}<span><i class="fas fa-folder"></i></span><strong> Specified Folders:</strong> {{folders}}<br>{{/if}}
{{#with summary}}
{{#if environment.name}}<span><i class="fas fa-file-code"></i></span><strong> Environment:</strong> {{environment.name}}<br>{{/if}}
</div>
</div>
</div>
</div>
{{#if @root.showGlobalData}}
{{#if globals.values.members.length}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<h5 class="card-header bg-info text-center text-uppercase" style="height: 45px;">
<a data-toggle="collapse" href="#gloabl-values" aria-expanded="true" aria-controls="collapse-example" id="gloabl-heading" class="env-heading collapsed d-block" style="color: white;">
<i class="float-lg-right fa fa-chevron-down"></i>
Global Variables
</a>
</h5>
<div id="gloabl-values" class="collapse" aria-labelledby="gloabl-heading">
<div class="card-body">
<div class="table-responsive dyn-height">
<table class="table table-bordered">
<thead class="thead-light text-center"><tr><th>Variable Name</th><th>Variable Value</th></tr></thead>
<tbody>
{{#each globals.values.members}}
{{#isNotIn key @root.skipGlobalVars}}
<tr>
<td class="text-nowrap">{{key}}</td>
<td>{{value}}</td>
</tr>
{{/isNotIn}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/if}}
{{#if @root.showEnvironmentData}}
{{#if environment.values.members.length}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<h5 class="card-header bg-info text-center text-uppercase" style="height: 45px;">
<a data-toggle="collapse" href="#environment-values" aria-expanded="true" aria-controls="collapse-example" id="environment-heading" class="env-heading collapsed d-block" style="color: white;">
<i class="float-lg-right fa fa-chevron-down"></i>
Environment Variables
</a>
</h5>
<div id="environment-values" class="collapse" aria-labelledby="environment-heading">
<div class="card-body">
<div class="table-responsive dyn-height">
<table class="table table-bordered">
<thead class="thead-light text-center"><tr><th>Variable Name</th><th>Variable Value</th></tr></thead>
<tbody>
{{#each environment.values.members}}
{{#isNotIn key @root.skipEnvironmentVars}}
<tr>
<td class="text-nowrap">{{key}}</td>
<td>{{value}}</td>
</tr>
{{/isNotIn}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/if}}
{{#if collection.description}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card border-info">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Collection Description</h5>
<div class="dyn-height">
<code class="renderMarkdown">{{collection.description}}</code>
</div>
</div>
</div>
</div>
</div>
{{/if}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card border-info">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Timings and Data</h5>
<span><i class="fas fa-stopwatch"></i></span><strong> Total run duration:</strong> {{duration}}<br>
<span><i class="fas fa-database"></i></span><strong> Total data received:</strong> {{responseTotal}}<br>
<span><i class="fas fa-stopwatch"></i></span><strong> Average response time:</strong> {{responseAverage}}<br>
</div>
</div>
</div>
</div>
{{/with}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead class="thead-inverse">
<tr class="text-center">
<th class="text-uppercase">Summary Item</th>
<th class="text-uppercase">Total</th>
<th class="text-uppercase">Failed</th>
</tr>
</thead>
<tbody>
{{#with summary.stats}}
<tr>
<td>Requests</td>
<td class="text-center">{{requests.total}}</td>
<td class="text-center">{{requests.failed}}</td>
</tr>
<tr>
<td>Prerequest Scripts</td>
<td class="text-center">{{prerequestScripts.total}}</td>
<td class="text-center">{{prerequestScripts.failed}}</td>
</tr>
<tr>
<td>Test Scripts</td>
<td class="text-center">{{testScripts.total}}</td>
<td class="text-center">{{testScripts.failed}}</td>
</tr>
{{/with}}
{{#with summary}}
<tr class="{{#gt failures.length 0}}table-danger{{/gt}}">
<td>Assertions</td>
<td class="text-center">{{totalTests stats.assertions.total skippedTests.length}}</td>
<td class="text-center">{{stats.assertions.failed}}</td>
</tr>
<tr class="{{#gt skippedTests.length 0}}table-warning{{/gt}}">
<td>Skipped Tests</td>
<td class="text-center">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</td>
<td class="text-center">-</td>
</tr>
{{/with}}
</tbody>
</table>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-failed" role="tabcard" aria-labelledby="pills-failed-tab">
<button id="topOfFailuresScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>
{{#if summary.failures.length}}
<div class="btn-group float-right" role="group" aria-label="Button Group">
<button id="openAllFailed" class="btn btn-outline-success btn-sm float-right" style="text-align: center; width: 185px;">Expand All Failed Tests</button>
</div>
<br>
<br>
{{#with summary}}
<div class="alert alert-danger text-uppercase text-center">
<h4>Showing {{failures.length}} {{#gt failures.length 1}}Failures{{else}}Failure{{/gt}}</h4>
</div>
{{/with}}
{{#each summary.failures}}
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-danger">
<div class="card-header bg-danger">
<a data-toggle="collapse" href="#" data-target="#fails-collapse-{{cursor.ref}}" aria-expanded="false" aria-controls="collapse" id="fails-{{cursor.ref}}" class="collapsed text-white z-block">
Iteration {{inc cursor.iteration}} - {{error.name}} - {{parent.name}} - {{source.name}} <i class="float-lg-right fa fa-chevron-down" style="padding-top:5px;"></i>
</a>
</div>
<div id="fails-collapse-{{cursor.ref}}" class="collapse" aria-labelledby="fails-{{cursor.ref}}">
<div class="card-body">
<h5 {{#if @root.showMarkdownLinks}}class="renderMarkdown"{{/if}}><strong>Failed Test:</strong> {{error.test}}</h5>
<hr>
<h5 class="card-title text-uppercase text-white text-center bg-danger">Assertion Error Message</h5>
<div>
<pre><code {{#if @root.showMarkdownLinks}}class="renderMarkdown"{{/if}}>{{error.message}}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
{{else}}
<div class="alert alert-success text-uppercase text-center">
<br><br><h1 class="text-center">There are no failed tests <span><i class="far fa-thumbs-up"></i></span></h1><br><br>
</div>
{{/if}}
</div>
<div class="tab-pane fade" id="pills-skipped" role="tabcard" aria-labelledby="pills-skipped-tab">
<button id="topOfSkippedScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>
{{#if summary.skippedTests.length}}
<div class="btn-group float-right" role="group" aria-label="Button Group">
<button id="openAllSkipped" class="btn btn-outline-success btn-sm float-right" style="text-align: center; width: 185px;">Expand All Skipped Tests</button>
</div>
<br>
<br>
{{#with summary}}
<div class="alert alert-warning text-uppercase text-center">
<h4>Showing {{skippedTests.length}} Skipped {{#gt skippedTests.length 1}}Tests{{else}}Test{{/gt}}</h4>
</div>
{{/with}}
{{#each summary.skippedTests}}
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-warning">
<div class="card-header bg-warning text-white">
<a data-toggle="collapse" href="#" data-target="#skipped-collapse-{{cursor.ref}}" aria-expanded="false" aria-controls="collapse" id="skipped-{{cursor.ref}}" class="collapsed text-white z-block">
Iteration {{inc cursor.iteration}} - {{assertion}} <i class="float-lg-right fa fa-chevron-down" style="padding-top:5px;"></i>
</a>
</div>
<div id="skipped-collapse-{{cursor.ref}}" class="collapse" aria-labelledby="skipped-{{cursor.ref}}">
<div class="card-body">
<h5><strong>Request Name:</strong> {{item.name}}</h5>
</div>
</div>
</div>
</div>
</div>
{{/each}}
{{else}}
<div class="alert alert-success text-uppercase text-center">
<br><br><h1 class="text-center">There are no skipped tests <span><i class="far fa-thumbs-up"></i></span></h1><br><br>
</div>
{{/if}}
</div>
<div class="tab-pane fade" id="pills-requests" role="tabcard" aria-labelledby="pills-requests-tab">
<button id="topOfRequestsScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>
<div class="btn-group float-right" role="group" aria-label="Button Group">
{{#if summary.failures.length}}
<button id="showOnlyFailures" class="btn btn-outline-success btn-sm float-right" style="text-align: center; width:160px;">Show Failed Iterations</button>
{{/if}}
<button id="openAll" class="btn btn-outline-success btn-sm float-right" style="text-align: center; width: 140px;">Expand Folders</button>
<button id="openAllRequests" class="btn btn-outline-success btn-sm float-right" style="text-align: center; width: 140px;">Expand Requests</button>
</div>
<div class="text-uppercase" id="execution-menu">
{{#with summary}}
<h5>{{stats.iterations.total}} {{#gt stats.iterations.total 1}}Iterations{{else}}Iteration{{/gt}} available to view</h5>
{{#gt stats.iterations.total 18}}<input class="form-control w-25" style="margin-bottom: 5px;" id="filterInput" type="number" min="1" placeholder="Filter Iterations">{{/gt}}
{{/with}}
<nav class="table-responsive">
<ul class="nav {{#gt summary.stats.iterations.total 18}}nav-tabs{{else}}single-line-tabs{{/gt}}" id="iterationList">
</ul>
</nav>
</div>
<h6 class="text-uppercase text-muted" id="iterationSelected" style="padding-top: 10px;"></h6>
<div class="tab-content" id="execution-data">
{{#each aggregations}}
{{#if parent.name}}
<div class="alert alert-dark text-uppercase text-center iteration-{{parent.iteration}}">
<a data-toggle="collapse" href="#" data-target="#folder-collapse-{{parent.id}}-iteration-{{parent.iteration}}" aria-expanded="false" aria-controls="collapse" id="folder-{{parent.id}}-iteration-{{parent.iteration}}" class="collapsed text-dark z-block">
<i class="fas fa-info-circle float-left resultsInfoPass" {{#each executions}}{{#if cumulativeTests.failed}} style="color: #c24a3f; padding-top: 4px;"{{/if}}{{/each}}></i>
{{parent.name}} - {{executions.length}} {{#gt executions.length 1}}Requests{{else}}Request{{/gt}} in the folder<i class="float-lg-right fa fa-chevron-down" style="padding-top: 5px;"></i>
</a>
</div>
<div id="folder-collapse-{{parent.id}}-iteration-{{parent.iteration}}" class="collapse" aria-labelledby="folder-{{parent.id}}">
{{> aggregations}}
</div>
{{else}}
{{> aggregations}}
{{/if}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{{#*inline "aggregations"}}
{{#if @root.showFolderDescription}}
{{#if parent.description.content}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Folder Description</h5>
<div class="dyn-height">
<code class="renderMarkdown">{{parent.description.content}}</code>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/if}}
{{#each executions}}
<div id="folder-{{cursor.ref}}" class="card-deck iteration-{{cursor.iteration}}">
<div class="row iteration-{{cursor.iteration}}">
<div class="col-sm-12 mb-3 iteration-{{cursor.iteration}}">
<div class="card iteration-{{cursor.iteration}}">
<div class="card-header {{#if cumulativeTests.failed}} bg-danger{{else}} bg-success{{/if}} iteration-{{cursor.iteration}}">
<a data-toggle="collapse" href="#" data-target="#collapse-{{cursor.ref}}" aria-expanded="false" aria-controls="collapse" id="requests-{{cursor.ref}}" class="collapsed text-white z-block">
Iteration: {{inc cursor.iteration}} - {{item.name}} <i class="float-lg-right fa fa-chevron-down" style="padding-top: 5px;"></i>
</a>
{{#if cumulativeTests.skipped}}
<span class="badge badge-warning text-white text-uppercase">{{cumulativeTests.skipped}} Skipped {{#gt cumulativeTests.skipped 1}}Tests{{else}}Test{{/gt}}</span>
{{/if}}
</div>
<div id="collapse-{{cursor.ref}}" class="collapse" aria-labelledby="requests-{{cursor.ref}}">
<div class="card-body">
{{#with request}}
{{#if description.content}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Description</h5>
<div class="dyn-height">
<code class="renderMarkdown">{{description.content}}</code>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/with}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Information</h5>
<span><i class="fas fa-info-circle"></i></span><strong> Request Method:</strong> <span class="badge-outline-success badge badge-success"> {{request.method}}</span><br>
<span><i class="fas fa-info-circle"></i></span><strong> Request URL:</strong> <a href="{{request.url}}" target="_blank">{{request.url}}</a><br>
</div>
</div>
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Response Information</h5>
<span><i class="fas fa-info-circle"></i></span><strong> Response Code:</strong> <span class="float-right badge-outline badge badge-success"> {{response.code}} - {{response.status}}</span><br>
<span><i class="fas fa-stopwatch"></i></span><strong> Mean time per request:</strong> <span class="float-right badge-outline badge badge-success"> {{mean.time}}</span><br>
<span><i class="fas fa-database"></i></span><strong> Mean size per request:</strong> <span class="float-right badge-outline badge badge-success"> {{mean.size}}</span><br>
<hr>
<h5 class="card-title text-uppercase text-white text-center bg-info">Test Pass Percentage</h5>
<div>
{{#if assertions.length}}
<div class="progress" style="height: 40px;">
<div class="progress-bar {{#if cumulativeTests.failed}} bg-danger{{else}} bg-success{{/if}}" style="width: 100%" role="progressbar">
<h5 style="padding-top:5px;"><strong>{{#gte cumulativeTests.passed 1}}{{percent cumulativeTests.passed cumulativeTests.failed}} %{{else}}0 %{{/gte}}</strong></h5>
</div>
</div>
{{else}}
<div class="progress" style="height: 40px;">
<div class="progress-bar bg-success" style="width: 100%" role="progressbar">
<h5 class="text-uppercase text-white text-center" style="padding-top:5px;"><strong>No Tests for this request</strong></h5>
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
{{#with request}}
{{#unless @root.omitHeaders}}
{{#unless @root.skipSensitiveData}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<h5 class="card-header bg-info text-center text-uppercase" style="height: 45px;">
<a data-toggle="collapse" href="#request-header-values" aria-expanded="true" aria-controls="collapse-example" id="request-header-heading" class="env-heading collapsed d-block" style="color: white;">
<i class="float-lg-right fa fa-chevron-down"></i>
Request Headers
</a>
</h5>
<div id="request-header-values" class="collapse" aria-labelledby="request-header-heading">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-light text-center"><tr><th>Header Name</th><th>Header Value</th></tr></thead>
<tbody>
{{#each headers.members}}
{{#isNotIn key @root.skipHeaders}}
<tr>
<td class="text-nowrap">{{key}}</td>
<td>{{value}}</td>
</tr>
{{/isNotIn}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/unless}}
{{/unless}}
{{#unless @root.skipSensitiveData}}
{{#if body.raw}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
<div class="dyn-height">
<pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{body.raw}}</code></pre>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{#if body.formdata.members}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
<div class="dyn-height">
<pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{formdata body.formdata.members}}</code></pre>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{#if body.urlencoded.members}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
<div class="dyn-height">
<pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{formdata body.urlencoded.members}}</code></pre>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{#if body.graphql}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
<div class="dyn-height">
<pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{body.graphql.query}}</code></pre>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
</div>
{{#if body.graphql.variables }}
<h6 class="card-title text-uppercase text-white text-center bg-info">Graphql Variables</h6>
<div class="dyn-height">
<pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{body.graphql.variables}}</code></pre>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/unless}}
{{/with}}
{{#unless @root.omitHeaders}}
{{#unless @root.skipSensitiveData}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<h5 class="card-header bg-info text-center text-uppercase" style="height: 45px;">
<a data-toggle="collapse" href="#response-header-values" aria-expanded="true" aria-controls="collapse-example" id="response-heading" class="env-heading collapsed d-block" style="color: white;">
<i class="float-lg-right fa fa-chevron-down"></i>
Response Headers
</a>
</h5>
<div id="response-header-values" class="collapse" aria-labelledby="response-heading">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-light text-center"><tr><th>Header Name</th><th>Header Value</th></tr></thead>
<tbody>
{{#each response.header}}
{{#isNotIn key @root.skipHeaders}}
<tr>
<td class="text-nowrap">{{key}}</td>
<td>{{value}}</td>
</tr>
{{/isNotIn}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/unless}}
{{/unless}}
{{#unless @root.skipSensitiveData}}
{{#isNotIn item.name @root.hideResponse}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Response Body</h5>
{{#if response.body}}
<div class="dyn-height">
<pre><code id="copyText-{{item.id}}" class="prettyPrint">{{response.body}}</code></pre>
</div>
<div class="card-footer">
<button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyText-{{item.id}}">Copy to Clipboard</button>
</div>
{{else}}
<h5 class="alert alert-success text-uppercase text-center">No Response Body for this request</h5>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/isNotIn}}
{{/unless}}
{{#if consoleLogs.length}}
<div class="row">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-info" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Console Logs</h5>
<div class="dyn-height">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-light text-center"><tr><th>Log Messages</th></tr></thead>
<tbody>
{{#each consoleLogs}}
<tr>
<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;"><pre><code class="prettyPrint">{{#each messages}}{{this}}{{/each}}</code></pre></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/if}}
<div class="row">
<div class="card border-info">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-info">Test Information</h5>
{{#if assertions.length}}
<div class="table-responsive text-nowrap">
<table id="myTable-{{item.id}}" class="table table-hover">
<thead><tr class="text-center"><th>Name</th><th>Passed</th><th>Failed</th><th>Skipped</th></tr></thead>
<tbody>
{{#each assertions}}
<tr {{#if @root.showMarkdownLinks}}{{/if}}>
<td {{#if @root.showMarkdownLinks}}class="renderMarkdown"{{/if}}>{{this.name}}</td>
<td class="text-center {{#if this.passed}}bg-success{{/if}}">{{this.passed}}</td>
<td class="text-center {{#if this.failed}}bg-danger{{/if}}">{{this.failed}}</td>
<td class="text-center {{#if this.skipped}}bg-warning{{/if}}">{{this.skipped}}</td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr class="bg-light">
<td><strong>Total</strong></td>
<td class="text-center">{{cumulativeTests.passed}}</td>
<td class="text-center">{{cumulativeTests.failed}}</td>
<td class="text-center">{{cumulativeTests.skipped}}</td>
</tr>
</tfoot>
</table>
</div>
<div class="row {{#lte cumulativeTests.failed 0}}d-none{{/lte}}">
<div class="col-sm-12 mb-3">
<div class="card-deck">
<div class="card border-danger" style="width: 50rem;">
<div class="card-body">
<h5 class="card-title text-uppercase text-white text-center bg-danger">Test {{#lte cumulativeTests.failed 1}}Failure{{else}}Failures{{/lte}}</h5>
<div class="table-responsive">
<table class="table table-hover">
<thead><tr class="text-nowrap"><th>Test Name</th><th>Assertion Error</th></tr></thead>
<tbody>
{{#each assertions}}
{{#isTheSame testFailure.test this.name}}
<tr>
<td class="w-45 text-nowrap {{#if @root.showMarkdownLinks}}renderMarkdown{{/if}}">{{testFailure.test}}</td>
<td class="w-55"><pre><code {{#if @root.showMarkdownLinks}}class="renderMarkdown"{{/if}}>{{testFailure.message}}</code></pre></td>
</tr>
{{/isTheSame}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
{{else}}
<h5 class="alert alert-success text-uppercase text-center">No Tests for this request</h5>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
{{/inline}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
{{#eq noSyntaxHighlighting false}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{/eq}}
<!-- Data Table Configuration -->
<script>
{{#each aggregations}}
{{#each executions}}
$(document).ready( function () {
$('#myTable-{{item.id}}').DataTable({
"retrieve": true,
"paging": {{paging}},
"info": false,
"fixedColumns": {
"heightMatch": 'none'
}
});
});
{{/each}}
{{/each}}
</script>
<!-- Tooltip Configuration -->
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
})
</script>
<!-- Show/Hide The Folders -->
<script>
$('#openAll').on('click', function(e) {
let clickCount = $(this).data("clickCount") || 1
switch (clickCount){
case 1:
{{#each aggregations}}
$('#folder-{{parent.id}}-iteration-{{parent.iteration}}').removeClass('collapsed')
$('#folder-collapse-{{parent.id}}-iteration-{{parent.iteration}}').addClass('show')
{{/each}}
$('#openAll').html("Collapse Folders");
break;
case 2:
{{#each aggregations}}
$('#folder-{{parent.id}}-iteration-{{parent.iteration}}').addClass('collapsed')
$('#folder-collapse-{{parent.id}}-iteration-{{parent.iteration}}').removeClass('show')
{{/each}}
$('#openAll').html("Expand Folders");
break;
}
clickCount = clickCount > 1 ? 1 : ++clickCount;
$(this).data("clickCount", clickCount)
})
</script>
<!-- Show/Hide The Requests -->
<script>
$('#openAllRequests').on('click', function(e) {
let clickCount = $(this).data("clickCount") || 1
switch (clickCount){
case 1:
{{#each aggregations}}
{{#each executions}}
$('#requests-{{cursor.ref}}').removeClass('collapsed')
$('#collapse-{{cursor.ref}}').removeClass('collapsed')
$('#requests-{{cursor.ref}}').addClass('show')
$('#collapse-{{cursor.ref}}').addClass('show')
{{/each}}
{{/each}}
$('#openAllRequests').html("Collapse Requests");
break;
case 2:
{{#each aggregations}}
{{#each executions}}
$('#requests-{{cursor.ref}}').addClass('collapsed')
$('#collapse-{{cursor.ref}}').addClass('collapsed')
$('#requests-{{cursor.ref}}').removeClass('show')
$('#collapse-{{cursor.ref}}').removeClass('show')
{{/each}}
{{/each}}
$('#openAllRequests').html("Expand Requests");
break;
}
clickCount = clickCount > 1 ? 1 : ++clickCount;
$(this).data("clickCount", clickCount)
})
</script>
<!-- Show/Hide The Skipped Tests -->
<script>
$('#openAllSkipped').on('click', function(e) {
let clickCount = $(this).data("clickCount") || 1
switch (clickCount){
case 1:
{{#each aggregations}}
{{#each executions}}
$('#skipped-{{cursor.ref}}').removeClass('collapsed')
$('#skipped-collapse-{{cursor.ref}}').removeClass('collapsed')
$('#skipped-{{cursor.ref}}').addClass('show')
$('#skipped-collapse-{{cursor.ref}}').addClass('show')
{{/each}}
{{/each}}
$('#openAllSkipped').html("Collapse All Skipped Tests");
break;
case 2:
{{#each aggregations}}
{{#each executions}}
$('#skipped-{{cursor.ref}}').addClass('collapsed')
$('#skipped-collapse-{{cursor.ref}}').addClass('collapsed')
$('#skipped-{{cursor.ref}}').removeClass('show')
$('#skipped-collapse-{{cursor.ref}}').removeClass('show')
{{/each}}
{{/each}}
$('#openAllSkipped').html("Expand All Skipped Tests");
break;
}
clickCount = clickCount > 1 ? 1 : ++clickCount;
$(this).data("clickCount", clickCount)
})
</script>
<!-- Show/Hide The Failures -->
<script>
$('#openAllFailed').on('click', function(e) {
let clickCount = $(this).data("clickCount") || 1
switch (clickCount){
case 1:
{{#each aggregations}}
{{#each executions}}
$('#fails-{{cursor.ref}}').removeClass('collapsed')
$('#fails-collapse-{{cursor.ref}}').removeClass('collapsed')
$('#fails-{{cursor.ref}}').addClass('show')
$('#fails-collapse-{{cursor.ref}}').addClass('show')
{{/each}}
{{/each}}
$('#openAllFailed').html("Collapse All Failed Tests");
break;
case 2:
{{#each aggregations}}
{{#each executions}}
$('#fails-{{cursor.ref}}').addClass('collapsed')
$('#fails-collapse-{{cursor.ref}}').addClass('collapsed')
$('#fails-{{cursor.ref}}').removeClass('show')
$('#fails-collapse-{{cursor.ref}}').removeClass('show')
{{/each}}
{{/each}}
$('#openAllFailed').html("Expand All Failed Tests");
break;
}
clickCount = clickCount > 1 ? 1 : ++clickCount;
$(this).data("clickCount", clickCount)
})
</script>
<!-- Pretty Print the Response Body-->
<script>
function isJSON(data)
{
var ret = true;
try {
JSON.parse(data);
}catch(e) {
ret = false;
}
return ret;
}
function isXML(data)
{
return (data.length > 0 && data[0] === '<');
}
// see https://gist.github.com/sente/1083506/d2834134cd070dbcc08bf42ee27dabb746a1c54d#gistcomment-2254622
function formatXML(data) {
const PADDING = ' '.repeat(2); // set desired indent size here
const reg = /(>)(<)(\/*)/g;
let pad = 0;
xml = data.replace(reg, '$1\r\n$2$3');
return xml.split('\r\n').map((node, index) => {
let indent = 0;
if (node.match(/.+<\/\w[^>]*>$/)) {
indent = 0;
} else if (node.match(/^<\/\w/) && pad > 0) {
pad -= 1;
} else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
indent = 1;
} else {
indent = 0;
}
pad += indent;
return PADDING.repeat(pad - indent) + node;
}).join('\r\n');
}
$(".prettyPrint").each(function () {
var data = $(this).text();
// Verify whether data is JSON
if(isJSON(data))
{
obj = JSON.parse(data);
data = JSON.stringify(obj, null, 2);
}
else if(isXML(data)) {
data = formatXML(data);
}
$(this).text(data);
});
</script>
<!-- Copy Response Body To Clipboard -->
<script>
var clipboard = new ClipboardJS('.copyButton');
clipboard.on('success', function(e) {
e.clearSelection();
$(".copyButton").addClass("bg-success text-white")
e.trigger.textContent = '✔ Copied!';
window.setTimeout(function() {
$(".copyButton").removeClass("bg-success text-white")
e.trigger.textContent = 'Copy to Clipboard';
}, 2000);
});
clipboard.on('error', function(e) {
e.clearSelection();
$(".copyButton").addClass("bg-danger text-white")
e.trigger.textContent = '✗ Not Copied';
window.setTimeout(function() {
$(".copyButton").removeClass("bg-danger text-white")
e.trigger.textContent = 'Copy to Clipboard';
}, 2000);
});
</script>
<!-- Render the Description Markdown and link in the test failures -->
<script>
const remarkable = new Remarkable();
const descriptions = document.querySelectorAll(".renderMarkdown");
descriptions.forEach(description => {
description.innerHTML = renderHtmlFromMarkdown(description.textContent);
});
function renderHtmlFromMarkdown(markdown) {
return remarkable.render(trim(markdown));
}
function trim(string) {
return string ? string.replace(/^ +| +$/gm, "") : string;
}
</script>
<!-- Show/Hide The Toggles When Scrolling The Page -->
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("topOfRequestsScreen").style.display = "block";
document.getElementById("topOfFailuresScreen").style.display = "block";
document.getElementById("topOfSkippedScreen").style.display = "block";
document.getElementById("openAll").style.display = "none";
document.getElementById("openAllRequests").style.display = "none";
{{#if summary.skippedTests.length}}
document.getElementById("openAllSkipped").style.display = "none";
{{/if}}
{{#if summary.failures.length}}
document.getElementById("showOnlyFailures").style.display = "none";
document.getElementById("openAllFailed").style.display = "none";
{{/if}}
} else {
document.getElementById("topOfRequestsScreen").style.display = "none";
document.getElementById("topOfFailuresScreen").style.display = "none";
document.getElementById("topOfSkippedScreen").style.display = "none";
document.getElementById("openAll").style.display = "block";
document.getElementById("openAllRequests").style.display = "block";
{{#if summary.skippedTests.length}}
document.getElementById("openAllSkipped").style.display = "block";
{{/if}}
{{#if summary.failures.length}}
document.getElementById("showOnlyFailures").style.display = "block";
document.getElementById("openAllFailed").style.display = "block";
{{/if}}
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- Creates The Iteration Tabs -->
<script type="text/javascript">
"use strict";
window.onload = function () {
// set display for all blocks of response
var allItems = document.querySelectorAll('[class*=iteration-]');
allItems.forEach(function(elem){
elem.style.display = 'block';
});
{{#with summary}} {{#with stats}}
let totalIterations = {{iterations.total}};
{{/with}} {{/with}}
let menu = document.querySelector('#execution-menu .nav');
for(var i = 0; i < totalIterations; i++)
{
let li = document.createElement('li');
li.appendChild(document.createTextNode((i + 1)));
li.setAttribute('id', 'iteration-' + i);
li.classList.add("custom-tab");
li.classList.add("itPassed");
li.addEventListener('click', function() {
//set display to none for all except row
let allItems = document.querySelectorAll('[class*=iteration-]:not(.row)');
allItems.forEach(function(elem) {
elem.style.display = 'none';
})
let allMenus = document.querySelectorAll('[id*=iteration-]');
allMenus.forEach(function(elem){
elem.style.borderBottom = 'none';
})
this.style.borderBottom = 'solid 3px #032a33';
let items = document.querySelectorAll("." + this.id + ':not(.row)');
items.forEach(function(elem) {
elem.style.display = elem.style.display == 'block' ? 'none' : 'block';
})
});
menu.appendChild(li);
}
//shows first tab data
document.getElementById('iteration-0').click();
document.getElementById('iterationSelected').innerHTML = `Iteration ${document.getElementById('iteration-0').innerHTML} selected`
{{#each aggregations}}
{{#each executions}}
{{#if cumulativeTests.failed}}
$("#iteration-{{cursor.iteration}}").removeClass('itPassed').addClass('itFailed')
{{/if}}
{{/each}}
{{/each}}
}
</script>
<!-- Create the Selected Iteration Label -->
<script>
$(document).ready(function(){
$(function() {
$("#iterationList li").click(function() {
document.getElementById('iterationSelected').innerHTML = "Iteration " + this.innerHTML + " selected"
});
});
});
</script>
<!-- Filter Action for the Iterations -->
<script>
$(document).ready(function(){
$("#filterInput").on("input paste", function() {
var value = $(this).val();
$("#iterationList li").filter(function() {
$("#showOnlyFailures").data("clickCount") ? $("#showOnlyFailures").click():null;
$(this).toggle($(this).text().indexOf(value) > -1)
});
});
});
</script>
<!-- Showing the Failed Interations -->
<script>
$(document).ready(function(){
if($("#iterationList li.itFailed").length){
$("#showOnlyFailures").data("clickCount", 0);
$("#showOnlyFailures").on("click", function () {
let clickCount = $(this).data("clickCount")
$("#filterInput").val()!="" && clickCount==0 ?
$("#filterInput").val('').trigger('input'): null;
let selectedIteration = $('#iterationList li').filter(function () {
return $(this).css('border-bottom').indexOf("solid") > -1 && $(this).hasClass('itFailed');
});
selectedIteration.length || clickCount ? null : $("#iterationList li.itFailed")[0].click()
$("#iterationList li.itPassed").each(function () {
$(this).toggle();
});
$("div.bg-success [id*=requests]").parents('[class^="row iteration-"]').each(function () {
$(this).toggle();
});
clickCount = clickCount ? 0 : ++clickCount;
clickCount ? $("#showOnlyFailures").html("Show All Iterations") : $("#showOnlyFailures").html("Show Failed Iterations");
$(this).data("clickCount", clickCount)
});
}
});
</script>
<!-- Set The Theme Of The Report -->
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.body.className = themeName;
}
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
}
(function () {
if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-light');
document.getElementById('slider').checked = false;
} else {
setTheme('theme-dark');
document.getElementById('slider').checked = true;
}
})();
</script>
@DannyDainton
Copy link
Author

@BubuFS Updated 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment