@sentinelqa/playwright-reporter 0.1.13 → 0.1.14

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">
@@ -514,6 +535,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,6 +562,37 @@ 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;
@@ -571,6 +626,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>
@@ -622,14 +681,16 @@ const buildHtml = (tests, summary, extraArtifacts) => {
 
       <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">
+        <div class="panel">
+          <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>
-          </div>
+          </p>
         </div>
       </section>
 
@@ -637,6 +698,27 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         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>`;
 };

package/package.json

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