Skip to content

Instantly share code, notes, and snippets.

@adiralashiva8

adiralashiva8/testngmetrics.html

Last active February 13, 2019 12:29
Show Gist options
  • Save adiralashiva8/6b1eb45ed8a6570ebbd86ac2a56a8811 to your computer and use it in GitHub Desktop.
Save adiralashiva8/6b1eb45ed8a6570ebbd86ac2a56a8811 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
testngmetrics.html
<!DOCTYPE doctype html>
<html lang="en">
<head>
<link href="https://img.icons8.com/flat_round/64/000000/bar-chart.png" rel="shortcut icon" type="image/x-icon"/>
<title> TestNG Metrics Report</title>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<!-- Bootstrap core Googleccharts -->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<!-- Bootstrap core Datatable-->
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js" type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128252886-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-128252886-1');
</script>
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
color: black;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
[role="main"] {
padding-top: 8px;
}
/* Set height of body and the document to 100% */
body {
height: 100%;
margin: 0;
//font-family: Comic Sans MS;
background-color: white;
}
/* Style tab links */
.tablinkLog {
cursor: pointer;
}
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif?e44397') 50% 50% no-repeat rgb(249,249,249);
}
/* TILES */
.tile {
width: 100%;
float: left;
margin: 0px;
list-style: none;
font-size: 40px;
color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 5px;
position: relative;
text-align: center;
color: white!important;
}
.tile.tile-fail {
background: #f44336!important;
}
.tile.tile-pass {
background: #4CAF50!important;
}
.tile.tile-info {
background: #009688!important;
}
.tile.tile-head {
background: #ff6f69!important;
}
.dt-buttons {
margin-left: 5px;
}
</style></head>
<body>
<div class="loader"></div>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar" style="font-size:16px;">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<img src="https://cdn.pixabay.com/photo/2016/08/02/10/42/wifi-1563009_960_720.jpg" style="height:18vh!important;width:95%;"/>
<br/>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center text-muted">
<span>Metrics</span>
<a class="d-flex align-items-center text-muted" href="#"></a>
</h6>
<li class="nav-item">
<a class="tablink nav-link" href="#" id="defaultOpen" onclick="openPage('dashboard', this, 'orange')">
<i class="fa fa-dashboard"></i> Dashboard</a>
</li>
<li class="nav-item">
<a class="tablink nav-link" href="#" onclick="openPage('classMetrics', this, 'orange');executeDataTable('#cm',3)">
<i class="fa fa-list-alt"></i> Class Metrics</a>
</li>
<li class="nav-item">
<a class="tablink nav-link" href="#" onclick="openPage('testMetrics', this, 'orange');executeDataTable('#tm',3)">
<i class="fa fa-table"></i> Test Metrics</a>
</li>
<li class="nav-item">
<a class="tablink nav-link" href="#" onclick="openPage('methodMetrics', this, 'orange');executeDataTable('#mm',3)">
<i class="fa fa-table"></i> Method Metrics</a>
</li>
<li class="nav-item">
<a class="tablink nav-link" href="#" onclick="openPage('log', this, 'orange');">
<i class="fa fa-wpforms"></i> TestNG Logs</a>
</li>
<li class="nav-item">
<a class="tablink nav-link" href="#" onclick="openPage('statistics', this, 'orange');">
<i class="fa fa-envelope-o"></i> Email Metrics</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="col-md-9 ml-sm-auto col-lg-10 px-4" role="main">
<div class="tabcontent" id="dashboard">
<div class="d-flex flex-column flex-md-row align-items-center p-1 mb-3 bg-light border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal"><i class="fa fa-dashboard"></i> Dashboard</h5>
<nav class="my-2 my-md-0 mr-md-3" style="color:red">
<a class="p-2"><b data-toggle="tooltip" style="color:black;cursor: pointer;" title=".xml file is created by"> Generated By:</b> TestNG</a>
</nav>
</div>
<div class="row">
<div class="col-md-3"><a class="tile tile-info">10<p style="font-size:15px">Total Tests</p></a></div>
<div class="col-md-3"><a class="tile tile-pass">5<p style="font-size:15px">Pass</p></a></div>
<div class="col-md-3"><a class="tile tile-fail">2<p style="font-size:15px">Fail</p></a></div>
<div class="col-md-3"><a class="tile tile-head">3<p style="font-size:15px">Skip</p></a></div>
</div><hr/>
<div class="row">
<div class="col-md-4" style="background-color:white;height:350px;width:auto;border:groove;">
<span style="font-weight:bold">Test Status:</span>
<div id="testChartID" style="height:300px;width:auto;"></div>
</div>
<div class="col-md-8" style="background-color:white;height:350px;width:auto;border:groove;">
<span style="font-weight:bold">Top 5 Class Failures:</span>
<div id="classBarID" style="height:300px;width:auto;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="background-color:white;height:450px;width:auto;border:groove;">
<span style="font-weight:bold">Top 10 Test Performance(sec):</span>
<div id="testsBarID" style="height:400px;width:auto;"></div>
</div>
<div class="col-md-12" style="background-color:white;height:450px;width:auto;border:groove;">
<span style="font-weight:bold">Top 10 Method Performance(sec):</span>
<div id="methodsBarID" style="height:400px;width:auto;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="height:25px;width:auto;">
<p class="text-muted" style="text-align:center;font-size:9px">testng-metrics</p>
</div>
</div>
<script>
window.onload = function(){
executeDataTable('#cm',3);
executeDataTable('#tm',3);
executeDataTable('#mm',3);
createBarGraph('#cm',0,3,5,'classBarID','Elapsed Time(s): ','Class');
createBarGraph('#tm',1,3,10,'testsBarID','Elapsed Time(s): ','Test');
createBarGraph('#mm',1,3,10,'methodsBarID','Elapsed Time(s): ','Method');
};
</script>
</div>
<div class="tabcontent" id="classMetrics">
<h4><b><i class="fa fa-table"></i> Class Metrics</b></h4><hr/>
<table class="table table-striped table-bordered" id="cm">
<thead><tr>
<th>Class Name</th>
<th>Total Methods</th>
<th>Passed Methods</th>
<th>Failed Methods</th>
<th>Skipped Methods</th>
</tr></thead>
<tbody>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.MainClass</td>
<td>13</td>
<td>12</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.SecondClass</td>
<td>13</td>
<td>12</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.ThirdClass</td>
<td>13</td>
<td>12</td>
<td>10</td>
<td>0</td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.FourthClass</td>
<td>13</td>
<td>12</td>
<td>10</td>
<td>0</td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.FifthClass</td>
<td>13</td>
<td>12</td>
<td>10</td>
<td>0</td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.SixthClass</td>
<td>13</td>
<td>12</td>
<td>10</td>
<td>0</td>
</tr>
</tbody>
</table>
<div class="row"><div class="col-md-12" style="height:25px;width:auto;"></div></div></div>
<div class="tabcontent" id="testMetrics">
<h4><b><i class="fa fa-table"></i> Test Metrics</b></h4><hr/>
<table class="table table-striped table-bordered" id="tm">
<thead><tr>
<th>Class Name</th>
<th>Test Name</th>
<th>Status</th>
<th>Time(s)</th>
<th>Error</th>
</tr></thead>
<tbody>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.MainClass</td>
<td style="word-wrap: break-word;max-width: 250px; white-space: normal;">beforeSuite</td>
<td>PASS</td>
<td>41.609</td>
<td></td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.MainClass</td>
<td style="word-wrap: break-word;max-width: 250px; white-space: normal;">testCaseOne</td>
<td>FAIL</td>
<td>1.609</td>
<td>java.lang.AssertionError</td>
</tr>
</tbody>
</table>
<div class="row"><div class="col-md-12" style="height:25px;width:auto;"></div></div></div>
<div class="tabcontent" id="methodMetrics">
<h4><b><i class="fa fa-table"></i> Method Metrics</b></h4><hr/>
<table class="table table-striped table-bordered" id="mm">
<thead><tr>
<th>Class Name</th>
<th>Method Name</th>
<th>Status</th>
<th>Time(s)</th>
<th>Error</th>
</tr></thead>
<tbody>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.MainClass</td>
<td style="word-wrap: break-word;max-width: 250px; white-space: normal;">beforeSuite</td>
<td>PASS</td>
<td>41.609</td>
<td></td>
</tr>
<tr>
<td style="word-wrap: break-word;max-width: 200px; white-space: normal">testcase.testOne.MainClass</td>
<td style="word-wrap: break-word;max-width: 250px; white-space: normal;">testCaseOne</td>
<td>FAIL</td>
<td>1.609</td>
<td>java.lang.AssertionError</td>
</tr>
</tbody>
</table>
<div class="row"><div class="col-md-12" style="height:25px;width:auto;"></div></div></div>
<div class="tabcontent" id="log">
<p style="text-align:right">**<b>index.html</b>need to be in current folder in order to display here</p>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="index.html"></iframe>
</div>
</div>
<div class="tabcontent" id="statistics">
<h4><b><i class="fa fa-envelope-o"></i> Email Statistics</b></h4><hr/>
<button class="btn btn-primary active inner" id="create" onclick="updateTextArea();this.style.visibility= 'hidden';" role="button">
<i class="fa fa-cogs"></i> Generate Statistics Email</button>
<a class="btn btn-primary active inner" download="message.eml" id="downloadlink" role="button" style="display: none; width: 300px;">
<i class="fa fa-download"></i>Click Here To Download Email</a>
<script>
function updateTextArea() {
var suite = "<b>Top 5 Class Failures:</b><br><br>" + $("#classBarID table")[0].outerHTML;
var test = "<b>Top 10 Test Performance:</b><br><br>" + $("#testsBarID table")[0].outerHTML;
var test = "<b>Top 10 Method Performance:</b><br><br>" + $("#methodsBarID table")[0].outerHTML;
var saluation="<pre><br>Please refer TestNG Metrics Report for detailed statistics.<br><br>Regards,<br>QA Team</pre></body></html>";
document.getElementById("textbox").value += "<br>" + suite + "<br>" + test + "<br>" + keyword + saluation;
$("#create").click(function(){
$(this).remove();
});
}
</script>
<textarea class="col-md-12" id="textbox" style="height: 400px; padding:1em;">
To: [email protected]
Subject: Automation Execution Status
X-Unsent: 1
Content-Type: text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Email Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1.0 " name="viewport"/>
<style>
body {
background-color:#F2F2F2;
}
body, html, table,pre,b {
font-family: Calibri, Arial, sans-serif;
font-size: 1em;
}
.pastdue { color: crimson; }
table {
border: 1px solid silver;
padding: 6px;
margin-left: 30px;
width: 600px;
}
thead {
text-align: center;
font-size: 1.1em;
background-color: #B0C4DE;
font-weight: bold;
color: #2D2C2C;
}
tbody {
text-align: center;
}
th {
width: 25%;
word-wrap:break-word;
}
</style></head>
<body><pre>Hi Team,
Following are the last build execution statistics.
<b>Metrics:<b>
</b></b></pre>
<table>
<thead>
<th style="width: 25%;">Total</th>
<th style="width: 25%;">Pass</th>
<th style="width: 25%;">Fail</th>
<th style="width: 25%;">Skip</th>
</thead>
<tbody><tr>
<td style="text-align: left;font-weight: bold;"> TESTS </td>
<td style="background-color: #F5DEB3;text-align: center;">9</td>
<td style="background-color: #90EE90;text-align: center;">4</td>
<td style="background-color: #F08080;text-align: center;">5</td>
</tr></tbody>
</table>
</body></html></textarea>
</div></div>
<script>
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {
type: 'text/plain'
});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.getElementById('downloadlink');
link.href = makeTextFile(textbox.value);
link.style.display = 'block';
}, false);
})();
</script>
<script>
function createBarGraph(tableID, keyword_column, time_column, limit, ChartID, Label, type) {
var status = [];
css_selector_locator = tableID + ' tbody >tr'
var rows = $(css_selector_locator);
var columns;
var myColors = ['#4F81BC','#C0504E','#9BBB58','#24BEAA','#8064A1','#4AACC5','#F79647','#815E86','#76A032','#34558B'];
status.push([type, Label, {role: 'annotation'}, {role: 'style'}]);
for (var i = 0; i < rows.length; i++) {
if (i == Number(limit)) {
break;
}
//status = [];
name_value = $(rows[i]).find('td');
time = ($(name_value[Number(time_column)]).html()).trim();
keyword = ($(name_value[Number(keyword_column)]).html()).trim();
status.push([keyword, parseFloat(time), parseFloat(time), myColors[i]]);
}
var data = google.visualization.arrayToDataTable(status);
var options = {
legend: 'none',
chartArea: { width: "92%", height: "75%"},
bar: { groupWidth: '90%'},
annotations: {
alwaysOutside: true,
textStyle: {
fontName: 'Comic Sans MS',fontSize: 13,bold: true,italic: true,color: "black", },
},
hAxis: {
textStyle: {fontName: 'Arial',fontSize: 10,}
},
vAxis: {
gridlines: {count: 10},
textStyle: {fontName: 'Comic Sans MS',fontSize: 10,}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById(ChartID));
chart.draw(data, options);
}
</script>
<script>
function executeDataTable(tabname, sortCol) {
var fileTitle;
switch (tabname) {
case "#cm":
fileTitle = "ClassMetrics";
break;
case "#tm":
fileTitle = "TestMetrics";
break;
default:
fileTitle = "metrics";
}
$(tabname).DataTable({
retrieve: true,
"order": [[Number(sortCol), "desc"]],
dom: 'l<".margin" B>frtip',
buttons: [
'copy',
{
extend: 'csv',
filename: function () {
return fileTitle + '-' + new Date().toLocaleString();
},
title: '',
},
{
extend: 'excel',
filename: function () {
return fileTitle + '-' + new Date().toLocaleString();
},
title: '',
},
{
extend: 'pdf',
filename: function () {
return fileTitle + '-' + new Date().toLocaleString();
},
title: '',
},
{
extend: 'print',
title: '',
},
],
});
}
</script>
<script>
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
document.getElementById("defaultOpen").click();
</script>
<script>
$(window).on('load',function(){$('.loader').fadeOut();});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment