@arghajit/playwright-pulse-report 0.1.1 → 0.1.2

package/README.md

@@ -207,7 +207,7 @@ To work on the reporter or the dashboard itself:
 
 *   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()
@@ -241,7 +241,7 @@ To work on the reporter or the dashboard itself:
 
 *   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()
@@ -280,6 +280,7 @@ To work on the reporter or the dashboard itself:
     name: pulse-report
     path: pulse-report/
 ```
+
 ##  🧠 Notes:
 
 *   Each shard generates its own playwright-pulse-report.json inside pulse-report/.
@@ -287,3 +288,8 @@ To work on the reporter or the dashboard itself:
 *   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/reporter/attachment-utils.js

@@ -45,100 +45,62 @@ 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
-  try {
-    if (!fs.existsSync(testAttachmentsDir)) {
-      fs.mkdirSync(testAttachmentsDir, { recursive: true });
-    }
-  } catch (error) {
-    console.error(
-      `Pulse Reporter: Failed to create attachments directory: ${testAttachmentsDir}`,
-      error
-    );
-    return; // Stop processing if directory creation fails
-  }
-  if (!pwResult.attachments) return;
-  const { base64Images } = config; // Get base64 embedding option
-  pulseResult.screenshots = []; // Initialize screenshots array
-  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;
+    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
+    try {
+        if (!fs.existsSync(testAttachmentsDir)) {
+            fs.mkdirSync(testAttachmentsDir, { recursive: true });
+        }
     }
-    // Determine filename
-    const safeName = name.replace(/[^a-zA-Z0-9_.-]/g, "_"); // Sanitize original name
-    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
-      );
-    } else if (name === "trace" || contentType === "application/zip") {
-      // Trace files are zips
-      handleAttachment(
-        attachmentPath,
-        body,
-        fullPath,
-        relativePath,
-        "tracePath",
-        pulseResult
-      );
-    } 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
+    catch (error) {
+        console.error(`Pulse Reporter: Failed to create attachments directory: ${testAttachmentsDir}`, error);
+        return; // Stop processing if directory creation fails
     }
-  });
+    if (!pwResult.attachments)
+        return;
+    const { base64Images } = config; // Get base64 embedding option
+    pulseResult.screenshots = []; // Initialize screenshots array
+    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 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);
+        }
+        else if (name === "trace" || contentType === "application/zip") {
+            // Trace files are zips
+            handleAttachment(attachmentPath, body, fullPath, relativePath, "tracePath", pulseResult);
+        }
+        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
+        }
+    });
 }
 /**
  * Handles image attachments, either embedding as base64 or copying the file.

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

@@ -72,10 +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";
+        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}`);
     }
@@ -93,12 +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"
-        );
+        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
@@ -129,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";
@@ -156,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,
@@ -169,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);
@@ -183,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);
@@ -196,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}`;
             }
@@ -209,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/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.1",
+  "version": "0.1.2",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "keywords": [
     "playwright",

package/scripts/generate-static-report.mjs

@@ -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,6 +268,7 @@ function generateSuitesWidget(suitesData) {
           suite.count !== 1 ? "s" : ""
         }</span>
       </div>
+      <span class="browser-name">${suite.browser}</span>
     </div>
     `
       )
@@ -469,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
@@ -1272,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) => `
@@ -1533,4 +1529,4 @@ async function main() {
 }
 
 // Run the main function
-main();
+main();