@reportforge/playwright-pdf 0.4.1 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.5.1] — 2026-06-19
+
+### Security
+
+- **Chart labels escaped for inline-script safety** — a suite / describe / file title containing `</script>` can no longer break out of the inline Chart.js data block in the rendered report (relevant when the reporter runs over untrusted test code, e.g. external-contributor CI).
+
+### Changed
+
+- **Sharper failure-analysis classification** — high-precision deterministic rules now label the error shapes the offline model struggles with: timed-out web-first assertions (`toHaveClass`/`toHaveText`/… with the element resolved) as **assertions**, connection/DNS/SSL errors as **network**, aborted/redirected/interrupted navigations as **navigation**, and resolved-to-0 / strict-mode locators as **locator-not-found**. Rules match the error header only, so call-log context and asserted values no longer cause mislabels (a navigation-wait timeout stays a timeout, a refused `page.goto` is network).
+
+---
+
+## [0.5.0] — 2026-06-19
+
+### Added
+
+- **Timed-out tests are first-class** — surfaced as their own KPI card, pass-rate doughnut slice, and Suite Results bar segment instead of being folded into "Failed".
+- **Release gate on every template** — the ship/hold verdict banner now appears in `minimal` and `detailed`, not just `executive`.
+- **Severity-ranked failures** — failure cards are colour-coded and ordered critical-first (also drives defect-log numbering and sidecar-overflow priority).
+- **Describe-block Suite Results** — a single-file run breaks down by describe block instead of rendering one bar.
+- **Threshold-coloured requirements coverage bars** — red `<50%`, amber `<80%`, green `≥80%`.
+
+### Changed
+
+- **Compact page flow** — large sections flow and break between rows instead of each starting on a fresh page; a typical `detailed` run drops ~2 pages.
+- The pass-rate verdict renders "TIMED OUT" instead of "TIMEDOUT".
+
+### Fixed
+
+- **Pass rate could exceed 100%** on runs with flaky tests — a passed-on-retry test was double-counted in both `passed` and `flaky`. It is now counted as flaky only, so the rate is correct and the KPI cards reconcile to the total.
+- The pass-rate doughnut centre now matches the KPI strip (single source of truth) rather than computing a second, divergent figure.
+- Timed-out status badges render with the correct styling, and timed-out tests are recovered in sharded (`shardResults`) runs instead of being reported as failures.
+
+---
+
 ## [0.4.0] — 2026-06-12
 
 ### Added

package/README.md

@@ -334,6 +334,10 @@ Everything in `minimal`, **plus** Chart.js pass-rate + suite-results charts, a n
 
 Full-page cover with verdict + KPI strip, followed by a compact dashboard with charts and a failures summary (titles only — **no raw stack traces**). Best for sprint reports and management dashboards.
 
+### Shared across all three
+
+Every report leads with a **release-gate** ship/hold banner derived from the run verdict, surfaces **timed-out** tests as their own KPI card and pass-rate chart slice, and lists failures **most-severe first** (with severity-coloured card borders in `minimal` and `detailed`). Pages **pack compactly** — large sections flow and break between rows instead of each starting on a fresh page. The Suite Results chart breaks a single-file run down by **describe block** so it never collapses to one bar. Requirements coverage bars are coloured by threshold (red <50%, amber <80%, green ≥80%).
+
 ### Generating multiple templates in one run
 
 Pass an array to `template` to generate one PDF per template from a single test run. The template name is appended to the output filename automatically:

package/dist/demo/cli.js

