@sentinelqa/playwright-reporter 0.1.13 → 0.1.15

package/dist/localReport.js

@@ -252,6 +252,27 @@ const summarizeTests = (tests) => {
 const renderArtifact = (artifact) => {
     const href = escapeHtml(artifact.relativePath);
     const label = escapeHtml(artifact.label);
+    if (artifact.kind === "trace") {
+        return `
+      <div class="artifact-link artifact-link-trace">
+        <div class="artifact-trace-row">
+          <div class="artifact-trace-meta">
+            <span class="artifact-kind">Trace</span>
+            <a href="${href}" target="_blank" rel="noreferrer">${label}</a>
+          </div>
+          <a
+            class="trace-button"
+            href="${href}"
+            target="_blank"
+            rel="noreferrer"
+            data-trace-path="${href}"
+          >
+            View Trace
+          </a>
+        </div>
+      </div>
+    `;
+    }
     if (artifact.kind === "screenshot") {
         return `
       <div class="artifact-card">
@@ -321,7 +342,7 @@ const renderTestCard = (test) => {
 };
 const renderAdditionalArtifacts = (artifacts) => {
     if (artifacts.length === 0) {
-        return `<div class="empty-state">No additional Playwright artifacts were detected.</div>`;
+        return "";
     }
     return `
     <div class="artifact-list">
@@ -338,6 +359,27 @@ const renderAdditionalArtifacts = (artifacts) => {
     </div>
   `;
 };
+const tryMapRemainingArtifactsToTests = (tests, artifactPaths, reportDir, usedRelativePaths, claimedSourcePaths) => {
+    const candidateTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    const preferredKinds = ["screenshot", "video", "trace", "log", "network"];
+    for (const kind of preferredKinds) {
+        const pathsForKind = artifactPaths.filter((filePath) => !claimedSourcePaths.has(path_1.default.resolve(filePath)) && classifyArtifact(filePath) === kind);
+        let cursor = 0;
+        for (const test of candidateTests) {
+            const alreadyHasKind = test.artifacts.some((artifact) => artifact.kind === kind);
+            if (alreadyHasKind)
+                continue;
+            const nextPath = pathsForKind[cursor];
+            if (!nextPath)
+                break;
+            const resolved = path_1.default.resolve(nextPath);
+            const artifact = copyArtifact(resolved, kind, reportDir, usedRelativePaths, test.id);
+            test.artifacts.push(artifact);
+            claimedSourcePaths.add(resolved);
+            cursor += 1;
+        }
+    }
+};
 const buildHtml = (tests, summary, extraArtifacts) => {
     const failedTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
     const generatedAt = new Date().toLocaleString();
@@ -514,6 +556,9 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         background: rgba(9, 13, 20, 0.9);
         padding: 12px;
       }
+      .artifact-link-trace {
+        padding: 14px;
+      }
       .artifact-card img, .artifact-card video {
         width: 100%;
         border-radius: 10px;
@@ -538,11 +583,49 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         text-transform: uppercase;
         letter-spacing: 0.08em;
       }
+      .artifact-trace-row {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+      }
+      .artifact-trace-meta {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .trace-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 12px;
+        border-radius: 999px;
+        border: 1px solid rgba(125, 211, 252, 0.28);
+        background: rgba(125, 211, 252, 0.08);
+        color: var(--accent);
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        white-space: nowrap;
+      }
+      .trace-button:hover {
+        text-decoration: none;
+        background: rgba(125, 211, 252, 0.14);
+      }
       .artifact-list {
         display: grid;
         gap: 12px;
         margin-top: 16px;
       }
+      .section-shell ul {
+        margin: 12px 0 0 18px;
+        color: var(--text);
+      }
+      .section-shell li {
+        margin-top: 6px;
+      }
       .empty-state {
         color: var(--muted);
         border: 1px dashed rgba(39, 48, 66, 0.9);
@@ -571,6 +654,10 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         }
         .test-summary { flex-direction: column; }
         .meta-stack { min-width: 0; }
+        .artifact-trace-row {
+          flex-direction: column;
+          align-items: flex-start;
+        }
       }
     </style>
   </head>
@@ -617,26 +704,49 @@ const buildHtml = (tests, summary, extraArtifacts) => {
       <section class="section-shell">
         <h2>Additional Artifacts</h2>
         <p>Artifacts collected from Playwright output folders that were not directly attached to a single test.</p>
-        ${renderAdditionalArtifacts(extraArtifacts)}
+        ${extraArtifacts.length > 0
+        ? renderAdditionalArtifacts(extraArtifacts)
+        : `<div class="empty-state">All detected artifacts were mapped onto failed tests.</div>`}
       </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>
+        <p>Upload runs to Sentinel Cloud for:</p>
+        <ul>
+          <li>CI history</li>
+          <li>shareable run links</li>
+          <li>AI failure summaries</li>
+        </ul>
+        <p>
+          <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">More on sentinelqa.com</a>
+        </p>
       </section>
 
       <footer>
         Generated by <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">Sentinel Playwright Reporter</a>.
       </footer>
     </div>
+    <script>
+      (function () {
+        var traceButtons = document.querySelectorAll("[data-trace-path]");
+        traceButtons.forEach(function (button) {
+          var tracePath = button.getAttribute("data-trace-path");
+          if (!tracePath) return;
+
+          try {
+            if (window.location.protocol === "http:" || window.location.protocol === "https:") {
+              var traceUrl = new URL(tracePath, window.location.href).href;
+              button.setAttribute(
+                "href",
+                "https://trace.playwright.dev/?trace=" + encodeURIComponent(traceUrl)
+              );
+            }
+          } catch (_error) {
+            // Fall back to the raw trace zip link when URL construction fails.
+          }
+        });
+      })();
+    </script>
   </body>
 </html>`;
 };
@@ -686,17 +796,25 @@ function generateLocalDebugReport(options) {
             }
         }
     }
-    const extraArtifacts = [];
+    const discoveredArtifactPaths = [];
     for (const sourceDir of sourceDirs) {
         for (const filePath of listFilesRecursive(sourceDir)) {
             const resolved = path_1.default.resolve(filePath);
             if (claimedSourcePaths.has(resolved))
                 continue;
-            const artifact = copyArtifact(resolved, classifyArtifact(resolved), reportDir, usedRelativePaths, null);
-            claimedSourcePaths.add(resolved);
-            extraArtifacts.push(artifact);
+            discoveredArtifactPaths.push(resolved);
         }
     }
+    tryMapRemainingArtifactsToTests(tests, discoveredArtifactPaths, reportDir, usedRelativePaths, claimedSourcePaths);
+    const extraArtifacts = [];
+    for (const filePath of discoveredArtifactPaths) {
+        const resolved = path_1.default.resolve(filePath);
+        if (claimedSourcePaths.has(resolved))
+            continue;
+        const artifact = copyArtifact(resolved, classifyArtifact(resolved), reportDir, usedRelativePaths, null);
+        claimedSourcePaths.add(resolved);
+        extraArtifacts.push(artifact);
+    }
     const summary = summarizeTests(tests);
     const html = buildHtml(tests, summary, extraArtifacts);
     fs_1.default.writeFileSync(reportHtmlPath, html, "utf8");

package/package.json

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