ortoni-report 1.1.5 → 1.1.7

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 +24 -0
  2. package/dist/css/main.css +22445 -22445
  3. package/dist/ortoni-report.d.ts +50 -4
  4. package/dist/ortoni-report.js +149 -118
  5. package/dist/ortoni-report.mjs +149 -118
  6. package/dist/report-template.hbs +311 -255
  7. package/dist/utils/modal.js +10 -3
  8. package/package.json +3 -2
  9. package/readme.md +64 -116
package/dist/utils/modal.js CHANGED
@@ -1,11 +1,18 @@
1
1
  // Functions to open and close a modal
2
2
  function openModal() {
3
- let modal = document.getElementsByClassName("modal")[0];
3
+ let modal = document.querySelector("#testImage");
4
4
  modal.classList.add("is-active")
5
5
  }
6
-
6
+ function openVideo(){
7
+ let modal = document.querySelector("#testVideo");;
8
+ modal.classList.add("is-active")
9
+ }
10
+ function closeVideo(){
11
+ let modal = document.querySelector("#testVideo");;
12
+ modal.classList.remove("is-active")
13
+ }
7
14
  function closeModal() {
8
- let modal = document.getElementsByClassName("modal")[0];
15
+ let modal = document.querySelector("#testImage");;
9
16
  modal.classList.remove("is-active")
10
17
  }
11
18
  // Add a keyboard event to close all modals
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ortoni-report",
3
- "version": "1.1.5",
3
+ "version": "1.1.7",
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,155 +1,103 @@
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:**
39
+ 9. **Integration and Configuration**
40
+ - Easily integrate with Playwright configurations using TypeScript/JavaScript.
41
+ - Configure reporting preferences within your Playwright setup.
30
42
 
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.
43
+ 10. **Add logo to the report**
44
+ - Add relative or absolute path of the image to the config
74
45
 
75
46
  ### Configurable Report Generation
76
47
 
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
- const reportConfig: OrtoniReportConfig = {
81
- projectName: "Ortoni",
82
- testType: "Regression",
83
- authorName: "Koushik",
84
- preferredTheme: "light"
85
- };
86
-
87
- reporter: [["ortoni-report", reportConfig],
88
- ["dot"]],
89
- ```
90
-
91
- ### Comprehensive Test Details
92
-
93
- - **Rich Test Information:** Each test result includes the test title, status, duration, errors, steps, logs, and screenshot paths.
94
- - **Color-coded Status:** Test statuses are color-coded (green for passed, red for failed, yellow for skipped) for quick visual identification.
95
-
96
- ### Handlebars Template Integration
97
-
98
- - **Customizable Reports:** The HTML report is generated using Handlebars templates, allowing for easy customization and styling.
99
- - **JSON Helper:** A custom Handlebars helper for JSON stringification is included to handle complex data structures.
100
-
101
- ## Installation
102
-
103
- To install OrtoniReport, add it to your project using npm:
104
-
105
- ```bash
106
- npm install ortoni-report
107
- ```
108
-
109
- ## Usage
110
-
111
48
  Configure OrtoniReport in your `playwright.config.ts`:
112
49
 
113
- ```javascript/typescript
50
+ ```typescript
114
51
  import { defineConfig } from '@playwright/test';
115
- import {OrtoniReportConfig} from "ortoni-report";
116
- const reportConfig: OrtoniReportConfig = {
117
- projectName: "Ortoni",
118
- testType: "Regression",
119
- authorName: "Koushik",
120
- preferredTheme: "light"
121
- };
52
+ import { OrtoniReportConfig } from 'ortoni-report';
53
+
54
+ const reportConfig: OrtoniReportConfig = {
55
+ logo: "path/logo.png",
56
+ authorName: "LetCode Koushik",
57
+ base64Image: false,
58
+ preferredTheme: "dark",
59
+ projectName: "Ortoni Demo Report",
60
+ testType: "Smoke"
61
+ }
62
+
122
63
  export default defineConfig({
123
- reporter: [["ortoni-report", reportConfig],
124
- ["dot"]],
125
- // Other Playwright configurations
64
+ reporter: [['ortoni-report', reportConfig], ['dot']],
65
+ // Other Playwright configurations
126
66
  });
127
67
  ```
128
68
 
129
- ## Known Issues
69
+ ### Comprehensive Test Details
130
70
 
131
- - **Compatibility:** Ensure that your Node.js environment supports ES6 modules, as OrtoniReport uses modern JavaScript features.
71
+ - **Rich Test Information:** Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot paths.
72
+ - **Color-coded Status:** Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
132
73
 
133
- ## Future Plans
74
+ ### Handlebars Template Integration
75
+
76
+ - **Customizable Reports:** HTML reports are generated using Handlebars templates, offering flexibility in customization and styling.
77
+ - **JSON Helper:** Includes a custom Handlebars helper for managing complex data structures.
134
78
 
135
- - **Additional Customization Options:** More options for customizing the appearance and structure of the HTML report.
136
- - **Integration with CI/CD:** Enhanced support for continuous integration and deployment environments.
137
- - **Advanced Filtering:** Additional filtering options to allow users to focus on specific subsets of test results.
79
+ ### Future Plans
138
80
 
139
- ## Change Logs:
81
+ - **Enhanced Customization:** Additional options for customizing report appearance and structure.
82
+ - **CI/CD Integration:** Improved support for CI/CD environments.
83
+ - **Advanced Filtering:** Expanded filtering capabilities to focus on specific test subsets.
140
84
 
141
- [log](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md)
85
+ ### Change Logs
142
86
 
143
- ## License:
87
+ Explore the latest updates and changes in our [Changelog](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md).
144
88
 
145
- [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md)
89
+ ### License
146
90
 
147
- ## Feedback and Contributions
91
+ View the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md) for licensing details.
148
92
 
149
- 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.
93
+ ### Feedback and Contributions
150
94
 
151
- Thank you for using OrtoniReport! We hope it significantly enhances your Playwright testing experience.
95
+ We value your feedback and contributions! For issues, suggestions, or contributions, visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
96
+
97
+ Thank you for choosing OrtoniReport. We're committed to enhancing your Playwright testing experience.
152
98
 
153
99
  ---
154
100
 
155
101
  **LetCode with Koushik**
102
+
103
+ ---