@arghajit/playwright-pulse-report 0.1.0 → 0.1.2

package/README.md

@@ -3,14 +3,25 @@
 
 This project provides both a custom Playwright reporter and a Next.js web dashboard to visualize your Playwright test results, now with support for **Playwright sharding** and an option for a **standalone HTML report**.
 
+## Screenshots
+
+### Desktop View [Click on Images to View full Image]
+<a href="https://postimg.cc/180cym6c" target="_blank"><img src="https://i.postimg.cc/180cym6c/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html.png" alt="Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html"/></a><br/><br/>
+<a href="https://postimg.cc/V5TFRHmM" target="_blank"><img src="https://i.postimg.cc/V5TFRHmM/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-1.png" alt="Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-1"/></a><br/><br/>
+<a href="https://postimg.cc/XXTwFGkk" target="_blank"><img src="https://i.postimg.cc/XXTwFGkk/Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-2.png" alt="Users-arghajitsingha-Downloads-pulse-report-1-playwright-pulse-static-report-html-2"/></a><br/><br/>
+
+### Mobile View [Click on Images to View full Image]
+<a href="https://postimg.cc/CzJBLR5N" target="_blank"><img src="https://i.postimg.cc/CzJBLR5N/127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max.png" alt="127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max"/></a><br/><br/>
+<a href="https://postimg.cc/G8YTczT8" target="_blank"><img src="https://i.postimg.cc/G8YTczT8/127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max-1.png" alt="127-0-0-1-5500-pulse-report-output-playwright-pulse-static-report-html-i-Phone-14-Pro-Max-1"/></a><br/><br/>
+
 ## How it Works
 
 1.  **Reporter (`playwright-pulse-reporter.ts`):**
     *   A custom reporter that collects detailed results during your Playwright test run.
     *   **Sharding Support:** If tests are sharded, each shard process writes its results to a temporary file (`.pulse-shard-results-*.json`) in the specified output directory. The main reporter process then merges these files upon completion.
-2.  **JSON Output:** On completion (`onEnd`), the reporter writes all collected (and potentially merged) data into a single `playwright-pulse-report.json` file in your project's specified output directory (defaults to `pulse-report-output` in the project root).
+2.  **JSON Output:** On completion (`onEnd`), the reporter writes all collected (and potentially merged) data into a single `playwright-pulse-report.json` file in your project's specified output directory (defaults to `pulse-report` in the project root).
 3.  **Next.js Dashboard (Option 2 - Interactive):** A web application built with Next.js that reads the final `playwright-pulse-report.json` file from the *dashboard project's root* and presents the test results in a dynamic, interactive dashboard interface.
-4.  **Standalone HTML Report (Option 1 - Static):** A script (`generate-static-report.mjs`) that reads the `playwright-pulse-report.json` from the *Playwright project's output directory* (e.g., `pulse-report-output`) and generates a single, self-contained `playwright-pulse-static-report.html` file in the *same directory*. This static report mimics the key information and layout of the dashboard, including:
+4.  **Standalone HTML Report (Option 1 - Static):** A script (`generate-static-report.mjs`) that reads the `playwright-pulse-report.json` from the *Playwright project's output directory* (e.g., `pulse-report`) and generates a single, self-contained `playwright-pulse-static-report.html` file in the *same directory*. This static report mimics the key information and layout of the dashboard, including:
     *   Run summary metrics (Total, Passed, Failed, Skipped, Duration).
     *   Filtering controls for test results.
     *   List of individual test results with status, duration, name, suite, and errors.
