cucumber-html-reporter
Version:
Generates Cucumber HTML reports in three different themes
1,548 lines (850 loc) • 308 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;
margin-top: 1em;
}
#directory {
background-color: #f0f0f0;
}
.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;
}
pre {
display: block;
padding: 10px;
margin-top: 1em;
margin-right: 3em;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.step-duration {
float: right;
color: #BDBDBD;
}
.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;
}
.steps {
padding-left: 10px;
padding-right: 10px;
margin-bottom: -9px;
}
.all-features {
padding-top: 0.6em;
}
</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: 14">Passed: 14</span>
<span class="label label-danger" title="scenarios Failed: 0">Failed: 0</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="generated-on">Wed May 31 2017 23:02:49 GMT-0400 (EDT)</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="#metadataInfo">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Metadata</b>
</a>
</h4>
</div>
<div id="metadataInfo" 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=pull-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=pull-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=pull-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="all-features">
<div style="display: none;">No features</div>
<div class="panel panel-default">
<div class="panel-heading" id="directory">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseSuitehappy">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>happy</b>
<span class="label-container">
<span class="label label-success" title="3 Features Passed">3</span>
</span>
</a>
</h4>
</div>
<div id="collapseSuitehappy" class="panel-collapse collapse">
<div class="panel-body">
<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="#collapseFeaturehappy0">
<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" title="4 Scenarios Passed">4</span>
<span class="label label-default" title="2 Scenarios Pending">2</span>
</span>
</a>
</h4>
</div>
<div id="collapseFeaturehappy0" 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="#collapseScenariohappy0_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="5 Steps Passed">5</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_0" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Before </span>
<span> </span>
<span class="step-duration">
<1ms
</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>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred runs a passing cucumber step with 2 seconds timeout</span>
<span class="step-duration">
2s 3ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> he provides cucumber JSON file to reporter</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> cucumber-html-reporter should create HTML report</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
</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="#collapseScenariohappy0_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="1 Steps Passed">1</span>
<span class="label label-default" title="1 Steps Pending">1</span>
<span class="label label-warning" title="2 Steps Skipped">2</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_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">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-default" title="Pending"><i class="glyphicon glyphicon-exclamation-sign"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred runs a passing cucumber scenario on behalf of "John"</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-warning" title="Skipped"><i class="glyphicon glyphicon-minus"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> he provides cucumber JSON file to reporter</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-warning" title="Skipped"><i class="glyphicon glyphicon-minus"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> cucumber-html-reporter should create HTML report</span>
</span>
</p>
</div>
</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="#collapseScenariohappy0_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="1 Steps Passed">1</span>
<span class="label label-default" title="1 Steps Pending">1</span>
<span class="label label-warning" title="2 Steps Skipped">2</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_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">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-default" title="Pending"><i class="glyphicon glyphicon-exclamation-sign"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred runs a passing cucumber scenario on behalf of "Bob"</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-warning" title="Skipped"><i class="glyphicon glyphicon-minus"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> he provides cucumber JSON file to reporter</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-warning" title="Skipped"><i class="glyphicon glyphicon-minus"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> cucumber-html-reporter should create HTML report</span>
</span>
</p>
</div>
</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="#collapseScenariohappy0_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="4 Steps Passed">4</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_3" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred attaches the "test data to be printed" to the Given step of passing cucumber scenario</span>
<span class="step-duration">
<1ms
</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>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> he provides cucumber JSON file to reporter</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> cucumber-html-reporter should create HTML report with test-data</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
</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="#collapseScenariohappy0_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="4 Steps Passed">4</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_4" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred runs a passing cucumber scenario with the below content</span>
<span class="step-duration">
<1ms
</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>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> he provides cucumber JSON file to reporter</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Then </span>
<span> cucumber-html-reporter should create HTML report</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
</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="#collapseScenariohappy0_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="4 Steps Passed">4</span>
</span>
</a>
</h4>
</div>
<div id="collapseScenariohappy0_5" class="panel-collapse collapse">
<div class="panel-body">
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">When </span>
<span> this feature runs with background</span>
<span class="step-duration">
<1ms
</span>
</span>
</p>
</div>
<p class="scenario-container">
<div class="row steps">
<span class="label label-success" title="Success"><i class="glyphicon glyphicon-ok"></i></span>
<span class="text">
<span class="keyword highlight">Given </span>
<span> Fred runs a passing scenario for the following data set</span>
<span class="step-duration">
2ms
</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>