@sentinelqa/playwright-reporter 0.1.10 → 0.1.12

package/dist/index.js

@@ -70,6 +70,7 @@ function withSentinel(config, options = {}) {
     const existingHtmlReporter = reporters.find((entry) => getReporterName(entry) === "html");
     const existingJsonOutputFile = getReporterOptions(existingJsonReporter).outputFile;
     const existingHtmlOutputFolder = getReporterOptions(existingHtmlReporter).outputFolder;
+    const shouldUsePlaywrightHtmlReporter = Boolean(process.env.SENTINEL_TOKEN) || typeof existingHtmlOutputFolder === "string";
     const testResultsDir = options.testResultsDir || config.outputDir || DEFAULT_TEST_RESULTS_DIR;
     const playwrightReportDir = options.playwrightReportDir ||
         (typeof existingHtmlOutputFolder === "string"
@@ -84,10 +85,18 @@ function withSentinel(config, options = {}) {
         .map((entry) => normalizePath(entry))));
     nextConfig.outputDir = testResultsDir;
     setReporterOptions(reporters, "json", { outputFile: playwrightJsonPath });
-    setReporterOptions(reporters, "html", {
-        outputFolder: playwrightReportDir,
-        open: "never"
-    });
+    if (shouldUsePlaywrightHtmlReporter) {
+        setReporterOptions(reporters, "html", {
+            outputFolder: playwrightReportDir,
+            open: "never"
+        });
+    }
+    else {
+        const htmlReporterIndex = reporters.findIndex((entry) => getReporterName(entry) === "html");
+        if (htmlReporterIndex !== -1) {
+            reporters.splice(htmlReporterIndex, 1);
+        }
+    }
     const sentinelReporterPath = require.resolve("./reporter");
     const sentinelReporterOptions = {
         project: options.project || null,

package/dist/localReport.js

@@ -141,41 +141,89 @@ const copyArtifact = (sourcePath, kind, reportDir, usedRelativePaths, testId) =>
         testId
     };
 };