@@ -42,7 +53,7 @@ import { defineConfig, devices } 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-output'); // Example: a directory in your project root
+const PULSE_REPORT_DIR = path.resolve(__dirname, 'pulse-report'); // Example: a directory in your project root
 
 export default defineConfig({
   // ... other configurations like projects, testDir, etc.
@@ -77,7 +88,7 @@ export default defineConfig({
 **Explanation:**
 
 *   `outputDir` in the main `defineConfig`: This is where Playwright stores its own artifacts like traces and screenshots.
-*   `outputDir` inside the `@arghajit/playwright-pulse-reporter` options: This tells *our reporter* where to save the final `playwright-pulse-report.json`. Using a dedicated directory like `pulse-report-output` is **required** for the reporter and static report generation to work correctly.
+*   `outputDir` inside the `@arghajit/playwright-pulse-reporter` options: This tells *our reporter* where to save the final `playwright-pulse-report.json`. Using a dedicated directory like `pulse-report` is **required** for the reporter and static report generation to work correctly.
 
 ### 3. Run Your Tests
 
@@ -89,7 +100,7 @@ npx playwright test
 # npx playwright test --project=chromium --shard=1/3
 ```
 
-The `@arghajit/playwright-pulse-reporter` will automatically handle sharding if Playwright is configured to use it. Upon completion, the final `playwright-pulse-report.json` will be generated in the directory you specified (e.g., `pulse-report-output`).
+The `@arghajit/playwright-pulse-reporter` will automatically handle sharding if Playwright is configured to use it. Upon completion, the final `playwright-pulse-report.json` will be generated in the directory you specified (e.g., `pulse-report`).
 
 ### 4. Generate the Static HTML Report (Option 1)
 
@@ -100,8 +111,8 @@ After your tests run and `playwright-pulse-report.json` is created, you can gene
     ```bash
     npx generate-pulse-report
     ```
-    This command executes the `scripts/generate-static-report.mjs` script included in the `@arghajit/playwright-pulse-reporter` package. It reads the `pulse-report-output/playwright-pulse-report.json` file (relative to your current directory) and creates `pulse-report-output/playwright-pulse-static-report.html`.
-3.  **Open the HTML file:** Open the generated `pulse-report-output/playwright-pulse-static-report.html` in your browser.
+    This command executes the `scripts/generate-static-report.mjs` script included in the `@arghajit/playwright-pulse-reporter` package. It reads the `pulse-report/playwright-pulse-report.json` file (relative to your current directory) and creates `pulse-report/playwright-pulse-static-report.html`.
+3.  **Open the HTML file:** Open the generated `pulse-report/playwright-pulse-static-report.html` in your browser.
 
 This HTML file is self-contained and provides a detailed, interactive dashboard-like overview suitable for sharing or archiving.
 
@@ -118,10 +129,10 @@ This HTML file is self-contained and provides a detailed, interactive dashboard-
     npm install
     # or yarn install or pnpm install
     ```
-3.  **Copy the Report File:** Copy the `playwright-pulse-report.json` file generated by your tests (e.g., from your main project's `pulse-report-output` directory) into the **root directory** of *this dashboard project*.
+3.  **Copy the Report File:** Copy the `playwright-pulse-report.json` file generated by your tests (e.g., from your main project's `pulse-report` directory) into the **root directory** of *this dashboard project*.
     ```bash
     # Example: Copying from your main project to the dashboard project directory
-    cp ../my-playwright-project/pulse-report-output/playwright-pulse-report.json ./
+    cp ../my-playwright-project/pulse-report/playwright-pulse-report.json ./
     ```
     **Tip for Development:** You can also use the `sample-report.json` file included in this project for development:
     ```bash
@@ -169,9 +180,9 @@ To work on the reporter or the dashboard itself:
     ```
 5.  **Test static report generation:**
     ```bash
-    # 1. Ensure playwright-pulse-report.json exists in pulse-report-output
-    mkdir -p pulse-report-output
-    cp sample-report.json pulse-report-output/playwright-pulse-report.json
+    # 1. Ensure playwright-pulse-report.json exists in pulse-report
+    mkdir -p pulse-report
+    cp sample-report.json pulse-report/playwright-pulse-report.json
     # 2. Run the generation script directly using node (or via the bin command)
     node ./scripts/generate-static-report.mjs
     # or
@@ -186,7 +197,99 @@ To work on the reporter or the dashboard itself:
 *   `src/lib/data-reader.ts`: Server-side logic for reading the JSON report file (used by Next.js dashboard).
 *   `src/lib/data.ts`: Data fetching functions used by the Next.js dashboard components.
 *   `src/app/`: Contains the Next.js dashboard pages and components.
-*   `pulse-report-output/playwright-pulse-report.json`: (Generated by the reporter in the *user's project*) The primary data source.
-*   `pulse-report-output/playwright-pulse-static-report.html`: (Generated by the script in the *user's project*) The standalone HTML report.
+*   `pulse-report/playwright-pulse-report.json`: (Generated by the reporter in the *user's project*) The primary data source.
+*   `pulse-report/playwright-pulse-static-report.html`: (Generated by the script in the *user's project*) The standalone HTML report.
 *   `playwright-pulse-report.json`: (Manually copied to the *dashboard project root*) Used by the Next.js dashboard.
 *   `sample-report.json`: (Included in this project) Dummy data for development/testing visualization.
+
+
+## 📦 CI/CD: Playwright Pulse Report
+
+*   This project supports Playwright test execution with Pulse Reporting in GitHub Actions. Here's how Pulse reports are managed:
+
+```bash
+# Upload Pulse report from each shard (per matrix.config.type)
+- name: Upload Pulse Report results
+  if: success() || failure()
+  uses: actions/upload-artifact@v4
+  with:
+    name: pulse-report
+    path: pulse-report/
+
+# Download all pulse-report-* artifacts after all shards complete
+- name: Download Pulse Report artifacts
+  uses: actions/download-artifact@v4
+  with:
+    pattern: pulse-report
+    path: downloaded-artifacts
+
+# Merge all sharded JSON reports into one final output
+- name: Generate Pulse Report
+  run: |
+    npm run script merge-report
+    npm run script generate-report
+
+# Upload final merged report as CI artifact
+- name: Upload Pulse report
+  uses: actions/upload-artifact@v4
+  with:
+    name: pulse-report
+    path: pulse-report/
+```
+
+## 📦 CI/CD: Playwright Pulse Report (with Sharding Support)
+
+*   This project supports sharded Playwright test execution with Pulse Reporting in GitHub Actions. Here's how Pulse reports are managed across shards:
+
+```bash
+# Upload Pulse report from each shard (per matrix.config.type)
+- name: Upload Pulse Report results
+  if: success() || failure()
+  uses: actions/upload-artifact@v4
+  with:
+    name: pulse-report-${{ matrix.config.type }}
+    path: pulse-report/
+
+# Download all pulse-report-* artifacts after all shards complete
+- name: Download Pulse Report artifacts
+  uses: actions/download-artifact@v4
+  with:
+    pattern: pulse-report-*
+    path: downloaded-artifacts
+
+# Organize reports into a single folder and rename for merging
+- name: Organize Pulse Report
+  run: |
+    mkdir -p pulse-report
+    for dir in downloaded-artifacts/pulse-report-*; do
+      config_type=$(basename "$dir" | sed 's/pulse-report-//')
+      cp -r "$dir/attachments" "pulse-report/attachments"
+      cp "$dir/playwright-pulse-report.json" "pulse-report/playwright-pulse-report-${config_type}.json"
+    done
+
+# Merge all sharded JSON reports into one final output
+- name: Generate Pulse Report
+  run: |
+    npm run script merge-report
+    npm run script generate-report
+
+# Upload final merged report as CI artifact
+- name: Upload Pulse report
+  uses: actions/upload-artifact@v4
+  with:
+    name: pulse-report
+    path: pulse-report/
+```
+
+##  🧠 Notes:
+
+*   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.
+
+## Fixes:
+
+### -   "0.1.1" : Added Sharding Support
+### -  "0.1.2" : Fixed browser filter and Added Browser Tag in Test Suite Card

package/dist/playwright-pulse-reporter.js

@@ -75,8 +75,8 @@ class PlaywrightPulseReporter {
         }
         const configDir = this.config.rootDir;
         this.outputDir = this.outputDir
-            ? path.resolve(configDir, this.outputDir)
-            : path.resolve(configDir, "pulse-report-output");
+          ? path.resolve(configDir, this.outputDir)
+          : path.resolve(configDir, "pulse-report");
         console.log(`PlaywrightPulseReporter: Final Output dir resolved to ${this.outputDir}`);
         if (this.shardIndex === undefined) {
             // Main process

package/dist/reporter/attachment-utils.js

@@ -45,11 +45,11 @@ 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-output"; // Base output directory
+    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-output/attachments/test_id_abc
+    const testAttachmentsDir = path.join(attachmentsBaseDir, attachmentsSubFolder); // e.g., pulse-report/attachments/test_id_abc
     try {
         if (!fs.existsSync(testAttachmentsDir)) {
             fs.mkdirSync(testAttachmentsDir, { recursive: true });

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

@@ -72,7 +72,7 @@ class PlaywrightPulseReporter {
         this.baseOutputFile = (_a = options.outputFile) !== null && _a !== void 0 ? _a : this.baseOutputFile;
         // Determine outputDir relative to config file or rootDir
         // The actual resolution happens in onBegin where config is available
-        this.outputDir = (_b = options.outputDir) !== null && _b !== void 0 ? _b : "pulse-report-output";
+        this.outputDir = (_b = options.outputDir) !== null && _b !== void 0 ? _b : "pulse-report";
         this.attachmentsDir = path.join(this.outputDir, ATTACHMENTS_SUBDIR); // Initial path, resolved fully in onBegin
         // console.log(`Pulse Reporter Init: Configured outputDir option: ${options.outputDir}, Base file: ${this.baseOutputFile}`);
     }
@@ -90,7 +90,7 @@ class PlaywrightPulseReporter {
         const configFileDir = this.config.configFile
             ? path.dirname(this.config.configFile)
             : configDir;
-        this.outputDir = path.resolve(configFileDir, (_a = this.options.outputDir) !== null && _a !== void 0 ? _a : "pulse-report-output");
+        this.outputDir = path.resolve(configFileDir, (_a = this.options.outputDir) !== null && _a !== void 0 ? _a : "pulse-report");
         // Resolve attachmentsDir relative to the final outputDir
         this.attachmentsDir = path.resolve(this.outputDir, ATTACHMENTS_SUBDIR);
         // Update options with the resolved absolute path for internal use
@@ -121,7 +121,7 @@ class PlaywrightPulseReporter {
         // Optional: Log test start if needed
         // console.log(`Starting test: ${test.title}`);
     }
-    async processStep(step, testId) {
+    async processStep(step, testId, browserName) {
         var _a, _b, _c, _d;
         // Determine actual step status (don't inherit from parent)
         let stepStatus = "passed";
@@ -148,6 +148,7 @@ class PlaywrightPulseReporter {
             duration: duration,
             startTime: startTime,
             endTime: endTime,
+            browser: browserName,
             errorMessage: errorMessage,
             stackTrace: ((_d = step.error) === null || _d === void 0 ? void 0 : _d.stack) || undefined,
             codeLocation: codeLocation || undefined,
@@ -161,7 +162,10 @@ class PlaywrightPulseReporter {
         };
     }
     async onTestEnd(test, result) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        // Get the most accurate browser name
+        const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
+        const browserName = ((_b = project === null || project === void 0 ? void 0 : project.use) === null || _b === void 0 ? void 0 : _b.defaultBrowserType) || "unknown";
         const testStatus = convertStatus(result.status, test);
         const startTime = new Date(result.startTime);
         const endTime = new Date(startTime.getTime() + result.duration);
@@ -175,7 +179,7 @@ class PlaywrightPulseReporter {
         const processAllSteps = async (steps, parentTestStatus) => {
             let processed = [];
             for (const step of steps) {
-                const processedStep = await this.processStep(step, testIdForFiles);
+                const processedStep = await this.processStep(step, testIdForFiles, browserName);
                 processed.push(processedStep);
                 if (step.steps && step.steps.length > 0) {
                     const nestedSteps = await processAllSteps(step.steps, processedStep.status);
@@ -188,7 +192,7 @@ class PlaywrightPulseReporter {
         // --- Extract Code Snippet ---
         let codeSnippet = undefined;
         try {
-            if (((_a = test.location) === null || _a === void 0 ? void 0 : _a.file) && ((_b = test.location) === null || _b === void 0 ? void 0 : _b.line) && ((_c = test.location) === null || _c === void 0 ? void 0 : _c.column)) {
+            if (((_c = test.location) === null || _c === void 0 ? void 0 : _c.file) && ((_d = test.location) === null || _d === void 0 ? void 0 : _d.line) && ((_e = test.location) === null || _e === void 0 ? void 0 : _e.column)) {
                 const relativePath = path.relative(this.config.rootDir, test.location.file);
                 codeSnippet = `Test defined at: ${relativePath}:${test.location.line}:${test.location.column}`;
             }
@@ -201,17 +205,18 @@ class PlaywrightPulseReporter {
             id: test.id || `${test.title}-${startTime.toISOString()}-${(0, crypto_1.randomUUID)()}`, // Use the original ID logic here
             runId: "TBD", // Will be set later
             name: test.titlePath().join(" > "),
-            suiteName: ((_d = this.config.projects[0]) === null || _d === void 0 ? void 0 : _d.name) || "Default Suite",
+            suiteName: ((_f = this.config.projects[0]) === null || _f === void 0 ? void 0 : _f.name) || "Default Suite",
             status: testStatus,
             duration: result.duration,
             startTime: startTime,
             endTime: endTime,
+            browser: browserName,
             retries: result.retry,
-            steps: ((_e = result.steps) === null || _e === void 0 ? void 0 : _e.length)
+            steps: ((_g = result.steps) === null || _g === void 0 ? void 0 : _g.length)
                 ? await processAllSteps(result.steps, testStatus)
                 : [],
-            errorMessage: (_f = result.error) === null || _f === void 0 ? void 0 : _f.message,
-            stackTrace: (_g = result.error) === null || _g === void 0 ? void 0 : _g.stack,
+            errorMessage: (_h = result.error) === null || _h === void 0 ? void 0 : _h.message,
+            stackTrace: (_j = result.error) === null || _j === void 0 ? void 0 : _j.stack,
             codeSnippet: codeSnippet,
             tags: test.tags.map((tag) => tag.startsWith("@") ? tag.substring(1) : tag),
             screenshots: [],

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

@@ -76,33 +76,51 @@ class PlaywrightPulseReporter {
         return this.shardIndex === undefined || this.shardIndex === 0;
     }
     onBegin(config, suite) {
-        this.config = config;
-        this.suite = suite;
-        this.runStartTime = Date.now();
-        // Determine sharding configuration
-        const totalShards = parseInt(process.env.PLAYWRIGHT_SHARD_TOTAL || "1", 10);
-        this.isSharded = totalShards > 1;
-        if (process.env.PLAYWRIGHT_SHARD_INDEX !== undefined) {
-            this.shardIndex = parseInt(process.env.PLAYWRIGHT_SHARD_INDEX, 10);
-        }
-        // Resolve outputDir relative to playwright config directory if possible, otherwise use cwd
-        // This needs the config object, so it's done in onBegin
-        const configDir = this.config.rootDir; // Playwright config directory
-        // Use outputDir from options if provided and resolve it relative to configDir, otherwise default
-        this.outputDir = this.outputDir
-            ? path.resolve(configDir, this.outputDir)
-            : path.resolve(configDir, "pulse-report-output"); // Default to 'pulse-report-output' relative to config
-        console.log(`PlaywrightPulseReporter: Final Output dir resolved to ${this.outputDir}`);
-        if (this.shardIndex === undefined) {
-            // Main process
-            console.log(`PlaywrightPulseReporter: Starting test run with ${suite.allTests().length} tests${this.isSharded ? ` across ${totalShards} shards` : ""}. Outputting to ${this.outputDir}`);
-            // Clean up any leftover temp files from previous runs in the main process
-            this._cleanupTemporaryFiles().catch((err) => console.error("Pulse Reporter: Error cleaning up temp files:", err));
-        }
-        else {
-            // Shard process
-            console.log(`PlaywrightPulseReporter: Shard ${this.shardIndex + 1}/${totalShards} starting. Outputting temp results to ${this.outputDir}`);
-        }
+      this.config = config;
+      this.suite = suite;
+      this.runStartTime = Date.now();
+      // Determine sharding configuration
+      const totalShards = parseInt(
+        process.env.PLAYWRIGHT_SHARD_TOTAL || "1",
+        10
+      );
+      this.isSharded = totalShards > 1;
+      if (process.env.PLAYWRIGHT_SHARD_INDEX !== undefined) {
+        this.shardIndex = parseInt(process.env.PLAYWRIGHT_SHARD_INDEX, 10);
+      }
+      // Resolve outputDir relative to playwright config directory if possible, otherwise use cwd
+      // This needs the config object, so it's done in onBegin
+      const configDir = this.config.rootDir; // Playwright config directory
+      // Use outputDir from options if provided and resolve it relative to configDir, otherwise default
+      this.outputDir = this.outputDir
+        ? path.resolve(configDir, this.outputDir)
+        : path.resolve(configDir, "pulse-report"); // Default to 'pulse-report' relative to config
+      console.log(
+        `PlaywrightPulseReporter: Final Output dir resolved to ${this.outputDir}`
+      );
+      if (this.shardIndex === undefined) {
+        // Main process
+        console.log(
+          `PlaywrightPulseReporter: Starting test run with ${
+            suite.allTests().length
+          } tests${
+            this.isSharded ? ` across ${totalShards} shards` : ""
+          }. Outputting to ${this.outputDir}`
+        );
+        // Clean up any leftover temp files from previous runs in the main process
+        this._cleanupTemporaryFiles().catch((err) =>
+          console.error("Pulse Reporter: Error cleaning up temp files:", err)
+        );
+      } else {
+        // Shard process
+        console.log(
+          `PlaywrightPulseReporter: Shard ${
+            this.shardIndex + 1
+          }/${totalShards} starting. Outputting temp results to ${
+            this.outputDir
+          }`
+        );
+      }
     }
     onTestBegin(test) {
         // Optional: Log test start (maybe only in main process or first shard?)

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export interface TestStep {
     duration: number;
     startTime: Date;
     endTime: Date;
+    browser: string;
     errorMessage?: string;
     stackTrace?: string;
     codeLocation?: string;
@@ -29,6 +30,7 @@ export interface TestResult {
     tags?: string[];
     suiteName?: string;
     runId: string;
+    browser: string;
     screenshots?: string[];
     videoPath?: string;
     tracePath?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/playwright-pulse-report",
   "author": "Arghajit Singha",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "keywords": [
     "playwright",
@@ -21,7 +21,8 @@
   ],
   "license": "MIT",
   "bin": {
-    "generate-pulse-report": "./scripts/generate-static-report.mjs"
+    "generate-pulse-report": "./scripts/generate-static-report.mjs",
+    "merge-pulse-report": "./scripts/merge-pulse-report.js"
   },
   "exports": {
     ".": {

package/scripts/generate-static-report.mjs

@@ -21,7 +21,7 @@ try {
 }
 
 // Default configuration
-const DEFAULT_OUTPUT_DIR = "pulse-report-output";
+const DEFAULT_OUTPUT_DIR = "pulse-report";
 const DEFAULT_JSON_FILE = "playwright-pulse-report.json";
 const DEFAULT_HTML_FILE = "playwright-pulse-static-report.html";
 
@@ -221,7 +221,7 @@ function getSuitesData(results) {
   const suitesMap = new Map();
 
   results.forEach((test) => {
-    const browser = test.name.split(" > ")[1]; // Extract browser (chromium/firefox/webkit)
+    const browser = test.browser; // Extract browser (chromium/firefox/webkit)
     const suiteName = test.suiteName;
     const key = `${suiteName}|${browser}`;
 
@@ -231,6 +231,7 @@ function getSuitesData(results) {
         name: `${suiteName} (${browser})`,
         status: test.status,
         count: 0,
+        browser: browser,
       });
     }
     suitesMap.get(key).count++;
@@ -267,9 +268,7 @@ function generateSuitesWidget(suitesData) {
           suite.count !== 1 ? "s" : ""
         }</span>
       </div>
-      <span class="browser-name">${suite.name
-        .split(" (")[1]
-        .replace(")", "")}</span>
+      <span class="browser-name">${suite.browser}</span>
     </div>
     `
       )
@@ -472,8 +471,7 @@ function generateHTML(reportData) {
 
     return results
       .map((test, index) => {
-        const browserMatch = test.name.match(/ > (\w+) > /);
-        const browser = browserMatch ? browserMatch[1] : "unknown";
+        const browser = test.browser || "unknown";
         const testName = test.name.split(" > ").pop() || test.name;
 
         // Generate steps HTML recursively
@@ -1275,12 +1273,7 @@ function generateHTML(reportData) {
                 <select id="filter-browser">
                     <option value="">All Browsers</option>
                     ${Array.from(
-                      new Set(
-                        results.map((test) => {
-                          const match = test.name.match(/ > (\w+) > /);
-                          return match ? match[1] : "unknown";
-                        })
-                      )
+                      new Set(results.map((test) => test.browser || "unknown"))
                     )
                       .map(
                         (browser) => `

package/scripts/merge-pulse-report.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+const REPORT_DIR = "./pulse-report"; // Or change this to your reports directory
+const OUTPUT_FILE = "playwright-pulse-report.json";
+
+function getReportFiles(dir) {
+  return fs
+    .readdirSync(dir)
+    .filter(
+      (file) =>
+        file.startsWith("playwright-pulse-report-") && file.endsWith(".json")
+    );
+}
+
+function mergeReports(files) {
+  let combinedRun = {
+    totalTests: 0,
+    passed: 0,
+    failed: 0,
+    skipped: 0,
+    duration: 0,
+  };
+
+  let combinedResults = [];
+
+  let latestTimestamp = "";
+  let latestGeneratedAt = "";
+
+  for (const file of files) {
+    const filePath = path.join(REPORT_DIR, file);
+    const json = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+
+    const run = json.run || {};
+    combinedRun.totalTests += run.totalTests || 0;
+    combinedRun.passed += run.passed || 0;
+    combinedRun.failed += run.failed || 0;
+    combinedRun.skipped += run.skipped || 0;
+    combinedRun.duration += run.duration || 0;
+
+    if (json.results) {
+      combinedResults.push(...json.results);
+    }
+
+    if (run.timestamp > latestTimestamp) latestTimestamp = run.timestamp;
+    if (json.metadata?.generatedAt > latestGeneratedAt)
+      latestGeneratedAt = json.metadata.generatedAt;
+  }
+
+  const finalJson = {
+    run: {
+      id: `merged-${Date.now()}`,
+      timestamp: latestTimestamp,
+      ...combinedRun,
+    },
+    results: combinedResults,
+    metadata: {
+      generatedAt: latestGeneratedAt,
+    },
+  };
+
+  return finalJson;
+}
+
+// Main execution
+const reportFiles = getReportFiles(REPORT_DIR);
+
+if (reportFiles.length === 0) {
+  console.log("No matching JSON report files found.");
+  process.exit(1);
+}
+
+const merged = mergeReports(reportFiles);
+
+fs.writeFileSync(
+  path.join(REPORT_DIR, OUTPUT_FILE),
+  JSON.stringify(merged, null, 2)
+);
+console.log(`✅ Merged report saved as ${OUTPUT_FILE}`);