@arghajit/dummy 0.1.0 → 0.1.1

package/README.md

@@ -1,54 +1,38 @@
 # Playwright Pluse Report
 
-![Playwright Pulse Report](./screenshots/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.*
+![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._
 
-<a href="https://pulse-report.netlify.app/" target="_blank"><h3>Live Demo</h3></a>
+## [Live Demo](https://pulse-report.netlify.app/)
 
-## 🌟 Features
+## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/features.svg)
 
-- **Custom Playwright Reporter** - Collects detailed test results with rich metadata
-- **Sharding Support** - Seamlessly handles parallel test execution across shards
-- **Two Reporting Options**:
-  - **Standalone HTML Report** - Self-contained, shareable single file
-  - **Email Report** - Attached test summary with generated test report
-- **CI/CD Ready** - GitHub Actions workflow examples included
-- **Email Integration** - Send reports directly to stakeholders
-- **AI Analysis** - Get insights into your test results
+## **Documentation**: [Pulse Report](https://playwright-pulse-report.netlify.app/)
 
-## 📸 Screenshots
+## Available Scripts
 
-### 🖥️ Desktop View
+The project provides these utility commands:
 
-<div align="center" style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;"> <a href="https://postimg.cc/180cym6c" target="_blank"> <img src="./screenshots/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html.png" alt="Dashboard Overview" width="300"/> <p align="center"><strong>Dashboard Overview</strong></p> </a> <a href="https://postimg.cc/V5TFRHmM" target="_blank"> <img src="./screenshots/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-1.png" alt="Test Details" width="300"/> <p align="center"><strong>Test Details</strong></p> </a> <a href="https://postimg.cc/XXTwFGkk" target="_blank"> <img src="./screenshots/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-2.png" alt="Filter View" width="300"/> <p align="center"><strong>Filter View</strong></p> </a> </div>
+| Command                | Description                                                                 |
+|------------------------|-----------------------------------------------------------------------------|
+| `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                                    |
+| `generate-pulse-report`| Generates `playwright-pulse-static-report.html`, Self-contained, no server required, Preserves all dashboard functionality, all the attachments are embadded in the report, no need to have attachments/ directory when viewing the report                                             |
+| `merge-pulse-report`   | Combines multiple parallel test json reports, basically used in sharding                                     |
+| `generate-trend`       | Analyzes historical trends in test results                                  |
+| `generate-email-report`| Generates email-friendly report versions                                    |
+| `send-email`           | Generates email-friendly report versions & Distributes report via email                                               |
 
-### 📱 Mobile View
-
-<div align="center" style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
-
-  <a href="https://postimg.cc/CzJBLR5N" target="_blank">
-    <img src="./screenshots/127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max.png" alt="Mobile Overview" width="300"/>
-    <p align="center"><strong>Dashboard Overview</strong></p>
-  </a>
-
-  <a href="https://postimg.cc/G8YTczT8" target="_blank">
-    <img src="./screenshots/127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max-1.png" alt="Test Details" width="300"/>
-    <p align="center"><strong>Test Details</strong></p>
-  </a>
-
-</div>
-
-### Email Report Example
-
-[![Email Report](./screenshots//Email-report.jpg)](https://postimg.cc/DmCPgtqh)
+Run with `npm run <command>`
 
 ## 🛠️ 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**:
@@ -60,29 +44,27 @@
 ### 1. Installation
 
 ```bash
-npm install @arghajit/playwright-pulse-reporter@latest --save-dev
-# or
-yarn add @arghajit/playwright-pulse-reporter@latest --dev
-# or
-pnpm add @arghajit/playwright-pulse-reporter@latest --save-dev
+npm install @arghajit/playwright-pulse-report@latest --save-dev
 ```
 
 ### 2. Configure Playwright
 
 ```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-reporter', {
-      outputDir: PULSE_REPORT_DIR
-    }]
+    ["list"],
+    [
+      "@arghajit/playwright-pulse-report",
+      {
+        outputDir: PULSE_REPORT_DIR,
+      },
+    ],
   ],
   // Other configurations...
 });
@@ -99,9 +81,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
 ```
 
@@ -109,13 +93,26 @@ 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`:
 
    ```bash
-   SENDER_EMAIL_1=recipient1@example.com
-   SENDER_EMAIL_2=recipient2@example.com
+   RECIPIENT_EMAIL_1=recipient1@example.com
+   RECIPIENT_EMAIL_2=recipient2@example.com
    # ... up to 5 recipients
    ```
 
