@arghajit/dummy 0.3.17 → 0.3.19

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,35 @@ 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");
+            if (targetLine < 1 || targetLine > lines.length) {
+                return undefined;
+            }
+            const contextLines = 2;
+            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] || "";
+                const prefix = isTargetLine ? ">" : " ";
+                snippetLines.push(`${prefix} ${lineNum.toString().padStart(4)} | ${lineContent}`);
+                if (isTargetLine && targetColumn > 0) {
+                    const pointer = "  " + " ".repeat(4) + " | " + " ".repeat(Math.max(0, targetColumn)) + "^";
+                    snippetLines.push(pointer);
+                }
+            }
+            return snippetLines.length > 0 ? snippetLines.join("\n") : undefined;
+        }
+        catch (error) {
+            console.error(`Failed to extract code snippet from ${filePath}:${targetLine}:${targetColumn}`, error);
+            return undefined;
+        }
+    }
     getBrowserDetails(test) {
         var _a, _b, _c, _d;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
@@ -180,8 +209,18 @@ 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}`;
+            try {
+                codeSnippet = await this.extractCodeSnippet(step.location.file, step.location.line, step.location.column);
+                if (!codeSnippet) {
+                    console.warn(`Pulse Reporter: extractCodeSnippet returned undefined for step "${step.title}" at ${step.location.file}:${step.location.line}:${step.location.column}`);
+                }
+            }
+            catch (error) {
+                console.error(`Pulse Reporter: Failed to extract code snippet for step "${step.title}":`, error);
+            }
         }
         return {
             id: `${testId}_step_${startTime.toISOString()}-${duration}-${(0, crypto_1.randomUUID)()}`,
@@ -194,6 +233,7 @@ 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")
@@ -230,8 +270,7 @@ class PlaywrightPulseReporter {
         let codeSnippet = undefined;
         try {
             if (((_b = test.location) === null || _b === void 0 ? void 0 : _b.file) && ((_c = test.location) === null || _c === void 0 ? void 0 : _c.line) && ((_d = test.location) === null || _d === void 0 ? void 0 : _d.column)) {
-                const relativePath = path.relative(this.config.rootDir, test.location.file);
-                codeSnippet = `Test defined at: ${relativePath}:${test.location.line}:${test.location.column}`;
+                codeSnippet = await this.extractCodeSnippet(test.location.file, test.location.line, test.location.column);
             }
         }
         catch (e) {

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export interface TestStep {
     errorMessage?: string;
     stackTrace?: string;
     codeLocation?: string;
+    codeSnippet?: string;
     isHook?: boolean;
     hookType?: "before" | "after";
     isFailedStep?: boolean;
@@ -68,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.17",
+  "version": "0.3.19",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://arghajit47.github.io/playwright-pulse/",
   "repository": {
@@ -34,12 +34,14 @@
   ],
   "license": "MIT",
   "bin": {
+    "logo": "node scripts/terminal-logo.mjs",
     "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",
-    "generate-email-report": "scripts/generate-email-report.mjs"
+    "generate-email-report": "scripts/generate-email-report.mjs",
+    "pulse-logo": "scripts/terminal-logo.mjs"
   },
   "exports": {
     ".": {
@@ -87,6 +89,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

@@ -3,6 +3,7 @@
 import * as fs from "fs/promises";
 import path from "path";
 import { getOutputDir } from "./config-reader.mjs";
+import { animate } from "./terminal-logo.mjs";
 
 // Use dynamic import for chalk as it's ESM only
 let chalk;
@@ -712,6 +713,8 @@ function generateMinifiedHTML(reportData) {
   `;
 }
 async function main() {
+  await animate();
+  
   const outputDir = await getOutputDir(customOutputDir);
   const reportJsonPath = path.resolve(outputDir, DEFAULT_JSON_FILE);
   const minifiedReportHtmlPath = path.resolve(outputDir, MINIFIED_HTML_FILE); // Path for the new minified HTML
@@ -763,8 +766,8 @@ async function main() {
     await fs.writeFile(minifiedReportHtmlPath, htmlContent, "utf-8");
     console.log(
       chalk.green.bold(
-        `🎉 Minified Pulse summary report generated successfully at: ${minifiedReportHtmlPath}`
-      )
+        `Minified Pulse summary report generated successfully at: ${minifiedReportHtmlPath}`,
+      ),
     );
     console.log(chalk.gray(`(This HTML file is designed to be lightweight)`));
   } catch (error) {