@arghajit/playwright-pulse-report 0.3.0 → 0.3.1

package/README.md

@@ -90,13 +90,13 @@ All CLI scripts now support custom output directories, giving you full flexibili
 
 ```bash
 # Using custom directory
-npx generate-pulse-report --outputDir my-reports
+npx generate-pulse-report --outputDir {YOUR_CUSTOM_REPORT_FOLDER}
 npx generate-report -o test-results/e2e
 npx send-email --outputDir custom-pulse-reports
 
 # Using nested paths
 npx generate-pulse-report --outputDir reports/integration
-npx merge-pulse-report --outputDir my-test-reports
+npx merge-pulse-report --outputDir {YOUR_CUSTOM_REPORT_FOLDER}
 ```
 
 **Important:** Make sure your `playwright.config.ts` custom directory matches the CLI script:
@@ -105,7 +105,7 @@ npx merge-pulse-report --outputDir my-test-reports
 import { defineConfig } from "@playwright/test";
 import * as path from "path";
 
-const CUSTOM_REPORT_DIR = path.resolve(__dirname, "my-reports");
+const CUSTOM_REPORT_DIR = path.resolve(__dirname, "{YOUR_CUSTOM_REPORT_FOLDER}");
 
 export default defineConfig({
   reporter: [
@@ -174,6 +174,67 @@ The dashboard includes AI-powered test analysis that provides:
 - Failure pattern recognition
 - Suggested optimizations
 
+## 📧 Send Report to Mail
+
+The `send-email` CLI wraps the full email flow:
+
+- Generates a lightweight HTML summary (`pulse-email-summary.html`) from the latest `playwright-pulse-report.json`.
+- Builds a stats table (start time, duration, total, passed, failed, skipped, percentages).
+- Sends an email with that summary as both the body and an HTML attachment.
+
+### 1. Configure Recipients
+
+Set up to 5 recipients via environment variables:
+
+```bash
+RECIPIENT_EMAIL_1=recipient1@example.com
+RECIPIENT_EMAIL_2=recipient2@example.com
+RECIPIENT_EMAIL_3=recipient3@example.com
+RECIPIENT_EMAIL_4=recipient4@example.com
+RECIPIENT_EMAIL_5=recipient5@example.com
+```
+
+### 2. Choose Credential Flow
+
+The script supports two ways to obtain SMTP credentials:
+
+**Flow A – Environment-based credentials (recommended)**
+
+Provide mail host and credentials via environment variables:
+
+```bash
+PULSE_MAIL_HOST=gmail        # or: outlook
+PULSE_MAIL_USERNAME=you@example.com
+PULSE_MAIL_PASSWORD=your_app_password
+```
+
+- `PULSE_MAIL_HOST` supports `gmail` or `outlook` only.
+- For Gmail/Outlook, use an app password or SMTP-enabled credentials.
+
+**Flow B – Default Flow (fallback)**
+
+If the above variables are not set, the script fallbacks to default the mail host for compatibility.
+
+### 3. Run the CLI
+
+Use the default output directory:
+
+```bash
+npx send-email
+```
+
+Or point to a custom report directory (must contain `playwright-pulse-report.json`):
+
+```bash
+npx send-email --outputDir <YOUR_CUSTOM_REPORT_FOLDER>
+```
+
+Under the hood, this will:
+
+- Resolve the report directory (from `--outputDir` or `playwright.config.ts`).
+- Run `generate-email-report.mjs` to create `pulse-email-summary.html`.
+- Use Nodemailer to send the email via the selected provider (Gmail or Outlook).
+
 ## ⚙️ CI/CD Integration
 
 ### Basic Workflow

package/dist/pulse.d.ts

@@ -0,0 +1,12 @@
+export type PulseSeverityLevel = "Minor" | "Low" | "Medium" | "High" | "Critical";
+export declare const pulse: {
+    /**
+     * Sets the severity level for the current test.
+     * * @param level - The severity level ('Minor' | 'Low' | 'Medium' | 'High' | 'Critical')
+     * @example
+     * test('Login', async () => {
+     * pulse.severity('Critical');
+     * });
+     */
+    severity: (level: PulseSeverityLevel) => void;
+};

package/dist/pulse.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pulse = void 0;
+const test_1 = require("@playwright/test");
+exports.pulse = {
+    /**
+     * Sets the severity level for the current test.
+     * * @param level - The severity level ('Minor' | 'Low' | 'Medium' | 'High' | 'Critical')
+     * @example
+     * test('Login', async () => {
+     * pulse.severity('Critical');
+     * });
+     */
+    severity: (level) => {
+        const validLevels = ["Minor", "Low", "Medium", "High", "Critical"];
+        // Default to "Medium" if an invalid string is passed
+        const selectedLevel = validLevels.includes(level) ? level : "Medium";
+        // Add the annotation to Playwright's test info
+        test_1.test.info().annotations.push({
+            type: "pulse_severity",
+            description: selectedLevel,
+        });
+    },
+};

package/dist/reporter/index.d.ts

@@ -3,3 +3,5 @@ export default PlaywrightPulseReporter;
 export { PlaywrightPulseReporter };
 export type { PlaywrightPulseReport } from "../lib/report-types";
 export type { TestResult, TestRun, TestStep, TestStatus } from "../types";
+export { pulse } from "../pulse";
+export type { PulseSeverityLevel } from "../pulse";

package/dist/reporter/index.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaywrightPulseReporter = void 0;
+exports.pulse = exports.PlaywrightPulseReporter = void 0;
 // src/reporter/index.ts
 const playwright_pulse_reporter_1 = require("./playwright-pulse-reporter");
 Object.defineProperty(exports, "PlaywrightPulseReporter", { enumerable: true, get: function () { return playwright_pulse_reporter_1.PlaywrightPulseReporter; } });
 // Export the reporter class as the default export for CommonJS compatibility
 // and also as a named export for potential ES module consumers.
 exports.default = playwright_pulse_reporter_1.PlaywrightPulseReporter;
+// --- NEW: Export the pulse helper ---
+// This allows: import { pulse } from '@arghajit/playwright-pulse-report';
+var pulse_1 = require("../pulse"); // Adjust path based on where you placed pulse.ts
+Object.defineProperty(exports, "pulse", { enumerable: true, get: function () { return pulse_1.pulse; } });

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

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

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

@@ -109,6 +109,10 @@ class PlaywrightPulseReporter {
     onTestBegin(test) {
         console.log(`Starting test: ${test.title}`);
     }
+    _getSeverity(annotations) {
+        const severityAnnotation = annotations.find((a) => a.type === "pulse_severity");
+        return (severityAnnotation === null || severityAnnotation === void 0 ? void 0 : severityAnnotation.description) || "Medium";
+    }
     getBrowserDetails(test) {
         var _a, _b, _c, _d;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
@@ -197,7 +201,7 @@ class PlaywrightPulseReporter {
         };
     }
     async onTestEnd(test, result) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
         const browserDetails = this.getBrowserDetails(test);
         const testStatus = convertStatus(result.status, test);
@@ -224,6 +228,16 @@ class PlaywrightPulseReporter {
         catch (e) {
             console.warn(`Pulse Reporter: Could not extract code snippet for ${test.title}`, e);
         }
+        // 1. Get Spec File Name
+        const specFileName = ((_e = test.location) === null || _e === void 0 ? void 0 : _e.file)
+            ? path.basename(test.location.file)
+            : "n/a";
+        // 2. Get Describe Block Name
+        // Check if the immediate parent is a 'describe' block
+        let describeBlockName = "n/a";
+        if (((_f = test.parent) === null || _f === void 0 ? void 0 : _f.type) === "describe") {
+            describeBlockName = test.parent.title;
+        }
         const stdoutMessages = result.stdout.map((item) => typeof item === "string" ? item : item.toString());
         const stderrMessages = result.stderr.map((item) => typeof item === "string" ? item : item.toString());
         const maxWorkers = this.config.workers;
@@ -241,27 +255,30 @@ class PlaywrightPulseReporter {
         const pulseResult = {
             id: test.id,
             runId: "TBD",
+            describe: describeBlockName,
+            spec_file: specFileName,
             name: test.titlePath().join(" > "),
-            suiteName: (project === null || project === void 0 ? void 0 : project.name) || ((_e = this.config.projects[0]) === null || _e === void 0 ? void 0 : _e.name) || "Default Suite",
+            suiteName: (project === null || project === void 0 ? void 0 : project.name) || ((_g = this.config.projects[0]) === null || _g === void 0 ? void 0 : _g.name) || "Default Suite",
             status: testStatus,
             duration: result.duration,
             startTime: startTime,
             endTime: endTime,
             browser: browserDetails,
             retries: result.retry,
-            steps: ((_f = result.steps) === null || _f === void 0 ? void 0 : _f.length) ? await processAllSteps(result.steps) : [],
-            errorMessage: (_g = result.error) === null || _g === void 0 ? void 0 : _g.message,
-            stackTrace: (_h = result.error) === null || _h === void 0 ? void 0 : _h.stack,
-            snippet: (_j = result.error) === null || _j === void 0 ? void 0 : _j.snippet,
+            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,
             codeSnippet: codeSnippet,
             tags: test.tags.map((tag) => tag.startsWith("@") ? tag.substring(1) : tag),
+            severity: this._getSeverity(test.annotations),
             screenshots: [],
             videoPath: [],
             tracePath: undefined,
             attachments: [],
             stdout: stdoutMessages.length > 0 ? stdoutMessages : undefined,
             stderr: stderrMessages.length > 0 ? stderrMessages : undefined,
-            annotations: ((_k = test.annotations) === null || _k === void 0 ? void 0 : _k.length) > 0 ? test.annotations : undefined,
+            annotations: ((_m = test.annotations) === null || _m === void 0 ? void 0 : _m.length) > 0 ? test.annotations : undefined,
             ...testSpecificData,
         };
         for (const [index, attachment] of result.attachments.entries()) {
@@ -278,16 +295,16 @@ class PlaywrightPulseReporter {
                 await this._ensureDirExists(path.dirname(absoluteDestPath));
                 await fs.copyFile(attachment.path, absoluteDestPath);
                 if (attachment.contentType.startsWith("image/")) {
-                    (_l = pulseResult.screenshots) === null || _l === void 0 ? void 0 : _l.push(relativeDestPath);
+                    (_o = pulseResult.screenshots) === null || _o === void 0 ? void 0 : _o.push(relativeDestPath);
                 }
                 else if (attachment.contentType.startsWith("video/")) {
-                    (_m = pulseResult.videoPath) === null || _m === void 0 ? void 0 : _m.push(relativeDestPath);
+                    (_p = pulseResult.videoPath) === null || _p === void 0 ? void 0 : _p.push(relativeDestPath);
                 }
                 else if (attachment.name === "trace") {
                     pulseResult.tracePath = relativeDestPath;
                 }
                 else {
-                    (_o = pulseResult.attachments) === null || _o === void 0 ? void 0 : _o.push({
+                    (_q = pulseResult.attachments) === null || _q === void 0 ? void 0 : _q.push({
                         name: attachment.name,
                         path: relativeDestPath,
                         contentType: attachment.contentType,

package/dist/types/index.d.ts

@@ -17,6 +17,8 @@ export interface TestStep {
 }
 export interface TestResult {
     id: string;
+    describe?: string;
+    spec_file?: string;
     name: string;
     status: TestStatus;
     duration: number;
@@ -29,6 +31,7 @@ export interface TestResult {
     snippet?: string;
     codeSnippet?: string;
     tags?: string[];
+    severity?: "Minor" | "Low" | "Medium" | "High" | "Critical";
     suiteName?: string;
     runId: string;
     browser: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/playwright-pulse-report",
   "author": "Arghajit Singha",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://playwright-pulse-report.netlify.app/",
   "keywords": [
@@ -30,12 +30,12 @@
   ],
   "license": "MIT",
   "bin": {
-    "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-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"
   },
   "exports": {
     ".": {

package/scripts/config-reader.mjs

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 import * as fs from "fs";
 import * as path from "path";
 import { pathToFileURL } from "url";
@@ -24,9 +23,61 @@ async function findPlaywrightConfig() {
 }
 
 async function extractOutputDirFromConfig(configPath) {
+  let fileContent = "";
   try {
-    let config;
+    fileContent = fs.readFileSync(configPath, "utf-8");
+  } catch (e) {
+    // If we can't read the file, we can't parse or import it.
+    return null;
+  }
+
+  // 1. Strategy: Text Parsing (Safe & Fast)
+  // We try to read the file as text first. This finds the outputDir without
+  // triggering any Node.js warnings or errors.
+  try {
+    // Regex matches: outputDir: "value" or outputDir: 'value'
+    const match = fileContent.match(/outputDir:\s*["']([^"']+)["']/);
+
+    if (match && match[1]) {
+      return path.resolve(process.cwd(), match[1]);
+    }
+  } catch (e) {
+    // Ignore text reading errors
+  }
 
+  // 2. Safety Check: Detect ESM in CJS to Prevent Node Warnings
+  // The warning "To load an ES module..." happens when we try to import()
+  // a .js file containing ESM syntax (import/export) in a CJS package.
+  // We explicitly check for this and ABORT the import if found.
+  if (configPath.endsWith(".js")) {
+    let isModulePackage = false;
+    try {
+      const pkgPath = path.resolve(process.cwd(), "package.json");
+      if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+        isModulePackage = pkg.type === "module";
+      }
+    } catch (e) {}
+
+    if (!isModulePackage) {
+      // Heuristic: Check for ESM syntax (import/export at start of lines)
+      const hasEsmSyntax =
+        /^\s*import\s+/m.test(fileContent) ||
+        /^\s*export\s+/m.test(fileContent);
+
+      if (hasEsmSyntax) {
+        // We found ESM syntax in a .js file within a CJS project.
+        // Attempting to import this WILL trigger the Node.js warning.
+        // Since regex failed to find outputDir, and we can't import safely, we abort now.
+        return null;
+      }
+    }
+  }
+
+  // 3. Strategy: Dynamic Import
+  // If we passed the safety check, we try to import the config.
+  try {
+    let config;
     const configDir = dirname(configPath);
     const originalDirname = global.__dirname;
     const originalFilename = global.__filename;
@@ -39,73 +90,70 @@ async function extractOutputDirFromConfig(configPath) {
         try {
           const { register } = await import("node:module");
           const { pathToFileURL } = await import("node:url");
-
           register("ts-node/esm", pathToFileURL("./"));
-
           config = await import(pathToFileURL(configPath).href);
         } catch (tsError) {
-          try {
-            const tsNode = await import("ts-node");
-            tsNode.register({
-              transpileOnly: true,
-              compilerOptions: {
-                module: "ESNext",
-              },
-            });
-            config = await import(pathToFileURL(configPath).href);
-          } catch (fallbackError) {
-            console.error("Failed to load TypeScript config:", fallbackError);
-            return null;
-          }
+          const tsNode = await import("ts-node");
+          tsNode.register({
+            transpileOnly: true,
+            compilerOptions: { module: "commonjs" },
+          });
+          config = require(configPath);
         }
       } else {
+        // Try dynamic import for JS/MJS
         config = await import(pathToFileURL(configPath).href);
       }
-    } finally {
-      if (originalDirname !== undefined) {
-        global.__dirname = originalDirname;
-      } else {
-        delete global.__dirname;
-      }
-      if (originalFilename !== undefined) {
-        global.__filename = originalFilename;
-      } else {
-        delete global.__filename;
+
+      // Handle Default Export
+      if (config && config.default) {
+        config = config.default;
       }
-    }
 
-    const playwrightConfig = config.default || config;
-
-    if (playwrightConfig && Array.isArray(playwrightConfig.reporter)) {
-      for (const reporterConfig of playwrightConfig.reporter) {
-        if (Array.isArray(reporterConfig)) {
-          const [reporterPath, options] = reporterConfig;
-
-          if (
-            typeof reporterPath === "string" &&
-            (reporterPath.includes("playwright-pulse-report") ||
-              reporterPath.includes("@arghajit/playwright-pulse-report") ||
-              reporterPath.includes("@arghajit/dummy"))
-          ) {
-            if (options && options.outputDir) {
-              const resolvedPath =
-                typeof options.outputDir === "string"
-                  ? options.outputDir
-                  : options.outputDir;
-              console.log(`Found outputDir in config: ${resolvedPath}`);
-              return path.resolve(process.cwd(), resolvedPath);
+      if (config) {
+        // Check for Reporter Config
+        if (config.reporter) {
+          const reporters = Array.isArray(config.reporter)
+            ? config.reporter
+            : [config.reporter];
+
+          for (const reporter of reporters) {
+            const reporterName = Array.isArray(reporter)
+              ? reporter[0]
+              : reporter;
+            const reporterOptions = Array.isArray(reporter)
+              ? reporter[1]
+              : null;
+
+            if (
+              typeof reporterName === "string" &&
+              (reporterName.includes("playwright-pulse-report") ||
+                reporterName.includes("@arghajit/playwright-pulse-report") ||
+                reporterName.includes("@arghajit/dummy"))
+            ) {
+              if (reporterOptions && reporterOptions.outputDir) {
+                return path.resolve(process.cwd(), reporterOptions.outputDir);
+              }
             }
           }
         }
+
+        // Check for Global outputDir
+        if (config.outputDir) {
+          return path.resolve(process.cwd(), config.outputDir);
+        }
       }
+    } finally {
+      // Clean up globals
+      global.__dirname = originalDirname;
+      global.__filename = originalFilename;
     }
-
-    console.log("No matching reporter config found with outputDir");
-    return null;
   } catch (error) {
-    console.error("Error extracting outputDir from config:", error);
+    // SILENT CATCH: Do NOT log anything here.
     return null;
   }
+
+  return null;
 }
 
 export async function getOutputDir(customOutputDirFromArgs = null) {

package/scripts/generate-email-report.mjs

@@ -217,6 +217,40 @@ function generateMinifiedHTML(reportData) {
         const testFileParts = test.name.split(" > ");
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
+
+        // --- NEW: Severity Logic ---
+        const severity = test.severity || "Medium";
+        const getSeverityColor = (level) => {
+          switch (level) {
+            case "Minor":
+              return "#006064";
+            case "Low":
+              return "#FFA07A";
+            case "Medium":
+              return "#577A11";
+            case "High":
+              return "#B71C1C";
+            case "Critical":
+              return "#64158A";
+            default:
+              return "#577A11";
+          }
+        };
+        // We use inline styles here to ensure they render correctly in emails
+        const severityBadge = `<span style="background-color: ${getSeverityColor(
+          severity
+        )}; font-size: 0.8em; font-weight: 600; padding: 3px 8px; border-radius: 4px; color: #fff; margin-left: 10px; white-space: nowrap;">${severity}</span>`;
+
+        // --- NEW: Tags Logic ---
+        const tagsBadges = (test.tags || [])
+          .map(
+            (tag) =>
+              `<span style="background-color: #7f8c8d; font-size: 0.8em; font-weight: 600; padding: 3px 8px; border-radius: 4px; color: #fff; margin-left: 5px; white-space: nowrap;">${sanitizeHTML(
+                tag
+              )}</span>`
+          )
+          .join("");
+
         html += `
             <li class="test-item ${getStatusClass(test.status)}" 
                 data-test-name-min="${sanitizeHTML(testTitle.toLowerCase())}" 
@@ -230,9 +264,9 @@ function generateMinifiedHTML(reportData) {
               <span class="test-title-text" title="${sanitizeHTML(
                 test.name
               )}">${sanitizeHTML(testTitle)}</span>
-              <span class="test-status-label">${String(
-                test.status
-              ).toUpperCase()}</span>
+              
+              ${severityBadge}
+              ${tagsBadges}
             </li>
         `;
       });
@@ -250,9 +284,9 @@ function generateMinifiedHTML(reportData) {
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="https://i.postimg.cc/v817w4sg/logo.png">
-    <link rel="apple-touch-icon" href="https://i.postimg.cc/v817w4sg/logo.png">
-    <title>Playwright Pulse Summary Report</title>
+    <link rel="icon" type="image/png" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
+    <link rel="apple-touch-icon" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
+    <title>Pulse Summary Report</title>
     <style>
         :root {
             --primary-color: #2c3e50; /* Dark Blue/Grey */
@@ -492,8 +526,8 @@ function generateMinifiedHTML(reportData) {
     <div class="container">
         <header class="report-header">
             <div class="report-header-title">
-                <img id="report-logo" src="https://i.postimg.cc/v817w4sg/logo.png" alt="Report Logo">
-                <h1>Playwright Pulse Summary</h1>
+                <img id="report-logo" src="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png" alt="Report Logo">
+                <h1>Pulse Summary Report</h1>
             </div>
             <div class="run-info">
                 <strong>Run Date:</strong> ${formatDate(
@@ -527,8 +561,24 @@ function generateMinifiedHTML(reportData) {
         </section>
 
         <section class="test-results-section">
-            <h1 class="section-title">Test Case Summary</h1>
-            
+            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 30px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--secondary-color);">
+                <h1 style="margin: 0; font-size: 1.5em; color: var(--primary-color);">Test Case Summary</h1>
+                <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.75em;">
+                    <span style="font-weight: 600; color: var(--dark-gray-color);">Legend:</span>
+                    
+                    <span style="margin-left: 4px; font-weight: 600; color: var(--text-color);">Severity:</span>
+                    
+                    <span style="background-color: #006064; color: #fff; padding: 2px 6px; border-radius: 3px;">Minor</span>
+                    <span style="background-color: #FFA07A; color: #fff; padding: 2px 6px; border-radius: 3px;">Low</span>
+                    <span style="background-color: #577A11; color: #fff; padding: 2px 6px; border-radius: 3px;">Medium</span>
+                    <span style="background-color: #B71C1C; color: #fff; padding: 2px 6px; border-radius: 3px;">High</span>
+                    <span style="background-color: #64158A; color: #fff; padding: 2px 6px; border-radius: 3px;">Critical</span>
+                    
+                    <span style="border-left: 1px solid #ccc; height: 14px; margin: 0 4px;"></span>
+                    
+                    <span style="background-color: #7f8c8d; color: #fff; padding: 2px 6px; border-radius: 3px;">Tags</span>
+                </div>
+            </div>
             <div class="filters-section">
                 <input type="text" id="filter-min-name" placeholder="Search by test name...">
                 <select id="filter-min-status">