@@ -6251,7 +6251,8 @@ function statsFromTests(tests) {
   return {
     total: tests.length,
     passed: tests.filter((t) => t.status === "passed").length,
-    failed: tests.filter((t) => t.status === "failed" || t.status === "timedOut").length,
+    failed: tests.filter((t) => t.status === "failed").length,
+    timedOut: tests.filter((t) => t.status === "timedOut").length,
     skipped: tests.filter((t) => t.status === "skipped").length,
     flaky: tests.filter((t) => t.status === "flaky").length
   };
@@ -6381,7 +6382,7 @@ function buildDemoFailures() {
 }
 function buildDemoCharts(passed, failed, skipped, flaky, total) {
   return {
-    passRate: { passed, failed, skipped, flaky },
+    passRate: { passed, failed, timedOut: 0, skipped, flaky },
     suiteResults: [
       suiteEntry("auth", DEMO_AUTH_TESTS),
       suiteEntry("checkout", DEMO_CHECKOUT_TESTS),
@@ -6531,6 +6532,9 @@ function dominantCategory(clusters) {
 }
 
 // src/templates/engine.ts
+function jsonForInlineScript(value) {
+  return JSON.stringify(value).replace(/<\//g, "<\\/");
+}
 var TemplateEngine = class {
   constructor() {
     this.chartjsInline = "";
@@ -6714,6 +6718,19 @@ var TemplateEngine = class {
       "upperCase",
       (s) => typeof s === "string" ? s.toUpperCase() : s
     );
+    this.handlebars.registerHelper("verdictLabel", (v) => {
+      const map = {
+        passed: "PASSED",
+        failed: "FAILED",
+        timedout: "TIMED OUT",
+        interrupted: "INTERRUPTED"
+      };
+      return map[v] ?? (typeof v === "string" ? v.toUpperCase() : v);
+    });
+    this.handlebars.registerHelper("coverageBand", (pct) => {
+      const n = Number(pct);
+      return n >= 80 ? "high" : n >= 50 ? "mid" : "low";
+    });
     this.handlebars.registerHelper("addOne", (n) => (n ?? 0) + 1);
     this.handlebars.registerHelper(
       "join",
@@ -6733,7 +6750,7 @@ var TemplateEngine = class {
         if (!Array.isArray(arr)) return "";
         const values = arr.map((item) => {
           const v = item[key];
-          return typeof v === "string" ? JSON.stringify(v) : String(v ?? 0);
+          return typeof v === "string" ? jsonForInlineScript(v) : String(v ?? 0);
         });
         return new import_handlebars.default.SafeString(values.join(","));
       }
@@ -6744,7 +6761,7 @@ var TemplateEngine = class {
     this.handlebars.registerHelper("absFixed", (n) => Math.abs(n).toFixed(0));
     this.handlebars.registerHelper(
       "safeJsonData",
-      (value) => new import_handlebars.default.SafeString(JSON.stringify(value).replace(/<\//g, "<\\/"))
+      (value) => new import_handlebars.default.SafeString(jsonForInlineScript(value))
     );
     this.handlebars.registerHelper(
       "reverse",
@@ -11670,11 +11687,33 @@ var STRENGTH = {
   strongMinMargin: 0.25
 };
 var STRENGTH_LEVELS = ["weak", "moderate", "strong"];
-var FLAKY_MARGIN = 999;
+var OVERRIDE_MARGIN = 999;
 
 // src/analysis/FailureClusterer.ts
 var MAX_TESTS_PER_CLUSTER = 20;
 var MAX_MESSAGE_CHARS = 200;
+function errorHeader(message) {
+  const beforeCallLog = message.split(/\n\s*Call log:/i)[0];
+  return beforeCallLog.split("\n").filter((line) => !/^\s*[-+]?\s*(?:Expected|Received)\b/i.test(line)).join("\n");
+}
+function isAssertionTimeout(message) {
+  return /Expect "[^"]+" with timeout/.test(message) && /resolved to [1-9]\d* element/.test(message);
+}
+function isNetwork(message) {
+  return /net::ERR_(CONNECTION|NAME_NOT_RESOLVED|INTERNET_DISCONNECTED|SSL|TIMED_OUT|ADDRESS|NETWORK_CHANGED|EMPTY_RESPONSE)|\bECONN(?:REFUSED|RESET)\b|\bENOTFOUND\b|\bEAI_AGAIN\b|getaddrinfo|socket hang up|fetch failed/.test(errorHeader(message));
+}
+function isNavigation(message) {
+  return /net::ERR_(?:ABORTED|TOO_MANY_REDIRECTS)|navigation interrupted|interrupted by (?:a|another) navigation|because of a navigation|no history entry|page crashed|Execution context was destroyed|frame was detached/.test(errorHeader(message));
+}
+function isLocatorNotFound(message) {
+  return /strict mode violation|resolved to 0 element|element not found|not attached to the DOM|No node found for selector|no element matches|Unable to find an element/i.test(errorHeader(message));
+}
+var MESSAGE_RULES = [
+  [isAssertionTimeout, "assertion"],
+  [isNavigation, "navigation"],
+  [isNetwork, "network"],
+  [isLocatorNotFound, "locator-not-found"]
+];
 function strengthOf(margin) {
   if (margin >= STRENGTH.strongMinMargin) return "strong";
   if (margin >= STRENGTH.moderateMinMargin) return "moderate";
@@ -11697,11 +11736,15 @@ function representativeMessage(message) {
   return firstLine.length > MAX_MESSAGE_CHARS ? `${firstLine.slice(0, MAX_MESSAGE_CHARS)}\u2026` : firstLine;
 }
 function classifyOne(f, model) {
+  const frame = topFrame(f.error.stack);
   if (f.retryHistory.some((r) => r.status === "passed")) {
-    return { category: "flaky-by-retry", margin: FLAKY_MARGIN, failure: f, frame: topFrame(f.error.stack) };
+    return { category: "flaky-by-retry", margin: OVERRIDE_MARGIN, failure: f, frame };
+  }
+  for (const [match, category] of MESSAGE_RULES) {
+    if (match(f.error.message)) return { category, margin: OVERRIDE_MARGIN, failure: f, frame };
   }
   const { label, margin } = classify(model, classifyInput(f));
-  return { category: label, margin, failure: f, frame: topFrame(f.error.stack) };
+  return { category: label, margin, failure: f, frame };
 }
 function classifyAll(failures, model) {
   return failures.map((f) => classifyOne(f, model));

package/dist/index.js

@@ -10993,11 +10993,33 @@ var STRENGTH = {
   strongMinMargin: 0.25
 };
 var STRENGTH_LEVELS = ["weak", "moderate", "strong"];
-var FLAKY_MARGIN = 999;
+var OVERRIDE_MARGIN = 999;
 
 // src/analysis/FailureClusterer.ts
 var MAX_TESTS_PER_CLUSTER = 20;
 var MAX_MESSAGE_CHARS = 200;
+function errorHeader(message) {
+  const beforeCallLog = message.split(/\n\s*Call log:/i)[0];
+  return beforeCallLog.split("\n").filter((line) => !/^\s*[-+]?\s*(?:Expected|Received)\b/i.test(line)).join("\n");
+}
+function isAssertionTimeout(message) {
+  return /Expect "[^"]+" with timeout/.test(message) && /resolved to [1-9]\d* element/.test(message);
+}
+function isNetwork(message) {
+  return /net::ERR_(CONNECTION|NAME_NOT_RESOLVED|INTERNET_DISCONNECTED|SSL|TIMED_OUT|ADDRESS|NETWORK_CHANGED|EMPTY_RESPONSE)|\bECONN(?:REFUSED|RESET)\b|\bENOTFOUND\b|\bEAI_AGAIN\b|getaddrinfo|socket hang up|fetch failed/.test(errorHeader(message));
+}
+function isNavigation(message) {
+  return /net::ERR_(?:ABORTED|TOO_MANY_REDIRECTS)|navigation interrupted|interrupted by (?:a|another) navigation|because of a navigation|no history entry|page crashed|Execution context was destroyed|frame was detached/.test(errorHeader(message));
+}
+function isLocatorNotFound(message) {
+  return /strict mode violation|resolved to 0 element|element not found|not attached to the DOM|No node found for selector|no element matches|Unable to find an element/i.test(errorHeader(message));
+}
+var MESSAGE_RULES = [
+  [isAssertionTimeout, "assertion"],
+  [isNavigation, "navigation"],
+  [isNetwork, "network"],
+  [isLocatorNotFound, "locator-not-found"]
+];
 function strengthOf(margin) {
   if (margin >= STRENGTH.strongMinMargin) return "strong";
   if (margin >= STRENGTH.moderateMinMargin) return "moderate";
@@ -11020,11 +11042,15 @@ function representativeMessage(message) {
   return firstLine.length > MAX_MESSAGE_CHARS ? `${firstLine.slice(0, MAX_MESSAGE_CHARS)}\u2026` : firstLine;
 }
 function classifyOne(f, model) {
+  const frame = topFrame(f.error.stack);
   if (f.retryHistory.some((r) => r.status === "passed")) {
-    return { category: "flaky-by-retry", margin: FLAKY_MARGIN, failure: f, frame: topFrame(f.error.stack) };
+    return { category: "flaky-by-retry", margin: OVERRIDE_MARGIN, failure: f, frame };
+  }
+  for (const [match, category] of MESSAGE_RULES) {
+    if (match(f.error.message)) return { category, margin: OVERRIDE_MARGIN, failure: f, frame };
   }
   const { label, margin } = classify(model, classifyInput(f));
-  return { category: label, margin, failure: f, frame: topFrame(f.error.stack) };
+  return { category: label, margin, failure: f, frame };
 }
 function classifyAll(failures, model) {
   return failures.map((f) => classifyOne(f, model));
@@ -11233,11 +11259,13 @@ init_cjs_shims();
 
 // src/collector/stats-utils.ts
 init_cjs_shims();
+var TOP_SUITES_FOR_CHART = 10;
 function statsFromTests(tests) {
   return {
     total: tests.length,
     passed: tests.filter((t) => t.status === "passed").length,
-    failed: tests.filter((t) => t.status === "failed" || t.status === "timedOut").length,
+    failed: tests.filter((t) => t.status === "failed").length,
+    timedOut: tests.filter((t) => t.status === "timedOut").length,
     skipped: tests.filter((t) => t.status === "skipped").length,
     flaky: tests.filter((t) => t.status === "flaky").length
   };
@@ -11248,12 +11276,32 @@ function aggregateStats(parts) {
       total: acc.total + s.total,
       passed: acc.passed + s.passed,
       failed: acc.failed + s.failed,
+      timedOut: acc.timedOut + s.timedOut,
       skipped: acc.skipped + s.skipped,
       flaky: acc.flaky + s.flaky
     }),
-    { total: 0, passed: 0, failed: 0, skipped: 0, flaky: 0 }
+    { total: 0, passed: 0, failed: 0, timedOut: 0, skipped: 0, flaky: 0 }
   );
 }
+function toRow(s) {
+  return {
+    label: s.title,
+    passed: s.stats.passed,
+    failed: s.stats.failed,
+    timedOut: s.stats.timedOut,
+    skipped: s.stats.skipped
+  };
+}
+function buildSuiteResults(projects, limit) {
+  const top = projects.flatMap((p) => p.suites);
+  if (top.length <= 1 && top[0] && top[0].suites.length > 0) {
+    const file = top[0];
+    const fs14 = statsFromTests(file.tests);
+    const rootRow = file.tests.length > 0 ? [{ label: file.title, passed: fs14.passed, failed: fs14.failed, timedOut: fs14.timedOut, skipped: fs14.skipped }] : [];
+    return [...rootRow, ...file.suites.map(toRow)].slice(0, limit);
+  }
+  return top.map(toRow).slice(0, limit);
+}
 
 // src/collector/SuiteWalker.ts
 var SuiteWalker = class {
@@ -11313,6 +11361,18 @@ var SuiteWalker = class {
   }
 };
 
+// src/collector/severity.ts
+init_cjs_shims();
+var SEVERITY_RANK = {
+  critical: 0,
+  high: 1,
+  medium: 2,
+  low: 3
+};
+function sortBySeverity(failures) {
+  return [...failures].sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]);
+}
+
 // src/utils/env.ts
 init_cjs_shims();
 var import_child_process = require("child_process");
@@ -11402,7 +11462,6 @@ function gitCommit() {
 }
 
 // src/collector/DataCollector.ts
-var TOP_SUITES_FOR_CHART = 10;
 var DataCollector = class {
   constructor() {
     this.resultMap = /* @__PURE__ */ new Map();
@@ -11439,13 +11498,13 @@ var DataCollector = class {
   finalize(fullResult) {
     const walker = new SuiteWalker();
     const projects = walker.build(this.rootSuite, this.resultMap);
-    const stats = this.computeStats(projects, fullResult);
+    const stats = this.computeStats(fullResult);
     const environment = this.buildEnvironment();
     const charts = this.buildChartData(stats, projects);
     return {
       projects,
       stats,
-      failures: [...this.failureRecords],
+      failures: sortBySeverity(this.failureRecords),
       environment,
       charts
     };
@@ -11489,13 +11548,16 @@ var DataCollector = class {
     if (allLabels.some((l) => l.includes("low") || l.includes("minor"))) return "low";
     return "medium";
   }
-  computeStats(projects, fullResult) {
+  computeStats(fullResult) {
     let total = 0, passed = 0, failed = 0, skipped = 0, flaky = 0, timedOut = 0;
     for (const [, result] of this.resultMap) {
       total++;
       switch (result.status) {
+        // A test that passes on a retry (retry > 0) is flaky, NOT a clean pass.
+        // Counting it in `passed` too would double-count it against `flaky` and
+        // push passRate over 100%.
         case "passed":
-          passed++;
+          result.retry > 0 ? flaky++ : passed++;
           break;
         case "failed":
           failed++;
@@ -11512,13 +11574,6 @@ var DataCollector = class {
           break;
       }
     }
-    for (const project of projects) {
-      for (const suite of this.flattenSuites(project.suites)) {
-        for (const test of suite.tests) {
-          if (test.status === "flaky") flaky++;
-        }
-      }
-    }
     const duration = fullResult.duration ?? Date.now() - this.startTime;
     const passRate = total > 0 ? Math.round((passed + flaky) / total * 100) : 0;
     return {
@@ -11564,27 +11619,18 @@ var DataCollector = class {
     };
   }
   buildChartData(stats, projects) {
-    const suiteResults = projects.flatMap(
-      (p) => p.suites.map((s) => ({
-        label: s.title,
-        passed: s.stats.passed,
-        failed: s.stats.failed,
-        skipped: s.stats.skipped
-      }))
-    ).slice(0, TOP_SUITES_FOR_CHART);
+    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
     return {
       passRate: {
         passed: stats.passed,
         failed: stats.failed,
+        timedOut: stats.timedOut,
         skipped: stats.skipped,
         flaky: stats.flaky
       },
       suiteResults
     };
   }
-  flattenSuites(suites) {
-    return suites.flatMap((s) => [s, ...this.flattenSuites(s.suites)]);
-  }
 };
 
 // src/collector/ShardMerger.ts
@@ -11592,15 +11638,14 @@ init_cjs_shims();
 var import_fs3 = require("fs");
 var import_glob = require("glob");
 var import_node_module = require("module");
-var TOP_SUITES_FOR_CHART2 = 10;
 var ShardMerger = class {
   merge(filePaths) {
     if (filePaths.length === 0) throw new Error("shardResults: no valid JSON shard files found");
     const resolved = this.resolveShardPaths(filePaths);
     const reports = this.loadReports(resolved);
     const projects = this.mergeProjects(reports);
-    const stats = this.mergeStats(reports);
-    const failures = this.extractFailures(reports);
+    const stats = this.mergeStats(reports, projects);
+    const failures = sortBySeverity(this.extractFailures(reports));
     const environment = this.buildEnvironment(reports[0]);
     const charts = this.buildCharts(stats, projects);
     return { projects, stats, failures, environment, charts };
@@ -11707,7 +11752,7 @@ var ShardMerger = class {
       id: spec.id,
       title: spec.title,
       fullTitle: [...suitePath, spec.title].join(" > "),
-      status: this.resolveStatus(test),
+      status: this.resolveStatus(test, lastResult),
       duration: lastResult?.duration ?? 0,
       retryCount: test ? test.results.length - 1 : 0,
       tags: spec.tags ?? [],
@@ -11715,8 +11760,9 @@ var ShardMerger = class {
       location: `${spec.file}:${spec.line}`
     };
   }
-  resolveStatus(test) {
+  resolveStatus(test, lastResult) {
     if (!test) return "skipped";
+    if (lastResult?.status === "timedOut") return "timedOut";
     switch (test.status) {
       case "expected":
         return "passed";
@@ -11730,7 +11776,7 @@ var ShardMerger = class {
         return "failed";
     }
   }
-  mergeStats(reports) {
+  mergeStats(reports, projects) {
     let expected = 0, unexpected = 0, flaky = 0, skipped = 0, maxDuration = 0;
     for (const r of reports) {
       expected += r.stats.expected;
@@ -11741,13 +11787,14 @@ var ShardMerger = class {
     }
     const total = expected + unexpected + flaky + skipped;
     const passRate = total > 0 ? Math.round((expected + flaky) / total * 100) : 0;
+    const timedOut = projects.reduce((n, p) => n + p.stats.timedOut, 0);
     return {
       total,
       passed: expected,
-      failed: unexpected,
+      failed: Math.max(0, unexpected - timedOut),
       skipped,
       flaky,
-      timedOut: 0,
+      timedOut,
       duration: maxDuration,
       passRate,
       verdict: unexpected > 0 ? "failed" : "passed"
@@ -11825,18 +11872,13 @@ var ShardMerger = class {
     };
   }
   buildCharts(stats, projects) {
-    const suiteResults = projects.flatMap(
-      (p) => p.suites.map((s) => ({
-        label: s.title,
-        passed: s.stats.passed,
-        failed: s.stats.failed,
-        skipped: s.stats.skipped
-      }))
-    ).slice(0, TOP_SUITES_FOR_CHART2);
+    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
     return {
       passRate: {
         passed: stats.passed,
         failed: stats.failed,
+        timedOut: stats.timedOut,
+        // always 0 in shard JSON (no separate timedOut count)
         skipped: stats.skipped,
         flaky: stats.flaky
       },
@@ -11868,6 +11910,9 @@ function formatDuration(ms) {
 }
 
 // src/templates/engine.ts
+function jsonForInlineScript(value) {
+  return JSON.stringify(value).replace(/<\//g, "<\\/");
+}
 var TemplateEngine = class {
   constructor() {
     this.chartjsInline = "";
@@ -12051,6 +12096,19 @@ var TemplateEngine = class {
       "upperCase",
       (s) => typeof s === "string" ? s.toUpperCase() : s
     );
+    this.handlebars.registerHelper("verdictLabel", (v) => {
+      const map = {
+        passed: "PASSED",
+        failed: "FAILED",
+        timedout: "TIMED OUT",
+        interrupted: "INTERRUPTED"
+      };
+      return map[v] ?? (typeof v === "string" ? v.toUpperCase() : v);
+    });
+    this.handlebars.registerHelper("coverageBand", (pct) => {
+      const n = Number(pct);
+      return n >= 80 ? "high" : n >= 50 ? "mid" : "low";
+    });
     this.handlebars.registerHelper("addOne", (n) => (n ?? 0) + 1);
     this.handlebars.registerHelper(
       "join",
@@ -12070,7 +12128,7 @@ var TemplateEngine = class {
         if (!Array.isArray(arr)) return "";
         const values = arr.map((item) => {
           const v = item[key];
-          return typeof v === "string" ? JSON.stringify(v) : String(v ?? 0);
+          return typeof v === "string" ? jsonForInlineScript(v) : String(v ?? 0);
         });
         return new import_handlebars.default.SafeString(values.join(","));
       }
@@ -12081,7 +12139,7 @@ var TemplateEngine = class {
     this.handlebars.registerHelper("absFixed", (n) => Math.abs(n).toFixed(0));
     this.handlebars.registerHelper(
       "safeJsonData",
-      (value) => new import_handlebars.default.SafeString(JSON.stringify(value).replace(/<\//g, "<\\/"))
+      (value) => new import_handlebars.default.SafeString(jsonForInlineScript(value))
     );
     this.handlebars.registerHelper(
       "reverse",
@@ -13068,7 +13126,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.4.1" : "0.x";
+    const version = true ? "0.5.1" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,