@sentinelqa/playwright-reporter 0.1.27 → 0.1.28

package/README.md

@@ -1,8 +1,8 @@
-# Sentinel Playwright Reporter
+# Playwright Reporter
 
-![npm](https://img.shields.io/npm/v/@sentinelqa/playwright-reporter)
-![downloads](https://img.shields.io/npm/dm/@sentinelqa/playwright-reporter)
-![license](https://img.shields.io/npm/l/@sentinelqa/playwright-reporter)
+[![npm](https://img.shields.io/npm/v/@sentinelqa/playwright-reporter)](https://www.npmjs.com/package/@sentinelqa/playwright-reporter)
+[![downloads](https://img.shields.io/npm/dm/@sentinelqa/playwright-reporter)](https://www.npmjs.com/package/@sentinelqa/playwright-reporter)
+[![license](https://img.shields.io/npm/l/@sentinelqa/playwright-reporter)](./LICENSE)
 
 A Playwright reporter that aggregates traces, screenshots, videos, and logs
 into a single debugging report for failed tests.
@@ -17,6 +17,11 @@ Optionally upload runs to Sentinel Cloud for CI history and AI failure analysis.
 
 - Aggregates Playwright traces, screenshots, videos, and logs
 - Generates a local HTML debugging report
+- Prints a deterministic quick diagnosis in the terminal after failed runs
+- Adds a failure digest to the local HTML report
+- Groups similar failures so repeated symptoms are easy to spot
+- Lets you copy debug summaries for Slack, Jira, and GitHub issues
+- Compares the current run to the previous run on the same branch
 - Works with existing Playwright reporter setup
 - Optional Sentinel Cloud integration
 - CI run history and AI debugging summaries in cloud mode
@@ -26,7 +31,7 @@ Optionally upload runs to Sentinel Cloud for CI history and AI failure analysis.
 Debugging Playwright CI failures often means downloading traces,
 screenshots, and videos separately.
 
-Sentinel Reporter aggregates everything into one debugging report
+Reporter aggregates everything into one debugging report
 so you can quickly understand what failed.
 
 ## Requirements
@@ -87,6 +92,9 @@ If tests fail and `SENTINEL_TOKEN` is not set, Sentinel generates:
 
 Open the report to inspect:
 
+- failure digest
+- similar failure groups
+- run-to-run diff
 - failed tests
 - screenshots
 - videos

package/dist/localReport.d.ts

@@ -1,3 +1,4 @@
+import { type FailureFacts } from "./quickDiagnosis";
 type ReporterSourcePaths = {
     playwrightJsonPath: string;
     playwrightReportDir: string;
@@ -9,6 +10,27 @@ type LocalReportOptions = ReporterSourcePaths & {
     reportFileName?: string;
     redirectFileName?: string;
 };
+type ArtifactKind = "trace" | "screenshot" | "video" | "log" | "network" | "report" | "attachment";
+type CopiedArtifact = {
+    sourcePath: string;
+    fileName: string;
+    relativePath: string;
+    kind: ArtifactKind;
+    label: string;
+    testId: string | null;
+};
+type ReportTest = {
+    id: string;
+    title: string;
+    titlePath: string[];
+    file: string | null;
+    projectName: string | null;
+    status: string;
+    duration: number;
+    errors: string[];
+    diagnosis: FailureFacts | null;
+    artifacts: CopiedArtifact[];
+};
 type LocalReportSummary = {
     total: number;
     failed: number;
@@ -20,6 +42,28 @@ type LocalReportResult = {
     redirectPath: string;
     artifactCount: number;
     summary: LocalReportSummary;
+    runDiff: RunDiffSummary | null;
+};
+type RunSnapshot = {
+    generatedAt: string;
+    branch: string;
+    gitSha: string;
+    totals: LocalReportSummary;
+    tests: Array<{
+        id: string;
+        title: string;
+        status: string;
+        signal: string | null;
+        locator: string | null;
+        expected: string | null;
+        received: string | null;
+    }>;
+};
+type RunDiffSummary = {
+    label: string;
+    newFailures: ReportTest[];
+    fixedTests: RunSnapshot["tests"];
+    stillFailing: ReportTest[];
 };
 export declare function generateLocalDebugReport(options: LocalReportOptions): LocalReportResult;
 export {};

package/dist/localReport.js

@@ -7,10 +7,13 @@ exports.generateLocalDebugReport = generateLocalDebugReport;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const crypto_1 = __importDefault(require("crypto"));
+const child_process_1 = require("child_process");
+const quickDiagnosis_1 = require("./quickDiagnosis");
 const DEFAULT_REPORT_DIR = "sentinel-report";
 const DEFAULT_REPORT_FILE = "index.html";
 const DEFAULT_REDIRECT_FILE = "sentinel-debug.html";
 const SENTINEL_URL = "https://sentinelqa.com";
+const SENTINEL_HISTORY_DIR = path_1.default.join(".sentinel", "history");
 const ARTIFACT_EXTENSIONS = {
     trace: [".zip"],
     screenshot: [".png", ".jpg", ".jpeg", ".webp", ".gif"],
@@ -99,6 +102,39 @@ const formatDuration = (durationMs) => {
         return `${Math.round(durationMs)} ms`;
     return `${(durationMs / 1000).toFixed(durationMs >= 10000 ? 0 : 1)} s`;
 };
+const pluralize = (count, singular, plural) => count === 1 ? singular : plural;
+const sanitizeFileSegment = (value) => value.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+const getCurrentBranch = () => {
+    const envBranch = process.env.GITHUB_HEAD_REF ||
+        process.env.GITHUB_REF_NAME ||
+        process.env.VERCEL_GIT_COMMIT_REF ||
+        process.env.CI_COMMIT_REF_NAME ||
+        process.env.BRANCH_NAME;
+    if (envBranch)
+        return sanitizeFileSegment(envBranch);
+    try {
+        return sanitizeFileSegment((0, child_process_1.execSync)("git rev-parse --abbrev-ref HEAD", { stdio: ["ignore", "pipe", "ignore"] }).toString("utf8").trim());
+    }
+    catch {
+        return "unknown";
+    }
+};
+const getCurrentGitSha = () => {
+    const envSha = process.env.GITHUB_SHA ||
+        process.env.VERCEL_GIT_COMMIT_SHA ||
+        process.env.CI_COMMIT_SHA ||
+        process.env.COMMIT_SHA;
+    if (envSha)
+        return envSha.slice(0, 12);
+    try {
+        return (0, child_process_1.execSync)("git rev-parse --short=12 HEAD", { stdio: ["ignore", "pipe", "ignore"] })
+            .toString("utf8")
+            .trim();
+    }
+    catch {
+        return "unknown";
+    }
+};
 const relativeFromCwd = (targetPath) => {
     const relative = path_1.default.relative(process.cwd(), targetPath).replace(/\\/g, "/");
     if (!relative || relative === "")
@@ -197,7 +233,7 @@ const copyArtifact = (sourcePath, kind, reportDir, usedRelativePaths, testId) =>
         testId
     };
 };
-const createReportTest = (test, titlePath) => {
+const createReportTest = (test, titlePath, diagnosisById) => {
     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)
@@ -220,15 +256,16 @@ const createReportTest = (test, titlePath) => {
         status: normalizeTestStatus(test?.status || lastResult?.status || "unknown"),
         duration,
         errors,
+        diagnosis: diagnosisById.get(titlePath.join(" > ")) || null,
         artifacts: []
     };
 };
-const collectTests = (node, parentTitles = []) => {
+const collectTests = (node, diagnosisById, 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)));
+            collected.push(createReportTest(test, [...nextTitles, test?.title].filter(Boolean), diagnosisById));
         }
     }
     if (Array.isArray(node?.specs)) {
@@ -236,13 +273,13 @@ const collectTests = (node, parentTitles = []) => {
             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));
+                collected.push(createReportTest(test, specTitles, diagnosisById));
             }
         }
     }
     if (Array.isArray(node?.suites)) {
         for (const suite of node.suites) {
-            collected.push(...collectTests(suite, nextTitles));
+            collected.push(...collectTests(suite, diagnosisById, nextTitles));
         }
     }
     return collected;
@@ -294,6 +331,96 @@ const summarizeTests = (tests) => {
         return summary;
     }, { total: 0, failed: 0, passed: 0, skipped: 0 });
 };
+const buildDiagnosisMap = (playwrightJsonPath) => {
+    const failures = (0, quickDiagnosis_1.collectFailureFacts)(playwrightJsonPath);
+    const map = new Map();
+    for (const failure of failures) {
+        map.set(failure.titlePath.join(" > "), failure);
+    }
+    return map;
+};
+const getFailureTests = (tests) => tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+const groupSimilarFailures = (tests) => {
+    const groups = new Map();
+    for (const test of getFailureTests(tests)) {
+        const diagnosis = test.diagnosis;
+        const key = diagnosis ? (0, quickDiagnosis_1.buildSimilarityKey)(diagnosis) : `unknown|${test.title}`;
+        if (!groups.has(key)) {
+            groups.set(key, {
+                key,
+                signal: diagnosis ? (0, quickDiagnosis_1.summarizeSignal)(diagnosis.signal) : "uncategorized failure",
+                summary: diagnosis ? (0, quickDiagnosis_1.describeFailure)(diagnosis) : "The failure could not be grouped from captured evidence.",
+                locator: diagnosis?.locator || null,
+                tests: []
+            });
+        }
+        groups.get(key).tests.push(test);
+    }
+    return Array.from(groups.values()).sort((a, b) => b.tests.length - a.tests.length);
+};
+const buildRunSnapshot = (tests, summary) => ({
+    generatedAt: new Date().toISOString(),
+    branch: getCurrentBranch(),
+    gitSha: getCurrentGitSha(),
+    totals: summary,
+    tests: tests.map((test) => ({
+        id: test.id,
+        title: test.titlePath.join(" > ") || test.title,
+        status: test.status,
+        signal: test.diagnosis?.signal || null,
+        locator: test.diagnosis?.locator || null,
+        expected: test.diagnosis?.expected || null,
+        received: test.diagnosis?.received || null
+    }))
+});
+const getPointerPaths = (branch) => [
+    path_1.default.join(".sentinel", "latest.json"),
+    path_1.default.join(".sentinel", `latest-${branch}.json`),
+    ...(branch === "main" ? [path_1.default.join(".sentinel", "latest-main.json")] : [])
+];
+const readSnapshot = (filePath) => {
+    if (!fs_1.default.existsSync(filePath))
+        return null;
+    try {
+        return JSON.parse(fs_1.default.readFileSync(filePath, "utf8"));
+    }
+    catch {
+        return null;
+    }
+};
+const writeRunHistory = (snapshot) => {
+    ensureDir(path_1.default.resolve(process.cwd(), SENTINEL_HISTORY_DIR));
+    ensureDir(path_1.default.resolve(process.cwd(), ".sentinel"));
+    const fileName = `${snapshot.generatedAt.replace(/[:.]/g, "-")}-${snapshot.gitSha}.json`;
+    const historyPath = path_1.default.resolve(process.cwd(), SENTINEL_HISTORY_DIR, fileName);
+    fs_1.default.writeFileSync(historyPath, JSON.stringify(snapshot, null, 2), "utf8");
+    for (const pointerPath of getPointerPaths(snapshot.branch)) {
+        fs_1.default.writeFileSync(path_1.default.resolve(process.cwd(), pointerPath), JSON.stringify({
+            path: relativeFromCwd(historyPath),
+            ...snapshot
+        }, null, 2), "utf8");
+    }
+    return historyPath;
+};
+const buildRunDiff = (tests, snapshot) => {
+    const previous = readSnapshot(path_1.default.resolve(process.cwd(), ".sentinel", `latest-${snapshot.branch}.json`))
+        || readSnapshot(path_1.default.resolve(process.cwd(), ".sentinel", "latest.json"));
+    if (!previous || previous.generatedAt === snapshot.generatedAt)
+        return null;
+    const previousById = new Map(previous.tests.map((test) => [test.id, test]));
+    const currentFailures = getFailureTests(tests);
+    const previousFailures = previous.tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    const previousFailureIds = new Set(previousFailures.map((test) => test.id));
+    return {
+        label: previous.branch === snapshot.branch ? `Compared to previous ${snapshot.branch} run` : "Compared to previous run",
+        newFailures: currentFailures.filter((test) => !previousFailureIds.has(test.id)),
+        fixedTests: previousFailures.filter((test) => {
+            const current = tests.find((entry) => entry.id === test.id);
+            return current && !["failed", "timedOut", "interrupted"].includes(current.status);
+        }),
+        stillFailing: currentFailures.filter((test) => previousFailureIds.has(test.id))
+    };
+};
 const renderArtifact = (artifact) => {
     const href = escapeHtml(artifact.relativePath);
     const label = escapeHtml(artifact.label);
@@ -409,6 +536,31 @@ const renderTestCard = (test) => {
         })()
         : `<pre>No error message was attached to this result.</pre>`;
     const artifactMarkup = renderArtifactGroups(test.artifacts);
+    const diagnosis = test.diagnosis;
+    const diagnosisMarkup = diagnosis
+        ? `
+        <div class="diagnosis-shell">
+          <div>
+            <span class="artifact-kind">Quick diagnosis</span>
+            <p class="diagnosis-copy">${escapeHtml((0, quickDiagnosis_1.describeFailure)(diagnosis))}</p>
+          </div>
+          <button
+            type="button"
+            class="copy-button"
+            data-copy-summary="${escapeHtml((0, quickDiagnosis_1.buildDebugSummary)(diagnosis))}"
+            aria-label="Copy debug summary"
+          >
+            Copy debug summary
+          </button>
+        </div>
+        <div class="fact-row">
+          ${diagnosis.locator ? `<span class="fact-chip">Locator: ${escapeHtml(diagnosis.locator)}</span>` : ""}
+          ${diagnosis.expected ? `<span class="fact-chip">Expected: ${escapeHtml(diagnosis.expected)}</span>` : ""}
+          ${diagnosis.received ? `<span class="fact-chip">Observed: ${escapeHtml(diagnosis.received)}</span>` : ""}
+          ${diagnosis.timeoutMs ? `<span class="fact-chip">Timeout: ${diagnosis.timeoutMs}ms</span>` : ""}
+        </div>
+      `
+        : "";
     return `
     <details class="test-card">
       <summary class="test-summary">
@@ -423,6 +575,7 @@ const renderTestCard = (test) => {
         </div>
       </summary>
       <div class="panel">
+        ${diagnosisMarkup}
         <h4>Error</h4>
         ${errorBlock}
       </div>
@@ -435,6 +588,119 @@ const renderTestCard = (test) => {
     </details>
   `;
 };
+const renderFailureDigest = (tests) => {
+    const failedTests = getFailureTests(tests);
+    if (!failedTests.length) {
+        return `<div class="empty-state">No failed tests were detected in this run.</div>`;
+    }
+    return `
+    <div class="digest-grid">
+      ${failedTests
+        .map((test) => {
+        const diagnosis = test.diagnosis;
+        const title = escapeHtml(test.title);
+        const summary = escapeHtml(diagnosis ? (0, quickDiagnosis_1.describeFailure)(diagnosis) : "The failure could not be summarized from the captured evidence.");
+        const debugSummary = escapeHtml(diagnosis
+            ? (0, quickDiagnosis_1.buildDebugSummary)(diagnosis)
+            : `Test: ${test.title}\nDiagnosis: Review trace and error details in the expanded card.`);
+        return `
+            <article class="digest-card">
+              <div class="digest-head">
+                <div>
+                  <span class="artifact-kind">${escapeHtml(test.status)}</span>
+                  <h3>${title}</h3>
+                </div>
+                <button
+                  type="button"
+                  class="copy-button"
+                  data-copy-summary="${debugSummary}"
+                  aria-label="Copy debug summary"
+                >
+                  Copy summary
+                </button>
+              </div>
+              <p>${summary}</p>
+              <div class="fact-row">
+                ${diagnosis?.locator ? `<span class="fact-chip">Locator: ${escapeHtml(diagnosis.locator)}</span>` : ""}
+                ${diagnosis?.expected ? `<span class="fact-chip">Expected: ${escapeHtml(diagnosis.expected)}</span>` : ""}
+                ${diagnosis?.received ? `<span class="fact-chip">Observed: ${escapeHtml(diagnosis.received)}</span>` : ""}
+              </div>
+            </article>
+          `;
+    })
+        .join("\n")}
+    </div>
+  `;
+};
+const renderSimilarFailureGroups = (groups) => {
+    if (!groups.length) {
+        return `<div class="empty-state">No failure groups were detected for this run.</div>`;
+    }
+    return groups
+        .map((group) => `
+        <article class="group-card">
+          <div class="failed-list-head">
+            <div>
+              <h3>${escapeHtml(group.signal)}</h3>
+              <p>${escapeHtml(group.summary)}</p>
+            </div>
+            <div class="group-count">${group.tests.length} ${pluralize(group.tests.length, "test", "tests")}</div>
+          </div>
+          ${group.locator
+        ? `<div class="fact-row"><span class="fact-chip">Common locator: ${escapeHtml(group.locator)}</span></div>`
+        : ""}
+          <ul class="group-list">
+            ${group.tests
+        .slice(0, 6)
+        .map((test) => `<li>${escapeHtml(test.title)}</li>`)
+        .join("\n")}
+          </ul>
+        </article>
+      `)
+        .join("\n");
+};
+const renderRunDiff = (runDiff) => {
+    if (!runDiff) {
+        return `<div class="empty-state">No previous run snapshot was available for comparison.</div>`;
+    }
+    return `
+    <div class="diff-label">${escapeHtml(runDiff.label)}</div>
+    <div class="summary-grid">
+      <div class="summary-card">
+        <span class="summary-label">New failures</span>
+        <span class="summary-value">${runDiff.newFailures.length}</span>
+      </div>
+      <div class="summary-card">
+        <span class="summary-label">Fixed since last run</span>
+        <span class="summary-value">${runDiff.fixedTests.length}</span>
+      </div>
+      <div class="summary-card">
+        <span class="summary-label">Still failing</span>
+        <span class="summary-value">${runDiff.stillFailing.length}</span>
+      </div>
+    </div>
+    <div class="diff-grid">
+      <article class="diff-card">
+        <h3>New failures</h3>
+        ${runDiff.newFailures.length
+        ? `<ul class="group-list">${runDiff.newFailures.map((test) => `<li>${escapeHtml(test.title)}</li>`).join("\n")}</ul>`
+        : `<div class="empty-state">No new failures in this run.</div>`}
+      </article>
+      <article class="diff-card">
+        <h3>Fixed since last run</h3>
+        ${runDiff.fixedTests.length
+        ? `<ul class="group-list">${runDiff.fixedTests.map((test) => `<li>${escapeHtml(test.title)}</li>`).join("\n")}</ul>`
+        : `<div class="empty-state">No previously failing tests were fixed in this run.</div>`}
+      </article>
+      <article class="diff-card">
+        <h3>Still failing</h3>
+        ${runDiff.stillFailing.length
+        ? `<ul class="group-list">${runDiff.stillFailing.map((test) => `<li>${escapeHtml(test.title)}</li>`).join("\n")}</ul>`
+        : `<div class="empty-state">No tests remained failing across both runs.</div>`}
+      </article>
+    </div>
+  `;
+};
 const renderAdditionalArtifacts = (artifacts) => {
     if (artifacts.length === 0) {
         return "";
@@ -462,8 +728,9 @@ const tryMapRemainingArtifactsToTests = (tests, artifactPaths, reportDir, usedRe
         }
     }
 };
-const buildHtml = (tests, summary, extraArtifacts) => {
+const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
     const failedTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    const similarGroups = groupSimilarFailures(tests);
     const generatedAt = new Date().toLocaleString();
     return `<!doctype html>
 <html lang="en">
@@ -776,6 +1043,60 @@ const buildHtml = (tests, summary, extraArtifacts) => {
       .section-shell li {
         margin-top: 6px;
       }
+      .digest-grid, .diff-grid {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        margin-top: 18px;
+      }
+      .digest-card, .group-card, .diff-card {
+        border: 1px solid rgba(125, 211, 252, 0.16);
+        border-radius: 16px;
+        background: rgba(9, 13, 20, 0.72);
+        padding: 16px;
+      }
+      .digest-head, .diagnosis-shell {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      .digest-card p,
+      .group-card p,
+      .diff-card p,
+      .diagnosis-copy {
+        margin: 10px 0 0;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+      .fact-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 14px;
+      }
+      .fact-chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 6px 10px;
+        border-radius: 999px;
+        border: 1px solid rgba(125, 211, 252, 0.2);
+        background: rgba(125, 211, 252, 0.06);
+        color: #cdefff;
+        font-size: 12px;
+      }
+      .group-count, .diff-label {
+        color: var(--accent);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .group-list {
+        margin: 14px 0 0 18px;
+        color: var(--text);
+      }
+      .group-list li {
+        margin-top: 8px;
+      }
       .empty-state {
         color: var(--muted);
         border: 1px dashed rgba(39, 48, 66, 0.9);
@@ -880,6 +1201,32 @@ const buildHtml = (tests, summary, extraArtifacts) => {
         </div>
       </header>
 
+      <section class="section-shell">
+        <div class="failed-list-head">
+          <h2>Run-to-Run Diff</h2>
+        </div>
+        <p>Compare this run with the latest saved snapshot from the same branch.</p>
+        ${renderRunDiff(runDiff)}
+      </section>
+
+      <section class="section-shell">
+        <div class="failed-list-head">
+          <h2>Failure Digest</h2>
+          <div class="failed-count">${failedTests.length} failed</div>
+        </div>
+        <p>Deterministic summaries built from the Playwright error, locator, assertion text, and timeout.</p>
+        ${renderFailureDigest(tests)}
+      </section>
+
+      <section class="section-shell">
+        <div class="failed-list-head">
+          <h2>Similar Failures</h2>
+          <div class="failed-count">${similarGroups.length} groups</div>
+        </div>
+        <p>Failures are grouped by the most likely common cause so you can separate one bug from many symptoms.</p>
+        ${renderSimilarFailureGroups(similarGroups)}
+      </section>
+
       <section class="section-shell">
         <div class="failed-list-head">
           <h2>Failed Tests</h2>
@@ -973,6 +1320,32 @@ const buildHtml = (tests, summary, extraArtifacts) => {
           });
         });
 
+        document.querySelectorAll("[data-copy-summary]").forEach(function (button) {
+          button.addEventListener("click", async function () {
+            var rawSummary = button.getAttribute("data-copy-summary");
+            if (!rawSummary) return;
+            var text = rawSummary
+              .replace(/&quot;/g, '"')
+              .replace(/&#39;/g, "'")
+              .replace(/&lt;/g, "<")
+              .replace(/&gt;/g, ">")
+              .replace(/&amp;/g, "&");
+            try {
+              await navigator.clipboard.writeText(text);
+              var previousText = button.textContent;
+              button.textContent = "Copied";
+              setTimeout(function () {
+                button.textContent = previousText || "Copy summary";
+              }, 1200);
+            } catch (_error) {
+              button.textContent = "Copy failed";
+              setTimeout(function () {
+                button.textContent = previousText || "Copy summary";
+              }, 1200);
+            }
+          });
+        });
+
         var overlay = document.getElementById("preview-overlay");
         var previewImage = document.getElementById("preview-image");
         var previewClose = document.getElementById("preview-close");
@@ -1027,7 +1400,8 @@ function generateLocalDebugReport(options) {
     const reportJsonRaw = fs_1.default.readFileSync(options.playwrightJsonPath, "utf8");
     const reportJson = JSON.parse(reportJsonRaw);
     const reportRoot = { suites: reportJson?.suites || [] };
-    const tests = collectTests(reportRoot);
+    const diagnosisById = buildDiagnosisMap(options.playwrightJsonPath);
+    const tests = collectTests(reportRoot, diagnosisById);
     const testsById = new Map(tests.map((test) => [test.id, test]));
     const claimedSourcePaths = new Set();
     const attachArtifactToTest = (sourcePath, testId) => {
@@ -1072,13 +1446,17 @@ function generateLocalDebugReport(options) {
         extraArtifacts.push(artifact);
     }
     const summary = summarizeTests(tests);
-    const html = buildHtml(tests, summary, extraArtifacts);
+    const snapshot = buildRunSnapshot(tests, summary);
+    const runDiff = buildRunDiff(tests, snapshot);
+    writeRunHistory(snapshot);
+    const html = buildHtml(tests, summary, extraArtifacts, runDiff);
     fs_1.default.writeFileSync(reportHtmlPath, html, "utf8");
     fs_1.default.writeFileSync(redirectPath, `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=${relativeFromCwd(reportHtmlPath)}" /><title>Sentinel Playwright Reporter</title></head><body><p>Open <a href="${relativeFromCwd(reportHtmlPath)}">${relativeFromCwd(reportHtmlPath)}</a>.</p></body></html>`, "utf8");
     return {
         htmlPath: reportHtmlPath,
         redirectPath,
         artifactCount: claimedSourcePaths.size,
-        summary
+        summary,
+        runDiff
     };
 }

package/dist/quickDiagnosis.d.ts

@@ -1,5 +1,23 @@
+type DiagnosisSignal = "timeout" | "assertion_mismatch" | "locator_not_found" | "actionability" | "network" | "runtime" | "unknown";
 type QuickDiagnosis = {
     lines: string[];
 };
+export type FailureFacts = {
+    title: string;
+    titlePath: string[];
+    message: string;
+    signal: DiagnosisSignal;
+    locator: string | null;
+    expected: string | null;
+    received: string | null;
+    timeoutMs: number | null;
+    lastUrl: string | null;
+    status: string;
+};
+export declare const collectFailureFacts: (playwrightJsonPath: string) => FailureFacts[];
+export declare const describeFailure: (failure: FailureFacts) => string;
+export declare const buildDebugSummary: (failure: FailureFacts) => string;
+export declare const buildSimilarityKey: (failure: FailureFacts) => string;
+export declare const summarizeSignal: (signal: DiagnosisSignal) => "timeout while waiting for UI or network conditions" | "assertion mismatch between expected and rendered UI state" | "missing or changed locator" | "target element was not actionable" | "network or API failure" | "frontend runtime error" | "failure signal could not be classified cleanly";
 export declare const buildQuickDiagnosis: (playwrightJsonPath: string) => QuickDiagnosis | null;
 export {};

package/dist/quickDiagnosis.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildQuickDiagnosis = void 0;
+exports.buildQuickDiagnosis = exports.summarizeSignal = exports.buildSimilarityKey = exports.buildDebugSummary = exports.describeFailure = exports.collectFailureFacts = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const stripAnsi = (value) => value.replace(/\u001b\[[0-9;]*m/g, "");
 const toMessage = (result) => {
@@ -36,6 +36,37 @@ const classifySignal = (message) => {
         return "runtime";
     return "unknown";
 };
+const extractLocator = (message) => {
+    const locatorLine = message.match(/Locator:\s*(.+)/i);
+    if (locatorLine?.[1])
+        return locatorLine[1].trim();
+    const callLine = message.match(/(getByTestId|getByRole|getByText|locator)\([^)]+\)/);
+    return callLine?.[0] || null;
+};
+const extractExpected = (message) => {
+    const match = message.match(/Expected substring:\s*"([^"]+)"/i) ||
+        message.match(/Expected string:\s*"([^"]+)"/i) ||
+        message.match(/Expected:\s*"([^"]+)"/i);
+    return match?.[1] || null;
+};
+const extractReceived = (message) => {
+    const match = message.match(/Received string:\s*"([^"]+)"/i) ||
+        message.match(/Received:\s*"([^"]+)"/i);
+    return match?.[1] || null;
+};
+const extractTimeoutMs = (message) => {
+    const match = message.match(/Timeout:\s*(\d+)\s*ms/i) ||
+        message.match(/timeout(?: of)?\s*(\d+)\s*ms/i) ||
+        message.match(/(\d+)\s*ms/i);
+    if (!match)
+        return null;
+    const value = Number(match[1]);
+    return Number.isFinite(value) ? value : null;
+};
+const extractLastUrl = (message) => {
+    const match = message.match(/https?:\/\/[^\s)"']+/i);
+    return match?.[0] || null;
+};
 const signalSummary = (signal) => {
     switch (signal) {
         case "timeout":
@@ -82,37 +113,98 @@ const shortenTitle = (value) => {
     const parts = value.split(" > ").filter(Boolean);
     return parts[parts.length - 1] || value;
 };
-const buildQuickDiagnosis = (playwrightJsonPath) => {
+const collectFailureFacts = (playwrightJsonPath) => {
     if (!node_fs_1.default.existsSync(playwrightJsonPath))
-        return null;
+        return [];
     try {
         const raw = node_fs_1.default.readFileSync(playwrightJsonPath, "utf8");
         const parsed = JSON.parse(raw);
         const failedCases = flattenFailedCases(parsed);
-        if (!failedCases.length)
-            return null;
-        if (failedCases.length === 1) {
-            const failed = failedCases[0];
-            return {
-                lines: [
-                    `Test "${shortenTitle(failed.title)}" likely failed due to ${signalSummary(failed.signal)}.`
-                ]
-            };
-        }
-        const counts = new Map();
-        for (const failed of failedCases) {
-            counts.set(failed.signal, (counts.get(failed.signal) || 0) + 1);
-        }
-        const topSignal = Array.from(counts.entries()).sort((a, b) => b[1] - a[1])[0]?.[0] || "unknown";
-        return {
-            lines: [
-                `${failedCases.length} tests failed.`,
-                `Most common signal: ${signalSummary(topSignal)}.`
-            ]
-        };
+        return failedCases.map((failed) => ({
+            title: shortenTitle(failed.title),
+            titlePath: failed.title.split(" > ").filter(Boolean),
+            message: failed.message,
+            signal: failed.signal,
+            locator: extractLocator(failed.message),
+            expected: extractExpected(failed.message),
+            received: extractReceived(failed.message),
+            timeoutMs: extractTimeoutMs(failed.message),
+            lastUrl: extractLastUrl(failed.message),
+            status: "failed"
+        }));
     }
     catch {
+        return [];
+    }
+};
+exports.collectFailureFacts = collectFailureFacts;
+const describeFailure = (failure) => {
+    if (failure.signal === "assertion_mismatch" && failure.locator && failure.expected && failure.received) {
+        return `${failure.locator} showed "${failure.received}" instead of "${failure.expected}" before timeout.`;
+    }
+    if (failure.signal === "locator_not_found" && failure.locator) {
+        return `${failure.locator} was not found when the test expected it to be available.`;
+    }
+    if (failure.signal === "actionability" && failure.locator) {
+        return `${failure.locator} was found but was not actionable when the interaction ran.`;
+    }
+    if (failure.signal === "network") {
+        return `The test likely failed because a network or API request did not complete successfully.`;
+    }
+    if (failure.signal === "timeout") {
+        return `The expected UI or network condition did not complete before timeout.`;
+    }
+    if (failure.signal === "runtime") {
+        return `A frontend runtime error interrupted the test flow.`;
+    }
+    return `The failure signal could not be classified cleanly from the captured error.`;
+};
+exports.describeFailure = describeFailure;
+const buildDebugSummary = (failure) => {
+    const lines = [
+        `Test: ${failure.title}`,
+        `Diagnosis: ${(0, exports.describeFailure)(failure)}`
+    ];
+    if (failure.locator)
+        lines.push(`Locator: ${failure.locator}`);
+    if (failure.expected)
+        lines.push(`Expected: ${failure.expected}`);
+    if (failure.received)
+        lines.push(`Observed: ${failure.received}`);
+    if (failure.timeoutMs)
+        lines.push(`Timeout: ${failure.timeoutMs}ms`);
+    if (failure.lastUrl)
+        lines.push(`URL: ${failure.lastUrl}`);
+    return lines.join("\n");
+};
+exports.buildDebugSummary = buildDebugSummary;
+const buildSimilarityKey = (failure) => {
+    const locator = failure.locator || "unknown-locator";
+    const expected = failure.expected || "unknown-expected";
+    return `${failure.signal}|${locator}|${expected}`;
+};
+exports.buildSimilarityKey = buildSimilarityKey;
+exports.summarizeSignal = signalSummary;
+const buildQuickDiagnosis = (playwrightJsonPath) => {
+    const failures = (0, exports.collectFailureFacts)(playwrightJsonPath);
+    if (!failures.length)
         return null;
+    if (failures.length === 1) {
+        const failed = failures[0];
+        return {
+            lines: [`Test "${failed.title}" likely failed due to ${signalSummary(failed.signal)}.`]
+        };
+    }
+    const counts = new Map();
+    for (const failed of failures) {
+        counts.set(failed.signal, (counts.get(failed.signal) || 0) + 1);
     }
+    const topSignal = Array.from(counts.entries()).sort((a, b) => b[1] - a[1])[0]?.[0] || "unknown";
+    return {
+        lines: [
+            `${failures.length} tests failed.`,
+            `Most common signal: ${signalSummary(topSignal)}.`
+        ]
+    };
 };
 exports.buildQuickDiagnosis = buildQuickDiagnosis;

package/dist/reporter.js

@@ -59,7 +59,8 @@ class SentinelReporter {
             this.failedCount += 1;
         }
     }
-    printLocalReport(localReportPath) {
+    printLocalReport(localReport) {
+        const localReportPath = localReport.htmlPath;
         const relativeReportPath = path_1.default
             .relative(process.cwd(), localReportPath)
             .replace(/\\/g, "/");
@@ -85,6 +86,13 @@ class SentinelReporter {
             }
             console.log("");
         }
+        if (localReport.runDiff) {
+            console.log(yellow("Run-to-run diff"));
+            console.log(`  ${dim(`New failures: ${localReport.runDiff.newFailures.length}`)}`);
+            console.log(`  ${dim(`Fixed since last run: ${localReport.runDiff.fixedTests.length}`)}`);
+            console.log(`  ${dim(`Still failing: ${localReport.runDiff.stillFailing.length}`)}`);
+            console.log("");
+        }
         console.log(yellow("Tip"));
         console.log(`  ${dim("Want full AI analysis, shareable run links, and CI history?")}`);
         console.log(`  ${dim("Try Sentinel Cloud Beta free:")} ${cyan(formatTerminalLink("https://sentinelqa.com", "https://sentinelqa.com"))}`);
@@ -107,7 +115,7 @@ class SentinelReporter {
                 reportFileName: this.options.localReportFileName,
                 redirectFileName: this.options.localRedirectFileName
             });
-            this.printLocalReport(localReport.htmlPath);
+            this.printLocalReport(localReport);
             console.log("");
             if (hasSentinelToken && !hasCiEnv && !localUploadEnabled) {
                 console.log("Sentinel upload skipped for this local run.");

package/package.json

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