@arghajit/dummy 0.1.0-beta-14 → 0.1.0-beta-16

package/README.md

@@ -1,7 +1,7 @@
 # Playwright Pluse Report
 
 ![Playwright Pulse Report](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/image.png)  
-*The ultimate Playwright reporter — Interactive dashboard with historical trend analytics, CI/CD-ready standalone HTML reports, and sharding support for scalable test execution.*
+_The ultimate Playwright reporter — Interactive dashboard with historical trend analytics, CI/CD-ready standalone HTML reports, and sharding support for scalable test execution._
 
 ## [Live Demo](https://pulse-report.netlify.app/)
 
@@ -58,10 +58,12 @@
 ## 🛠️ How It Works
 
 1. **Reporter Collection**:
+
    - Custom reporter collects detailed results during test execution
    - Handles sharding by merging `.pulse-shard-results-*.json` files
 
 2. **JSON Output**:
+
    - Generates comprehensive `playwright-pulse-report.json`
 
 3. **Visualization Options**:
@@ -84,18 +86,20 @@ pnpm add @arghajit/playwright-pulse-report@latest --save-dev
 
 ```typescript
 // playwright.config.ts
-import { defineConfig } from '@playwright/test';
-import * as path from 'path';
+import { defineConfig } from "@playwright/test";
+import * as path from "path";
 
-
-const PULSE_REPORT_DIR = path.resolve(__dirname, 'pulse-report');
+const PULSE_REPORT_DIR = path.resolve(__dirname, "pulse-report");
 
 export default defineConfig({
   reporter: [
-    ['list'],
-    ['@arghajit/playwright-pulse-report', {
-      outputDir: PULSE_REPORT_DIR
-    }]
+    ["list"],
+    [
+      "@arghajit/playwright-pulse-report",
+      {
+        outputDir: PULSE_REPORT_DIR,
+      },
+    ],
   ],
   // Other configurations...
 });
@@ -112,9 +116,11 @@ npx send-email            # Sends email report
 
 ## 📊 Report Options
 
-### Option 1: Static HTML Report
+### Option 1: Static HTML Report (Embedded Attachments)
 
 ```bash
+npm run generate-pulse-report
+or,
 npx generate-pulse-report
 ```
 
@@ -122,7 +128,20 @@ npx generate-pulse-report
 - Self-contained, no server required
 - Preserves all dashboard functionality
 
-### Option 2: Email Report
+### Option 2: HTML Report (Attachment-based)
+
+```bash
+npm run generate-report
+or,
+npx generate-report
+```
+
+- Generates playwright-pulse-report.html
+- Loads screenshots and images dynamically from the attachments/ directory
+- Produces a lighter HTML file with faster initial load
+- Requires attachments/ directory to be present when viewing the report
+
+### Option 3: Email Report
 
 1. Configure `.env`:
 
@@ -138,7 +157,7 @@ npx generate-pulse-report
    npx send-email
    ```
 
-  NOTE: The email will be send with a light-weight html file, which can be opened in mail preview application.
+NOTE: The email will be send with a light-weight html file, which can be opened in mail preview application.
 
 ## 🤖 AI Analysis
 
@@ -173,7 +192,7 @@ The dashboard includes AI-powered test analysis that provides:
 - name: Generate Pulse Report
   run: |
     npm run script merge-report
-    npm run script generate-report
+    npm run generate-report [or, npm run generate-pulse-report]
 
 # Upload final merged report as CI artifact
 - name: Upload Pulse report
@@ -213,8 +232,8 @@ The dashboard includes AI-powered test analysis that provides:
 # Merge all sharded JSON reports into one final output
 - name: Generate Pulse Report
   run: |
-    npm run script merge-report
-    npm run script generate-report
+    npm run merge-report
+    npm run generate-report [or, npm run generate-pulse-report]
 
 # Upload final merged report as CI artifact
 - name: Upload Pulse report
@@ -222,18 +241,18 @@ The dashboard includes AI-powered test analysis that provides:
   with:
     name: pulse-report
     path: pulse-report/
