ortoni-report 1.0.2 → 1.0.5

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.
@@ -4,6 +4,7 @@ declare class OrtoniReport implements Reporter {
4
4
  private results;
5
5
  private groupedResults;
6
6
  private suiteName;
7
+ constructor();
7
8
  onBegin(config: FullConfig, suite: Suite): void;
8
9
  onTestBegin(test: TestCase, result: TestResult): void;
9
10
  onTestEnd(test: TestCase, result: TestResult): void;
@@ -27,10 +27,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
27
27
  ));
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
 
30
- // ortoni-report.ts
30
+ // src/ortoni-report.ts
31
31
  var ortoni_report_exports = {};
32
32
  __export(ortoni_report_exports, {
33
- default: () => OrtoniReport
33
+ default: () => ortoni_report_default
34
34
  });
35
35
  module.exports = __toCommonJS(ortoni_report_exports);
36
36
  var import_fs = __toESM(require("fs"));
@@ -38,9 +38,9 @@ var import_path = __toESM(require("path"));
38
38
  var import_handlebars = __toESM(require("handlebars"));
39
39
  var import_safe = __toESM(require("colors/safe"));
40
40
  var OrtoniReport = class {
41
- results = [];
42
- groupedResults;
43
- suiteName;
41
+ constructor() {
42
+ this.results = [];
43
+ }
44
44
  onBegin(config, suite) {
45
45
  this.results = [];
46
46
  const screenshotsDir = import_path.default.join(__dirname, "screenshots");
@@ -51,7 +51,6 @@ var OrtoniReport = class {
51
51
  onTestBegin(test, result) {
52
52
  }
53
53
  onTestEnd(test, result) {
54
- console.log(test.titlePath());
55
54
  const testResult = {
56
55
  projectName: test.titlePath()[1],
57
56
  // Get the project name
@@ -144,3 +143,4 @@ function safeStringify(obj, indent = 2) {
144
143
  cache.clear();
145
144
  return json;
146
145
  }
146
+ var ortoni_report_default = OrtoniReport;
@@ -1,12 +1,12 @@
1
- // ortoni-report.ts
1
+ // src/ortoni-report.ts
2
2
  import fs from "fs";
3
3
  import path from "path";
4
4
  import Handlebars from "handlebars";
5
5
  import colors from "colors/safe";
6
6
  var OrtoniReport = class {
7
- results = [];
8
- groupedResults;
9
- suiteName;
7
+ constructor() {
8
+ this.results = [];
9
+ }
10
10
  onBegin(config, suite) {
11
11
  this.results = [];
12
12
  const screenshotsDir = path.join(__dirname, "screenshots");
@@ -17,7 +17,6 @@ var OrtoniReport = class {
17
17
  onTestBegin(test, result) {
18
18
  }
19
19
  onTestEnd(test, result) {
20
- console.log(test.titlePath());
21
20
  const testResult = {
22
21
  projectName: test.titlePath()[1],
23
22
  // Get the project name
@@ -110,6 +109,7 @@ function safeStringify(obj, indent = 2) {
110
109
  cache.clear();
111
110
  return json;
112
111
  }
112
+ var ortoni_report_default = OrtoniReport;
113
113
  export {
114
- OrtoniReport as default
114
+ ortoni_report_default as default
115
115
  };
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "ortoni-report",
3
- "version": "1.0.2",
3
+ "version": "1.0.5",
4
4
  "description": "Playwright Report By LetCode Koushik",
5
5
  "scripts": {
6
- "build": "tsup ortoni-report.ts --format cjs,esm --dts",
6
+ "build": "tsup",
7
7
  "release": "npm publish",
8
8
  "lint": "tsc"
9
9
  },
@@ -0,0 +1,251 @@
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>
package/ortoni-report.ts DELETED
@@ -1,140 +0,0 @@
1
- import fs from 'fs';
2
- import path from 'path';
3
- import Handlebars from "handlebars";
4
- import colors from 'colors/safe';
5
-
6
- import type {
7
- FullConfig, FullResult, Reporter, Suite, TestCase, TestResult
8
- } from '@playwright/test/reporter';
9
-
10
- interface TestResultData {
11
- projectName: any;
12
- suite: any;
13
- title: string;
14
- status: string;
15
- duration: number;
16
- errors: any[];
17
- steps: any[];
18
- logs: string;
19
- screenshotPath: string | null;
20
- filePath: any;
21
- }
22
- export default class OrtoniReport implements Reporter {
23
- private results: TestResultData[] = [];
24
- private groupedResults: any;
25
- private suiteName: string | undefined | TestCase[];
26
-
27
- onBegin(config: FullConfig, suite: Suite) {
28
-
29
- this.results = [];
30
- const screenshotsDir = path.join(__dirname, 'screenshots');
31
- if (!fs.existsSync(screenshotsDir)) {
32
- fs.mkdirSync(screenshotsDir);
33
- }
34
- }
35
-
36
- onTestBegin(test: TestCase, result: TestResult) {
37
- }
38
-
39
- onTestEnd(test: TestCase, result: TestResult) {
40
- console.log(test.titlePath());
41
-
42
- const testResult: TestResultData = {
43
- projectName: test.titlePath()[1], // Get the project name
44
- suite: test.titlePath()[3], // Adjust the index based on your suite hierarchy
45
- title: test.title,
46
- status: result.status,
47
- duration: result.duration,
48
- errors: result.errors.map(e => colors.strip(e.message || e.toString())),
49
- steps: result.steps.map(step => ({
50
- title: step.title,
51
- category: step.category,
52
- duration: step.duration,
53
- status: result.status
54
- })),
55
- logs: colors.strip(result.stdout.concat(result.stderr).map(log => log).join('\n')),
56
- screenshotPath: null,
57
- filePath: test.titlePath()[2]
58
- };
59
-
60
- if (result.attachments) {
61
- const screenshotsDir = path.join(__dirname, 'screenshots\\' + test.id);
62
- if (!fs.existsSync(screenshotsDir)) {
63
- fs.mkdirSync(screenshotsDir);
64
- }
65
- const screenshot = result.attachments.find(attachment => attachment.name === 'screenshot');
66
- if (screenshot && screenshot.path) {
67
- const screenshotContent = fs.readFileSync(screenshot.path, 'base64');
68
- const screenshotFileName = `screenshots/${test.id}/${path.basename(screenshot.path)}`;
69
- fs.writeFileSync(path.join(__dirname, screenshotFileName), screenshotContent, 'base64');
70
- testResult.screenshotPath = screenshotFileName;
71
- }
72
- }
73
-
74
- this.results.push(testResult);
75
- }
76
-
77
- onEnd(result: FullResult) {
78
- this.groupedResults = this.results.reduce((acc: any, result, index) => {
79
- const filePath = result.filePath;
80
- const suiteName = result.suite;
81
- const projectName = result.projectName;
82
- if (!acc[filePath]) {
83
- acc[filePath] = {};
84
- }
85
- if (!acc[filePath][suiteName]) {
86
- acc[filePath][suiteName] = {};
87
- }
88
- if (!acc[filePath][suiteName][projectName]) {
89
- acc[filePath][suiteName][projectName] = [];
90
- }
91
- acc[filePath][suiteName][projectName].push({ ...result, index });
92
- return acc;
93
- }, {});
94
-
95
-
96
- // Register the json helper
97
- Handlebars.registerHelper('json', function (context) {
98
- return safeStringify(context);
99
- });
100
- Handlebars.registerHelper('splitSuiteName', function (suiteName) {
101
- return suiteName.split(' - ');
102
- });
103
- const html = this.generateHTML();
104
- const outputPath = path.join(__dirname, 'ortoni-report.html');
105
- fs.writeFileSync(outputPath, html);
106
- console.log(`Ortoni HTML report generated at ${outputPath}`);
107
- }
108
- generateHTML() {
109
- const templateSource = fs.readFileSync(path.join(__dirname, 'report-template.hbs'), 'utf-8');
110
- const template = Handlebars.compile(templateSource);
111
- const data = {
112
- suiteName: this.suiteName,
113
- results: this.results,
114
- passCount: this.results.filter(r => r.status === 'passed').length,
115
- failCount: this.results.filter(r => r.status === 'failed').length,
116
- skipCount: this.results.filter(r => r.status === 'skipped').length,
117
- retryCount: this.results.filter(r => r.status === 'retry').length,
118
- totalCount: this.results.length,
119
- groupedResults: this.groupedResults
120
- };
121
- return template(data);
122
- }
123
- }
124
- // Utility function to remove circular references
125
- function safeStringify(obj: any, indent = 2) {
126
- const cache = new Set();
127
- const json = JSON.stringify(obj, (key, value) => {
128
- if (typeof value === 'object' && value !== null) {
129
- if (cache.has(value)) {
130
- // Circular reference found, discard key
131
- return;
132
- }
133
- // Store value in our set
134
- cache.add(value);
135
- }
136
- return value;
137
- }, indent);
138
- cache.clear();
139
- return json;
140
- }
package/tsconfig.json DELETED
@@ -1,19 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- /* Base Options: */
4
- "moduleResolution":"Node",
5
- "esModuleInterop": true,
6
- "skipLibCheck": true,
7
- "target": "es2022",
8
- "allowJs": true,
9
- "moduleDetection": "force",
10
- /* Strictness */
11
- "strict": true,
12
- "noUncheckedIndexedAccess": true,
13
- /* If NOT transpiling with TypeScript: */
14
- "module": "ESNext",
15
- "noEmit": true,
16
- /* If your code runs in the DOM: */
17
- "lib": ["es2022", "dom", "dom.iterable"],
18
- }
19
- }