-const flattenTests = (node, parentTitles = []) => {
+const createReportTest = (test, titlePath) => {
+    const results = Array.isArray(test?.results) ? test.results : [];
+    const lastResult = results.length > 0 ? results[results.length - 1] : null;
+    const errors = results.flatMap((result) => Array.isArray(result?.errors)
+        ? result.errors
+            .map((error) => error?.message || error?.stack || String(error || ""))
+            .filter(Boolean)
+        : []);
+    const duration = results.reduce((total, result) => total + (Number(result?.duration) || 0), 0);
+    const id = [
+        test?.location?.file || "unknown",
+        test?.projectName || "default",
+        titlePath.join(" > ")
+    ].join("::");
+    return {
+        id,
+        title: test?.title || titlePath[titlePath.length - 1] || "Untitled test",
+        titlePath,
+        file: test?.location?.file || null,
+        projectName: test?.projectName || null,
+        status: test?.status || lastResult?.status || "unknown",
+        duration,
+        errors,
+        artifacts: []
+    };
+};
+const collectTests = (node, parentTitles = []) => {
+    const nextTitles = node?.title ? [...parentTitles, node.title] : parentTitles;
+    const collected = [];
+    if (Array.isArray(node?.tests)) {
+        for (const test of node.tests) {
+            collected.push(createReportTest(test, [...nextTitles, test?.title].filter(Boolean)));
+        }
+    }
+    if (Array.isArray(node?.specs)) {
+        for (const spec of node.specs) {
+            const specTitles = [...nextTitles, spec?.title].filter(Boolean);
+            const specTests = Array.isArray(spec?.tests) ? spec.tests : [];
+            for (const test of specTests) {
+                collected.push(createReportTest(test, specTitles));
+            }
+        }
+    }
+    if (Array.isArray(node?.suites)) {
+        for (const suite of node.suites) {
+            collected.push(...collectTests(suite, nextTitles));
+        }
+    }
+    return collected;
+};
+const collectTestRefs = (node, parentTitles = []) => {
     const nextTitles = node?.title ? [...parentTitles, node.title] : parentTitles;
-    const currentTests = Array.isArray(node?.tests)
-        ? node.tests.map((test) => {
-            const titlePath = [...nextTitles, test.title].filter(Boolean);
-            const results = Array.isArray(test.results) ? test.results : [];
-            const lastResult = results.length > 0 ? results[results.length - 1] : null;
-            const errors = results.flatMap((result) => Array.isArray(result?.errors)
-                ? result.errors
-                    .map((error) => error?.message || error?.stack || String(error || ""))
-                    .filter(Boolean)
-                : []);
-            const duration = results.reduce((total, result) => total + (Number(result?.duration) || 0), 0);
+    const refs = [];
+    if (Array.isArray(node?.tests)) {
+        for (const test of node.tests) {
+            const titlePath = [...nextTitles, test?.title].filter(Boolean);
             const id = [
-                test.location?.file || "unknown",
-                test.projectName || "default",
+                test?.location?.file || "unknown",
+                test?.projectName || "default",
                 titlePath.join(" > ")
             ].join("::");
-            return {
-                id,
-                title: test.title || "Untitled test",
-                titlePath,
-                file: test.location?.file || null,
-                projectName: test.projectName || null,
-                status: test.status || lastResult?.status || "unknown",
-                duration,
-                errors,
-                artifacts: []
-            };
-        })
-        : [];
-    const childTests = Array.isArray(node?.suites)
-        ? node.suites.flatMap((suite) => flattenTests(suite, nextTitles))
-        : [];
-    return [...currentTests, ...childTests];
+            refs.push({ id, resultList: Array.isArray(test?.results) ? test.results : [] });
+        }
+    }
+    if (Array.isArray(node?.specs)) {
+        for (const spec of node.specs) {
+            const titlePath = [...nextTitles, spec?.title].filter(Boolean);
+            for (const test of Array.isArray(spec?.tests) ? spec.tests : []) {
+                const id = [
+                    test?.location?.file || "unknown",
+                    test?.projectName || "default",
+                    titlePath.join(" > ")
+                ].join("::");
+                refs.push({ id, resultList: Array.isArray(test?.results) ? test.results : [] });
+            }
+        }
+    }
+    if (Array.isArray(node?.suites)) {
+        for (const suite of node.suites) {
+            refs.push(...collectTestRefs(suite, nextTitles));
+        }
+    }
+    return refs;
 };
 const summarizeTests = (tests) => {
     return tests.reduce((summary, test) => {
@@ -235,8 +283,8 @@ const renderTestCard = (test) => {
         ? test.artifacts.map((artifact) => renderArtifact(artifact)).join("\n")
         : `<div class="empty-state">No test-linked artifacts were detected for this result.</div>`;
     return `
-    <section class="test-card">
-      <div class="test-head">
+    <details class="test-card">
+      <summary class="test-summary">
         <div>
           <div class="status-pill ${statusClass}">${escapeHtml(test.status)}</div>
           <h3>${escapeHtml(test.titlePath.join(" > ") || test.title)}</h3>
@@ -246,7 +294,7 @@ const renderTestCard = (test) => {
           ${projectLine}
           <div class="meta-item">Duration: ${escapeHtml(formatDuration(test.duration))}</div>
         </div>
-      </div>
+      </summary>
       <div class="panel">
         <h4>Error</h4>
         ${errorBlock}
@@ -257,7 +305,7 @@ const renderTestCard = (test) => {
           ${artifactMarkup}
         </div>
       </div>
-    </section>
+    </details>
   `;
 };
 const renderAdditionalArtifacts = (artifacts) => {
@@ -318,41 +366,56 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         padding: 40px 20px 80px;
       }
       .hero {
-        padding: 28px;
+        position: relative;
+        padding: 22px;
         border: 1px solid var(--panel-border);
         border-radius: 24px;
         background: rgba(13, 17, 23, 0.88);
         backdrop-filter: blur(12px);
       }
+      .hero-badge {
+        position: absolute;
+        top: 18px;
+        right: 18px;
+        display: inline-flex;
+        align-items: center;
+        padding: 6px 10px;
+        border-radius: 999px;
+        border: 1px solid rgba(125, 211, 252, 0.28);
+        background: rgba(125, 211, 252, 0.08);
+        color: var(--accent);
+        font-size: 11px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
       .eyebrow {
         color: var(--accent);
         text-transform: uppercase;
         letter-spacing: 0.18em;
-        font-size: 12px;
-        margin-bottom: 12px;
+        font-size: 10px;
+        margin-bottom: 10px;
       }
       h1, h2, h3, h4 { margin: 0; }
-      h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1; }
+      h1 { font-size: clamp(24px, 4vw, 38px); line-height: 1.05; }
       .hero p {
-        margin: 14px 0 0;
+        margin: 10px 0 0;
         color: var(--muted);
-        max-width: 760px;
-        font-size: 16px;
+        max-width: 640px;
+        font-size: 14px;
         line-height: 1.6;
       }
-      .summary-grid, .mode-grid {
+      .summary-grid {
         display: grid;
         gap: 16px;
-        margin-top: 24px;
+        margin-top: 18px;
       }
       .summary-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
-      .mode-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
-      .summary-card, .mode-card, .section-shell, .test-card {
+      .summary-card, .section-shell, .test-card {
         border: 1px solid var(--panel-border);
         border-radius: 20px;
         background: var(--panel);
       }
-      .summary-card, .mode-card {
+      .summary-card {
         padding: 18px;
       }
       .summary-label {
@@ -377,27 +440,21 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         color: var(--muted);
         line-height: 1.6;
       }
-      .diagram {
-        margin-top: 18px;
-        padding: 18px;
-        border-radius: 16px;
-        background: rgba(125, 211, 252, 0.06);
-        border: 1px dashed rgba(125, 211, 252, 0.3);
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        white-space: pre-line;
-        color: #d7e2f0;
-      }
-      .mode-card h3 { font-size: 18px; }
-      .mode-card p { color: var(--muted); line-height: 1.6; }
       .test-card {
-        padding: 20px;
         margin-top: 18px;
+        overflow: hidden;
       }
-      .test-head {
+      .test-summary {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         align-items: flex-start;
+        list-style: none;
+        padding: 20px;
+        cursor: pointer;
+      }
+      .test-summary::-webkit-details-marker {
+        display: none;
       }
       .status-pill {
         display: inline-flex;
@@ -417,9 +474,10 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         gap: 6px;
         color: var(--muted);
         font-size: 14px;
+        text-align: right;
       }
       .panel {
-        margin-top: 18px;
+        margin: 0 20px 18px;
         padding: 16px;
         background: rgba(13, 17, 23, 0.74);
         border: 1px solid rgba(39, 48, 66, 0.9);
@@ -480,13 +538,27 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         border-radius: 14px;
         padding: 16px;
       }
+      .failed-list-head {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+      }
+      .failed-count {
+        color: var(--muted);
+        font-size: 14px;
+      }
       footer {
         margin-top: 28px;
         color: var(--muted);
         font-size: 14px;
       }
       @media (max-width: 720px) {
-        .test-head { flex-direction: column; }
+        .hero-badge {
+          position: static;
+          margin-bottom: 12px;
+        }
+        .test-summary { flex-direction: column; }
         .meta-stack { min-width: 0; }
       }
     </style>
@@ -494,8 +566,9 @@ const buildHtml = (tests, summary, extraArtifacts) => {
   <body>
     <div class="page">
       <header class="hero">
+        <a class="hero-badge" href="${SENTINEL_URL}" target="_blank" rel="noreferrer">Powered by sentinelqa.com</a>
         <div class="eyebrow">Playwright Reporter for CI Debugging</div>
-        <h1>Sentinel Playwright Reporter</h1>
+        <h1>Playwright Reporter</h1>
         <p>
           A Playwright reporter that collects traces, screenshots, videos, and logs into
           a single debugging report. Designed to make CI failures easier to diagnose.
@@ -521,33 +594,10 @@ const buildHtml = (tests, summary, extraArtifacts) => {
       </header>
 
       <section class="section-shell">
-        <h2>Modes</h2>
-        <div class="mode-grid">
-          <div class="mode-card">
-            <h3>Local Mode</h3>
-            <p>Generates debugging reports locally with traces, screenshots, videos, and logs copied into this report folder.</p>
-          </div>
-          <div class="mode-card">
-            <h3>Cloud Mode</h3>
-            <p>Uploads CI runs to Sentinel for team debugging, CI history, shareable links, and AI-generated failure summaries.</p>
-          </div>
+        <div class="failed-list-head">
+          <h2>Failed Tests</h2>
+          <div class="failed-count">${failedTests.length} failed</div>
         </div>
-      </section>
-
-      <section class="section-shell">
-        <h2>Flow</h2>
-        <p>This reporter keeps the setup local-first and only adds Sentinel Cloud when a token is configured.</p>
-        <div class="diagram">Playwright CI
-  ↓
-Sentinel Reporter
-  ↓
-Artifacts Collected
-  ↓
-Local Debug Page OR Sentinel Cloud</div>
-      </section>
-
-      <section class="section-shell">
-        <h2>Failed Tests</h2>
         ${failedTests.length > 0
         ? failedTests.map((test) => renderTestCard(test)).join("\n")
         : `<div class="empty-state">No failed tests were found in this run. The local report still includes collected artifacts below.</div>`}
@@ -559,6 +609,19 @@ Local Debug Page OR Sentinel Cloud</div>
         ${renderAdditionalArtifacts(extraArtifacts)}
       </section>
 
+      <section class="section-shell">
+        <h2>Optional: Sentinel Cloud</h2>
+        <div class="artifact-list">
+          <div class="artifact-link">Upload runs to Sentinel Cloud for:</div>
+          <div class="artifact-link">• CI history</div>
+          <div class="artifact-link">• shareable run links</div>
+          <div class="artifact-link">• AI failure summaries</div>
+          <div class="artifact-link">
+            <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">More on sentinelqa.com</a>
+          </div>
+        </div>
+      </section>
+
       <footer>
         Generated by <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">Sentinel Playwright Reporter</a>.
       </footer>
@@ -586,7 +649,8 @@ function generateLocalDebugReport(options) {
     ]);
     const reportJsonRaw = fs_1.default.readFileSync(options.playwrightJsonPath, "utf8");
     const reportJson = JSON.parse(reportJsonRaw);
-    const tests = flattenTests({ suites: reportJson?.suites || [] });
+    const reportRoot = { suites: reportJson?.suites || [] };
+    const tests = collectTests(reportRoot);
     const testsById = new Map(tests.map((test) => [test.id, test]));
     const claimedSourcePaths = new Set();
     const attachArtifactToTest = (sourcePath, testId) => {
@@ -600,34 +664,17 @@ function generateLocalDebugReport(options) {
             return;
         }
     };
-    const walkSuites = (node, parentTitles = []) => {
-        const nextTitles = node?.title ? [...parentTitles, node.title] : parentTitles;
-        if (Array.isArray(node?.tests)) {
-            for (const test of node.tests) {
-                const titlePath = [...nextTitles, test.title].filter(Boolean);
-                const testId = [
-                    test.location?.file || "unknown",
-                    test.projectName || "default",
-                    titlePath.join(" > ")
-                ].join("::");
-                const resultList = Array.isArray(test.results) ? test.results : [];
-                for (const result of resultList) {
-                    const attachments = Array.isArray(result?.attachments) ? result.attachments : [];
-                    for (const attachment of attachments) {
-                        const resolvedPath = resolveExistingFile(attachment?.path, baseDirs);
-                        if (!resolvedPath)
-                            continue;
-                        attachArtifactToTest(resolvedPath, testId);
-                    }
-                }
+    for (const testRef of collectTestRefs(reportRoot)) {
+        for (const result of testRef.resultList) {
+            const attachments = Array.isArray(result?.attachments) ? result.attachments : [];
+            for (const attachment of attachments) {
+                const resolvedPath = resolveExistingFile(attachment?.path, baseDirs);
+                if (!resolvedPath)
+                    continue;
+                attachArtifactToTest(resolvedPath, testRef.id);
             }
         }
-        if (Array.isArray(node?.suites)) {
-            for (const suite of node.suites)
-                walkSuites(suite, nextTitles);
-        }
-    };
-    walkSuites({ suites: reportJson?.suites || [] });
+    }
     const extraArtifacts = [];
     for (const sourceDir of sourceDirs) {
         for (const filePath of listFilesRecursive(sourceDir)) {

package/dist/reporter.js

@@ -3,12 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 const path_1 = __importDefault(require("path"));
+const url_1 = require("url");
 const node_1 = require("@sentinelqa/uploader/node");
 const env_1 = require("./env");
 const localReport_1 = require("./localReport");
 const pluralize = (count, singular, plural) => {
     return count === 1 ? singular : plural;
 };
+const formatTerminalLink = (label, target) => {
+    if (!process.stdout.isTTY)
+        return label;
+    return `\u001B]8;;${target}\u0007${label}\u001B]8;;\u0007`;
+};
 class SentinelReporter {
     constructor(options) {
         this.failedCount = 0;
@@ -58,7 +64,10 @@ class SentinelReporter {
             const relativeReportPath = path_1.default
                 .relative(process.cwd(), localReport.htmlPath)
                 .replace(/\\/g, "/");
-            console.log(relativeReportPath.startsWith(".") ? relativeReportPath : `./${relativeReportPath}`);
+            const displayPath = relativeReportPath.startsWith(".")
+                ? relativeReportPath
+                : `./${relativeReportPath}`;
+            console.log(formatTerminalLink(displayPath, (0, url_1.pathToFileURL)(localReport.htmlPath).href));
             console.log("");
             console.log("Optional:");
             console.log("Upload runs to Sentinel Cloud for:");
@@ -66,7 +75,7 @@ class SentinelReporter {
             console.log("• shareable run links");
             console.log("• AI failure summaries");
             console.log("");
-            console.log("Learn more: https://sentinelqa.com");
+            console.log(`Learn more: ${formatTerminalLink("https://sentinelqa.com", "https://sentinelqa.com")}`);
             return;
         }
         console.log("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentinelqa/playwright-reporter",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "private": false,
   "description": "Playwright reporter for CI debugging with optional Sentinel cloud dashboards",
   "license": "MIT",