-
 ```
 
 ## 🧠 Notes
 
+- <strong>`npm run generate-report` generates a HTML report ( screenshots/images will be taken in realtime from 'attachments/' directory ).</strong>
+- <strong>`npm run generate-pulse-report` generates a fully self-contained static HTML report( All screenshots and images are embedded directly into the HTML using base64 encoding, which simplifies distribution but may result in larger file sizes and longer load times ).</strong>
 - Each shard generates its own playwright-pulse-report.json inside pulse-report/.
 - Artifacts are named using the shard type (matrix.config.type).
 - After the test matrix completes, reports are downloaded, renamed, and merged.
 - merge-report is a custom Node.js script that combines all JSON files into one.
-- generate-report can build a static HTML dashboard if needed.
 
-## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/structures.svg)
+## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images//pulse-folder-structures.svg)
 
 ### 🚀 **Upgrade Now**
 
@@ -247,4 +266,10 @@ For issues or feature requests, please [Contact Me](mailto:arghajitsingha47@gmai
 
 ---
 
+## 🙌🏼 Thank you
+
+Special Thanks to [@suman-vishwakarma](https://www.linkedin.com/in/suman-vishwakarma-426108185/) and [@sagnik-ghosh](https://www.linkedin.com/in/sagnikghosh99/), for continuous UAT feedback.
+
+---
+
 <div align="center">Made by Arghajit Singha | MIT Licensed</div>

package/dist/reporter/playwright-pulse-reporter.js

@@ -245,10 +245,17 @@ class PlaywrightPulseReporter {
             });
         }
         const uniqueTestId = test.id;
-        // --- ADDED THIS SECTION for testData ---
+        // --- REFINED THIS SECTION for testData ---
+        const maxWorkers = this.config.workers;
+        // Use the modulo operator to map the unique workerIndex to a concurrency "slot".
+        // This ensures workerId is always between 0 and (maxWorkers - 1).
+        // Added a safeguard to fall back to the raw index if maxWorkers isn't a positive number.
+        const mappedWorkerId = maxWorkers && maxWorkers > 0
+            ? result.workerIndex % maxWorkers
+            : result.workerIndex;
         const testSpecificData = {
-            workerId: result.workerIndex,
-            totalWorkers: this.config.workers,
+            workerId: mappedWorkerId,
+            totalWorkers: maxWorkers,
             configFile: this.config.configFile,
             metadata: this.config.metadata
                 ? JSON.stringify(this.config.metadata)
@@ -275,7 +282,7 @@ class PlaywrightPulseReporter {
             tracePath: undefined,
             stdout: stdoutMessages.length > 0 ? stdoutMessages : undefined,
             stderr: stderrMessages.length > 0 ? stderrMessages : undefined,
-            // --- ADDED THESE LINES from testSpecificData ---
+            // --- UPDATED THESE LINES from testSpecificData ---
             ...testSpecificData,
         };
         try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.1.0-beta-14",
+  "version": "0.1.0-beta-16",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "keywords": [
     "playwright",
@@ -26,6 +26,7 @@
   "license": "MIT",
   "bin": {
     "generate-pulse-report": "./scripts/generate-static-report.mjs",
+    "generate-report": "./scripts/generate-report.mjs",
     "merge-pulse-report": "./scripts/merge-pulse-report.js",
     "send-email": "./scripts/sendReport.mjs",
     "generate-trend": "./scripts/generate-trend.mjs",
@@ -42,6 +43,7 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build:reporter",
     "report:static": "node ./scripts/generate-static-report.mjs",
+    "report:generate": "node ./scripts/generate-report.mjs",
     "report:merge": "node ./scripts/merge-pulse-report.js",
     "report:email": "node ./scripts/sendReport.mjs",
     "report:minify": "node ./scripts/generate-email-report.mjs"
@@ -67,7 +69,6 @@
     "@types/node": "^20",
     "@types/ua-parser-js": "^0.7.39",
     "eslint": "9.25.1",
-    "pretty-ansi": "^3.0.0",
     "typescript": "^5"
   },
   "engines": {

package/scripts/generate-email-report.mjs

@@ -177,9 +177,11 @@ function generateMinifiedHTML(reportData) {
   };
 
   const testsByBrowser = new Map();
+  const allBrowsers = new Set();
   if (results && results.length > 0) {
     results.forEach((test) => {
       const browser = test.browser || "unknown";
+      allBrowsers.add(browser);
       if (!testsByBrowser.has(browser)) {
         testsByBrowser.set(browser, []);
       }
@@ -195,7 +197,9 @@ function generateMinifiedHTML(reportData) {
     let html = "";
     testsByBrowser.forEach((tests, browser) => {
       html += `
