This is my first html test summary report template. Any ideas how to improve the Test summary report html This is for generating a test summary report. It feels so plain. Doesn't feel professional. Can you suggest any improvements to make it more presentable.
Anyone wants to have a basic test summary report can use it as well. Hope someone can make it better.
<!DOCTYPE HTML>
<html>
<head>
<style>
.MainTable{
border:1px solid black;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
.InnerTable{
border:1px solid black;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
.StepRow
{
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.TestCaseRow:nth-child(4n-2) {
background-color: #eee;
}
.TestCaseRow:hover {
cursor: pointer;
background-color: #ccc;
}
.TestStepRow:nth-child(4n-2) {
background-color: #eee;
}
.TestStepRow:hover {
background-color: #ccc;
}
.pass {background-color: #4CAF50;}
.fail {background-color: #f44336;}
.warning {background-color: #FFFF00;}
</style>
<script>
function myFunction(rowId) {
var itemID="Step"+rowId;
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
window.onload = function() {
var reportData = []; // empty array
// object literal notation to create your structures
reportData.push({ Name: 'google',Duration:'34', Status: 'PASS' , 'TestStep':[
{'Label':'when','Name':'Test12','Duration':'32','Report':'test123','Status':'PASS'},
{'Label':'when','Name':'Test00','Duration':'32','Report':'test123','Status':'PASS'}
]});
reportData.push({ Name: 'rahul',Duration:'34', Status: 'FAIL' , 'TestStep':[
{'Label':'have','Name':'Test43','Duration':'32','Report':'test123','Status':'FAIL'},
{'Label':'test','Name':'Test67','Duration':'32','Report':'test123','Status':'PASS'}
]});
reportData.push({ Name: 'bing',Duration:'34', Status: 'WARNING' , 'TestStep':[
{'Label':'when','Name':'Test22','Duration':'2','Report':'test123','Status':'PASS'},
{'Label':'when','Name':'Test33','Duration':'31','Report':'test123','Status':'WARNING'}
]});
reportData.push({ Name: 'yahoo',Duration:'34', Status: 'WARNING' , 'TestStep':[
{'Label':'when','Name':'Test22','Duration':'2','Report':'test123','Status':'PASS'},
{'Label':'when','Name':'Test33','Duration':'31','Report':'test123','Status':'WARNING'},
{'Label':'when','Name':'Test33','Duration':'31','Report':'test123','Status':'WARNING'}
]});
var failCount=0;
var passCount=0;
var warningCount=0;
var count= reportData.length;
var text = '<table class="MainTable" >';
text+='<tr><th>Test Case</th> <th>Duration</th><th> Steps </th><th> Status</th></tr>';
for (i = 0; i < count; i++) {
text += '<tr class="TestCaseRow" id="Case'+i+'" onclick="myFunction('+i+')"><td>' + reportData[i]['Name'] + "</td>";
text += "<td>" + reportData[i]['Duration'] + "</td>";
text += "<td>" + reportData[i]['TestStep'].length + "</td>";
switch(reportData[i]['Status'])
{
case 'PASS':
text+='<td class="pass">'+reportData[i]['Status'] +"</td>";
passCount++;
break;
case 'FAIL':
text+='<td class="fail">'+reportData[i]['Status'] +'</td>';
failCount++;
break;
case 'WARNING':
text+='<td class="warning">'+reportData[i]['Status'] +'</td>';
warningCount++;
break;
}
text +="</tr>";
// Test Steps addition
text +='<tr class ="StepRow" id="Step'+i+'" style="display:none">';
text +='<td colspan="4">';
text +="<div>";
text +='<table class="InnerTable" >';
text+='<tr><th>Label</th><th>Name</th> <th>Duration</th><th> Report </th><th> Status</th></tr>';
for (j = 0; j < reportData[i]['TestStep'].length; j++)
{
var temp=reportData[i]['TestStep'];
text += '<tr class="TestStepRow"><td>' + temp[j]['Label'] + "</td>";
text += "<td>" + temp[j]['Name'] + "</td>";
text += "<td>" + temp[j]['Duration'] + "</td>";
text += "<td>" + temp[j]['Report'] + "</td>";
switch(temp[j]['Status'])
{
case 'PASS':
text+='<td class="pass">'+temp[j]['Status'] +"</td>";
break;
case 'FAIL':
text+='<td class="fail">'+temp[j]['Status'] +'</td>';
break;
case 'WARNING':
text+='<td class="warning">'+temp[j]['Status'] +'</td>';
break;
}
text +="</tr>";
}
text +="</table>";
text +="</div>";
text +='</td>';
text +="</tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
var passPer=100*passCount/count;
var failPer=100*failCount/count;
var warPer=100*warningCount/count;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Test Summary Report"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: [
{y: passPer, label: "PASS"},
{y: failPer, label: "FAILED"},
{y: warPer, label: "WARNING"},
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<p id="demo"></p>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire