ortoni-report 2.0.4 → 2.0.6

package/dist/views/userInfo.hbs

@@ -30,11 +30,11 @@
             </p>
         </div>
     </div>
+    {{#if (or authorName testType)}}
     <div class="column is-half">
         <div class="content">
-            <div class="content">
-                {{#if authorName}}
-                <div class="field"></div>
+            {{#if authorName}}
+            <div class="field">
                 <label class="label" for="Tester">Tester</label>
                 <p class="is-flex is-align-items-center">
                     <span class="icon has-text-info mr-2">
@@ -44,9 +44,10 @@
                 </p>
             </div>
             {{/if}}
+
             {{#if testType}}
             <div class="field">
-                <label class="label" for="test Type">Test Type</label>
+                <label class="label" for="testType">Test Type</label>
                 <p class="is-flex is-align-items-center">
                     <span class="icon has-text-primary mr-2">
                         <i class="fas fa-code-branch"></i>
@@ -57,6 +58,7 @@
             {{/if}}
         </div>
     </div>
+    {{/if}}
 </div>
 <div class="columns">
     <div class="column is-half">
@@ -91,9 +93,8 @@
                 labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
                 datasets: [{
                     data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}, {{ flakyCount }}],
-            backgroundColor: ['#28a745', '#ff6685', '#66d1ff', '#ffb70f']
-                            }]
-                },
+            backgroundColor: ['#28a745', '#ff6685', '#66d1ff', '#ffb70f']}]
+            },
             options: {
             responsive: true,
             maintainAspectRatio: false,
@@ -109,7 +110,7 @@
                 },
                 tooltip: {
                     callbacks: {
-                        label: function(tooltipItem) {
+                        label: function (tooltipItem) {
                             const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
                             const value = tooltipItem.raw;
                             const percentage = ((value / total) * 100).toFixed(2);
@@ -187,7 +188,7 @@
                     {
                         label: 'Flaky',
                         data: retryTests,
-                        backgroundColor:  '#ffb70f',
+                        backgroundColor: '#ffb70f',
                     }
                 ]
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "tsc": "tsc",
@@ -32,9 +32,11 @@
   "homepage": "https://github.com/ortoniKC/ortoni-report#readme",
   "devDependencies": {
     "@playwright/test": "^1.44.1",
+    "@types/express": "^5.0.0",
     "@types/node": "^22.0.2",
     "@types/ws": "^8.5.12",
     "ansi-to-html": "^0.7.2",
+    "express": "^4.21.1",
     "handlebars": "^4.7.8",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",

package/readme.md

@@ -1,131 +1,190 @@
 # Ortoni Report by Koushik (LetCode with Koushik)
 
-Welcome to **Ortoni Report**, a robust HTML report generator tailored for Playwright tests. Ortoni Report introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
+Welcome to **Ortoni Report**, a comprehensive and visually appealing HTML report generator tailored for Playwright tests. Designed with powerful features and customizable options, Ortoni Report simplifies the process of reviewing and managing test results, making test reporting more intuitive and accessible.
 
-Experience the live report: [Ortoni Report](https://ortoni.netlify.app/)
+### Live Demo: [Ortoni Report](https://ortoni.netlify.app/)
 
-![Ortoni Report Preview](https://raw.githubusercontent.com/ortoniKC/ortoni-report/refs/heads/V2.0.4/Ortoni-report.png)
+![Ortoni Report Preview](https://raw.githubusercontent.com/ortoniKC/ortoni-report/refs/heads/V2.0.5/assets/images/Ortoni-report.png)
+
+---
 
 ## Key Features
 
 1. **Hierarchical Grouping**
-   - Tests are grouped hierarchically by file name, suite, and project, offering a structured view of test execution.
+
+   - Tests are structured and grouped by filename, suite, and project, providing a clear and organized view of the entire test execution.
 
 2. **Detailed Breakdown**
-   - Each suite includes categorized tests under respective projects, providing clear organization.
+
+   - Each suite displays tests categorized by project, with organized test results for better navigation.
 
 3. **Comprehensive Test Details**
-   - Display test status (passed, failed, skipped), duration, tags, errors, logs, and screenshots.
-   - Sort and filter tests by suite, project, and script for detailed insights.
+
+   - Rich details include test status (passed, failed, skipped), duration, tags, errors, logs, annotations, screenshots, videos, and trace data.
+   - Users can sort and filter tests by suite, project, or script for more focused insights.
 
 4. **Summary Statistics**
-   - Overview of total tests, passed, failed, skipped, and flaky tests.
-   - Success rate calculation for test suites.
 
-5. **Chart Visualization**
-   - Doughnut chart representation for visualizing test result distribution (passed, failed, skipped, flaky).
+   - Overview displays total tests, passed, failed, skipped, and flaky tests, with a success rate calculation for each suite.
+
+5. **Chart Visualizations**
 
-6. **Search and Reset**
-   - Search functionality to filter tests based on user input.
-   - Reset option to clear filters and display all tests.
+   - Visualize test result distributions using:
+     - **Doughnut Chart**: Illustrates overall test result status (passed, failed, skipped, flaky).
+     - **Doughnut & Bar Charts**: Breakdown of results per project (Chromium, Firefox, etc.) for easy comparison.
 
-7. **Customization and Themes**
-   - Customize project details, author name, test types, and toggle between dark/light themes.
-   - Option to choose between Base64 images or file paths for screenshots.
-   - Users can set the report file name.
+6. **Advanced Search and Reset**
 
-8. **Responsive Design**
-   - Optimized layout that adapts seamlessly to different screen sizes for accessibility.
+   - Search and filter tests quickly using specific keywords or criteria. Easily reset filters to display all tests again.
+
+7. **Customization & Themes**
+
+   - Personalize reports with project details, author name, test type, and toggle between light and dark themes.
+   - Flexibility to choose between Base64 images or file paths for screenshots.
+   - Customize report filenames and folder paths.
+
+8. **Test Attachments**
+
+   - Screenshots
+   - Videos
+   - Trace viewer
+   - Steps
+   - Error stack trace
+   - Console logs
 
 9. **Integration and Configuration**
-   - Easily integrate with Playwright configurations using TypeScript/JavaScript.
-   - Configure reporting preferences within your Playwright setup.
 
-10. **Add Logo to the Report**
-    - Add a relative or absolute path of the image to the config.
+   - Easily configure and integrate with Playwright using TypeScript/JavaScript.
+   - Configure reporting preferences within the Playwright setup for quick customization.
+
+10. **Add Your Logo**
+
+    - Include your branding by adding a relative or absolute path to the config for a custom logo in the report.
 
-11. **Share Report**
-    - Once report is generated it is ready to share
+11. **Share Reports**
+
+    - Generated reports are self-contained and ready to share right away, making it easier to distribute and review.
 
 12. **Advanced Filtering**
-    - Filter tests by project, tags, and status simultaneously, with the ability to display only those tests matching the selected criteria.
 
-13. **Colorful Dashboard**
-    - Enhanced the visual appeal of the dashboard with vibrant and intuitive colors.
+    - Apply filters based on project, tags, and test status simultaneously for precise reporting. See only the relevant tests.
+
+13. **Colorful and Intuitive Dashboard**
+
+    - Vibrant, intuitive color schemes enhance the dashboard’s visual appeal, improving clarity for quick test status assessment.
 
-14. **Display Selected Status on UI**
-    - The selected status filter is now visible on the UI, making it easier to track the current filter settings.
+14. **Selected Status Display**
+
+    - The UI now clearly displays the selected status filter, helping users keep track of the current filter criteria.
 
 15. **Hide Skipped Tests by Default**
-    - Skipped tests are now hidden by default when using the "All Tests" filter, providing a cleaner and more focused view of relevant tests.
+    - By default, skipped tests are hidden when using the "All Tests" filter, allowing for a more focused review of relevant test cases.
 
-### How to Use Ortoni Report
+---
 
-#### Installation
+## Installation & Setup
 
-1. **Install the ortoni-report package**:
+### Step 1: Install Ortoni Report
 
-    ```sh
-    npm install -g ortoni-report
-    ```
+Run the following command to install the **ortoni-report** package globally:
 
-### Configurable Report Generation
+```bash
+npm install -g ortoni-report
+```
 
-Configure OrtoniReport in your `playwright.config.ts`:
+### Step 2: Configure in `playwright.config.ts`
+
+Set up **Ortoni Report** in your Playwright configuration file with the following example:
 
 ```typescript
-import { defineConfig } from '@playwright/test';
+import { defineConfig } from "@playwright/test";
 import { OrtoniReportConfig } from "ortoni-report";
 
 const reportConfig: OrtoniReportConfig = {
-  preferredTheme: "light",
-  filename: "index",
-  authorName: "Koushik (LetCode with Koushik)",
-  projectName: "Ortoni Report V2.0.3",
-  testType: "Release",
-  title: "Ortoni Report By LetCode Koushik",
+  port: 1994,
+  open: process.env.CI ? "never" : "always",
+  folderPath: "report",
+  filename: "index.html",
   logo: "logo.png",
+  title: "Ortoni Test Report",
+  showProject: false,
+  projectName: "Ortoni-Report",
+  testType: "Release - Oct 30, 2024",
+  authorName: "Koushik (LetCode with Koushik)",
+  preferredTheme: "light",
   base64Image: true,
+};
+
+export default defineConfig({
+  reporter: [["ortoni-report", reportConfig], ["dot"]],
+  // Other Playwright configurations
+});
+```
+
+### Configure in `playwright.config.js`
+
+```javascript
+import { defineConfig } from "@playwright/test";
+
+const reportConfig = {
+  port: 1994,
+  open: process.env.CI ? "never" : "always",D
   folderPath: "report",
-  showProject: false
-}
+  filename: "index.html",
+  logo: "logo.png",
+  title: "Ortoni Test Report",
+  showProject: false,
+  projectName: "Ortoni-Report",
+  testType: "Release - Oct 21, 2024",
+  authorName: "Koushik (LetCode with Koushik)",
+  preferredTheme: "light",
+  base64Image: true,
+};
 
 export default defineConfig({
-    reporter: [['ortoni-report', reportConfig], ['dot']],
-    // Other Playwright configurations
+  reporter: [["ortoni-report", reportConfig], ["dot"]],
+  // Other Playwright configurations
 });
 ```
-### Comprehensive Test Details
 
-- **Rich Test Information**: Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot.
-- **Color-coded Status**: Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
-- **Static HTML Report**: Single file can be shared easily
+## Detailed Test Information
 
-### Future Plans
+- **Rich Test Data**: Each test includes details such as title, status, duration, tags, errors, steps, logs, video, and screenshots.
+- **Color-Coded Status**: Green for passed, red for failed, yellow for skipped—offering a quick overview of test outcomes.
+- **Static HTML Report**: Self-contained, standalone HTML files make sharing and storing reports convenient.
 
-- **Enhanced Customization**: Additional options for customizing report appearance and structure.
-- **CI/CD Integration**: Improved support for CI/CD environments.
+---
+
+## Changelog
+
+Stay up-to-date with the latest features, improvements, and bug fixes by reviewing the [Changelog](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md).
 
-### Change Logs
+---
 
-Explore the latest updates and changes in our [Changelog](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md).
+## License
 
-### License
+This project is licensed under the terms of the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md).
 
-View the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md) for licensing details.
+---
 
-### Feedback and Contributions
+## Feedback and Contributions
 
-We value your feedback and contributions! For issues, suggestions, or contributions, visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
+We encourage you to share feedback and contribute to improving Ortoni Report! For issues, suggestions, or contributions, please visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
 
-Thank you for choosing Ortoni Report. We're committed to enhancing your Playwright testing experience.
+---
 
-### Support
-UPI: ortoni@axl (Koushik Chatterjee)
+## Support
 
+If you'd like to support this project, you can donate via UPI:
+
+**UPI**: ortoni@axl (Koushik Chatterjee)
+
+---
+
+Thank you for using **Ortoni Report**! We’re committed to providing you with a superior Playwright testing experience.
 
 ---
 
 **LetCode with Koushik**
 
---- 
+---