-        <div class="browser-section">
+        <div class="browser-section" data-browser-group="${sanitizeHTML(
+          browser.toLowerCase()
+        )}">
           <h2 class="browser-title">${sanitizeHTML(capitalize(browser))}</h2>
           <ul class="test-list">
       `;
@@ -204,7 +208,12 @@ function generateMinifiedHTML(reportData) {
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
         html += `
-            <li class="test-item ${getStatusClass(test.status)}">
+            <li class="test-item ${getStatusClass(test.status)}" 
+                data-test-name-min="${sanitizeHTML(testTitle.toLowerCase())}" 
+                data-status-min="${sanitizeHTML(
+                  String(test.status).toLowerCase()
+                )}"
+                data-browser-min="${sanitizeHTML(browser.toLowerCase())}">
               <span class="test-status-icon">${getStatusIcon(
                 test.status
               )}</span>
@@ -343,6 +352,43 @@ function generateMinifiedHTML(reportData) {
             padding-bottom: 10px;
             border-bottom: 2px solid var(--secondary-color);
         }
+        
+        /* Filters Section */
+        .filters-section {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 20px;
+            padding: 15px;
+            background-color: var(--light-gray-color);
+            border-radius: var(--border-radius);
+            border: 1px solid var(--border-color);
+        }
+        .filters-section input[type="text"],
+        .filters-section select {
+            padding: 8px 12px;
+            border: 1px solid var(--medium-gray-color);
+            border-radius: 4px;
+            font-size: 0.95em;
+            flex-grow: 1;
+        }
+        .filters-section select {
+            min-width: 150px;
+        }
+        .filters-section button {
+            padding: 8px 15px;
+            font-size: 0.95em;
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+        .filters-section button:hover {
+            background-color: var(--primary-color);
+        }
+
         .browser-section {
             margin-bottom: 25px;
         }
@@ -365,7 +411,7 @@ function generateMinifiedHTML(reportData) {
             border: 1px solid var(--border-color);
             border-radius: var(--border-radius);
             background-color: #fff;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, display 0.3s ease-out;
         }
         .test-item:hover {
             background-color: var(--light-gray-color);
@@ -424,10 +470,11 @@ function generateMinifiedHTML(reportData) {
             .report-header { flex-direction: column; align-items: flex-start; gap: 10px; }
             .report-header h1 { font-size: 1.5em; }
             .run-info { text-align: left; }
-            .summary-stats { grid-template-columns: 1fr 1fr; } /* Two cards per row on smaller screens */
+            .summary-stats { grid-template-columns: 1fr 1fr; }
+            .filters-section { flex-direction: column; }
         }
         @media (max-width: 480px) {
-            .summary-stats { grid-template-columns: 1fr; } /* One card per row on very small screens */
+            .summary-stats { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -471,6 +518,30 @@ function generateMinifiedHTML(reportData) {
 
         <section class="test-results-section">
             <h1 class="section-title">Test Case Summary</h1>
+            
+            <div class="filters-section">
+                <input type="text" id="filter-min-name" placeholder="Search by test name...">
+                <select id="filter-min-status">
+                    <option value="">All Statuses</option>
+                    <option value="passed">Passed</option>
+                    <option value="failed">Failed</option>
+                    <option value="skipped">Skipped</option>
+                    <option value="unknown">Unknown</option>
+                </select>
+                <select id="filter-min-browser">
+                    <option value="">All Browsers</option>
+                    ${Array.from(allBrowsers)
+                      .map(
+                        (browser) =>
+                          `<option value="${sanitizeHTML(
+                            browser.toLowerCase()
+                          )}">${sanitizeHTML(capitalize(browser))}</option>`
+                      )
+                      .join("")}
+                </select>
+                <button id="clear-min-filters">Clear Filters</button>
+            </div>
+
             ${generateTestListHTML()}
         </section>
         
@@ -485,16 +556,83 @@ function generateMinifiedHTML(reportData) {
         </footer>
     </div>
     <script>
-        // Global helper functions needed by the template (if any complex ones were used)
-        // For this minified version, formatDuration and formatDate are primarily used during HTML generation server-side.
-        // No client-side interactivity scripts are needed for this simple report.
+        document.addEventListener('DOMContentLoaded', function() {
+            const nameFilterMin = document.getElementById('filter-min-name');
+            const statusFilterMin = document.getElementById('filter-min-status');
+            const browserFilterMin = document.getElementById('filter-min-browser');
+            const clearMinFiltersBtn = document.getElementById('clear-min-filters');
+            const testItemsMin = document.querySelectorAll('.test-results-section .test-item');
+            const browserSections = document.querySelectorAll('.test-results-section .browser-section');
+
+            function filterMinifiedTests() {
+                const nameValue = nameFilterMin.value.toLowerCase();
+                const statusValue = statusFilterMin.value;
+                const browserValue = browserFilterMin.value;
+                let anyBrowserSectionVisible = false;
+
+                browserSections.forEach(section => {
+                    let sectionHasVisibleTests = false;
+                    const testsInThisSection = section.querySelectorAll('.test-item');
+                    
+                    testsInThisSection.forEach(testItem => {
+                        const testName = testItem.getAttribute('data-test-name-min');
+                        const testStatus = testItem.getAttribute('data-status-min');
+                        const testBrowser = testItem.getAttribute('data-browser-min');
+
+                        const nameMatch = testName.includes(nameValue);
+                        const statusMatch = !statusValue || testStatus === statusValue;
+                        const browserMatch = !browserValue || testBrowser === browserValue;
+
+                        if (nameMatch && statusMatch && browserMatch) {
+                            testItem.style.display = 'flex';
+                            sectionHasVisibleTests = true;
+                            anyBrowserSectionVisible = true;
+                        } else {
+                            testItem.style.display = 'none';
+                        }
+                    });
+                    // Hide browser section if no tests match OR if a specific browser is selected and it's not this one
+                     if (!sectionHasVisibleTests || (browserValue && section.getAttribute('data-browser-group') !== browserValue)) {
+                        section.style.display = 'none';
+                    } else {
+                        section.style.display = '';
+                    }
+                });
+                
+                // Show "no tests" message if all sections are hidden
+                const noTestsMessage = document.querySelector('.test-results-section .no-tests');
+                if (noTestsMessage) {
+                    noTestsMessage.style.display = anyBrowserSectionVisible ? 'none' : 'block';
+                }
+
+            }
+
+            if (nameFilterMin) nameFilterMin.addEventListener('input', filterMinifiedTests);
+            if (statusFilterMin) statusFilterMin.addEventListener('change', filterMinifiedTests);
+            if (browserFilterMin) browserFilterMin.addEventListener('change', filterMinifiedTests);
+            
+            if (clearMinFiltersBtn) {
+                clearMinFiltersBtn.addEventListener('click', () => {
+                    nameFilterMin.value = '';
+                    statusFilterMin.value = '';
+                    browserFilterMin.value = '';
+                    filterMinifiedTests();
+                });
+            }
+            // Initial filter call in case of pre-filled values (though unlikely here)
+             if (testItemsMin.length > 0) { // Only filter if there are items
+                filterMinifiedTests();
+            }
+        });
+
+        // Fallback helper functions (though ideally not needed client-side for this minified report)
         if (typeof formatDuration === 'undefined') {
-             function formatDuration(ms) { // Fallback, though should be pre-rendered
+             function formatDuration(ms) { 
                 if (ms === undefined || ms === null || ms < 0) return "0.0s";
                 return (ms / 1000).toFixed(1) + "s";
             }
         }
-         if (typeof formatDate === 'undefined') { // Fallback
+         if (typeof formatDate === 'undefined') {
             function formatDate(dateStrOrDate) {
                 if (!dateStrOrDate) return "N/A";
                 try {