ortoni-report 1.0.3 → 1.0.6

package/dist/ortoni-report.d.ts

@@ -4,6 +4,7 @@ declare class OrtoniReport implements Reporter {
     private results;
     private groupedResults;
     private suiteName;
+    constructor();
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase, result: TestResult): void;
     onTestEnd(test: TestCase, result: TestResult): void;

package/dist/ortoni-report.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ortoni-report.ts
 var ortoni_report_exports = {};
 __export(ortoni_report_exports, {
-  default: () => OrtoniReport
+  default: () => ortoni_report_default
 });
 module.exports = __toCommonJS(ortoni_report_exports);
 var import_fs = __toESM(require("fs"));
@@ -38,12 +38,12 @@ var import_path = __toESM(require("path"));
 var import_handlebars = __toESM(require("handlebars"));
 var import_safe = __toESM(require("colors/safe"));
 var OrtoniReport = class {
-  results = [];
-  groupedResults;
-  suiteName;
+  constructor() {
+    this.results = [];
+  }
   onBegin(config, suite) {
     this.results = [];
-    const screenshotsDir = import_path.default.join(__dirname, "screenshots");
+    const screenshotsDir = import_path.default.join(process.cwd(), "screenshots");
     if (!import_fs.default.existsSync(screenshotsDir)) {
       import_fs.default.mkdirSync(screenshotsDir);
     }
@@ -51,7 +51,6 @@ var OrtoniReport = class {
   onTestBegin(test, result) {
   }
   onTestEnd(test, result) {
-    console.log(test.titlePath());
     const testResult = {
       projectName: test.titlePath()[1],
       // Get the project name
@@ -72,7 +71,7 @@ var OrtoniReport = class {
       filePath: test.titlePath()[2]
     };
     if (result.attachments) {
-      const screenshotsDir = import_path.default.join(__dirname, "screenshots\\" + test.id);
+      const screenshotsDir = import_path.default.join(process.cwd(), "screenshots\\" + test.id);
       if (!import_fs.default.existsSync(screenshotsDir)) {
         import_fs.default.mkdirSync(screenshotsDir);
       }
@@ -80,7 +79,7 @@ var OrtoniReport = class {
       if (screenshot && screenshot.path) {
         const screenshotContent = import_fs.default.readFileSync(screenshot.path, "base64");
         const screenshotFileName = `screenshots/${test.id}/${import_path.default.basename(screenshot.path)}`;
-        import_fs.default.writeFileSync(import_path.default.join(__dirname, screenshotFileName), screenshotContent, "base64");
+        import_fs.default.writeFileSync(import_path.default.join(process.cwd(), screenshotFileName), screenshotContent, "base64");
         testResult.screenshotPath = screenshotFileName;
       }
     }
@@ -110,12 +109,12 @@ var OrtoniReport = class {
       return suiteName.split(" - ");
     });
     const html = this.generateHTML();
-    const outputPath = import_path.default.join(__dirname, "ortoni-report.html");
+    const outputPath = import_path.default.join(process.cwd(), "ortoni-report.html");
     import_fs.default.writeFileSync(outputPath, html);
     console.log(`Ortoni HTML report generated at ${outputPath}`);
   }
   generateHTML() {
-    const templateSource = import_fs.default.readFileSync(import_path.default.join(__dirname, "report-template.hbs"), "utf-8");
+    const templateSource = import_fs.default.readFileSync(import_path.default.join(process.cwd(), "report-template.hbs"), "utf-8");
     const template = import_handlebars.default.compile(templateSource);
     const data = {
       suiteName: this.suiteName,
@@ -144,3 +143,4 @@ function safeStringify(obj, indent = 2) {
   cache.clear();
   return json;
 }
+var ortoni_report_default = OrtoniReport;

package/dist/ortoni-report.mjs

@@ -4,12 +4,12 @@ import path from "path";
 import Handlebars from "handlebars";
 import colors from "colors/safe";
 var OrtoniReport = class {
-  results = [];
-  groupedResults;
-  suiteName;
+  constructor() {
+    this.results = [];
+  }
   onBegin(config, suite) {
     this.results = [];
-    const screenshotsDir = path.join(__dirname, "screenshots");
+    const screenshotsDir = path.join(process.cwd(), "screenshots");
     if (!fs.existsSync(screenshotsDir)) {
       fs.mkdirSync(screenshotsDir);
     }
@@ -17,7 +17,6 @@ var OrtoniReport = class {
   onTestBegin(test, result) {
   }
   onTestEnd(test, result) {
-    console.log(test.titlePath());
     const testResult = {
       projectName: test.titlePath()[1],
       // Get the project name
@@ -38,7 +37,7 @@ var OrtoniReport = class {
       filePath: test.titlePath()[2]
     };
     if (result.attachments) {
-      const screenshotsDir = path.join(__dirname, "screenshots\\" + test.id);
+      const screenshotsDir = path.join(process.cwd(), "screenshots\\" + test.id);
       if (!fs.existsSync(screenshotsDir)) {
         fs.mkdirSync(screenshotsDir);
       }
@@ -46,7 +45,7 @@ var OrtoniReport = class {
       if (screenshot && screenshot.path) {
         const screenshotContent = fs.readFileSync(screenshot.path, "base64");
         const screenshotFileName = `screenshots/${test.id}/${path.basename(screenshot.path)}`;
-        fs.writeFileSync(path.join(__dirname, screenshotFileName), screenshotContent, "base64");
+        fs.writeFileSync(path.join(process.cwd(), screenshotFileName), screenshotContent, "base64");
         testResult.screenshotPath = screenshotFileName;
       }
     }
@@ -76,12 +75,12 @@ var OrtoniReport = class {
       return suiteName.split(" - ");
     });
     const html = this.generateHTML();
-    const outputPath = path.join(__dirname, "ortoni-report.html");
+    const outputPath = path.join(process.cwd(), "ortoni-report.html");
     fs.writeFileSync(outputPath, html);
     console.log(`Ortoni HTML report generated at ${outputPath}`);
   }
   generateHTML() {
-    const templateSource = fs.readFileSync(path.join(__dirname, "report-template.hbs"), "utf-8");
+    const templateSource = fs.readFileSync(path.join(process.cwd(), "report-template.hbs"), "utf-8");
     const template = Handlebars.compile(templateSource);
     const data = {
       suiteName: this.suiteName,
@@ -110,6 +109,7 @@ function safeStringify(obj, indent = 2) {
   cache.clear();
   return json;
 }
+var ortoni_report_default = OrtoniReport;
 export {
-  OrtoniReport as default
+  ortoni_report_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Playwright Report By LetCode Koushik",
   "scripts": {
     "build": "tsup",

package/readme.md

@@ -0,0 +1,77 @@
+# Release Notes: OrtoniReport v1.0.5
+
+## Introduction
+
+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.
+
+## 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.
+
+### Configurable Report Generation
+- **Flexible Configuration:** The reporter can be easily configured within your Playwright configuration file. Example:
+  ```JS/TS
+  reporter: [
+      ['ortoni-report'],
+      ['dot']
+  ],
+  ```
+
+### Screenshot Handling
+- **Screenshot Storage:** Screenshots are now saved in a structured directory within the root of your project, ensuring that visual evidence is easily accessible.
+- **Automatic Directory Creation:** The reporter automatically creates necessary directories for storing screenshots.
+
+### Comprehensive Test Details
+- **Rich Test Information:** Each test result includes the test title, status, duration, errors, steps, logs, and screenshot paths.
+- **Color-coded Status:** Test statuses are color-coded (green for passed, red for failed, yellow for skipped) for quick visual identification.
+
+### Handlebars Template Integration
+- **Customizable Reports:** The HTML report is generated using Handlebars templates, allowing for easy customization and styling.
+- **JSON Helper:** A custom Handlebars helper for JSON stringification is included to handle complex data structures.
+
+## Installation
+
+To install OrtoniReport, add it to your project using npm:
+
+```bash
+npm install ortoni-report --save-dev
+```
+
+## Usage
+
+Configure OrtoniReport in your `playwright.config.ts`:
+
+``` javascript/typescript
+import { defineConfig } from '@playwright/test';
+import OrtoniReport from 'ortoni-report';
+
+export default defineConfig({
+ reporter: [
+      ['ortoni-report'],
+      ['dot']
+  ],
+  // Other Playwright configurations
+});
+```
+
+## Known Issues
+
+- **Compatibility:** Ensure that your Node.js environment supports ES6 modules, as OrtoniReport uses modern JavaScript features.
+
+## Future Plans
+
+- **Additional Customization Options:** More options for customizing the appearance and structure of the HTML report.
+- **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.
+
+## 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.
+
+Thank you for using OrtoniReport! We hope it significantly enhances your Playwright testing experience.
+
+---
+
+**LetCode with Koushik**

package/report-template.hbs

@@ -0,0 +1,251 @@
+<!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>