@arghajit/dummy 0.3.16 → 0.3.18

package/README.md

@@ -10,7 +10,7 @@ _The ultimate Playwright reporter — Interactive dashboard with historical tren
 
 ## [Live Demo](https://arghajit47.github.io/playwright-pulse/demo.html)
 
-## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/features.svg)
+## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/features.svg)
 
 ## **Documentation**: [Pulse Report](https://arghajit47.github.io/playwright-pulse/)
 
@@ -21,7 +21,7 @@ The project provides these utility commands:
 | 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, with a dark theme and better initial load handling                                            |
+| `generate-pulse-report`| Generates `playwright-pulse-static-report.html`, Self-contained, no server required, Preserves all dashboard functionality, all the attachments are embedded in the report, no need to have attachments/ directory when viewing the report, with a dark theme and better initial load handling                                            |
 | `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                                    |
@@ -101,24 +101,7 @@ npx merge-pulse-report --outputDir {YOUR_CUSTOM_REPORT_FOLDER}
 
 **Important:** Make sure your `playwright.config.ts` custom directory matches the CLI script:
 
-```typescript
-import { defineConfig } from "@playwright/test";
-import * as path from "path";
-
-const CUSTOM_REPORT_DIR = path.resolve(__dirname, "{YOUR_CUSTOM_REPORT_FOLDER}");
-
-export default defineConfig({
-  reporter: [
-    ["list"],
-    [
-      "@arghajit/playwright-pulse-report",
-      {
-        outputDir: CUSTOM_REPORT_DIR,  // Must match CLI --outputDir
-      },
-    ],
-  ],
-});
-```
+![Custom Output Directory](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/custom-output-directory-config.png)
 
 ## 📊 Report Options
 
@@ -240,76 +223,100 @@ Under the hood, this will:
 ### Basic Workflow
 
 ```yaml
-# 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 generate-report [or, npm run generate-pulse-report]
-
-# Upload final merged report as CI artifact
-- name: Upload Pulse report
-  uses: actions/upload-artifact@v4
-  with:
-    name: pulse-report
+# .github/workflows/playwright.yml
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
 ```
 
+For more details, please refer to the [Pulse Report Basic CI/CD Integration](https://arghajit47.github.io/playwright-pulse/advanced-usage.html).
+
 ### Sharded Workflow
 
 ```yaml