@@ -125,6 +122,8 @@ npx generate-pulse-report
    npx send-email
    ```
 
+NOTE: Email will be sent with a light-weight html file, which can be opened in mail preview application.
+
 ## 🤖 AI Analysis
 
 The dashboard includes AI-powered test analysis that provides:
@@ -158,7 +157,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
@@ -198,8 +197,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
@@ -207,53 +206,113 @@ 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.
 
-## 📂 Key Files
+## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images//pulse-folder-structures.svg)
+
+### 🚀 **Upgrade Now**
 
 ```bash
-playwright-pulse-reporter/
-├── src/
-│   ├── reporter/            # Reporter implementation
-│   └── app/                 # Next.js dashboard
-├── scripts/
-│   └── generate-static-report.mjs  # HTML generator
-|   └── generate-trend.mjs  # Generate Trends
-|   └── merge-pulse-report.mjs  # merge sharded reports
-|   └── sendReport.mjs  # Send email report
-├── pulse-report/            # Generated reports
-└── sample-report.json       # Example data
+npm install @arghajit/playwright-pulse-report@latest
 ```
+---
 
-## 🎉 What's New in v0.2.1
+## ⚙️ Advanced Configuration
 
-### ✨ **Key Improvements**  
+### Handling Sequential Test Runs
 
-| Feature | Description |
-|---------|-------------|
-| **🎨 Refined UI** | Completely redesigned static HTML reports for better readability and navigation |
-| **📊 History Trends** | Visual analytics for:<br>• Test History for last 15 runs<br>• Test suite pass/fail rates<br>• Duration trends<br>• Individual test flakiness |
-| **🛠️ Project Fixes** | Corrected project name display in test suite components |
+By default, the reporter will overwrite the `playwright-pulse-report.json` file on each new test run. This is usually what we want. However, if we run tests sequentially in the same job, like this:
 
-### 🚀 **Upgrade Now**
+```bash
+npx playwright test test1.spec.ts && npx playwright test test2.spec.ts
+```
+
+By default, In this above scenario, the report from test1 will be lost. To solve this, you can use the resetOnEachRun option.
 
 ```bash
