slik-report 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,46 @@
+# slik-report
+
+A powerful Playwright reporter for aggregating test results, flakiness analysis, and historical trend tracking.
+
+## Installation
+
+```bash
+npm install slik-report --save-dev
+```
+
+## How to Use
+
+To use `slik-report` with Playwright, you need to configure it in your `playwright.config.ts` file.
+
+### Configuration Example
+
+Add `slik-report` to the `reporter` array in your `playwright.config.ts`:
+
+```typescript
+// playwright.config.ts
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  reporter: [
+    ['json', { outputFile: 'playwright-report/report.json' }],
+    // Use the Slik Report reporter and pass options
+    ['slik-report', {
+      input: 'playwright-report/report.json', // Path to the JSON report generated by Playwright
+      output: 'slik-report.html',             // Output file name for the Slik report
+      history: './slik_history',              // Directory to store history data
+    }]
+  ],
+});
+```
+
+### Options
+
+| Option    | Type   | Description                                      | Default                     |
+| :-------- | :----- | :----------------------------------------------- | :-------------------------- |
+| `input`   | string | Path to the JSON report file generated by Playwright. | `playwright-report/report.json` |
+| `output`  | string | Path where the HTML report will be generated.    | `slik-report.html`          |
+| `history` | string | Directory path to store historical run data.     | `./slik_history`            |
+
+## License
+
+ISC

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -1,3 +1,984 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=index.js.map
+// @ts-nocheck
+const fs = require('fs');
+const path = require('path');
+function ensureDir(p) {
+    if (!fs.existsSync(p))
+        fs.mkdirSync(p, { recursive: true });
+}
+function writeFile(filePath, content) {
+    ensureDir(path.dirname(filePath));
+    fs.writeFileSync(filePath, content, 'utf8');
+}
+function safeJson(v) {
+    try {
+        return JSON.stringify(v);
+    }
+    catch (e) {
+        return '[]';
+    }
+}
+function stripAnsi(str) {
+    if (!str)
+        return '';
+    const ansiRegex = /[\u001b\u009b][[()#;?]*.{0,2}(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+    return str.replace(ansiRegex, '');
+}
+/**
+ * Escapes a JSON string for safe embedding within an HTML <script> tag.
+ * This prevents the JSON from prematurely closing the script block (e.g., if it contains </script>).
+ */
+function escapeJsonForHtml(jsonString) {
+    return jsonString.replace(/<\/script>/g, '<\\/script>');
+}
+class AggregatorReporter {
+    constructor(opts) {
+        this.options = opts || {};
+        this.input = (this.options.input) || './playwright-report/report.json';
+        this.outputHtml = (this.options.output) || './summary-report.html';
+        this.historyDir = (this.options.history) || './reports/reports_history';
+    }
+    async onEnd(result) {
+        try {
+            console.log('AggregatorReporter: Starting report generation...');
+            if (!fs.existsSync(this.input)) {
+                console.warn('AggregatorReporter: JSON report not found at', this.input);
+                return;
+            }
+            console.log('AggregatorReporter: JSON file found. Reading file...');
+            const report = JSON.parse(fs.readFileSync(this.input, 'utf8'));
+            console.log('AggregatorReporter: JSON data read. Processing and generating report...');
+            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+            const historyFile = path.join(this.historyDir, `run-${timestamp}.json`);
+            writeFile(historyFile, safeJson(report));
+            const history = await this.loadHistory();
+            const processedReport = this.processReportWithHistory(report, history);
+            const htmlContent = this.generateReportHtml(processedReport);
+            writeFile(this.outputHtml, htmlContent);
+            console.log('AggregatorReporter: Report generation successful!');
+        }
+        catch (e) {
+            console.error('AggregatorReporter failed:', e);
+        }
+    }
+    /**
+     * Helper function to robustly get the array of top-level test suites.
+     * This handles standard Playwright and various custom/merged report formats.
+     */
+    getTestSuites(report) {
+        if (!report)
+            return [];
+        // 1. Standard Playwright structure
+        if (report.suites && Array.isArray(report.suites)) {
+            return report.suites;
+        }
+        // 2. Common alternative in merged reports (a flat array of specs)
+        if (report.specs && Array.isArray(report.specs) && report.specs.length > 0) {
+            console.log('AggregatorReporter: Using flat "specs" array as report root.');
+            return [{ title: 'Root Suite (Flat Specs)', suites: [], specs: report.specs, file: 'N/A' }];
+        }
+        // 3. Check for a Playwright V2/aggregator structure where tests are flatly listed
+        if (report.tests && Array.isArray(report.tests) && report.tests.length > 0) {
+            console.log('AggregatorReporter: Using flat "tests" array as report root. (Playwright V2 or custom)');
+            return [{
+                    title: 'Root Suite (Flat Tests)',
+                    suites: [],
+                    specs: report.tests.map(t => ({
+                        title: t.title,
+                        file: t.file,
+                        tests: [t]
+                    })),
+                    file: 'N/A'
+                }];
+        }
+        if (report.stats) {
+            console.warn('AggregatorReporter: Could not find "suites" or alternative test structure. Returning empty suites list.');
+        }
+        return [];
+    }
+    findAllSpecs(suites) {
+        let specs = [];
+        if (!suites)
+            return specs;
+        for (const suite of suites) {
+            if (suite.specs)
+                specs.push(...suite.specs);
+            if (suite.suites) {
+                specs.push(...this.findAllSpecs(suite.suites));
+            }
+        }
+        return specs;
+    }
+    async loadHistory(n = 21) {
+        const history = [];
+        ensureDir(this.historyDir);
+        const files = fs.readdirSync(this.historyDir)
+            .filter(f => f.startsWith('run-') && f.endsWith('.json'))
+            .sort()
+            .slice(-n);
+        for (const file of files) {
+            try {
+                const filePath = path.join(this.historyDir, file);
+                const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+                const dateStr = file.replace('run-', '').replace('.json', '');
+                // The file name format is ISO-like but uses hyphens/underscores instead of colons/dots. We reconstruct a valid ISO string.
+                const validIso = dateStr.slice(0, 10) + 'T' +
+                    dateStr.slice(11, 13) + ':' +
+                    dateStr.slice(14, 16) + ':' +
+                    dateStr.slice(17, 19) + '.' +
+                    dateStr.slice(20) + 'Z';
+                history.push({
+                    date: new Date(validIso).toLocaleDateString(),
+                    report: data
+                });
+            }
+            catch (e) {
+                console.warn(`Could not read history file: ${file}`, e);
+            }
+        }
+        return history;
+    }
+    processReportWithHistory(report, history) {
+        const stats = this.processStats(report);
+        const suites = this.processSuites(report, history);
+        const categories = this.processCategories(report);
+        const historyData = this.processHistoryData(history, report);
+        const timeline = this.processTimeline(report);
+        const metadata = this.processMetadata(report);
+        return {
+            stats,
+            suites,
+            categories,
+            history: historyData,
+            timeline,
+            metadata
+        };
+    }
+    processStats(report) {
+        const stats = report.stats || {};
+        const { expected = 0, unexpected = 0, skipped = 0, duration = 0 } = stats;
+        const total = expected + unexpected + skipped;
+        const passRate = total > 0 ? `${((expected / total) * 100).toFixed(0)}%` : 'N/A';
+        const avgDuration = total > 0 ? `${(duration / total / 1000).toFixed(2)}s` : 'N/A';
+        return {
+            total,
+            passed: expected,
+            failed: unexpected,
+            skipped,
+            passRate,
+            avgDuration,
+            totalDuration: `${(duration / 1000).toFixed(2)}s`
+        };
+    }
+    processMetadata(report) {
+        // Safely access project name from the projects array
+        const projectName = report.config?.projects?.[0]?.name || report.config?.metadata?.project || 'N/A';
+        return {
+            browser: projectName,
+            os: report.config?.metadata?.platform || 'N/A', // Using 'platform' if available in ortoni/custom meta
+            startTime: report.stats?.startTime ? new Date(report.stats.startTime).toLocaleString() : 'N/A',
+            totalDuration: report.stats?.duration ? `${(report.stats.duration / 1000).toFixed(2)}s` : 'N/A'
+        };
+    }
+    processSuites(report, history) {
+        const historyDataMap = new Map();
+        history.forEach(run => {
+            const allSpecs = this.findAllSpecs(this.getTestSuites(run.report));
+            allSpecs.forEach(spec => {
+                const testId = `${spec.file}::${spec.title}`;
+                if (!historyDataMap.has(testId)) {
+                    historyDataMap.set(testId, []);
+                }
+                // Safely get status, prioritizing unexpected over passed/skipped if multiple results exist
+                const resultStatus = spec.tests?.[0]?.results?.[0]?.status || 'skipped';
+                historyDataMap.get(testId).push(resultStatus);
+            });
+        });
+        const finalSuites = [];
+        const traverseSuites = (suite, parentTitle = '') => {
+            const currentTitle = parentTitle ? `${parentTitle} > ${suite.title}` : suite.title;
+            if (suite.specs && suite.specs.length > 0) {
+                finalSuites.push({
+                    ...suite,
+                    title: currentTitle,
+                    specs: suite.specs.map(spec => {
+                        const testId = `${spec.file}::${spec.title}`;
+                        const historyStatuses = historyDataMap.get(testId) || [];
+                        const currentTest = spec.tests?.[0];
+                        const currentResult = currentTest?.results?.[0];
+                        const currentStatus = currentResult?.status || 'skipped';
+                        // We only want the history statuses from previous runs + the current one
+                        const lastRuns = historyStatuses.slice(-4);
+                        // Ensure the current run is included, and limit to 5 total runs
+                        if (lastRuns.length === 0 || lastRuns[lastRuns.length - 1] !== currentStatus) {
+                            lastRuns.push(currentStatus);
+                        }
+                        else if (lastRuns.length > 5) {
+                            lastRuns.splice(0, lastRuns.length - 5);
+                        }
+                        const isFlaky = new Set(lastRuns).size > 1;
+                        const logs = (currentResult?.stdout || []).map(s => stripAnsi(s.text || '')).join('');
+                        return {
+                            ...spec,
+                            tests: spec.tests.map(test => ({
+                                ...test,
+                                history: lastRuns,
+                                flaky: isFlaky,
+                                status: currentStatus,
+                                duration: currentResult?.duration || 0,
+                                logs: logs
+                            }))
+                        };
+                    })
+                });
+            }
+            if (suite.suites) {
+                suite.suites.forEach(nested => traverseSuites(nested, currentTitle));
+            }
+        };
+        this.getTestSuites(report).forEach(s => traverseSuites(s));
+        return finalSuites;
+    }
+    processCategories(report) {
+        const categories = {};
+        const allSpecs = this.findAllSpecs(this.getTestSuites(report));
+        allSpecs.forEach(spec => {
+            const result = spec.tests?.[0]?.results?.[0];
+            if (result?.status === 'failed' && result.error) {
+                // Use the raw error message to preserve newlines and ANSI for stripping/display
+                const cleanMessage = stripAnsi(result.error.message || result.error.stack || 'Unknown error');
+                let errorName;
+                const expectMatch = cleanMessage.match(/Expected: (.*)\s*Received: (.*)/);
+                if (expectMatch) {
+                    const expected = (expectMatch[1] || '').trim();
+                    const received = (expectMatch[2] || '').trim();
+                    errorName = `AssertionError: Expected '${expected}' but received '${received}'`;
+                }
+                else {
+                    errorName = (cleanMessage.split('\n')[0] || 'Unknown Error').replace('Error: ', '').trim();
+                }
+                if (!categories[errorName]) {
+                    categories[errorName] = {
+                        name: errorName,
+                        count: 0,
+                        tests: []
+                    };
+                }
+                categories[errorName].count++;
+                categories[errorName].tests.push({
+                    title: `${spec.file} -> ${spec.title}`,
+                    trace: cleanMessage
+                });
+            }
+        });
+        return Object.values(categories);
+    }
+    processHistoryData(history, currentReport) {
+        const allRuns = [...history];
+        const today = new Date().toLocaleDateString();
+        // Add current report to historical runs for chart, checking for duplicates
+        if (!history.find(h => h.report.stats?.startTime === currentReport.stats?.startTime)) {
+            allRuns.push({
+                date: today,
+                report: currentReport,
+            });
+        }
+        return allRuns.map(run => {
+            const stats = run.report.stats || {};
+            const { expected = 0, unexpected = 0, skipped = 0 } = stats;
+            const total = expected + unexpected + skipped;
+            return {
+                date: run.date,
+                passed: expected,
+                failed: unexpected,
+                skipped,
+                passRate: total > 0 ? (expected / total) * 100 : 0
+            };
+        });
+    }
+    processTimeline(report) {
+        const timeline = [];
+        let cumulativeDuration = 0;
+        const allSpecs = this.findAllSpecs(this.getTestSuites(report));
+        allSpecs.forEach(spec => {
+            const result = spec.tests?.[0]?.results?.[0];
+            const duration = result?.duration || 0;
+            timeline.push({
+                name: spec.title,
+                start: cumulativeDuration,
+                duration: duration,
+                status: result?.status || 'skipped'
+            });
+            cumulativeDuration += duration;
+        });
+        return timeline;
+    }
+    generateReportHtml(report) {
+        // 1. Stringify the report object
+        const reportJson = JSON.stringify(report);
+        // 2. Escape the stringified JSON for safe HTML embedding (CRITICAL FIX)
+        const safeReportJson = escapeJsonForHtml(reportJson);
+        return `
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>DIS API Test Summary - Enhanced</title>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --bg:#ffffff; --card:#ffffff; --text:#172B4D; --muted:#6B7280; --accent:#2563EB;
+  --pass-bg:#e6ffed; --pass-text:#0a7a0a; --fail-bg:#fff0f0; --fail-text:#b00020;
+  --skipped-bg:#f0f0f0; --skipped-text:#6B7280; --shadow: 0 6px 18px rgba(15,23,42,0.08);
+  --table-header-bg: rgba(15,23,42,0.03); --table-border: rgba(15,23,42,0.04);
+  --log-bg: #eef0f3;
+}
+[data-theme="dark"]{
+  --bg:#1a202c; --card:#2d3748; --text:#e2e8f0; --muted:#a0aec0; --accent:#63b3ed;
+  --pass-bg:#2A4838; --pass-text:#68D391; --fail-bg:#582C2C; --fail-text:#FC8181;
+  --skipped-bg:#4a5568; --skipped-text:#e2e8f0; --shadow: 0 6px 18px rgba(0,0,0,0.4);
+  --table-header-bg: rgba(255,255,255,0.05); --table-border: rgba(255,255,255,0.08);
+  --log-bg: #1e293b;
+}
+body {
+  margin: 0; padding: 0; font-family: 'Inter', sans-serif; font-size: 14px;
+  line-height: 1.6; color: var(--text); background-color: var(--bg); transition: background-color 0.3s, color 0.3s;
+}
+.app-container { display: flex; min-height: 100vh; }
+.sidebar { width: 250px; background-color: var(--card); padding: 24px; box-shadow: var(--shadow); z-index: 10; flex-shrink: 0; }
+.sidebar-header { font-weight: 700; font-size: 1.5em; margin-bottom: 30px; color: var(--accent); }
+.sidebar-menu { list-style: none; padding: 0; }
+.sidebar-menu-item { margin-bottom: 12px; }
+.sidebar-menu-item a { display: block; padding: 12px 16px; color: var(--text); text-decoration: none; border-radius: 8px; transition: background-color 0.2s, color 0.2s; }
+.sidebar-menu-item a:hover { background-color: var(--table-header-bg); }
+.sidebar-menu-item a.active { background-color: var(--accent); color: white; }
+.main-content { flex-grow: 1; padding: 32px; overflow-x: auto; }
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;}
+.header h1 { font-size: 2em; font-weight: 600; margin: 0; }
+.filters, .actions { display: flex; gap: 16px; align-items: center; }
+.filters label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.card { background-color: var(--card); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
+h2 { font-size: 1.5em; font-weight: 600; margin: 0 0 20px; display: flex; justify-content: space-between; align-items: center;}
+h3 { font-size: 1.1em; font-weight: 600; margin: 0 0 12px; text-align: center; }
+.header-stats { display: flex; gap: 8px; font-size: 0.7em; font-weight: normal; }
+.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
+.kpi-card { text-align: center; padding: 16px; border-radius: 8px; background-color: var(--bg); border: 1px solid var(--table-border); }
+.kpi-value { font-size: 2em; font-weight: 700; color: var(--text); }
+.kpi-label { color: var(--muted); font-size: 0.9em; }
+.kpi-pass-rate .kpi-value { color: var(--pass-text); }
+.kpi-failed .kpi-value { color: var(--fail-text); }
+.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 0.8em; text-transform: uppercase; }
+.status-passed { background-color: var(--pass-bg); color: var(--pass-text); }
+.status-failed { background-color: var(--fail-bg); color: var(--fail-text); }
+.status-skipped { background-color: var(--skipped-bg); color: var(--skipped-text); }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--table-border); }
+th { background-color: var(--table-header-bg); font-weight: 600; }
+tr:last-child td { border-bottom: none; }
+.suite-header { cursor: pointer; padding: 12px 16px; background-color: var(--table-header-bg); border-bottom: 1px solid var(--table-border); display: flex; align-items: center; gap: 8px; font-weight: 600; }
+.collapse-icon { width: 1em; height: 1em; text-align: center; transition: transform 0.2s; }
+.collapse-icon.expanded { transform: rotate(90deg); }
+.test-card-header { cursor: pointer; display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 8px 12px;}
+.test-card-header:hover { background-color: var(--table-header-bg); }
+.test-card { border-bottom: 1px solid var(--table-border); }
+.log-row { background-color: var(--table-header-bg); }
+.log-container { padding: 16px; }
+.log-container h4 { margin: 0 0 8px; text-align: left;}
+.log-container pre { white-space: pre-wrap; word-wrap: break-word; background: var(--log-bg); padding: 12px; border-radius: 8px; max-height: 300px; overflow-y: auto; color: var(--muted); font-family: monospace; }
+.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; }
+.dot.passed { background-color: #4CAF50; }
+.dot.failed { background-color: #F44336; }
+.dot.skipped { background-color: #9E9E9E; }
+.flaky-badge { background-color: #ff9900; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7em; font-weight: bold; }
+.dark-mode-toggle { cursor: pointer; font-size: 24px; padding: 8px; border-radius: 50%; transition: background-color 0.2s; line-height: 1; }
+.dark-mode-toggle:hover { background-color: var(--table-header-bg); }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+.download-buttons { display: flex; gap: 10px; }
+.download-buttons button { padding: 10px 16px; border: 1px solid var(--table-border); background-color: var(--card); color: var(--text); border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
+.download-buttons button:hover { background-color: var(--table-header-bg); }
+.chart-container { position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); }
+.category-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 12px; border-bottom: 1px solid var(--table-border); }
+.category-content { padding: 0 12px; }
+.category-test { border-bottom: 1px solid var(--table-border); padding: 12px 0; }
+.category-test:last-child { border-bottom: none; }
+.category-test pre { background-color: var(--bg); padding: 8px; border-radius: 6px; margin-top: 8px; font-family: monospace; }
+.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px;}
+.metadata-item { background-color: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--table-border); }
+.metadata-label { font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px;}
+.metadata-value { font-size: 1.1em;}
+</style>
+</head>
+<body>
+
+<div class="app-container">
+  <div class="sidebar">
+    <div class="sidebar-header">Test Report</div>
+    <ul class="sidebar-menu">
+      <li class="sidebar-menu-item"><a href="#" class="active" data-tab="overview">Overview</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="categories">Categories</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="suites">Suites</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="graphs">Graphs</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="timeline">Timeline</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="history">Historical Runs</a></li>
+    </ul>
+  </div>
+
+  <div class="main-content">
+    <div class="header">
+      <h1>Test Execution Report</h1>
+      <div class="download-buttons">
+        <button id="downloadHtml">Download HTML</button>
+        <button id="downloadCsv">Download CSV</button>
+        <button id="downloadJson">Download JSON</button>
+        <button id="downloadPdf">Download PDF</button>
+      </div>
+      <div class="actions">
+        <div class="filters">
+          <label><input type="checkbox" id="filterPassed" checked> Passed</label>
+          <label><input type="checkbox" id="filterFailed" checked> Failed</label>
+          <label><input type="checkbox" id="filterSkipped" checked> Skipped</label>
+        </div>
+        <div class="dark-mode-toggle" id="darkModeToggle">☀️</div>
+      </div>
+    </div>
+
+    <div id="overview" class="tab-content active">
+      <div class="card">
+        <h2>Key Performance Indicators</h2>
+        <div class="kpi-grid" id="kpiGrid"></div>
+      </div>
+       <div class="card">
+        <h2>Execution Metadata</h2>
+        <div class="metadata-grid" id="metadataGrid"></div>
+      </div>
+    </div>
+
+    <div id="categories" class="tab-content">
+      <div class="card">
+        <h2>Failed Test Categories</h2>
+        <div id="categoryList"></div>
+      </div>
+    </div>
+
+    <div id="suites" class="tab-content">
+      <div class="card">
+        <h2 id="suitesHeader">Suites & Tests</h2>
+        <div id="suitesContainer"></div>
+      </div>
+    </div>
+
+    <div id="graphs" class="tab-content">
+      <div class="card">
+        <h2>Test Graphs & Trends</h2>
+        <div style="display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;">
+            <div style="flex: 1 1 300px; min-width: 300px;">
+                <h3>Pass/Fail/Skip</h3>
+                <div class="chart-container" style="height: 300px;">
+                    <canvas id="statusChart"></canvas>
+                    <div>Loading Chart...</div>
+                </div>
+            </div>
+            <div style="flex: 1 1 400px; min-width: 400px;">
+                <h3>Duration Distribution</h3>
+                 <div class="chart-container" style="height: 300px;">
+                    <canvas id="durationHistogram"></canvas>
+                    <div>Loading Chart...</div>
+                </div>
+            </div>
+            <div style="flex: 1 1 100%; min-width: 400px;">
+                <h3>Pass Rate Trend</h3>
+                <div class="chart-container" style="height: 300px;">
+                    <canvas id="historyChart"></canvas>
+                    <div>Loading Chart...</div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="timeline" class="tab-content">
+      <div class="card">
+        <h2>Test Execution Timeline</h2>
+        <div id="timelineContainer" class="chart-container" style="height: 600px;">
+          <canvas id="timelineChart"></canvas>
+           <div>Loading Chart...</div>
+        </div>
+      </div>
+    </div>
+    
+    <div id="history" class="tab-content">
+        <div class="card">
+            <h2 id="historyRunsTitle">Historical Runs</h2>
+            <div id="historyGraphContainer" class="chart-container" style="height: 400px;">
+                <canvas id="historicalRunsChart"></canvas>
+                <div>Loading Chart...</div>
+            </div>
+        </div>
+    </div>
+
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+
+<script>
+const reportData = ${safeReportJson};
+
+(function() {
+  const root = document.documentElement;
+  const darkModeToggle = document.getElementById('darkModeToggle');
+  const renderedTabs = new Set();
+
+  function applyTheme(theme) {
+      if (theme === 'dark') {
+          root.setAttribute('data-theme', 'dark');
+          darkModeToggle.textContent = '🌙';
+      } else {
+          root.setAttribute('data-theme', 'light');
+          darkModeToggle.textContent = '☀️';
+      }
+  }
+
+  function toggleTheme() {
+    const currentTheme = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('theme', currentTheme);
+    applyTheme(currentTheme);
+  }
+
+  darkModeToggle.addEventListener('click', toggleTheme);
+  
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+      applyTheme(savedTheme);
+  }
+  
+  const tabs = document.querySelectorAll('.sidebar-menu-item a');
+  const tabContents = document.querySelectorAll('.tab-content');
+
+  tabs.forEach(tab => {
+    tab.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetId = e.target.getAttribute('data-tab');
+      tabs.forEach(t => t.classList.remove('active'));
+      e.target.classList.add('active');
+      tabContents.forEach(c => c.classList.remove('active'));
+      document.getElementById(targetId).classList.add('active');
+      if (renderedTabs.has(targetId)) return;
+      if (targetId === 'graphs') { renderCharts(); renderedTabs.add(targetId); }
+      if (targetId === 'timeline') { renderTimeline(); renderedTabs.add(targetId); }
+      if (targetId === 'history') { renderHistoryGraph(); renderedTabs.add(targetId); }
+    });
+  });
+
+  function renderOverview() {
+    const { stats, metadata } = reportData;
+    const kpiGrid = document.getElementById('kpiGrid');
+    kpiGrid.innerHTML = \`
+      <div class="kpi-card kpi-total"><div class="kpi-value">\${stats.total}</div><div class="kpi-label">Total Tests</div></div>
+      <div class="kpi-card kpi-passed"><div class="kpi-value">\${stats.passed}</div><div class="kpi-label">Passed</div></div>
+      <div class="kpi-card kpi-failed"><div class="kpi-value">\${stats.failed}</div><div class="kpi-label">Failed</div></div>
+      <div class="kpi-card kpi-skipped"><div class="kpi-value">\${stats.skipped}</div><div class="kpi-label">Skipped</div></div>
+      <div class="kpi-card kpi-pass-rate"><div class="kpi-value">\${stats.passRate}</div><div class="kpi-label">Pass Rate</div></div>
+      <div class="kpi-card kpi-duration"><div class="kpi-value">\${stats.totalDuration}</div><div class="kpi-label">Total Duration</div></div>
+    \`;
+    
+    const metadataGrid = document.getElementById('metadataGrid');
+    metadataGrid.innerHTML = \`
+        <div class="metadata-item"><span class="metadata-label">Start Time</span><span class="metadata-value">\${metadata.startTime}</span></div>
+        <div class="metadata-item"><span class="metadata-label">Total Duration</span><span class="metadata-value">\${metadata.totalDuration}</span></div>
+        <div class="metadata-item"><span class="metadata-label">Browser</span><span class="metadata-value">\${metadata.browser}</span></div>
+        <div class="metadata-item"><span class="metadata-label">Operating System</span><span class="metadata-value">\${metadata.os}</span></div>
+    \`;
+  }
+
+  function renderCategories() {
+    const { categories } = reportData;
+    const categoryList = document.getElementById('categoryList');
+    if (!categories || categories.length === 0) {
+      categoryList.innerHTML = '<p>No failed tests categorized.</p>';
+      return;
+    }
+    categoryList.innerHTML = categories.map(cat => \`
+      <div class="card">
+        <div class="category-header">
+            <span>\${cat.name}</span>
+            <span class="status-badge status-failed">\${cat.count} failed</span>
+        </div>
+        <div class="category-content" style="display: none;">
+            \${cat.tests.map(test => \`
+                <div class="category-test">
+                    <strong>\${test.title}</strong>
+                    <pre>\${test.trace}</pre>
+                </div>
+            \`).join('')}
+        </div>
+      </div>
+    \`).join('');
+
+    document.querySelectorAll('.category-header').forEach(header => {
+        header.addEventListener('click', () => {
+            const content = header.nextElementSibling;
+            content.style.display = content.style.display === 'none' ? 'block' : 'none';
+        });
+    });
+  }
+
+  function renderSuites() {
+    const { suites, stats } = reportData;
+    const suitesContainer = document.getElementById('suitesContainer');
+    const suitesHeader = document.getElementById('suitesHeader');
+    
+    suitesHeader.innerHTML = \`
+        Suites & Tests
+        <div class="header-stats">
+            <span class="status-badge status-passed">\${stats.passed} Passed</span>
+            <span class="status-badge status-failed">\${stats.failed} Failed</span>
+            <span class="status-badge status-skipped">\${stats.skipped} Skipped</span>
+        </div>
+    \`;
+
+    suitesContainer.innerHTML = suites.map(suite => \`
+      <div class="card">
+        <div class="suite-header">
+          <svg class="collapse-icon" fill="currentColor" viewBox="0 0 20 20" style="width:20px; height:20px;"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+          \${suite.title}
+        </div>
+        <div class="suite-content" style="display: none;">
+          \${suite.specs.flatMap(spec =>
+            spec.tests.map(test => \`
+            <div class="test-card">
+              <div class="test-card-header">
+                <span style="font-weight: 500;">\${spec.title}</span>
+                <span class="status-badge status-\${test.status}">\${test.status}</span>
+                <span>\${(test.duration / 1000).toFixed(2)}s</span>
+                <span>\${test.history.map(h => \`<span class="dot \${h}"></span>\`).join('')}</span>
+              </div>
+              \${test.logs ? \`
+              <div class="log-row" style="display: none;">
+                <div class="log-container">
+                    <h4>Logs</h4>
+                    <pre>\${test.logs.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>
+                </div>
+              </div>\` : ''}
+            </div>
+            \`)
+          ).join('')}
+        </div>
+      </div>
+    \`).join('');
+
+    document.querySelectorAll('.suite-header').forEach(header => {
+      header.addEventListener('click', () => {
+        const content = header.nextElementSibling;
+        const icon = header.querySelector('.collapse-icon');
+        const isExpanded = content.style.display === 'block';
+        content.style.display = isExpanded ? 'none' : 'block';
+        icon.classList.toggle('expanded', !isExpanded);
+      });
+    });
+    
+    document.querySelectorAll('.test-card-header').forEach(row => {
+      row.addEventListener('click', (e) => {
+        const logRow = row.nextElementSibling;
+        if (logRow && logRow.classList.contains('log-row')) {
+           logRow.style.display = logRow.style.display === 'none' ? 'block' : 'none';
+        }
+      });
+    });
+  }
+
+  let statusChart, durationChart, historyChart, timelineChart, historicalRunsChart;
+
+  function renderCharts() {
+    const statusCtx = document.getElementById('statusChart');
+    statusCtx.nextElementSibling.style.display = 'none';
+    statusChart = new Chart(statusCtx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Passed', 'Failed', 'Skipped'],
+        datasets: [{
+          data: [reportData.stats.passed, reportData.stats.failed, reportData.stats.skipped],
+          backgroundColor: ['#4CAF50', '#F44336', '#9E9E9E'],
+        }]
+      },
+      options: { responsive: true, maintainAspectRatio: false, animation: { animateScale: true } }
+    });
+    
+    // Duration Histogram
+    const histogramCtx = document.getElementById('durationHistogram');
+    histogramCtx.nextElementSibling.style.display = 'none';
+    const durations = reportData.suites.flatMap(s => s.specs.flatMap(sp => sp.tests.map(t => t.duration / 1000)));
+    const labels = ['<1s', '1-2s', '2-5s', '5-10s', '10-30s', '30-60s', '>60s'];
+    const data = new Array(labels.length).fill(0);
+    
+    durations.forEach(d => {
+        if (d < 1) data[0]++;
+        else if (d < 2) data[1]++;
+        else if (d < 5) data[2]++;
+        else if (d < 10) data[3]++;
+        else if (d < 30) data[4]++;
+        else if (d < 60) data[5]++;
+        else data[6]++;
+    });
+
+    new Chart(histogramCtx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Number of Tests',
+                data: data,
+                backgroundColor: 'rgba(153, 102, 255, 0.6)',
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: { y: { beginAtZero: true, title: { display: true, text: 'Test Count' } } }
+        }
+    });
+
+
+    const historyCtx = document.getElementById('historyChart');
+    historyCtx.nextElementSibling.style.display = 'none';
+    historyChart = new Chart(historyCtx, {
+      type: 'line',
+      data: {
+        labels: reportData.history.map(h => h.date),
+        datasets: [{
+          label: 'Pass Rate (%)',
+          data: reportData.history.map(h => h.passRate),
+          borderColor: 'rgba(75, 192, 192, 1)',
+          fill: false,
+          tension: 0.1
+        }]
+      },
+      options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } } }
+    });
+  }
+  
+  function renderTimeline() {
+    const timelineCtx = document.getElementById('timelineChart');
+    timelineCtx.nextElementSibling.style.display = 'none';
+    
+    // Transform timeline data for Chart.js gantt-like chart
+    const labels = reportData.timeline.map(t => t.name);
+    const datasets = [{
+      label: 'Execution Time',
+      data: reportData.timeline.map(t => [t.start, t.start + t.duration]),
+      backgroundColor: reportData.timeline.map(t => {
+        if (t.status === 'passed') return 'rgba(76, 175, 80, 0.8)';
+        if (t.status === 'failed') return 'rgba(244, 67, 54, 0.8)';
+        return 'rgba(158, 158, 158, 0.8)';
+      }),
+    }];
+    
+    // Only render chart if there is data
+    if (reportData.timeline.length > 0) {
+        timelineCtx.parentElement.style.height = (reportData.timeline.length * 30 + 100) + 'px'; // Dynamic height based on number of tests
+        timelineChart = new Chart(timelineCtx, {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: datasets
+          },
+          options: {
+            indexAxis: 'y',
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: {
+              x: { min: 0, title: { display: true, text: 'Time (ms)' } },
+            }
+          }
+        });
+    } else {
+        timelineCtx.parentElement.innerHTML = '<div>No timeline data available.</div>';
+    }
+  }
+
+  function renderHistoryGraph() {
+      const history = reportData.history;
+      document.getElementById('historyRunsTitle').textContent = \`Historical Runs (Count: \${history.length})\`;
+      const historyCtx = document.getElementById('historicalRunsChart');
+      historyCtx.nextElementSibling.style.display = 'none';
+      
+      // Only render chart if there is data
+      if (history.length > 0) {
+          historicalRunsChart = new Chart(historyCtx, {
+              type: 'bar',
+              data: {
+                  labels: history.map(h => h.date),
+                  datasets: [
+                      {
+                          type: 'line',
+                          label: 'Pass Rate',
+                          data: history.map(h => h.passRate),
+                          borderColor: 'rgb(255, 159, 64)',
+                          yAxisID: 'y1',
+                          tension: 0.1,
+                          pointRadius: 5,
+                          pointBackgroundColor: 'rgb(255, 159, 64)',
+                          order: 0, // Draw line on top of bars
+                      },
+                      {
+                          type: 'bar',
+                          label: 'Passed',
+                          data: history.map(h => h.passed),
+                          backgroundColor: 'rgba(75, 192, 192, 0.8)',
+                          order: 1,
+                      },
+                      {
+                          type: 'bar',
+                          label: 'Failed',
+                          data: history.map(h => h.failed),
+                          backgroundColor: 'rgba(255, 99, 132, 0.8)',
+                          order: 1,
+                      },
+                      {
+                          type: 'bar',
+                          label: 'Skipped',
+                          data: history.map(h => h.skipped),
+                          backgroundColor: 'rgba(158, 158, 158, 0.8)',
+                          order: 1,
+                      }
+                  ]
+              },
+              options: {
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  scales: {
+                      x: { stacked: true, },
+                      y: {
+                          stacked: true,
+                          beginAtZero: true,
+                          title: { display: true, text: 'Test Count' }
+                      },
+                      y1: {
+                          position: 'right',
+                          beginAtZero: true,
+                          max: 100,
+                          title: { display: true, text: 'Pass Rate (%)' },
+                          grid: { drawOnChartArea: false }
+                      }
+                  },
+                   tooltips: {
+                      mode: 'index',
+                      intersect: false
+                  }
+              }
+          });
+      } else {
+          historyCtx.parentElement.innerHTML = '<div>No historical runs data available.</div>';
+      }
+  }
+
+  const filterPassed = document.getElementById('filterPassed');
+  const filterFailed = document.getElementById('filterFailed');
+  const filterSkipped = document.getElementById('filterSkipped');
+
+  function applyFilters() {
+    const showPassed = filterPassed.checked;
+    const showFailed = filterFailed.checked;
+    const showSkipped = filterSkipped.checked;
+    
+    // Hide all log rows initially when filters change
+    document.querySelectorAll('.log-row').forEach(logRow => {
+        logRow.style.display = 'none'; 
+    });
+    
+    document.querySelectorAll('.test-card').forEach(card => {
+        const header = card.querySelector('.test-card-header');
+        const status = header.querySelector('.status-badge').textContent.toLowerCase();
+        let display = false;
+        if (status === 'passed' && showPassed) display = true;
+        if (status === 'failed' && showFailed) display = true;
+        if (status === 'skipped' && showSkipped) display = true;
+        card.style.display = display ? '' : 'none';
+        
+        // Hide the parent suite card if all its tests are hidden
+        let parentSuiteContent = card.closest('.suite-content');
+        if (parentSuiteContent) {
+            let visibleTests = Array.from(parentSuiteContent.querySelectorAll('.test-card')).filter(t => t.style.display !== 'none');
+            let parentCard = parentSuiteContent.closest('.card');
+            if (parentCard) {
+                parentCard.style.display = visibleTests.length > 0 ? '' : 'none';
+            }
+        }
+    });
+  }
+  filterPassed.addEventListener('change', applyFilters);
+  filterFailed.addEventListener('change', applyFilters);
+  filterSkipped.addEventListener('change', applyFilters);
+
+  document.getElementById('downloadHtml').addEventListener('click', () => {
+    const htmlContent = '<!DOCTYPE html>' + document.documentElement.outerHTML;
+    const blob = new Blob([htmlContent], { type: 'text/html' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'report.html';
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+  document.getElementById('downloadJson').addEventListener('click', () => {
+    const jsonContent = JSON.stringify(reportData, null, 2);
+    const blob = new Blob([jsonContent], { type: 'application/json' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'report-data.json';
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+  document.getElementById('downloadCsv').addEventListener('click', () => {
+    let csvContent = "data:text/csv;charset=utf-8,Suite,Test,Status,Duration (s),History\\n";
+    reportData.suites.forEach(suite => {
+      suite.specs.forEach(spec => {
+        const testData = spec.tests && spec.tests[0];
+        const status = testData ? testData.status : 'N/A';
+        const duration = testData ? (testData.duration / 1000).toFixed(2) : 'N/A';
+        const history = testData && testData.history ? testData.history.join(" | ") : 'N/A';
+        
+        const row = [\`"\${suite.title.replace(/"/g,'""')}"\`,\`"\${spec.title.replace(/"/g,'""')}"\`,status,duration,history].join(",");
+        csvContent += row + '\\n';
+      });
+    });
+    const encodedUri = encodeURI(csvContent);
+    const a = document.createElement('a'); a.href = encodedUri; a.download = 'test_report.csv'; a.click();
+  });
+  document.getElementById('downloadPdf').addEventListener('click', () => {
+    const doc = new window.jspdf.jsPDF();
+    const element = document.querySelector('.main-content');
+    html2canvas(element, { scale: 2 }).then(canvas => {
+      const imgData = canvas.toDataURL('image/png');
+      const imgWidth = 210; const pageHeight = 295;  
+      const imgHeight = canvas.height * imgWidth / canvas.width;
+      let heightLeft = imgHeight; let position = 0;
+      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      heightLeft -= pageHeight;
+      while (heightLeft >= 0) {
+        position = heightLeft - imgHeight;
+        doc.addPage();
+        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      }
+      doc.save('report.pdf');
+    });
+  });
+
+  renderOverview();
+  renderCategories();
+  renderSuites();
+  applyFilters();
+
+})();
+</script>
+</body>
+</html>
+    `;
+    }
+}
+module.exports = AggregatorReporter;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "slik-report",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A powerful Playwright reporter for aggregating test results, flakiness analysis, and historical trend tracking.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "npx tsc",
+    "prebuild": "npm run test",
+    "test": "jest",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -18,13 +20,20 @@
   "author": "Your Name Here",
   "license": "ISC",
   "files": [
-    "dist"
+    "dist/index.js",
+    "dist/index.d.ts",
+    "README.md"
   ],
   "devDependencies": {
-    "@types/node": "^20.11.24",
+    "@playwright/test": "^1.57.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^20.19.25",
+    "jest": "^30.2.0",
+    "slik-report": "^1.0.1",
+    "ts-jest": "^29.4.5",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "playwright": ">=1.30.0"
+    "playwright": "^1.57.0"
   }
 }

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}