-# 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 merge-report
-    npm run generate-report [or, npm run generate-pulse-report]
-
-# Upload final merged report as CI artifact
-- name: Upload Pulse report
-  uses: actions/upload-artifact@v4
-  with:
-    name: pulse-report
-    path: pulse-report/
+# .github/workflows/playwright.yml
+name: Playwright Tests with Pulse Report
+on: [push]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npx playwright test --shard=${{ matrix.shard }}/${{ strategy.job-total }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: pulse-report-shard-${{ matrix.shard }}
+          path: pulse-report/
+          retention-days: 1
+
+  merge-report:
+    needs: test
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm ci
+
+      # Download all shard artifacts to a single directory
+      - uses: actions/download-artifact@v4
+        with:
+          path: all-reports
+          pattern: pulse-report-shard-*
+
+      # Merge all shard reports into a single report
+      - run: npx merge-pulse-report -o all-reports
+
+      # Generate the final HTML report
+      - run: npx generate-pulse-report -o all-reports
+
+      # Upload the final merged report
+      - uses: actions/upload-artifact@v4
+        with:
+          name: final-playwright-pulse-report
+          path: all-reports/
+          retention-days: 7
 ```
 
+For more details, please refer to the [Pulse Report Sharded CI/CD Integration](https://arghajit47.github.io/playwright-pulse/sharding.html).
+
 ## 🧠 Notes
 
 - <strong>`npm run generate-report` generates a HTML report ( screenshots/images will be taken in realtime from 'attachments/' directory ).</strong>
@@ -319,13 +326,14 @@ Under the hood, this will:
 - 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.
 
-## ![Features](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images//pulse-folder-structures.svg)
+## ![Folder-Structure](https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/pulse-folder-structures.svg)
 
 ### 🚀 **Upgrade Now**
 
 ```bash
 npm install @arghajit/playwright-pulse-report@latest
 ```
+
 ---
 
 ## ⚙️ Advanced Configuration
@@ -340,7 +348,7 @@ 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
+```javascript
 // playwright.config.ts
 import { defineConfig } from "@playwright/test";
 import * as path from "path";

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

@@ -17,6 +17,7 @@ export declare class PlaywrightPulseReporter implements Reporter {
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase): void;
     private _getSeverity;
+    private extractCodeSnippet;
     private getBrowserDetails;
     private processStep;
     onTestEnd(test: TestCase, result: PwTestResult): Promise<void>;

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

@@ -116,6 +116,30 @@ class PlaywrightPulseReporter {
         const severityAnnotation = annotations.find((a) => a.type === "pulse_severity");
         return (severityAnnotation === null || severityAnnotation === void 0 ? void 0 : severityAnnotation.description) || "Medium";
     }
+    async extractCodeSnippet(filePath, targetLine, targetColumn) {
+        try {
+            const fileContent = await fs.readFile(filePath, "utf-8");
+            const lines = fileContent.split("\n");
+            const contextLines = 1;
+            const startLine = Math.max(0, targetLine - contextLines - 1);
+            const endLine = Math.min(lines.length, targetLine + contextLines);
+            const snippetLines = [];
+            for (let i = startLine; i < endLine; i++) {
+                const lineNum = i + 1;
+                const isTargetLine = lineNum === targetLine;
+                const lineContent = lines[i] || "";
+                snippetLines.push(`${lineNum.toString().padStart(4)} | ${lineContent}`);
+                if (isTargetLine) {
+                    const pointer = " ".repeat(4) + " | " + " ".repeat(targetColumn) + "^";
+                    snippetLines.push(pointer);
+                }
+            }
+            return snippetLines.join("\n");
+        }
+        catch (error) {
+            return undefined;
+        }
+    }
     getBrowserDetails(test) {
         var _a, _b, _c, _d;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
@@ -166,7 +190,7 @@ class PlaywrightPulseReporter {
         }
         return finalString.trim();
     }
-    async processStep(step, testId, browserDetails, testCase) {
+    async processStep(step, testId, browserDetails, testCase, isFailedStep = false) {
         var _a, _b, _c, _d;
         let stepStatus = "passed";
         let errorMessage = ((_a = step.error) === null || _a === void 0 ? void 0 : _a.message) || undefined;
@@ -180,8 +204,10 @@ class PlaywrightPulseReporter {
         const startTime = new Date(step.startTime);
         const endTime = new Date(startTime.getTime() + Math.max(0, duration));
         let codeLocation = "";
+        let codeSnippet = undefined;
         if (step.location) {
             codeLocation = `${path.relative(this.config.rootDir, step.location.file)}:${step.location.line}:${step.location.column}`;
+            codeSnippet = await this.extractCodeSnippet(step.location.file, step.location.line, step.location.column);
         }
         return {
             id: `${testId}_step_${startTime.toISOString()}-${duration}-${(0, crypto_1.randomUUID)()}`,
@@ -194,29 +220,36 @@ class PlaywrightPulseReporter {
             errorMessage: errorMessage,
             stackTrace: ((_d = step.error) === null || _d === void 0 ? void 0 : _d.stack) || undefined,
             codeLocation: codeLocation || undefined,
+            codeSnippet: codeSnippet,
             isHook: step.category === "hook",
             hookType: step.category === "hook"
                 ? step.title.toLowerCase().includes("before")
                     ? "before"
                     : "after"
                 : undefined,
+            isFailedStep: isFailedStep,
             steps: [],
         };
     }
     async onTestEnd(test, result) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
         const browserDetails = this.getBrowserDetails(test);
         const testStatus = convertStatus(result.status, test);
         const startTime = new Date(result.startTime);
         const endTime = new Date(startTime.getTime() + result.duration);
-        const processAllSteps = async (steps) => {
+        const processAllSteps = async (steps, parentFailed = false) => {
             let processed = [];
+            let foundFailedStep = false;
             for (const step of steps) {
-                const processedStep = await this.processStep(step, test.id, browserDetails, test);
+                const isThisStepFailed = !foundFailedStep && (step.error !== undefined || (testStatus === "failed" && !foundFailedStep));
+                if (isThisStepFailed) {
+                    foundFailedStep = true;
+                }
+                const processedStep = await this.processStep(step, test.id, browserDetails, test, isThisStepFailed);
                 processed.push(processedStep);
                 if (step.steps && step.steps.length > 0) {
-                    processedStep.steps = await processAllSteps(step.steps);
+                    processedStep.steps = await processAllSteps(step.steps, isThisStepFailed);
                 }
             }
             return processed;
@@ -268,10 +301,10 @@ class PlaywrightPulseReporter {
             endTime: endTime,
             browser: browserDetails,
             retries: result.retry,
-            steps: ((_h = result.steps) === null || _h === void 0 ? void 0 : _h.length) ? await processAllSteps(result.steps) : [],
-            errorMessage: (_j = result.error) === null || _j === void 0 ? void 0 : _j.message,
-            stackTrace: (_k = result.error) === null || _k === void 0 ? void 0 : _k.stack,
-            snippet: (_l = result.error) === null || _l === void 0 ? void 0 : _l.snippet,
+            steps: result.steps ? await processAllSteps(result.steps) : [],
+            errorMessage: (_h = result.error) === null || _h === void 0 ? void 0 : _h.message,
+            stackTrace: (_j = result.error) === null || _j === void 0 ? void 0 : _j.stack,
+            snippet: (_k = result.error) === null || _k === void 0 ? void 0 : _k.snippet,
             codeSnippet: codeSnippet,
             tags: test.tags.map((tag) => tag.startsWith("@") ? tag.substring(1) : tag),
             severity: this._getSeverity(test.annotations),
@@ -281,7 +314,7 @@ class PlaywrightPulseReporter {
             attachments: [],
             stdout: stdoutMessages.length > 0 ? stdoutMessages : undefined,
             stderr: stderrMessages.length > 0 ? stderrMessages : undefined,
-            annotations: ((_m = test.annotations) === null || _m === void 0 ? void 0 : _m.length) > 0 ? test.annotations : undefined,
+            annotations: ((_l = test.annotations) === null || _l === void 0 ? void 0 : _l.length) > 0 ? test.annotations : undefined,
             ...testSpecificData,
         };
         for (const [index, attachment] of result.attachments.entries()) {
@@ -298,16 +331,16 @@ class PlaywrightPulseReporter {
                 await this._ensureDirExists(path.dirname(absoluteDestPath));
                 await fs.copyFile(attachment.path, absoluteDestPath);
                 if (attachment.contentType.startsWith("image/")) {
-                    (_o = pulseResult.screenshots) === null || _o === void 0 ? void 0 : _o.push(relativeDestPath);
+                    (_m = pulseResult.screenshots) === null || _m === void 0 ? void 0 : _m.push(relativeDestPath);
                 }
                 else if (attachment.contentType.startsWith("video/")) {
-                    (_p = pulseResult.videoPath) === null || _p === void 0 ? void 0 : _p.push(relativeDestPath);
+                    (_o = pulseResult.videoPath) === null || _o === void 0 ? void 0 : _o.push(relativeDestPath);
                 }
                 else if (attachment.name === "trace") {
                     pulseResult.tracePath = relativeDestPath;
                 }
                 else {
-                    (_q = pulseResult.attachments) === null || _q === void 0 ? void 0 : _q.push({
+                    (_p = pulseResult.attachments) === null || _p === void 0 ? void 0 : _p.push({
                         name: attachment.name,
                         path: relativeDestPath,
                         contentType: attachment.contentType,

package/dist/types/index.d.ts

@@ -11,8 +11,10 @@ export interface TestStep {
     errorMessage?: string;
     stackTrace?: string;
     codeLocation?: string;
+    codeSnippet?: string;
     isHook?: boolean;
     hookType?: "before" | "after";
+    isFailedStep?: boolean;
     steps?: TestStep[];
 }
 export interface TestResult {
@@ -67,7 +69,7 @@ export interface TestRun {
     failed: number;
     skipped: number;
     duration: number;
-    environment?: EnvDetails;
+    environment?: EnvDetails | EnvDetails[];
 }
 export interface TrendDataPoint {
     date: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://arghajit47.github.io/playwright-pulse/",
   "repository": {
@@ -87,6 +87,8 @@
     "@playwright/test": ">=1.40.0"
   },
   "overrides": {
-    "glob": "^13.0.0"
+    "glob": "^13.0.0",
+    "minimatch": "^10.1.2",
+    "@isaacs/brace-expansion": "^5.0.1"
   }
 }

package/scripts/generate-email-report.mjs

@@ -608,7 +608,7 @@ function generateMinifiedHTML(reportData) {
         <footer class="report-footer">
             <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
                 <span>Created for</span>
-                <a href="https://playwright-pulse-report.netlify.app/" target="_blank" rel="noopener noreferrer">
+                <a href="https://arghajit47.github.io/playwright-pulse/" target="_blank" rel="noopener noreferrer">
                     Pulse Email Report
                 </a>
             </div>