ortoni-report 1.0.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +54 -0
- package/dist/css/pico.css +2802 -0
- package/dist/icon/32.png +0 -0
- package/dist/ortoni-report.d.ts +8 -1
- package/dist/ortoni-report.js +50 -19
- package/dist/ortoni-report.mjs +50 -19
- package/dist/report-template.hbs +141 -61
- package/package.json +13 -6
- package/readme.md +62 -15
- package/.prettierignore +0 -1
- package/report-template.hbs +0 -251
package/readme.md
CHANGED
|
@@ -1,25 +1,63 @@
|
|
|
1
|
-
|
|
1
|
+
## Playwright Report by Koushik
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
We are excited to announce the release of OrtoniReport (Playwright report - unofficial), a powerful and customizable HTML report generator for Playwright tests. This release includes key features that enhance the reporting capabilities and make it easier to visualize and organize test results.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
## Features
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
|
|
11
|
+
1. **Hierarchical Grouping:**
|
|
12
|
+
- Test results are now grouped hierarchically by file name, suite name, and project name, allowing for a clear and organized view of your test structure.
|
|
13
|
+
|
|
14
|
+
2. **Detailed Breakdown:**
|
|
15
|
+
- Each suite displays a sub-category for project names, with individual test cases listed under their respective projects.
|
|
16
|
+
|
|
17
|
+
3. **Test Result Display:**
|
|
18
|
+
- Display results including status (passed, failed, skipped), duration, errors, logs, and screenshots.
|
|
19
|
+
- Organize test results by suite, project, and test script.
|
|
20
|
+
|
|
21
|
+
4. **Summary Statistics:**
|
|
22
|
+
- Provide summary statistics for total tests, passed tests, failed tests, skipped tests, and flaky tests.
|
|
23
|
+
|
|
24
|
+
5. **Chart Visualization:**
|
|
25
|
+
- Visualize test results using a doughnut chart to represent the distribution of passed, failed, and skipped tests.
|
|
26
|
+
|
|
27
|
+
6. **Project Information:**
|
|
28
|
+
- Include project name, author name, and test type information in the report.
|
|
29
|
+
|
|
30
|
+
7. **Search Functionality:**
|
|
31
|
+
- Search bar to filter and display specific tests based on user input.
|
|
32
|
+
|
|
33
|
+
8. **Reset Functionality:**
|
|
34
|
+
- Allow users to reset the search bar to show all tests when cleared.
|
|
35
|
+
|
|
36
|
+
9. **Customization:**
|
|
37
|
+
- Customize project name, author name, and test type displayed in the report.
|
|
38
|
+
- Dark/Light theme based on the user browser/system setting.
|
|
39
|
+
|
|
40
|
+
10. **Responsive Design:**
|
|
41
|
+
- Design the report layout to be responsive and adaptable to different screen sizes.
|
|
42
|
+
|
|
43
|
+
11. **Accessibility:**
|
|
44
|
+
- Ensure accessibility by providing appropriate HTML attributes and semantic structure.
|
|
45
|
+
|
|
46
|
+
12. **Ease of Use:**
|
|
47
|
+
- Enable easy navigation between test results and summary sections.
|
|
48
|
+
|
|
49
|
+
These features collectively enhance the readability, usability, and accessibility of the test report, providing valuable insights into test execution and results.
|
|
15
50
|
|
|
16
51
|
### Configurable Report Generation
|
|
17
52
|
- **Flexible Configuration:** The reporter can be easily configured within your Playwright configuration file. Example:
|
|
18
53
|
```JS/TS
|
|
19
|
-
reporter: [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
54
|
+
reporter: [["ortoni-report",
|
|
55
|
+
{
|
|
56
|
+
projectName: 'Plawright Sample',
|
|
57
|
+
authorName: 'Koushik',
|
|
58
|
+
testType: 'E2E'
|
|
59
|
+
}],
|
|
60
|
+
["dot"]],
|
|
23
61
|
```
|
|
24
62
|
|
|
25
63
|
### Screenshot Handling
|
|
@@ -51,10 +89,13 @@ import { defineConfig } from '@playwright/test';
|
|
|
51
89
|
import OrtoniReport from 'ortoni-report';
|
|
52
90
|
|
|
53
91
|
export default defineConfig({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
92
|
+
reporter: [["ortoni-report",
|
|
93
|
+
{
|
|
94
|
+
projectName: 'Plawright Sample',
|
|
95
|
+
authorName: 'Koushik',
|
|
96
|
+
testType: 'E2E'
|
|
97
|
+
}],
|
|
98
|
+
["dot"]],
|
|
58
99
|
// Other Playwright configurations
|
|
59
100
|
});
|
|
60
101
|
```
|
|
@@ -69,6 +110,12 @@ export default defineConfig({
|
|
|
69
110
|
- **Integration with CI/CD:** Enhanced support for continuous integration and deployment environments.
|
|
70
111
|
- **Advanced Filtering:** Additional filtering options to allow users to focus on specific subsets of test results.
|
|
71
112
|
|
|
113
|
+
## Change Logs:
|
|
114
|
+
[log](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md)
|
|
115
|
+
|
|
116
|
+
## License:
|
|
117
|
+
[LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md)
|
|
118
|
+
|
|
72
119
|
## Feedback and Contributions
|
|
73
120
|
|
|
74
121
|
We welcome feedback and contributions from the community. If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on our GitHub repository.
|
package/.prettierignore
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
report-template.hbs
|
package/report-template.hbs
DELETED
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Playwright Test Report</title>
|
|
8
|
-
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
|
9
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.css">
|
|
10
|
-
<style>
|
|
11
|
-
main.container {
|
|
12
|
-
display: grid;
|
|
13
|
-
grid-template-columns: 1fr 2fr;
|
|
14
|
-
gap: 20px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.header {
|
|
18
|
-
display: grid;
|
|
19
|
-
grid-template-columns: 1fr 2fr;
|
|
20
|
-
grid-column-gap: 20px;
|
|
21
|
-
grid-row-gap: 20px;
|
|
22
|
-
justify-items: stretch;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: space-evenly;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.text-success {
|
|
28
|
-
color: #28a745;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.text-danger {
|
|
32
|
-
color: #dc3545;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.sidebar {
|
|
36
|
-
border-right: 1px solid #ddd;
|
|
37
|
-
padding-right: 10px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.card {
|
|
41
|
-
padding: 1rem;
|
|
42
|
-
border: 1px solid #ddd;
|
|
43
|
-
border-radius: 0.5rem;
|
|
44
|
-
background-color: #fff;
|
|
45
|
-
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
pre {
|
|
49
|
-
background-color: #f8f9fa;
|
|
50
|
-
padding: 1rem;
|
|
51
|
-
border-radius: 0.5rem;
|
|
52
|
-
overflow-x: auto;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.back-button {
|
|
56
|
-
display: none;
|
|
57
|
-
margin-bottom: 1rem;
|
|
58
|
-
}
|
|
59
|
-
</style>
|
|
60
|
-
</head>
|
|
61
|
-
|
|
62
|
-
<body>
|
|
63
|
-
<header class="container">
|
|
64
|
-
<div class="header">
|
|
65
|
-
<div>
|
|
66
|
-
<h1>Playwright Test Report</h1>
|
|
67
|
-
</div>
|
|
68
|
-
<div>
|
|
69
|
-
<form role="search">
|
|
70
|
-
<input name="search" type="search" placeholder="Search" />
|
|
71
|
-
<input type="submit" value="Search" />
|
|
72
|
-
</form>
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
</header>
|
|
76
|
-
<main class="container">
|
|
77
|
-
<aside class="sidebar">
|
|
78
|
-
<h2>Tests</h2>
|
|
79
|
-
<div class="">
|
|
80
|
-
{{#each groupedResults}}
|
|
81
|
-
<details>
|
|
82
|
-
<summary>{{@key}}</summary>
|
|
83
|
-
<ul>
|
|
84
|
-
{{#each this}}
|
|
85
|
-
<details>
|
|
86
|
-
<summary>{{@key}}</summary>
|
|
87
|
-
<ul>
|
|
88
|
-
{{#each this}}
|
|
89
|
-
<details>
|
|
90
|
-
<summary>{{@key}}</summary>
|
|
91
|
-
<ul>
|
|
92
|
-
{{#each this}}
|
|
93
|
-
<li data-suite-name="{{suite}}" data-project-name="{{projectName}}"
|
|
94
|
-
data-test-id="{{index}}">{{title}}</li>
|
|
95
|
-
{{/each}}
|
|
96
|
-
</ul>
|
|
97
|
-
</details>
|
|
98
|
-
{{/each}}
|
|
99
|
-
</ul>
|
|
100
|
-
</details>
|
|
101
|
-
{{/each}}
|
|
102
|
-
</ul>
|
|
103
|
-
</details>
|
|
104
|
-
{{/each}}
|
|
105
|
-
</div>
|
|
106
|
-
</aside>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<section>
|
|
111
|
-
<div id="summary">
|
|
112
|
-
<section class="grid">
|
|
113
|
-
<div>
|
|
114
|
-
<article>
|
|
115
|
-
<header>Total Tests</header>
|
|
116
|
-
<p>{{totalCount}}</p>
|
|
117
|
-
</article>
|
|
118
|
-
</div>
|
|
119
|
-
<div>
|
|
120
|
-
<article>
|
|
121
|
-
<header>Passed</header>
|
|
122
|
-
<p class="text-success">{{passCount}}</p>
|
|
123
|
-
</article>
|
|
124
|
-
</div>
|
|
125
|
-
<div>
|
|
126
|
-
<article>
|
|
127
|
-
<header>Failed</header>
|
|
128
|
-
<p class="text-danger">{{failCount}}</p>
|
|
129
|
-
</article>
|
|
130
|
-
</div>
|
|
131
|
-
</section>
|
|
132
|
-
<section class="grid">
|
|
133
|
-
<div>
|
|
134
|
-
<article>
|
|
135
|
-
<header>Skipped</header>
|
|
136
|
-
<p>{{skipCount}}</p>
|
|
137
|
-
</article>
|
|
138
|
-
</div>
|
|
139
|
-
<div>
|
|
140
|
-
<article>
|
|
141
|
-
<header>Retry</header>
|
|
142
|
-
<p class="text-success">{{retryCount}}</p>
|
|
143
|
-
</article>
|
|
144
|
-
</div>
|
|
145
|
-
</section>
|
|
146
|
-
<section>
|
|
147
|
-
<h2>Test Results</h2>
|
|
148
|
-
<div class="chart-container">
|
|
149
|
-
<canvas id="testChart"></canvas>
|
|
150
|
-
</div>
|
|
151
|
-
</section>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<div id="testDetails" style="display: none;">
|
|
155
|
-
<!-- Back button should be outside the dynamic content -->
|
|
156
|
-
<button class="back-button" onclick="showSummary()">Back to Summary</button>
|
|
157
|
-
<!-- Test Details will be displayed here -->
|
|
158
|
-
</div>
|
|
159
|
-
</section>
|
|
160
|
-
</main>
|
|
161
|
-
|
|
162
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
|
|
163
|
-
<script>
|
|
164
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
165
|
-
const testData = {{{ json results }}};
|
|
166
|
-
const testDetails = document.getElementById('testDetails');
|
|
167
|
-
const summary = document.getElementById('summary');
|
|
168
|
-
const backButton = document.querySelector('.back-button');
|
|
169
|
-
|
|
170
|
-
function showSummary() {
|
|
171
|
-
summary.style.display = 'block';
|
|
172
|
-
testDetails.style.display = 'none';
|
|
173
|
-
backButton.style.display = 'none';
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
window.showSummary = showSummary;
|
|
177
|
-
|
|
178
|
-
function displayTestDetails(test) {
|
|
179
|
-
summary.style.display = 'none';
|
|
180
|
-
testDetails.style.display = 'block';
|
|
181
|
-
backButton.style.display = 'block';
|
|
182
|
-
testDetails.innerHTML = `
|
|
183
|
-
<button class="back-button" style="display: block" onclick="showSummary()">Back to Summary</button>
|
|
184
|
-
<h2>${test.title}</h2>
|
|
185
|
-
<div class="grid">
|
|
186
|
-
<div>
|
|
187
|
-
<h3>Status</h3>
|
|
188
|
-
<p class="${test.status === 'passed' ? 'text-success' : 'text-danger'}">${test.status}</p>
|
|
189
|
-
<h3>Duration</h3>
|
|
190
|
-
<p>${test.duration}ms</p>
|
|
191
|
-
${test.errors.length ? `
|
|
192
|
-
<h3>Errors</h3>
|
|
193
|
-
<pre>${test.errors.join('\n')}</pre>
|
|
194
|
-
` : ''}
|
|
195
|
-
</div>
|
|
196
|
-
<div>
|
|
197
|
-
${test.screenshotPath ? `
|
|
198
|
-
<h3>Screenshot</h3>
|
|
199
|
-
<img src="${test.screenshotPath}" alt="Screenshot">
|
|
200
|
-
` : ''}
|
|
201
|
-
${test.logs ? `
|
|
202
|
-
<h3>Logs</h3>
|
|
203
|
-
<pre>${test.logs}</pre>
|
|
204
|
-
` : ''}
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
`;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
const testItems = document.querySelectorAll('[data-test-id]');
|
|
211
|
-
testItems.forEach(item => {
|
|
212
|
-
item.addEventListener('click', () => {
|
|
213
|
-
const testId = item.getAttribute('data-test-id');
|
|
214
|
-
const test = testData[testId];
|
|
215
|
-
displayTestDetails(test);
|
|
216
|
-
});
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
const ctx = document.getElementById('testChart').getContext('2d');
|
|
220
|
-
new Chart(ctx, {
|
|
221
|
-
type: 'doughnut',
|
|
222
|
-
data: {
|
|
223
|
-
labels: ['Passed', 'Failed', 'Skipped'],
|
|
224
|
-
datasets: [{
|
|
225
|
-
data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}],
|
|
226
|
-
backgroundColor: ['#28a745', '#dc3545', '#f0f662']
|
|
227
|
-
}]
|
|
228
|
-
},
|
|
229
|
-
options: {
|
|
230
|
-
responsive: true,
|
|
231
|
-
maintainAspectRatio: false,
|
|
232
|
-
plugins: {
|
|
233
|
-
title: {
|
|
234
|
-
display: true,
|
|
235
|
-
text: 'Overall',
|
|
236
|
-
font: {
|
|
237
|
-
size: 18,
|
|
238
|
-
weight: 'bold'
|
|
239
|
-
}
|
|
240
|
-
},
|
|
241
|
-
legend: {
|
|
242
|
-
position: 'right'
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
});
|
|
247
|
-
});
|
|
248
|
-
</script>
|
|
249
|
-
</body>
|
|
250
|
-
|
|
251
|
-
</html>
|