ortoni-report 1.0.8 → 1.0.9

package/readme.md

@@ -1,25 +1,63 @@
-# Release Notes: OrtoniReport
+## Playwright Report by Koushik
 
-## Introduction
+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.
 
-We are excited to announce the release of OrtoniReport v1.0.0, 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.
+![Report](https://github.com/ortoniKC/ortoni-report/assets/58769833/da8c6b65-5f35-4fad-802a-039a72999cb1)
 
-![report](https://github.com/ortoniKC/ortoni-report/assets/58769833/9770cdc9-ccf3-459b-bbe8-fcd28be8330e)
 
 
 ## Features
 
-### Enhanced Grouping and Organization
-- **Hierarchical Grouping:** 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.
-- **Detailed Breakdown:** Each suite displays a sub-category for project names, with individual test cases listed under their respective projects.
+1. **Hierarchical Grouping:** 
+   - 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.
+  
+2. **Detailed Breakdown:**
+   - Each suite displays a sub-category for project names, with individual test cases listed under their respective projects.
+
+3. **Test Result Display:**
+   - Display  results including status (passed, failed, skipped), duration, errors, logs, and screenshots.
+   - Organize test results by suite, project, and test script.
+
+4. **Summary Statistics:**
+   - Provide summary statistics for total tests, passed tests, failed tests, skipped tests, and flaky tests.
+
+5. **Chart Visualization:**
+   - Visualize test results using a doughnut chart to represent the distribution of passed, failed, and skipped tests.
+
+6. **Project Information:**
+   - Include project name, author name, and test type information in the report.
+
+7. **Search Functionality:**
+   - Search bar to filter and display specific tests based on user input.
+
+8. **Reset Functionality:**
+   - Allow users to reset the search bar to show all tests when cleared.
+
+9. **Customization:**
+   - Customize project name, author name, and test type displayed in the report.
+   - Dark/Light theme based on the user browser/system setting.
+
+10. **Responsive Design:**
+    - Design the report layout to be responsive and adaptable to different screen sizes.
+
+11. **Accessibility:**
+    - Ensure accessibility by providing appropriate HTML attributes and semantic structure.
+
+12. **Ease of Use:**
+    - Enable easy navigation between test results and summary sections.
+
+These features collectively enhance the readability, usability, and accessibility of the test report, providing valuable insights into test execution and results.
 
 ### Configurable Report Generation
 - **Flexible Configuration:** The reporter can be easily configured within your Playwright configuration file. Example:
   ```JS/TS
-  reporter: [
-      ['ortoni-report'],
-      ['dot']
-  ],
+  reporter: [["ortoni-report",
+    {
+      projectName: 'Plawright Sample',
+      authorName: 'Koushik',
+      testType: 'E2E'
+    }],
+  ["dot"]],
   ```
 
 ### Screenshot Handling
@@ -51,10 +89,13 @@ import { defineConfig } from '@playwright/test';
 import OrtoniReport from 'ortoni-report';
 
 export default defineConfig({
- reporter: [
-      ['ortoni-report'],
-      ['dot']
-  ],
+  reporter: [["ortoni-report",
+    {
+      projectName: 'Plawright Sample',
+      authorName: 'Koushik',
+      testType: 'E2E'
+    }],
+  ["dot"]],
   // Other Playwright configurations
 });
 ```
@@ -69,6 +110,12 @@ export default defineConfig({
 - **Integration with CI/CD:** Enhanced support for continuous integration and deployment environments.
 - **Advanced Filtering:** Additional filtering options to allow users to focus on specific subsets of test results.
 
+## Change Logs:
+[log](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md)
+
+## License:
+[LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md)
+
 ## Feedback and Contributions
 
 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

@@ -1 +0,0 @@
-report-template.hbs

package/report-template.hbs

@@ -1,251 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Playwright Test Report</title>
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.css">
-    <style>
-        main.container {
-            display: grid;
-            grid-template-columns: 1fr 2fr;
-            gap: 20px;
-        }
-
-        .header {
-            display: grid;
-            grid-template-columns: 1fr 2fr;
-            grid-column-gap: 20px;
-            grid-row-gap: 20px;
-            justify-items: stretch;
-            align-items: center;
-            justify-content: space-evenly;
-        }
-
-        .text-success {
-            color: #28a745;
-        }
-
-        .text-danger {
-            color: #dc3545;
-        }
-
-        .sidebar {
-            border-right: 1px solid #ddd;
-            padding-right: 10px;
-        }
-
-        .card {
-            padding: 1rem;
-            border: 1px solid #ddd;
-            border-radius: 0.5rem;
-            background-color: #fff;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-        }
-
-        pre {
-            background-color: #f8f9fa;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            overflow-x: auto;
-        }
-
-        .back-button {
-            display: none;
-            margin-bottom: 1rem;
-        }
-    </style>
-</head>
-
-<body>
-    <header class="container">
-        <div class="header">
-            <div>
-                <h1>Playwright Test Report</h1>
-            </div>
-            <div>
-                <form role="search">
-                    <input name="search" type="search" placeholder="Search" />
-                    <input type="submit" value="Search" />
-                </form>
-            </div>
-        </div>
-    </header>
-    <main class="container">
-        <aside class="sidebar">
-            <h2>Tests</h2>
-            <div class="">
-                {{#each groupedResults}}
-                <details>
-                    <summary>{{@key}}</summary>
-                    <ul>
-                        {{#each this}}
-                        <details>
-                            <summary>{{@key}}</summary>
-                            <ul>
-                                {{#each this}}
-                                <details>
-                                    <summary>{{@key}}</summary>
-                                    <ul>
-                                        {{#each this}}
-                                        <li data-suite-name="{{suite}}" data-project-name="{{projectName}}"
-                                            data-test-id="{{index}}">{{title}}</li>
-                                        {{/each}}
-                                    </ul>
-                                </details>
-                                {{/each}}
-                            </ul>
-                        </details>
-                        {{/each}}
-                    </ul>
-                </details>
-                {{/each}}
-            </div>
-        </aside>
-
-
-
-        <section>
-            <div id="summary">
-                <section class="grid">
-                    <div>
-                        <article>
-                            <header>Total Tests</header>
-                            <p>{{totalCount}}</p>
-                        </article>
-                    </div>
-                    <div>
-                        <article>
-                            <header>Passed</header>
-                            <p class="text-success">{{passCount}}</p>
-                        </article>
-                    </div>
-                    <div>
-                        <article>
-                            <header>Failed</header>
-                            <p class="text-danger">{{failCount}}</p>
-                        </article>
-                    </div>
-                </section>
-                <section class="grid">
-                    <div>
-                        <article>
-                            <header>Skipped</header>
-                            <p>{{skipCount}}</p>
-                        </article>
-                    </div>
-                    <div>
-                        <article>
-                            <header>Retry</header>
-                            <p class="text-success">{{retryCount}}</p>
-                        </article>
-                    </div>
-                </section>
-                <section>
-                    <h2>Test Results</h2>
-                    <div class="chart-container">
-                        <canvas id="testChart"></canvas>
-                    </div>
-                </section>
-            </div>
-
-            <div id="testDetails" style="display: none;">
-                <!-- Back button should be outside the dynamic content -->
-                <button class="back-button" onclick="showSummary()">Back to Summary</button>
-                <!-- Test Details will be displayed here -->
-            </div>
-        </section>
-    </main>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-        const testData = {{{ json results }}};
-        const testDetails = document.getElementById('testDetails');
-        const summary = document.getElementById('summary');
-        const backButton = document.querySelector('.back-button');
-
-        function showSummary() {
-            summary.style.display = 'block';
-            testDetails.style.display = 'none';
-            backButton.style.display = 'none';
-        }
-
-        window.showSummary = showSummary;
-
-        function displayTestDetails(test) {
-            summary.style.display = 'none';
-            testDetails.style.display = 'block';
-            backButton.style.display = 'block';
-            testDetails.innerHTML = `
-                    <button class="back-button" style="display: block" onclick="showSummary()">Back to Summary</button>
-                    <h2>${test.title}</h2>
-                    <div class="grid">
-                        <div>
-                            <h3>Status</h3>
-                            <p class="${test.status === 'passed' ? 'text-success' : 'text-danger'}">${test.status}</p>
-                            <h3>Duration</h3>
-                            <p>${test.duration}ms</p>
-                            ${test.errors.length ? `
-                            <h3>Errors</h3>
-                            <pre>${test.errors.join('\n')}</pre>
-                            ` : ''}
-                        </div>
-                        <div>
-                            ${test.screenshotPath ? `
-                            <h3>Screenshot</h3>
-                            <img src="${test.screenshotPath}" alt="Screenshot">
-                            ` : ''}
-                            ${test.logs ? `
-                            <h3>Logs</h3>
-                            <pre>${test.logs}</pre>
-                            ` : ''}
-                        </div>
-                    </div>
-                `;
-        }
-
-        const testItems = document.querySelectorAll('[data-test-id]');
-        testItems.forEach(item => {
-            item.addEventListener('click', () => {
-                const testId = item.getAttribute('data-test-id');
-                const test = testData[testId];
-                displayTestDetails(test);
-            });
-        });
-
-        const ctx = document.getElementById('testChart').getContext('2d');
-        new Chart(ctx, {
-            type: 'doughnut',
-            data: {
-                labels: ['Passed', 'Failed', 'Skipped'],
-                datasets: [{
-                    data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}],
-            backgroundColor: ['#28a745', '#dc3545', '#f0f662']
-                    }]
-                },
-            options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Overall',
-                    font: {
-                        size: 18,
-                        weight: 'bold'
-                    }
-                },
-                legend: {
-                    position: 'right'
-                }
-            }
-        }
-            });
-        });
-    </script>
-</body>
-
-</html>