-npm install @arghajit/playwright-pulse-report@latest
+// playwright.config.ts
+import { defineConfig } from "@playwright/test";
+import * as path from "path";
+
+// Define where the final report JSON and HTML should go
+const PULSE_REPORT_DIR = path.resolve(__dirname, "pulse-report"); // Example: a directory in your project root
+
+export default defineConfig({
+  reporter: [
+    ["list"],
+    [
+      "@arghajit/playwright-pulse-report",
+      {
+        outputDir: PULSE_REPORT_DIR,
+        // Add this option
+        resetOnEachRun: false, // Default is true
+      },
+    ],
+  ],
+  // ...
+});
+```
+
+**How it works when resetOnEachRun: false:**
+
+- On the first run, it saves report-1.json to a pulse-report/pulse-results directory and creates the main playwright-pulse-report.json from it.
+- On the second run, it saves report-2.json to the same directory.
+- It then automatically reads both report-1.json and report-2.json, merges them, and updates the main playwright-pulse-report.json with the combined results.
+
+***This ensures your final report is always a complete summary of all sequential test runs.***
+
+---
+
+<img src="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images//pulse-logo.png" alt="pulse dashboard" title="pulse dashboard" height="35px" width="60px" align="left" padding="5px"/>
+<h2>Pulse Dashboard</h2>
+
+**Real-time Playwright Test Monitoring & Analysis**  
+
+A Next.js component & CLI tool for visualizing Playwright test executions. Provides real-time insights, historical trends, and failure analysis.  
+
+**Key Features**:
+
+- Interactive test result visualization  
+- Historical trend analysis  
+- Failure pattern identification  
+
+**Quick Start**:
+
+```bash
+npx pulse-dashboard
+  or,
+npm run pulse-dashboard
 ```
 
+*(Run from project root containing `pulse-report/` directory)*  
+
+**NPM Package**: [playwright-pulse-report](https://www.npmjs.com/package/@arghajit/playwright-pulse-report) 
+
+**Tech Stack**: Next.js, TypeScript, Tailwind CSS, Playwright  
+
+*Part of the Playwright Pulse Report ecosystem*
+
+---
+
 ## 📬 Support
 
 For issues or feature requests, please [Contact Me](mailto:arghajitsingha47@gmail.com).
 
 ---
 
+## 🙌🏼 Thank you
+
+Special Thanks to [@Suman Vishwakarma](https://www.linkedin.com/in/suman-vishwakarma-426108185/), for continuous UAT feedback.
+
+---
+
 <div align="center">Made by Arghajit Singha | MIT Licensed</div>

package/dist/reporter/attachment-utils.js

@@ -45,11 +45,10 @@ const ATTACHMENTS_SUBDIR = "attachments"; // Consistent subdirectory name
  * @param config The reporter configuration options.
  */
 function attachFiles(testId, pwResult, pulseResult, config) {
-    const baseReportDir = config.outputDir || "pulse-report"; // Base output directory
-    // Ensure attachments are relative to the main outputDir
-    const attachmentsBaseDir = path.resolve(baseReportDir, ATTACHMENTS_SUBDIR); // Absolute path for FS operations
-    const attachmentsSubFolder = testId.replace(/[^a-zA-Z0-9_-]/g, "_"); // Sanitize testId for folder name
-    const testAttachmentsDir = path.join(attachmentsBaseDir, attachmentsSubFolder); // e.g., pulse-report/attachments/test_id_abc
+    const baseReportDir = config.outputDir || "pulse-report";
+    const attachmentsBaseDir = path.resolve(baseReportDir, ATTACHMENTS_SUBDIR);
+    const attachmentsSubFolder = testId.replace(/[^a-zA-Z0-9_-]/g, "_");
+    const testAttachmentsDir = path.join(attachmentsBaseDir, attachmentsSubFolder);
     try {
         if (!fs.existsSync(testAttachmentsDir)) {
             fs.mkdirSync(testAttachmentsDir, { recursive: true });
@@ -57,53 +56,49 @@ function attachFiles(testId, pwResult, pulseResult, config) {
     }
     catch (error) {
         console.error(`Pulse Reporter: Failed to create attachments directory: ${testAttachmentsDir}`, error);
-        return; // Stop processing if directory creation fails
+        return;
     }
     if (!pwResult.attachments)
         return;
-    const { base64Images } = config; // Get base64 embedding option
-    pulseResult.screenshots = []; // Initialize screenshots array
+    const { base64Images } = config;
+    // --- MODIFICATION: Initialize all attachment arrays to prevent errors ---
+    pulseResult.screenshots = [];
+    pulseResult.videoPath = [];
+    pulseResult.attachments = [];
     pwResult.attachments.forEach((attachment) => {
         const { contentType, name, path: attachmentPath, body } = attachment;
-        // Skip attachments without path or body
         if (!attachmentPath && !body) {
             console.warn(`Pulse Reporter: Attachment "${name}" for test ${testId} has no path or body. Skipping.`);
             return;
         }
-        // Determine filename
-        const safeName = name.replace(/[^a-zA-Z0-9_.-]/g, "_"); // Sanitize original name
+        const safeName = name.replace(/[^a-zA-Z0-9_.-]/g, "_");
         const extension = attachmentPath
             ? path.extname(attachmentPath)
             : `.${getFileExtension(contentType)}`;
         const baseFilename = attachmentPath
             ? path.basename(attachmentPath, extension)
             : safeName;
-        // Ensure unique filename within the test's attachment folder
         const fileName = `${baseFilename}_${Date.now()}${extension}`;
-        // Relative path for storing in JSON (relative to baseReportDir)
         const relativePath = path.join(ATTACHMENTS_SUBDIR, attachmentsSubFolder, fileName);
-        // Full path for file system operations
         const fullPath = path.join(testAttachmentsDir, fileName);
         if (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith("image/")) {
-            // Handle all image types consistently
             handleImage(attachmentPath, body, base64Images, fullPath, relativePath, pulseResult, name);
         }
         else if (name === "video" || (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith("video/"))) {
-            handleAttachment(attachmentPath, body, fullPath, relativePath, "videoPath", pulseResult);
+            handleAttachment(attachmentPath, body, fullPath, relativePath, "videoPath", pulseResult, attachment);
         }
         else if (name === "trace" || contentType === "application/zip") {
-            // Trace files are zips
-            handleAttachment(attachmentPath, body, fullPath, relativePath, "tracePath", pulseResult);
+            handleAttachment(attachmentPath, body, fullPath, relativePath, "tracePath", pulseResult, attachment);
         }
         else {
-            // Handle other generic attachments if needed (e.g., log files)
-            // console.log(`Pulse Reporter: Processing generic attachment "${name}" (Type: ${contentType}) for test ${testId}`);
-            // handleAttachment(attachmentPath, body, fullPath, relativePath, 'otherAttachments', pulseResult); // Example for storing other types
+            // --- MODIFICATION: Enabled handling for all other file types ---
+            handleAttachment(attachmentPath, body, fullPath, relativePath, "attachments", pulseResult, attachment);
         }
     });
 }
 /**
  * Handles image attachments, either embedding as base64 or copying the file.
+ * (This function is unchanged)
  */
 function handleImage(attachmentPath, body, base64Embed, fullPath, relativePath, pulseResult, attachmentName) {
     let screenshotData = undefined;
@@ -123,14 +118,10 @@ function handleImage(attachmentPath, body, base64Embed, fullPath, relativePath,
         }
     }
     else if (body) {
-        // Always embed if only body is available
         screenshotData = `data:image/${getFileExtension(attachmentName)};base64,${body.toString("base64")}`;
         if (!base64Embed) {
-            // Optionally save the buffer to a file even if embedding is off,
-            // but the primary representation will be base64.
             try {
                 fs.writeFileSync(fullPath, body);
-                // console.log(`Pulse Reporter: Saved screenshot buffer to ${fullPath}`);
             }
             catch (error) {
                 console.error(`Pulse Reporter: Failed to save screenshot buffer: ${fullPath}. Error: ${error.message}`);
@@ -147,21 +138,36 @@ function handleImage(attachmentPath, body, base64Embed, fullPath, relativePath,
 /**
  * Handles non-image attachments by copying the file or writing the buffer.
  */
-function handleAttachment(attachmentPath, body, fullPath, relativePath, resultKey, // Add more keys if needed
-pulseResult) {
+function handleAttachment(attachmentPath, body, fullPath, relativePath, resultKey, // MODIFIED: Added 'attachments'
+pulseResult, originalAttachment // MODIFIED: Pass original attachment
+) {
+    var _a, _b;
     try {
         if (attachmentPath) {
             fs.copyFileSync(attachmentPath, fullPath);
-            pulseResult[resultKey] = relativePath;
         }
         else if (body) {
             fs.writeFileSync(fullPath, body);
-            pulseResult[resultKey] = relativePath; // Store relative path even if from buffer
+        }
+        // --- MODIFICATION: Logic to handle different properties correctly ---
+        switch (resultKey) {
+            case "videoPath":
+                (_a = pulseResult.videoPath) === null || _a === void 0 ? void 0 : _a.push(relativePath);
+                break;
+            case "tracePath":
+                pulseResult.tracePath = relativePath;
+                break;
+            case "attachments":
+                (_b = pulseResult.attachments) === null || _b === void 0 ? void 0 : _b.push({
+                    name: originalAttachment.name,
+                    path: relativePath,
+                    contentType: originalAttachment.contentType,
+                });
+                break;
         }
     }
     catch (error) {
         console.error(`Pulse Reporter: Failed to copy/write attachment to ${fullPath}. Error: ${error.message}`);
-        // Don't set the path in pulseResult if saving failed
     }
 }
 /**
@@ -172,8 +178,7 @@ pulseResult) {
 function getFileExtension(contentType) {
     var _a;
     if (!contentType)
-        return "bin"; // Default binary extension
-    // More robust mapping
+        return "bin";
     const extensions = {
         "image/png": "png",
         "image/jpeg": "jpg",
@@ -182,9 +187,12 @@ function getFileExtension(contentType) {
         "image/svg+xml": "svg",
         "video/webm": "webm",
         "video/mp4": "mp4",
-        "application/zip": "zip", // For traces
+        "application/zip": "zip",
         "text/plain": "txt",
         "application/json": "json",
+        "text/html": "html",
+        "application/pdf": "pdf",
+        "text/csv": "csv",
     };
     return (extensions[contentType.toLowerCase()] ||
         ((_a = contentType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.split("+")[0]) ||

package/dist/reporter/playwright-pulse-reporter.d.ts

@@ -11,17 +11,22 @@ export declare class PlaywrightPulseReporter implements Reporter {
     private baseOutputFile;
     private isSharded;
     private shardIndex;
+    private resetOnEachRun;
     constructor(options?: PlaywrightPulseReporterOptions);
     printsToStdio(): boolean;
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase): void;
+    private getBrowserDetails;
     private processStep;
     onTestEnd(test: TestCase, result: PwTestResult): Promise<void>;
+    private _getFinalizedResults;
     onError(error: any): void;
+    private _getEnvDetails;
     private _writeShardResults;
     private _mergeShardResults;
     private _cleanupTemporaryFiles;
     private _ensureDirExists;
     onEnd(result: FullResult): Promise<void>;
+    private _mergeAllRunReports;
 }
 export default PlaywrightPulseReporter;