@testomatio/reporter 2.9.1 → 2.9.2

package/lib/adapter/codecept.js

@@ -237,6 +237,7 @@ async function uploadAttachments(client, attachments, messagePrefix, attachmentT
     if (client.uploader.isEnabled) {
         log_js_1.log.info(`Attachments: ${messagePrefix} ${attachments.length} ${attachmentType} ...`);
     }
+    await Promise.all(client.pipes?.map(pipe => pipe.addArtifacts?.(attachments)) || []);
     const promises = attachments.map(async (attachment) => {
         const { rid, title, path, type } = attachment;
         const file = { path, type, title };

package/lib/adapter/playwright.js

@@ -51,13 +51,8 @@ class PlaywrightReporter {
         const { title } = test;
         const { error, duration } = result;
         const pwAttachments = (result.attachments || []).filter(a => a.body || a.path);
-        const files = pwAttachments
-            .map(att => ({
-            path: this.#getArtifactPath(att),
-            title: att.name || title,
-            type: att.contentType,
-        }))
-            .filter(f => f.path);
+        const files = buildArtifactFiles(pwAttachments, attachment => this.#getArtifactPath(attachment), title);
+        const artifactsForUpload = processArtifactsForUpload(pwAttachments);
         const suite_title = test.parent ? test.parent?.title : path_1.default.basename(test?.location?.file);
         const rid = test.id || test.testId || (0, uuid_1.v4)();
         /**
@@ -144,7 +139,7 @@ class PlaywrightReporter {
         this.uploads.push({
             rid: `${rid}-${project.name}`,
             title: test.title,
-            files: pwAttachments,
+            files: artifactsForUpload,
             file: test.location?.file,
         });
         // remove empty uploads
@@ -210,6 +205,22 @@ function checkStatus(status) {
         passed: constants_js_1.STATUS.PASSED,
     }[status] || constants_js_1.STATUS.FAILED);
 }
+function buildArtifactFiles(attachments, getArtifactPath, title) {
+    return attachments
+        .filter(isScreenshotArtifact)
+        .map(attachment => ({
+        path: getArtifactPath(attachment),
+        title: attachment.name || title,
+        type: attachment.contentType,
+    }))
+        .filter(file => file.path);
+}
+function processArtifactsForUpload(attachments) {
+    return attachments.filter(attachment => !isScreenshotArtifact(attachment));
+}
+function isScreenshotArtifact(attachment) {
+    return attachment?.contentType === 'image/png' && attachment?.name === 'screenshot';
+}
 function appendStep(step, shift = 0) {
     // nesting too deep, ignore those steps
     if (shift >= 10)

package/lib/bin/cli.js

@@ -20,6 +20,10 @@ const dotenv_1 = __importDefault(require("dotenv"));
 const replay_js_1 = __importDefault(require("../replay.js"));
 const log_js_1 = require("../utils/log.js");
 const pipe_utils_js_1 = require("../utils/pipe_utils.js");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const gaxios_1 = require("gaxios");
+const step_formatter_js_1 = require("../adapter/utils/step-formatter.js");
 const debug = (0, debug_1.default)('@testomatio/reporter:cli');
 const version = (0, utils_js_1.getPackageVersion)();
 const program = new commander_1.Command();
@@ -321,9 +325,91 @@ program
 program
     .command('upload-artifacts')
     .description('Upload artifacts to Testomat.io')
+    .argument('[jsonl-file]', 'Path to JSONL debug file (optional)')
     .option('--force', 'Re-upload artifacts even if they were uploaded before')
-    .action(async (opts) => {
+    .action(async (jsonlFile, opts) => {
     const apiKey = config_js_1.config.TESTOMATIO;
+    // JSONL file mode: upload artifacts from debug file
+    if (jsonlFile) {
+        if (!fs_1.default.existsSync(jsonlFile)) {
+            log_js_1.log.error(`JSONL file not found: ${jsonlFile}`);
+            return process.exit(1);
+        }
+        const replay = new replay_js_1.default({ apiKey });
+        const { tests, runId } = replay.parseDebugFile(jsonlFile);
+        if (!runId) {
+            log_js_1.log.error('runId not found in JSONL file');
+            return process.exit(1);
+        }
+        log_js_1.log.info(`Processing ${tests.length} tests from ${jsonlFile}`);
+        const client = new client_js_1.default({
+            apiKey,
+            runId,
+            batchMode: constants_js_1.BATCH_MODE.DISABLED,
+        });
+        await client.createRun();
+        client.uploader.checkEnabled();
+        client.uploader.disableLogStorage();
+        const apiUrl = process.env.TESTOMATIO_URL || 'https://app.testomat.io';
+        const http = new gaxios_1.Gaxios();
+        let uploadedCount = 0;
+        let failedCount = 0;
+        for (const test of tests) {
+            const testId = test.test_id;
+            if (!testId)
+                continue;
+            const artifacts = [];
+            const collect = (items) => {
+                for (const item of items || []) {
+                    const p = typeof item === 'object' ? item?.path : item;
+                    if (p && fs_1.default.existsSync(p))
+                        artifacts.push(p);
+                }
+            };
+            collect(test.files);
+            const walkSteps = (steps) => {
+                for (const step of steps || []) {
+                    collect(step.artifacts);
+                    walkSteps(step.steps);
+                }
+            };
+            walkSteps(test.steps);
+            if (artifacts.length === 0)
+                continue;
+            const urls = [];
+            for (const artifact of artifacts) {
+                try {
+                    const s3Id = test.rid || testId.replace('@', '');
+                    const filename = (0, step_formatter_js_1.generateShortFilename)(artifact);
+                    const result = await client.uploader.uploadFileByPath(artifact, [runId, s3Id, filename]);
+                    if (result)
+                        urls.push(typeof result === 'string' ? result : result.link);
+                }
+                catch (e) {
+                    debug(`Failed to upload ${artifact}:`, e.message);
+                }
+            }
+            if (urls.length === 0)
+                continue;
+            try {
+                await http.request({
+                    method: 'POST',
+                    url: `${apiUrl}/api/reporter/${runId}/testrun?api_key=${apiKey}`,
+                    data: { test_id: testId, artifacts: urls },
+                });
+                uploadedCount++;
+            }
+            catch (e) {
+                log_js_1.log.error(`Failed ${testId}: ${e.message}`);
+                failedCount++;
+            }
+        }
+        log_js_1.log.info(`🗄️ ${uploadedCount} tests with artifacts uploaded`);
+        if (failedCount > 0) {
+            log_js_1.log.warn(`⚠️ ${failedCount} tests failed to upload artifacts`);
+        }
+        return;
+    }
     process.env.TESTOMATIO_DISABLE_ARTIFACTS = '';
     const runId = process.env.TESTOMATIO_RUN || process.env.runId || (0, utils_js_2.readLatestRunId)();
     if (!runId) {

package/lib/pipe/debug.d.ts

@@ -22,6 +22,12 @@ export class DebugPipe {
     createRun(params?: {}): Promise<void>;
     addTest(data: any): Promise<void>;
     finishRun(params: any): Promise<void>;
+    /**
+     * Logs artifacts data to the debug file.
+     * Used for trace.zip, video files and other artifacts uploaded after tests finish.
+     * @param {Array} artifacts - Array of artifacts with { rid, title, path, type }
+     */
+    addArtifacts(artifacts: any[]): void;
     sync(): Promise<void>;
     /**
      * Writes any buffered tests to the debug file as a single batch.

package/lib/pipe/debug.js

@@ -109,6 +109,17 @@ class DebugPipe {
         log_js_1.log.info(`🪲 Debug file: ${this.rootPath}`);
         log_js_1.log.info(`History: ${this.historyDir}`);
     }
+    /**
+     * Logs artifacts data to the debug file.
+     * Used for trace.zip, video files and other artifacts uploaded after tests finish.
+     * @param {Array} artifacts - Array of artifacts with { rid, title, path, type }
+     */
+    addArtifacts(artifacts) {
+        if (!this.isEnabled || !artifacts?.length)
+            return;
+        const logData = { action: 'addArtifacts', artifacts, runId: this.store.runId };
+        this.logToFile(logData);
+    }
     async sync() {
         this.flushBufferedTests();
     }

package/lib/replay.js

@@ -49,6 +49,7 @@ class Replay {
         const testsWithoutRid = []; // For tests without rid (backward compatibility)
         const envVars = {};
         let runId = null;
+        const artifactsToAdd = []; // Store artifacts to add after all tests are loaded
         // Parse debug file line by line
         for (const [lineIndex, line] of lines.entries()) {
             try {
@@ -125,6 +126,12 @@ class Replay {
                         testsWithoutRid.push({ ...test });
                     }
                 }
+                else if (logEntry.action === 'addArtifacts' && logEntry.artifacts) {
+                    if (logEntry.runId && !runId) {
+                        runId = logEntry.runId;
+                    }
+                    artifactsToAdd.push(...logEntry.artifacts);
+                }
                 else if (logEntry.action === 'finishRun') {
                     finishParams = logEntry.params || {};
                     if (logEntry.runId && !runId) {
@@ -143,6 +150,20 @@ class Replay {
         if (parseErrors > 3) {
             this.onError(`${parseErrors - 3} more parse errors occurred`);
         }
+        for (const artifact of artifactsToAdd) {
+            if (artifact.rid) {
+                const ridToFind = artifact.rid;
+                const fullRid = runId ? `${runId}-${ridToFind}` : ridToFind;
+                const test = testsMap.get(fullRid) || testsMap.get(ridToFind);
+                if (test && artifact.path) {
+                    if (!test.files)
+                        test.files = [];
+                    if (!test.files.includes(artifact.path)) {
+                        test.files.push(artifact.path);
+                    }
+                }
+            }
+        }
         // Combine tests with rid and tests without rid
         const allTests = [...Array.from(testsMap.values()), ...testsWithoutRid];
         return {

package/lib/template/testomatio.hbs

@@ -681,8 +681,9 @@
 
         .test-group-header {
             padding: 20px;
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
-            color: white;
+            background: var(--gray-50);
+            color: var(--gray-800);
+            border-left: 4px solid var(--primary-color);
             cursor: pointer;
             display: flex;
             justify-content: space-between;
@@ -691,7 +692,37 @@
         }
 
         .test-group-header:hover {
-            filter: brightness(1.1);
+            background: var(--gray-100);
+        }
+
+        .test-group-header.has-failures {
+            background: #fef2f2;
+            color: var(--gray-900);
+            border-left-color: var(--danger-color);
+        }
+
+        .test-group-header.has-failures:hover {
+            background: #fee2e2;
+        }
+
+        .test-group-header.has-skips {
+            background: #fffbeb;
+            color: var(--gray-900);
+            border-left-color: var(--warning-color);
+        }
+
+        .test-group-header.has-skips:hover {
+            background: #fef3c7;
+        }
+
+        .test-group-header.all-passed {
+            background: #ecfdf5;
+            color: var(--gray-900);
+            border-left-color: var(--success-color);
+        }
+
+        .test-group-header.all-passed:hover {
+            background: #d1fae5;
         }
 
         .test-group-title {
@@ -707,28 +738,56 @@
         }
 
         .test-group-count {
-            background: rgba(255, 255, 255, 0.2);
+            background: white;
+            color: var(--gray-600);
             padding: 6px 16px;
             border-radius: 20px;
             font-size: 14px;
             font-weight: 600;
+            border: 1px solid var(--gray-200);
         }
 
         .test-group-stats {
             display: flex;
-            gap: 20px;
+            gap: 8px;
             font-size: 14px;
             margin-right: 10px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
         }
 
         .test-group-stat {
             display: flex;
             align-items: center;
             gap: 6px;
+            padding: 6px 10px;
+            border-radius: 999px;
+            font-weight: 700;
+            background: white;
+            border: 1px solid currentColor;
         }
 
-        .test-group-expand {
+        .test-group-stat.passed {
+            color: var(--success-color);
+        }
+
+        .test-group-stat.failed {
             color: white;
+            background: var(--danger-color);
+            border-color: var(--danger-color);
+            box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35);
+        }
+
+        .test-group-stat.skipped {
+            color: var(--warning-color);
+        }
+
+        .test-group-stat.todo {
+            color: #8b5cf6;
+        }
+
+        .test-group-expand {
+            color: var(--gray-500);
             transition: var(--transition);
             font-size: 18px;
         }
@@ -3366,11 +3425,18 @@
             const failedCount = group.tests.filter(t => t.status.toLowerCase() === 'failed').length;
             const skippedCount = group.tests.filter(t => t.status.toLowerCase() === 'skipped').length;
             const todoCount = group.tests.filter(t => t.status.toLowerCase() === 'todo').length;
+            const groupStateClass = failedCount > 0
+                ? 'has-failures'
+                : skippedCount > 0 || todoCount > 0
+                    ? 'has-skips'
+                    : passedCount > 0
+                        ? 'all-passed'
+                        : '';
 
             const groupIcon = group.type === 'suite' ? 'layer-group' : 'file-code';
 
             const header = document.createElement('div');
-            header.className = 'test-group-header';
+            header.className = ['test-group-header', groupStateClass].filter(Boolean).join(' ');
             header.innerHTML = `
                 <div class='test-group-title'>
                     <i class='fas fa-${groupIcon}'></i>
@@ -3378,10 +3444,10 @@
                     <div class='test-group-count'>${group.tests.length} tests</div>
                 </div>
                 <div class='test-group-stats'>
-                    ${passedCount > 0 ? `<div class='test-group-stat' style='color: #10b981;'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
-                    ${failedCount > 0 ? `<div class='test-group-stat' style='color: #ef4444;'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
-                    ${skippedCount > 0 ? `<div class='test-group-stat' style='color: #f59e0b;'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
-                    ${todoCount > 0 ? `<div class='test-group-stat' style='color: #8b5cf6;'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
+                    ${passedCount > 0 ? `<div class='test-group-stat passed'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
+                    ${failedCount > 0 ? `<div class='test-group-stat failed'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
+                    ${skippedCount > 0 ? `<div class='test-group-stat skipped'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
+                    ${todoCount > 0 ? `<div class='test-group-stat todo'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
                 </div>
                 <i class='fas fa-chevron-down test-group-expand'></i>
             `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testomatio/reporter",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "Testomatio Reporter Client",
   "engines": {
     "node": ">=18"

package/src/adapter/codecept.js

@@ -278,6 +278,8 @@ async function uploadAttachments(client, attachments, messagePrefix, attachmentT
     log.info(`Attachments: ${messagePrefix} ${attachments.length} ${attachmentType} ...`);
   }
 
+  await Promise.all(client.pipes?.map(pipe => pipe.addArtifacts?.(attachments)) || []);
+
   const promises = attachments.map(async attachment => {
     const { rid, title, path, type } = attachment;
     const file = { path, type, title };

package/src/adapter/playwright.js

@@ -48,14 +48,8 @@ class PlaywrightReporter {
     const { title } = test;
     const { error, duration } = result;
     const pwAttachments = (result.attachments || []).filter(a => a.body || a.path);
-
-    const files = pwAttachments
-      .map(att => ({
-        path: this.#getArtifactPath(att),
-        title: att.name || title,
-        type: att.contentType,
-      }))
-      .filter(f => f.path);
+    const files = buildArtifactFiles(pwAttachments, attachment => this.#getArtifactPath(attachment), title);
+    const artifactsForUpload = processArtifactsForUpload(pwAttachments);
 
     const suite_title = test.parent ? test.parent?.title : path.basename(test?.location?.file);
 
@@ -150,7 +144,7 @@ class PlaywrightReporter {
     this.uploads.push({
       rid: `${rid}-${project.name}`,
       title: test.title,
-      files: pwAttachments,
+      files: artifactsForUpload,
       file: test.location?.file,
     });
     // remove empty uploads
@@ -229,6 +223,25 @@ function checkStatus(status) {
   );
 }
 
+function buildArtifactFiles(attachments, getArtifactPath, title) {
+  return attachments
+    .filter(isScreenshotArtifact)
+    .map(attachment => ({
+      path: getArtifactPath(attachment),
+      title: attachment.name || title,
+      type: attachment.contentType,
+    }))
+    .filter(file => file.path);
+}
+
+function processArtifactsForUpload(attachments) {
+  return attachments.filter(attachment => !isScreenshotArtifact(attachment));
+}
+
+function isScreenshotArtifact(attachment) {
+  return attachment?.contentType === 'image/png' && attachment?.name === 'screenshot';
+}
+
 function appendStep(step, shift = 0) {
   // nesting too deep, ignore those steps
   if (shift >= 10) return;

package/src/bin/cli.js

@@ -16,6 +16,10 @@ import dotenv from 'dotenv';
 import Replay from '../replay.js';
 import { log } from '../utils/log.js';
 import { formatFilterListIds } from '../utils/pipe_utils.js';
+import fs from 'fs';
+import path from 'path';
+import { Gaxios } from 'gaxios';
+import { generateShortFilename } from '../adapter/utils/step-formatter.js';
 
 const debug = createDebugMessages('@testomatio/reporter:cli');
 const version = getPackageVersion();
@@ -354,10 +358,101 @@ program
 program
   .command('upload-artifacts')
   .description('Upload artifacts to Testomat.io')
+  .argument('[jsonl-file]', 'Path to JSONL debug file (optional)')
   .option('--force', 'Re-upload artifacts even if they were uploaded before')
-  .action(async opts => {
+  .action(async (jsonlFile, opts) => {
     const apiKey = config.TESTOMATIO;
 
+    // JSONL file mode: upload artifacts from debug file
+    if (jsonlFile) {
+      if (!fs.existsSync(jsonlFile)) {
+        log.error(`JSONL file not found: ${jsonlFile}`);
+        return process.exit(1);
+      }
+
+      const replay = new Replay({ apiKey });
+      const { tests, runId } = replay.parseDebugFile(jsonlFile);
+
+      if (!runId) {
+        log.error('runId not found in JSONL file');
+        return process.exit(1);
+      }
+
+      log.info(`Processing ${tests.length} tests from ${jsonlFile}`);
+
+      const client = new TestomatClient({
+        apiKey,
+        runId,
+        batchMode: BATCH_MODE.DISABLED,
+      });
+
+      await client.createRun();
+      client.uploader.checkEnabled();
+      client.uploader.disableLogStorage();
+
+      const apiUrl = process.env.TESTOMATIO_URL || 'https://app.testomat.io';
+      const http = new Gaxios();
+      let uploadedCount = 0;
+      let failedCount = 0;
+
+      for (const test of tests) {
+        const testId = test.test_id;
+        if (!testId) continue;
+
+        const artifacts = [];
+
+        const collect = (items) => {
+          for (const item of items || []) {
+            const p = typeof item === 'object' ? item?.path : item;
+            if (p && fs.existsSync(p)) artifacts.push(p);
+          }
+        };
+        collect(test.files);
+
+        const walkSteps = (steps) => {
+          for (const step of steps || []) {
+            collect(step.artifacts);
+            walkSteps(step.steps);
+          }
+        };
+        walkSteps(test.steps);
+
+        if (artifacts.length === 0) continue;
+
+        const urls = [];
+        for (const artifact of artifacts) {
+          try {
+            const s3Id = test.rid || testId.replace('@', '');
+            const filename = generateShortFilename(artifact);
+            const result = await client.uploader.uploadFileByPath(artifact, [runId, s3Id, filename]);
+            if (result) urls.push(typeof result === 'string' ? result : result.link);
+          } catch (e) {
+            debug(`Failed to upload ${artifact}:`, e.message);
+          }
+        }
+
+        if (urls.length === 0) continue;
+
+        try {
+          await http.request({
+            method: 'POST',
+            url: `${apiUrl}/api/reporter/${runId}/testrun?api_key=${apiKey}`,
+            data: { test_id: testId, artifacts: urls },
+          });
+          uploadedCount++;
+        } catch (e) {
+          log.error(`Failed ${testId}: ${e.message}`);
+          failedCount++;
+        }
+      }
+
+      log.info(`🗄️ ${uploadedCount} tests with artifacts uploaded`);
+      if (failedCount > 0) {
+        log.warn(`⚠️ ${failedCount} tests failed to upload artifacts`);
+      }
+      return;
+    }
+
     process.env.TESTOMATIO_DISABLE_ARTIFACTS = '';
     const runId = process.env.TESTOMATIO_RUN || process.env.runId || readLatestRunId();
 

package/src/pipe/debug.js

@@ -111,6 +111,17 @@ export class DebugPipe {
     log.info(`History: ${this.historyDir}`);
   }
 
+  /**
+   * Logs artifacts data to the debug file.
+   * Used for trace.zip, video files and other artifacts uploaded after tests finish.
+   * @param {Array} artifacts - Array of artifacts with { rid, title, path, type }
+   */
+  addArtifacts(artifacts) {
+    if (!this.isEnabled || !artifacts?.length) return;
+    const logData = { action: 'addArtifacts', artifacts, runId: this.store.runId };
+    this.logToFile(logData);
+  }
+
   async sync() {
     this.flushBufferedTests();
   }

package/src/replay.js

@@ -49,6 +49,7 @@ export class Replay {
     const testsWithoutRid = []; // For tests without rid (backward compatibility)
     const envVars = {};
     let runId = null;
+    const artifactsToAdd = []; // Store artifacts to add after all tests are loaded
 
     // Parse debug file line by line
     for (const [lineIndex, line] of lines.entries()) {
@@ -119,6 +120,11 @@ export class Replay {
             // Handle tests without rid (no deduplication)
             testsWithoutRid.push({ ...test });
           }
+        } else if (logEntry.action === 'addArtifacts' && logEntry.artifacts) {
+          if (logEntry.runId && !runId) {
+            runId = logEntry.runId;
+          }
+          artifactsToAdd.push(...logEntry.artifacts);
         } else if (logEntry.action === 'finishRun') {
           finishParams = logEntry.params || {};
           if (logEntry.runId && !runId) {
@@ -138,6 +144,21 @@ export class Replay {
       this.onError(`${parseErrors - 3} more parse errors occurred`);
     }
 
+    for (const artifact of artifactsToAdd) {
+      if (artifact.rid) {
+        const ridToFind = artifact.rid;
+        const fullRid = runId ? `${runId}-${ridToFind}` : ridToFind;
+
+        const test = testsMap.get(fullRid) || testsMap.get(ridToFind);
+        if (test && artifact.path) {
+          if (!test.files) test.files = [];
+          if (!test.files.includes(artifact.path)) {
+            test.files.push(artifact.path);
+          }
+        }
+      }
+    }
+
     // Combine tests with rid and tests without rid
     const allTests = [...Array.from(testsMap.values()), ...testsWithoutRid];
 

package/src/template/testomatio.hbs

@@ -681,8 +681,9 @@
 
         .test-group-header {
             padding: 20px;
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
-            color: white;
+            background: var(--gray-50);
+            color: var(--gray-800);
+            border-left: 4px solid var(--primary-color);
             cursor: pointer;
             display: flex;
             justify-content: space-between;
@@ -691,7 +692,37 @@
         }
 
         .test-group-header:hover {
-            filter: brightness(1.1);
+            background: var(--gray-100);
+        }
+
+        .test-group-header.has-failures {
+            background: #fef2f2;
+            color: var(--gray-900);
+            border-left-color: var(--danger-color);
+        }
+
+        .test-group-header.has-failures:hover {
+            background: #fee2e2;
+        }
+
+        .test-group-header.has-skips {
+            background: #fffbeb;
+            color: var(--gray-900);
+            border-left-color: var(--warning-color);
+        }
+
+        .test-group-header.has-skips:hover {
+            background: #fef3c7;
+        }
+
+        .test-group-header.all-passed {
+            background: #ecfdf5;
+            color: var(--gray-900);
+            border-left-color: var(--success-color);
+        }
+
+        .test-group-header.all-passed:hover {
+            background: #d1fae5;
         }
 
         .test-group-title {
@@ -707,28 +738,56 @@
         }
 
         .test-group-count {
-            background: rgba(255, 255, 255, 0.2);
+            background: white;
+            color: var(--gray-600);
             padding: 6px 16px;
             border-radius: 20px;
             font-size: 14px;
             font-weight: 600;
+            border: 1px solid var(--gray-200);
         }
 
         .test-group-stats {
             display: flex;
-            gap: 20px;
+            gap: 8px;
             font-size: 14px;
             margin-right: 10px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
         }
 
         .test-group-stat {
             display: flex;
             align-items: center;
             gap: 6px;
+            padding: 6px 10px;
+            border-radius: 999px;
+            font-weight: 700;
+            background: white;
+            border: 1px solid currentColor;
         }
 
-        .test-group-expand {
+        .test-group-stat.passed {
+            color: var(--success-color);
+        }
+
+        .test-group-stat.failed {
             color: white;
+            background: var(--danger-color);
+            border-color: var(--danger-color);
+            box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35);
+        }
+
+        .test-group-stat.skipped {
+            color: var(--warning-color);
+        }
+
+        .test-group-stat.todo {
+            color: #8b5cf6;
+        }
+
+        .test-group-expand {
+            color: var(--gray-500);
             transition: var(--transition);
             font-size: 18px;
         }
@@ -3366,11 +3425,18 @@
             const failedCount = group.tests.filter(t => t.status.toLowerCase() === 'failed').length;
             const skippedCount = group.tests.filter(t => t.status.toLowerCase() === 'skipped').length;
             const todoCount = group.tests.filter(t => t.status.toLowerCase() === 'todo').length;
+            const groupStateClass = failedCount > 0
+                ? 'has-failures'
+                : skippedCount > 0 || todoCount > 0
+                    ? 'has-skips'
+                    : passedCount > 0
+                        ? 'all-passed'
+                        : '';
 
             const groupIcon = group.type === 'suite' ? 'layer-group' : 'file-code';
 
             const header = document.createElement('div');
-            header.className = 'test-group-header';
+            header.className = ['test-group-header', groupStateClass].filter(Boolean).join(' ');
             header.innerHTML = `
                 <div class='test-group-title'>
                     <i class='fas fa-${groupIcon}'></i>
@@ -3378,10 +3444,10 @@
                     <div class='test-group-count'>${group.tests.length} tests</div>
                 </div>
                 <div class='test-group-stats'>
-                    ${passedCount > 0 ? `<div class='test-group-stat' style='color: #10b981;'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
-                    ${failedCount > 0 ? `<div class='test-group-stat' style='color: #ef4444;'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
-                    ${skippedCount > 0 ? `<div class='test-group-stat' style='color: #f59e0b;'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
-                    ${todoCount > 0 ? `<div class='test-group-stat' style='color: #8b5cf6;'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
+                    ${passedCount > 0 ? `<div class='test-group-stat passed'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
+                    ${failedCount > 0 ? `<div class='test-group-stat failed'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
+                    ${skippedCount > 0 ? `<div class='test-group-stat skipped'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
+                    ${todoCount > 0 ? `<div class='test-group-stat todo'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
                 </div>
                 <i class='fas fa-chevron-down test-group-expand'></i>
             `;