cucumber-html-reporter
Version:
Generates Cucumber HTML reports in three different themes
358 lines (327 loc) • 11.8 kB
HTML
<html>
<head>
<title>Cucumber Feature Report</title>
<link rel="icon" href="https://www.lambdatest.com/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
<%=styles %>
/** Issue in google-charts tooltip - https://github.com/google/google-visualization-issues/issues/2162 */
.google-visualization-tooltip {
pointer-events: none;
}
.count-wrapper {
display: flex;
gap: 15px;
}
.card {
border: 1px solid #f5f5f5;
padding: 15px;
color: #fff;
border-radius: 5px;
flex: 1;
}
.generated-on {
margin-right: 10px;
}
.card h4 {
font-size: 15px;
}
.red-box {
background: #d9534e;
}
.blue-box {
background: #0074ff;
}
.yellow-box {
background: #f0ad4e;
}
.saffron-box {
background: #ff9933;
}
.green-box {
background: #5cb85b;
}
.gray-box {
background: #999;
}
.amb-box {
background: #218bcf;
}
.undefined-box {
background: #22c2e2;
}
.mb-20px {
margin-bottom: 20px;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<%var brandTitle=suite.brandTitle ? suite.brandTitle : 'Cucumberjs Report' %>
<a class="navbar-brand">
<%= brandTitle %>
</a>
<div class="project-name visible-md visible-lg">
<%= suite.name.plain %>
</div>
<div class="label-container">
<div class="generated-on">
<%= suite.time %>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="count-wrapper mb-20px">
<div class="card blue-box">
<div class="feature-title">
<h4>All Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.getTotal() %>
</h5>
</div>
</div>
<div class="card green-box">
<div class="feature-title">
<h4>Passed Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.passed %>
</h5>
</div>
</div>
<div class="card red-box">
<div class="feature-title">
<h4>Failed Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.failed %>
</h5>
</div>
</div>
<% if (suite.scenarios.rerun) { %>
<div class="card saffron-box">
<div class="feature-title">
<h4>Re-run Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.rerun %>
</h5>
</div>
</div>
<% } %>
<% if (suite.scenarios.skipped) { %>
<div class="card yellow-box">
<div class="feature-title">
<h4>Skipped Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.skipped %>
</h5>
</div>
</div>
<% } %>
<% if (suite.scenarios.pending) { %>
<div class="card gray-box">
<div class="feature-title">
<h4>Pending Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.pending %>
</h5>
</div>
</div>
<% } %>
<% if (suite.scenarios.notdefined) { %>
<div class="card undefined-box">
<div class="feature-title">
<h4>Undefined Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.notdefined %>
</h5>
</div>
</div>
<% } %>
<% if (suite.scenarios.ambiguous) { %>
<div class="card amb-box">
<div class="feature-title">
<h4>Ambiguous Scenarios</h2>
</div>
<div class="feature-value">
<h5>
<%= suite.scenarios.ambiguous %>
</h5>
</div>
</div>
<% } %>
</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>
<p class="text-left">
Execution Time: <%= suite.totalTime %>
</p>
<p class="text-right">
<a id="expand_all">Expand All</a>
<span> | </span>
<a id="collapse_all">Collapse All</a>
</p>
</div>
<% if (suite.metadata) { %>
<div class="panel panel-default">
<div class="panel-heading open">
<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 in">
<div class="panel-body">
<div class="row">
<% var isLeft=true %>
<% _.map(suite.metadata, function(value, key) { %>
<% var className %>
<% if (isLeft) { className="pull-left" ; isLeft=false; } else { className="pull-right-lg" ;
isLeft=true } %>
<div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class=<%=className %>>
<strong>
<%= key %>:
</strong>
<%= value %>
</div>
</div>
<% }) %>
</div>
</div>
</div>
</div>
<% } %>
<%= features %>
<% if (suite.failedSummaryReport) { %>
<div class="panel panel-default">
<div class="panel-heading open">
<h4 class="panel-title">
<a data-toggle="collapse" href="#failed_summary">
<i class="glyphicon glyphicon-chevron-right"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
<b>Failed Test Scenarios Summary</b>
</a>
</h4>
</div>
<div class="panel-collapse collapse in" id="failed_summary">
<div class="panel-body">
<table class="table table-bordered table-condensed" style="overflow-wrap: anywhere">
<% if (suite.scenarios.failed===0) { %>
<div>
<p class="text-center">Nothing to show</p>
</div>
<% } %>
<% if (suite.scenarios.failed!==0) { %>
<tr>
<th>Feature</th>
<th>Scenario</th>
<th>Tags</th>
<th>Step Failed</th>
<th>Failed Exception</th>
</tr>
<% } %>
<% if (suite.features) { %>
<% _.each(suite.features, function(features, featureIndex) { %>
<% _.each(features.elements, function(elements) { %>
<% if (elements.failed) { %>
<tr>
<td>
<%= features.name %>
</td>
<td>
<%= elements.name %>
</td>
<td>
<% _.each(elements.tags, function(tags) { %>
<span>
<%= tags.name %>
</span>
<% }); %>
</td>
<% _.each(elements.steps, function(steps) { %>
<% if (steps.result.status==='failed' ) { %>
<td>
<%= steps.name %>
</td>
<td>
<%= steps.result.error_message %>
</td>
<% } %>
<% }); %>
<% } %>
<% }); %>
</tr>
<% }); %>
<% } %>
</table>
</div>
</div>
</div>
<% } %>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(function () {
drawChart({
"title": "Features",
"failed": <%= suite.features.summary.failed %>,
"passed": <%= suite.features.summary.passed %>,
"notdefined": <%= suite.features.summary.notdefined %>,
"pending": <%= suite.features.summary.pending %>,
"skipped": <%= suite.features.summary.skipped %>,
"ambiguous": <%= suite.features.summary.ambiguous %>
})
});
google.setOnLoadCallback(function () {
drawChart({
"title": "Scenarios",
"failed": <%= suite.scenarios.failed %>,
"passed": <%= suite.scenarios.passed %>,
"rerun": <%= suite.scenarios.rerun %>,
"notdefined": <%= suite.scenarios.notdefined %>,
"pending": <%= suite.scenarios.pending %>,
"skipped": <%= suite.scenarios.skipped %>,
"ambiguous": <%= suite.scenarios.ambiguous %>
})
});
</script>
<script>
<%= script %>
<%= piechart %>
<%= screenshot %>
</script>
</body>
</html>