cucumber-html-reporter
Version:
Generates Cucumber HTML reports in three different themes
252 lines (241 loc) • 8.52 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>
<% 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 %>
</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>