ortoni-report 1.1.4 → 1.1.6

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.
Files changed (9) hide show
  1. package/changelog.md +12 -0
  2. package/dist/css/main.css +22445 -22445
  3. package/dist/ortoni-report.d.ts +26 -12
  4. package/dist/ortoni-report.js +242 -216
  5. package/dist/ortoni-report.mjs +211 -185
  6. package/dist/report-template.hbs +279 -225
  7. package/dist/utils/modal.js +10 -3
  8. package/package.json +3 -2
  9. package/readme.md +61 -127
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ortoni-report",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "description": "Playwright Report By LetCode with Koushik",
5
5
  "scripts": {
6
6
  "test": "npx playwright test",
@@ -33,7 +33,8 @@
33
33
  "homepage": "https://github.com/ortoniKC/ortoni-report#readme",
34
34
  "dependencies": {
35
35
  "colors": "^1.4.0",
36
- "handlebars": "^4.7.8"
36
+ "handlebars": "^4.7.8",
37
+ "ws": "^8.18.0"
37
38
  },
38
39
  "devDependencies": {
39
40
  "@playwright/test": "^1.44.1",
package/readme.md CHANGED
@@ -1,165 +1,99 @@
1
1
  ## Playwright Report by Koushik
2
2
 
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.
3
+ Welcome to OrtoniReport (Playwright report - unofficial), a robust HTML report generator tailored for Playwright tests. This release introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
4
4
 
5
- [Click here to check the live Demo](https://ortoni.netlify.app/)
5
+ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
6
6
 
7
- ![Ortoni-Report](https://github.com/ortoniKC/ortoni-report/assets/58769833/e88f33d4-eb5c-41c7-b90a-f8a283af0058)
7
+ ![OrtoniReport](https://github.com/ortoniKC/ortoni-report/assets/58769833/e88f33d4-eb5c-41c7-b90a-f8a283af0058)
8
8
 
9
- ## Features
9
+ ### Key Features
10
10
 
11
- 1. **Hierarchical Grouping:**
11
+ 1. **Hierarchical Grouping**
12
+ - Tests are grouped hierarchically by file name, suite, and project, offering a structured view of test execution.
12
13
 
13
- - 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.
14
+ 2. **Detailed Breakdown**
15
+ - Each suite includes categorized tests under respective projects, providing clear organization.
14
16
 
15
- 2. **Detailed Breakdown:**
17
+ 3. **Comprehensive Test Details**
18
+ - Display test status (passed, failed, skipped), duration, errors, logs, and screenshots.
19
+ - Sort and filter tests by suite, project, and script for detailed insights.
16
20
 
17
- - Each suite displays a sub-category for project names, with individual test cases listed under their respective projects.
21
+ 4. **Summary Statistics**
22
+ - Overview of total tests, passed, failed, skipped, and flaky tests.
23
+ - Success rate calculation for test suites.
18
24
 
19
- 3. **Test Result Display:**
25
+ 5. **Chart Visualization**
26
+ - Doughnut chart representation for visualizing test result distribution (passed, failed, skipped, flaky).
20
27
 
21
- - Display results including status (passed, failed, skipped), duration, errors, logs, and screenshots.
22
- - Organize test results by suite, project, and test script.
28
+ 6. **Search and Reset**
29
+ - Search functionality to filter tests based on user input.
30
+ - Reset option to clear filters and display all tests.
23
31
 
24
- 4. **Summary Statistics:**
32
+ 7. **Customization and Themes**
33
+ - Customize project details, author name, test types, and toggle between dark/light themes.
34
+ - Option to choose between Base64 images or file path for screenshots.
25
35
 
26
- - Provide summary statistics for total tests, passed tests, failed tests, skipped tests, and flaky tests.
27
- - Success Rate of test suite.
36
+ 8. **Responsive Design**
37
+ - Optimized layout that adapts seamlessly to different screen sizes for accessibility.
28
38
 
29
- 5. **Chart Visualization:**
30
-
31
- - Visualize test results using a doughnut chart to represent the distribution of passed, failed, skipped and flaky tests.
32
-
33
- 6. **Project Information:**
34
-
35
- - Include project name, author name, and test type information in the report.
36
-
37
- 7. **Search Functionality:**
38
-
39
- - Search bar to filter and display specific tests based on user input.
40
-
41
- 8. **Reset Functionality:**
42
-
43
- - Allow users to reset the search bar to show all tests when cleared.
44
-
45
- 9. **Customization:**
46
-
47
- - Customize project name, author name, and test type displayed in the report.
48
- - Dark/Light theme based on the user toggle.
49
-
50
- 10. **Responsive Design:**
51
-
52
- - Design the report layout to be responsive and adaptable to different screen sizes.
53
-
54
- 11. **Accessibility:**
55
-
56
- - Ensure accessibility by providing appropriate HTML attributes and semantic structure.
57
-
58
- 12. **Ease of Use:**
59
-
60
- - Enable easy navigation between test results and summary sections.
61
-
62
- 13. **Success Rate**
63
- - The success rate in this project is calculated based on the outcomes of the tests executed using Playwright. The calculation considers tests that pass initially as well as tests that initially fail but pass upon retry
64
- - Success Rate Formula
65
- The success rate (successRate) is calculated using the following formula:
66
- ```
67
- const successRate: string = (((passedTests + flakyTests) / totalTests) * 100).toFixed(2);
68
- ```
69
- 14. **Project Filtering**: Implemented filtering of tests by projects (e.g., chromium, firefox) to streamline test result views.
70
-
71
- 15. **Screenshots**: Implemented screenshot attachment as base64 images for enhanced report details
72
-
73
- These features collectively enhance the readability, usability, and accessibility of the test report, providing valuable insights into test execution and results.
39
+ 9. **Integration and Configuration**
40
+ - Easily integrate with Playwright configurations using TypeScript/JavaScript.
41
+ - Configure reporting preferences within your Playwright setup.
74
42
 
75
43
  ### Configurable Report Generation
76
44
 
77
- - **Flexible Configuration:** The reporter can be easily configured within your Playwright configuration file. Example:
78
- ```JS/TS
79
- import {OrtoniReportConfig} from "ortoni-report";
80
- let reportConfig: OrtoniReportConfig = {
81
- projectName: "Ortoni",
82
- testType: "Regression",
83
- authorName: "Koushik",
84
- preferredTheme: "light"
85
- };
86
-
87
- reporter: [["ortoni-report",
88
- {
89
- projectName: 'LetCode Playwright Report',
90
- authorName: 'Koushik',
91
- testType: 'E2E'
92
- }],
93
- ["dot"]],
94
- ```
95
-
96
- ### Comprehensive Test Details
97
-
98
- - **Rich Test Information:** Each test result includes the test title, status, duration, errors, steps, logs, and screenshot paths.
99
- - **Color-coded Status:** Test statuses are color-coded (green for passed, red for failed, yellow for skipped) for quick visual identification.
100
-
101
- ### Handlebars Template Integration
102
-
103
- - **Customizable Reports:** The HTML report is generated using Handlebars templates, allowing for easy customization and styling.
104
- - **JSON Helper:** A custom Handlebars helper for JSON stringification is included to handle complex data structures.
105
-
106
- ## Installation
107
-
108
- To install OrtoniReport, add it to your project using npm:
109
-
110
- ```bash
111
- npm install ortoni-report
112
- ```
113
-
114
- ## Usage
115
-
116
45
  Configure OrtoniReport in your `playwright.config.ts`:
117
46
 
118
- ```javascript/typescript
47
+ ```typescript
119
48
  import { defineConfig } from '@playwright/test';
120
- import {OrtoniReportConfig} from "ortoni-report";
121
- let reportConfig: OrtoniReportConfig = {
122
- projectName: "Ortoni",
123
- testType: "Regression",
124
- authorName: "Koushik",
125
- preferredTheme: "light"
126
- };
49
+ import { OrtoniReportConfig } from 'ortoni-report';
50
+
51
+ const reportConfig: OrtoniReportConfig = {
52
+ projectName: 'Ortoni',
53
+ testType: 'Regression',
54
+ authorName: 'Koushik',
55
+ preferredTheme: 'light',
56
+ base64Image: false, // Example configuration
57
+ };
58
+
127
59
  export default defineConfig({
128
- reporter: [["ortoni-report",
129
- {
130
- projectName: 'LetCode Playwright Report',
131
- authorName: 'Koushik',
132
- testType: 'E2E'
133
- }],
134
- ["dot"]],
135
- // Other Playwright configurations
60
+ reporter: [['ortoni-report', reportConfig], ['dot']],
61
+ // Other Playwright configurations
136
62
  });
137
63
  ```
138
64
 
139
- ## Known Issues
65
+ ### Comprehensive Test Details
140
66
 
141
- - **Compatibility:** Ensure that your Node.js environment supports ES6 modules, as OrtoniReport uses modern JavaScript features.
67
+ - **Rich Test Information:** Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot paths.
68
+ - **Color-coded Status:** Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
142
69
 
143
- ## Future Plans
70
+ ### Handlebars Template Integration
71
+
72
+ - **Customizable Reports:** HTML reports are generated using Handlebars templates, offering flexibility in customization and styling.
73
+ - **JSON Helper:** Includes a custom Handlebars helper for managing complex data structures.
144
74
 
145
- - **Additional Customization Options:** More options for customizing the appearance and structure of the HTML report.
146
- - **Integration with CI/CD:** Enhanced support for continuous integration and deployment environments.
147
- - **Advanced Filtering:** Additional filtering options to allow users to focus on specific subsets of test results.
75
+ ### Future Plans
148
76
 
149
- ## Change Logs:
77
+ - **Enhanced Customization:** Additional options for customizing report appearance and structure.
78
+ - **CI/CD Integration:** Improved support for CI/CD environments.
79
+ - **Advanced Filtering:** Expanded filtering capabilities to focus on specific test subsets.
150
80
 
151
- [log](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md)
81
+ ### Change Logs
152
82
 
153
- ## License:
83
+ Explore the latest updates and changes in our [Changelog](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md).
154
84
 
155
- [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md)
85
+ ### License
156
86
 
157
- ## Feedback and Contributions
87
+ View the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md) for licensing details.
158
88
 
159
- 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.
89
+ ### Feedback and Contributions
160
90
 
161
- Thank you for using OrtoniReport! We hope it significantly enhances your Playwright testing experience.
91
+ We value your feedback and contributions! For issues, suggestions, or contributions, visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
92
+
93
+ Thank you for choosing OrtoniReport. We're committed to enhancing your Playwright testing experience.
162
94
 
163
95
  ---
164
96
 
165
97
  **LetCode with Koushik**
98
+
99
+ ---