ortoni-report 1.0.0

package/.prettierignore

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

package/ortoni-report.ts

@@ -0,0 +1,140 @@
+import fs from 'fs';
+import path from 'path';
+import Handlebars from "handlebars";
+import colors from 'colors/safe';
+
+import type {
+    FullConfig, FullResult, Reporter, Suite, TestCase, TestResult
+} from '@playwright/test/reporter';
+
+interface TestResultData {
+    projectName: string;
+    suite: string;
+    title: string;
+    status: string;
+    duration: number;
+    errors: any[];
+    steps: any[];
+    logs: string;
+    screenshotPath: string | null;
+    filePath: string
+}
+export default class OrtoniReport implements Reporter {
+    private results: TestResultData[] = [];
+    private groupedResults: any;
+    private suiteName: string | undefined | TestCase[];
+
+    onBegin(config: FullConfig, suite: Suite) {
+
+        this.results = [];
+        const screenshotsDir = path.join(__dirname, 'screenshots');
+        if (!fs.existsSync(screenshotsDir)) {
+            fs.mkdirSync(screenshotsDir);
+        }
+    }
+
+    onTestBegin(test: TestCase, result: TestResult) {
+    }
+
+    onTestEnd(test: TestCase, result: TestResult) {
+        console.log(test.titlePath());
+
+        const testResult: TestResultData = {
+            projectName: test.titlePath()[1], // Get the project name
+            suite: test.titlePath()[3], // Adjust the index based on your suite hierarchy
+            title: test.title,
+            status: result.status,
+            duration: result.duration,
+            errors: result.errors.map(e => colors.strip(e.message || e.toString())),
+            steps: result.steps.map(step => ({
+                title: step.title,
+                category: step.category,
+                duration: step.duration,
+                status: result.status
+            })),
+            logs: colors.strip(result.stdout.concat(result.stderr).map(log => log).join('\n')),
+            screenshotPath: null,
+            filePath: test.titlePath()[2]
+        };
+
+        if (result.attachments) {
+            const screenshotsDir = path.join(__dirname, 'screenshots\\' + test.id);
+            if (!fs.existsSync(screenshotsDir)) {
+                fs.mkdirSync(screenshotsDir);
+            }
+            const screenshot = result.attachments.find(attachment => attachment.name === 'screenshot');
+            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');
+                testResult.screenshotPath = screenshotFileName;
+            }
+        }
+
+        this.results.push(testResult);
+    }
+
+    onEnd(result: FullResult) {
+        this.groupedResults = this.results.reduce((acc: any, result, index) => {
+            const filePath = result.filePath;
+            const suiteName = result.suite;
+            const projectName = result.projectName;
+            if (!acc[filePath]) {
+                acc[filePath] = {};
+            }
+            if (!acc[filePath][suiteName]) {
+                acc[filePath][suiteName] = {};
+            }
+            if (!acc[filePath][suiteName][projectName]) {
+                acc[filePath][suiteName][projectName] = [];
+            }
+            acc[filePath][suiteName][projectName].push({ ...result, index });
+            return acc;
+        }, {});
+
+
+        // Register the json helper
+        Handlebars.registerHelper('json', function (context) {
+            return safeStringify(context);
+        });
+        Handlebars.registerHelper('splitSuiteName', function (suiteName) {
+            return suiteName.split(' - ');
+        });
+        const html = this.generateHTML();
+        const outputPath = path.join(__dirname, 'advanced-playwright-report.html');
+        fs.writeFileSync(outputPath, html);
+        console.log(`Advanced HTML report generated at ${outputPath}`);
+    }
+    generateHTML() {
+        const templateSource = fs.readFileSync(path.join(__dirname, 'report-template.hbs'), 'utf-8');
+        const template = Handlebars.compile(templateSource);
+        const data = {
+            suiteName: this.suiteName,
+            results: this.results,
+            passCount: this.results.filter(r => r.status === 'passed').length,
+            failCount: this.results.filter(r => r.status === 'failed').length,
+            skipCount: this.results.filter(r => r.status === 'skipped').length,
+            retryCount: this.results.filter(r => r.status === 'retry').length,
+            totalCount: this.results.length,
+            groupedResults: this.groupedResults
+        };
+        return template(data);
+    }
+}
+// Utility function to remove circular references
+function safeStringify(obj: any, indent = 2) {
+    const cache = new Set();
+    const json = JSON.stringify(obj, (key, value) => {
+        if (typeof value === 'object' && value !== null) {
+            if (cache.has(value)) {
+                // Circular reference found, discard key
+                return;
+            }
+            // Store value in our set
+            cache.add(value);
+        }
+        return value;
+    }, indent);
+    cache.clear();
+    return json;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ortoni-report",
+  "version": "1.0.0",
+  "description": "Playwright Report By LetCode Koushik",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ortoniKC/letcode-pw-report.git"
+  },
+  "keywords": [
+    "playwright",
+    "playwright",
+    "report",
+    "letcode",
+    "koushik",
+    "report",
+    "ortoni",
+    "ortoni",
+    "report"
+  ],
+  "author": "Koushik Chatterjee (LetCode with Koushik)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ortoniKC/letcode-pw-report/issues"
+  },
+  "homepage": "https://github.com/ortoniKC/letcode-pw-report#readme",
+ "dependencies": {
+    "hiq": "^4.2.3",
+    "colors": "^1.4.0",
+    "handlebars": "^4.7.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^20.14.2"
+  }
+}

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>