HTML Report Templates For Application
Dalam pembuatan aplikasi pastinya dibutuhkan output, salah satunya adalah report. Kalo saya pribadi lebih cenderung untuk desain yang simple, namun semua itu pastinya bisa disesuaikan dengan clientnya. Kali ini saya akan berbagi sebuah script table sederhan untuk report atau laporan.
Sebenernya ini hanya sebuah table sederhana, tapi bisa dijadikan acuan atau referensi kalo misal lagi urgent. Selaku programmer bisa berkreasi sesuai keinginan dan kebutuhan,
Basic HTML Report Templates
<html>
<head>
<title>
Test Report
</title>
<style type="text/css">
.test-result-table {
border: 1px solid black;
width: 800px;
}
.test-result-table-header-cell {
border-bottom: 1px solid black;
background-color: silver;
}
.test-result-step-command-cell {
border-bottom: 1px solid gray;
}
.test-result-step-description-cell {
border-bottom: 1px solid gray;
}
.test-result-step-result-cell-ok {
border-bottom: 1px solid gray;
background-color: green;
}
.test-result-step-result-cell-failure {
border-bottom: 1px solid gray;
background-color: red;
}
.test-result-step-result-cell-notperformed {
border-bottom: 1px solid gray;
background-color: white;
}
.test-result-describe-cell {
background-color: tan;
font-style: italic;
}
.test-cast-status-box-ok {
border: 1px solid black;
float: left;
margin-right: 10px;
width: 45px;
height: 25px;
background-color: green;
}
</style>
</head>
<body>
<h1 class="test-results-header">
Test Report
</h1>
<table class="test-result-table" cellspacing="0">
<thead>
<tr>
<td class="test-result-table-header-cell">
Test Case
</td>
<td class="test-result-table-header-cell">
Description
</td>
<td class="test-result-table-header-cell">
Result
</td>
</tr>
</thead>
<tbody>
<tr class="test-result-step-row test-result-step-row-altone">
<td class="test-result-step-command-cell">
open /
</td>
<td class="test-result-step-description-cell">
Open browser to "/"
</td>
<td class="test-result-step-result-cell-ok">
OK
</td>
</tr>
<tr class="test-result-step-row test-result-comment-row">
<td class="test-result-describe-cell" colspan="3">
Describe: This is a comment
</td>
</tr>
<tr class="test-result-step-row test-result-step-row-alttwo">
<td class="test-result-step-command-cell">
click btnG
</td>
<td class="test-result-step-description-cell">
Click on page element with identifier of "btnG"
</td>
<td class="test-result-step-result-cell-failure">
FAILURE - Unable to find element named "btnG"
</td>
</tr>
<tr class="test-result-step-row test-result-step-row-altone">
<td class="test-result-step-command-cell">
assertTitle something
</td>
<td class="test-result-step-description-cell">
Test that the title of the page is "something"
</td>
<td class="test-result-step-result-cell-notperformed">
NOT PERFORMED
</td>
</tr>
</tbody>
</table>
</body>
</html>
Output HTML Report
| Test Case | Description | Result |
| open / | Open browser to "/" | OK |
| Describe: This is a comment | ||
| click btnG | Click on page element with identifier of "btnG" | FAILURE - Unable to find element named "btnG" |
| assertTitle something | Test that the title of the page is "something" | NOT PERFORMED |
Post a Comment for "HTML Report Templates For Application"
Post a Comment