cucumber-html-reporter
Version:
Generates Cucumber HTML reports in three different themes
1,537 lines (828 loc) • 171 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cucumber Feature Report</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
<style type="text/css">
.panel-heading {
padding: 0;
}
@media (min-width: 768px) {
.pull-right-lg {
float: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right-lg {
float: right;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right-lg {
float: right;
}
}
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
.left {
float: left;
}
.metadata {
overflow: auto;
letter-spacing: 0.2px;
border-color: white;
line-height: 1.6;
color: #4d4d4d;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
padding-bottom:3px;
}
.panel-heading a {
padding: 10px 15px;
display: block;
position: relative;
text-decoration: none;
}
.panel-heading i.glyphicon-chevron-down {
display: none;
}
.panel-heading i.glyphicon-chevron-right {
display: inline-block;
}
.panel-heading.open i.glyphicon-chevron-down {
display: inline-block;
}
.panel-heading.open i.glyphicon-chevron-right {
display: none;
}
.generated-on {
text-align: right;
padding-bottom: 10px;
}
.panel-title b {
padding-right: 10px;
}
.panel-heading .label-container {
position: absolute;
top: 8px;
right: 8px;
}
.panel-heading .label-container label {
margin-left: 5px;
padding: 5px;
}
.navbar .label-container {
position: absolute;
right: 10px;
top: 14px;
}
.navbar {
margin-bottom: 10px;
}
.navbar .label {
font-size: 20px;
}
.navbar .project-name {
position: absolute;
top: 10px;
left: 50%;
margin-left: -100px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.tags {
margin-left: 18px;
margin-right: 20px;
padding-top: 5px;
margin-bottom: -4px;
}
.tag {
font-size: 13px;
color: #696969;
letter-spacing: 0.3px;
font-weight: bold;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.chart {
padding-bottom: 15px;
}
div.chart div div svg rect {
fill: #f5f5f5;
}
table.arguments {
margin-left: 30px;
}
.screenshot {
padding: 2% 0 2% 0;
}
.scenarioTitle {
width: 80%
}
.description {
background-color: white;
border-color: white;
line-height: 1.6;
color: #6f6f6f;
font-weight: 400;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0.1em 0.5em 1.2em 1.5em
}
#scenario-description {
padding-bottom: 1em;
padding-left: 0.2em;
}
.scrollBar {
overflow-x: scroll;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #f5f5f5;
color: black;
}
.info {
background-color: #fbfbfb;
}
.step-duration {
float: right;
}
.footer-div {
text-align: right;
vertical-align: middle;
height:3.5%;
width:100%;
}
.footer-container {
margin-right: 10px;
margin-top: 5px;
width:18%;
z-index: 10;
position: absolute;
right: 0;
bottom: 10px;
text-align: center;
background-color: transparent;
}
.footer-link {
font-size: 13px;
float: right;
}
.footer-link:hover {
color: darkgray;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Cucumberjs Report</a>
<div class="project-name visible-md visible-lg">cucumber-html-reporter</div>
<div class="label-container">
<span class="label label-success" title=scenarios>Passed: 7</span>
<span class="label label-danger" title=scenarios>Failed: 0</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="generated-on">Sat Nov 19 2016 20:45:45 GMT-0500 (EST)</div>
<div class="row">
<div class="chart col-lg-6 col-md-6" id="piechart_features"></div>
<div class="chart col-lg-6 col-md-6" id="piechart_scenarios"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#logOutput">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Metadata</b>
</a>
</h4>
</div>
<div id="logOutput" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=left>
<strong> App Version: </strong>0.3.2
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-right-lg>
<strong> Test Environment: </strong>STAGING
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=left>
<strong> Browser: </strong>Chrome 54.0.2840.98
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-right-lg>
<strong> Platform: </strong>Windows 10
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=left>
<strong> Parallel: </strong>Scenarios
</div>
</div>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=pull-right-lg>
<strong> Executed: </strong>Remote
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag">@happy</span> <span class="tag">@reporting</span> </div>
<a data-toggle="collapse" href="#collapseFeature0">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Feature:</b>Happy HTML reporting
<span class="label-container">
<span class="label label-success">6</span>
</span>
</a>
</h4>
</div>
<div id="collapseFeature0" class="panel-collapse collapse">
<div class="panel-body">
<div class="description"> In order to review cucumber reports<br /> Fred, a cucumber user<br /> Wants to have cucumber reports in HTML</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testPassing</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_0">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred wants to see passing scenarios in the HTML report
<span class="label-container">
<span class="label label-success" title="Passed">7</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_0" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Before </span>
<span class="step-duration">
0s
</span>
</span>
<a href="#info0_01" data-toggle="collapse">+ Show Info</a>
<div id="info0_01" class="collapse">
<pre class=info>Tests INFO will print here.<br>To attach INFO to Any steps, use scenario.attach function in your step definitions as shown below.<br><br>If you pass HTML's to scenario.attach then reporter will format accordingly <br><br>Simple String : scenario.attach('sample data')<br>Pretty JSON : scenario.attach(JSON.stringify(json, null, 2))<br>HTML Link : scenario.attach('format the link with html-a tag'</pre>
</div>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred runs a passing cucumber step with 2 seconds timeout
<span class="step-duration">
2s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
he provides cucumber JSON file to reporter
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
cucumber-html-reporter should create HTML report
<span class="step-duration">
0s
</span>
</span>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testScenarioOutline</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_1">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred runs scenario outline for John and print on HTML report
<span class="label-container">
<span class="label label-success" title="Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_1" class="panel-collapse collapse">
<div class="panel-body">
<div class="description" id="scenario-description">John & Bob wants to run cucumber scenarios<br /> - expects to have HTML reports</div>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred runs a passing cucumber scenario on behalf of "John"
<span class="step-duration">
1s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
he provides cucumber JSON file to reporter
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
cucumber-html-reporter should create HTML report
<span class="step-duration">
0s
</span>
</span>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testScenarioOutline</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_2">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred runs scenario outline for Bob and print on HTML report
<span class="label-container">
<span class="label label-success" title="Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_2" class="panel-collapse collapse">
<div class="panel-body">
<div class="description" id="scenario-description">John & Bob wants to run cucumber scenarios<br /> - expects to have HTML reports</div>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred runs a passing cucumber scenario on behalf of "Bob"
<span class="step-duration">
1s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
he provides cucumber JSON file to reporter
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
cucumber-html-reporter should create HTML report
<span class="step-duration">
0s
</span>
</span>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testAttachDebugData</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_3">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred wants to print test data in the HTML reports for debugging purpose
<span class="label-container">
<span class="label label-success" title="Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_3" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred attaches the "test data to be printed" to the Given step of passing cucumber scenario
<span class="step-duration">
0s
</span>
</span>
<a href="#info0_32" data-toggle="collapse">+ Show Info</a>
<div id="info0_32" class="collapse">
<pre class=info>test data to be printed<br>{
"name": "cucumber-html-reporter",
"format": "html"
}</pre>
</div>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
he provides cucumber JSON file to reporter
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
cucumber-html-reporter should create HTML report with test-data
<span class="step-duration">
0s
</span>
</span>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testDocString</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_4">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred wants see the long doc string attached in the HTML report
<span class="label-container">
<span class="label label-success" title="Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_4" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred runs a passing cucumber scenario with the below content
<span class="step-duration">
0s
</span>
<div class="scrollBar">
</div>
<pre class=info>In order to see Doc String in the HTML report
As a Cucumber User,
I want to print below Doc String
Hey, I am a Doc string
</pre>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
he provides cucumber JSON file to reporter
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
cucumber-html-reporter should create HTML report
<span class="step-duration">
0s
</span>
</span>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="tags"> <span class="tag"> @testDataTable</span> </div>
<a data-toggle="collapse" href="#collapseScenario0_5">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Scenario:</b>Fred wants to use data table and print on HTML report
<span class="label-container">
<span class="label label-success" title="Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenario0_5" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
this feature runs with background
<span class="step-duration">
0s
</span>
</span>
</p>
<p class="scenario-container">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
Fred runs a passing scenario for the following data set
<span class="step-duration">
0s
</span>
<div class="scrollBar">
<table class="arguments">
<tr>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
<th>
id
</th>
<th>
name
</th>
</tr>
<tr>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
</tr>
<tr>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
</tr>
<tr>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
<td>
1
</td>
<td>
data-A
</td>
</tr>
<tr>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>
<td>
2
</td>
<td>
data-B
</td>