@reportforge/playwright-pdf 0.28.0 → 0.30.0

package/dist/templates/layouts/detailed.hbs

@@ -26,6 +26,8 @@
 
 {{#if sections.runDiff}}{{> run-diff variant='full'}}{{/if}}
 
+{{#if sections.browserMatrix}}{{> browser-matrix}}{{/if}}
+
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 
 {{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}

package/dist/templates/layouts/executive.hbs

@@ -26,6 +26,8 @@
 
 {{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend heroTrend=true) }}{{/if}}
 
+{{#if sections.browserMatrix}}{{> browser-matrix}}{{/if}}
+
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 
 {{#if sections.defectLog}}{{> defect-log }}{{/if}}

package/dist/templates/layouts/minimal.hbs

@@ -26,6 +26,8 @@
 
 {{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
 
+{{#if sections.browserMatrix}}{{> browser-matrix}}{{/if}}
+
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 
 {{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}

package/dist/templates/partials/browser-matrix.hbs

@@ -0,0 +1,34 @@
+{{#if browserMatrix}}
+<div class="section section--browser-matrix">
+  <h2>Cross-Browser Comparison</h2>
+  {{#if browserMatrix.rows.length}}
+  <p class="browser-matrix__intro">{{browserMatrix.divergentCount}} {{pluralise browserMatrix.divergentCount "test behaves" "tests behave"}} differently across the run's {{browserMatrix.projects.length}} projects.{{#if browserMatrix.hasFailures}} Failures first.{{/if}}</p>
+  <table class="browser-matrix__table">
+    <thead>
+      <tr>
+        <th>Test</th>
+        {{#each browserMatrix.projects}}<th class="browser-matrix__col">{{this}}</th>{{/each}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each browserMatrix.rows}}
+      <tr class="no-break">
+        <td class="browser-matrix__title">{{title}}</td>
+        {{#each statuses}}
+        <td class="browser-matrix__cell">{{#if this}}{{statusBadge this}}{{else}}<span class="browser-matrix__na">n/a</span>{{/if}}</td>
+        {{/each}}
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+  {{#if browserMatrix.truncated}}
+  <div class="browser-matrix__note">+ {{subtract browserMatrix.divergentCount browserMatrix.rows.length}} more divergent {{pluralise (subtract browserMatrix.divergentCount browserMatrix.rows.length) "test" "tests"}} not shown</div>
+  {{/if}}
+  {{#if browserMatrix.identicalCount}}
+  <div class="browser-matrix__note">{{browserMatrix.identicalCount}} {{pluralise browserMatrix.identicalCount "test behaves" "tests behave"}} the same in every project.</div>
+  {{/if}}
+  {{else}}
+  <p class="browser-matrix__intro">All {{browserMatrix.identicalCount}} comparable {{pluralise browserMatrix.identicalCount "test behaves" "tests behave"}} the same across the run's {{browserMatrix.projects.length}} projects.</p>
+  {{/if}}
+</div>
+{{/if}}

package/dist/templates/partials/charts.hbs

@@ -13,21 +13,29 @@
   <div class="flakiness-card__header">
     <span class="flakiness-card__title">Top flaky tests &mdash; last {{charts.flakinessTable.[0].totalRuns}} runs</span>
   </div>
+  {{#if charts.flakinessQuarantineTotal}}
+  <div class="flakiness-quarantine-callout">
+    <strong>{{charts.flakinessQuarantineTotal}} {{pluralise charts.flakinessQuarantineTotal "test exceeds" "tests exceed"}} the {{#if charts.flakinessQuarantineThreshold}}{{charts.flakinessQuarantineThreshold}}% {{/if}}quarantine threshold.</strong>
+    Quarantine or stabilize {{pluralise charts.flakinessQuarantineTotal "it before it masks" "them before they mask"}} real regressions.
+  </div>
+  {{/if}}
   <table class="flakiness-table">
     <thead>
       <tr>
         <th class="flakiness-table__test">Test</th>
         <th class="flakiness-table__rate">Flake rate</th>
         <th class="flakiness-table__count">Runs flaky</th>
+        <th class="flakiness-table__streak">Streak</th>
         <th class="flakiness-table__spark">History</th>
       </tr>
     </thead>
     <tbody>
       {{#each charts.flakinessTable}}
       <tr>
-        <td class="flakiness-table__test" title="{{this.title}}">{{this.title}}</td>
+        <td class="flakiness-table__test" title="{{this.title}}"><span class="flakiness-table__test-inner"><span class="flakiness-table__test-title">{{this.title}}</span>{{#if this.quarantine}}<span class="quarantine-chip">QUARANTINE</span>{{/if}}</span></td>
         <td class="flakiness-table__rate">{{this.flakeRate}}%</td>
         <td class="flakiness-table__count">{{this.flakeCount}} / {{this.totalRuns}}</td>
+        <td class="flakiness-table__streak">{{#if this.streak}}{{this.streak}}&times;{{else}}&ndash;{{/if}}</td>
         <td class="flakiness-table__spark">
           <span class="flaky-spark">
             {{#each this.sparkline}}

package/dist/templates/partials/defect-log.hbs

@@ -64,8 +64,8 @@
 
             {{#if execution.evidence}}
             <div class="evidence-links">
-              {{#if execution.evidence.tracePath}}<span class="evidence-link"><span class="evidence-link__tag">Trace</span><span class="evidence-link__path">{{execution.evidence.tracePath}}</span></span>{{/if}}
-              {{#if execution.evidence.videoPath}}<span class="evidence-link"><span class="evidence-link__tag">Video</span><span class="evidence-link__path">{{execution.evidence.videoPath}}</span></span>{{/if}}
+              {{#if execution.evidence.tracePath}}<span class="evidence-link"><span class="evidence-link__tag">Trace</span>{{#if execution.evidence.traceUrl}}<a class="evidence-link__path evidence-link__path--url" href="{{execution.evidence.traceUrl}}">{{execution.evidence.traceUrl}}</a>{{#if execution.evidence.traceQr}}<img class="evidence-link__qr" src="{{execution.evidence.traceQr}}" alt="Trace QR" />{{/if}}{{else}}<span class="evidence-link__path">{{execution.evidence.tracePath}}</span>{{/if}}</span>{{/if}}
+              {{#if execution.evidence.videoPath}}<span class="evidence-link"><span class="evidence-link__tag">Video</span>{{#if execution.evidence.videoUrl}}<a class="evidence-link__path evidence-link__path--url" href="{{execution.evidence.videoUrl}}">{{execution.evidence.videoUrl}}</a>{{#if execution.evidence.videoQr}}<img class="evidence-link__qr" src="{{execution.evidence.videoQr}}" alt="Video QR" />{{/if}}{{else}}<span class="evidence-link__path">{{execution.evidence.videoPath}}</span>{{/if}}</span>{{/if}}
             </div>
             {{/if}}
           </div>

package/dist/templates/partials/run-diff.hbs

@@ -3,7 +3,7 @@
   <h2>Since Last Run</h2>
   <div class="run-diff__head">
     <div class="run-diff__strip">
-      <span class="run-diff__count run-diff__count--new"><strong>{{runDiff.newFailures.length}}</strong> {{pluralise runDiff.newFailures.length "new failure" "new failures"}}</span>&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--fixed"><strong>{{runDiff.fixed.length}}</strong> fixed</span>&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--still"><strong>{{runDiff.stillFailing.length}}</strong> still failing</span>{{#if runDiff.noLongerRun.length}}&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--neutral"><strong>{{runDiff.noLongerRun.length}}</strong> no longer run</span>{{/if}}
+      <span class="run-diff__count run-diff__count--new"><strong>{{runDiff.newFailures.length}}</strong> {{pluralise runDiff.newFailures.length "new failure" "new failures"}}</span>&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--fixed"><strong>{{runDiff.fixed.length}}</strong> fixed</span>&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--still"><strong>{{runDiff.stillFailing.length}}</strong> still failing</span>{{#if runDiff.newlyFlaky.length}}&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--flaky"><strong>{{runDiff.newlyFlaky.length}}</strong> newly flaky</span>{{/if}}{{#if runDiff.noLongerRun.length}}&nbsp;&middot;&nbsp;<span class="run-diff__count run-diff__count--neutral"><strong>{{runDiff.noLongerRun.length}}</strong> no longer run</span>{{/if}}
     </div>
     <div class="run-diff__baseline">vs. previous run on {{formatDate runDiff.baselineTimestamp}}</div>
     {{#if runDiff.baselineTruncated}}
@@ -13,6 +13,7 @@
 
   {{#if (eq variant 'full')}}
   {{> run-diff-list items=runDiff.newFailures label="New Failures" }}
+  {{> run-diff-list items=runDiff.newlyFlaky label="Newly Flaky" }}
   {{> run-diff-list items=runDiff.fixed label="Fixed" }}
   {{> run-diff-list items=runDiff.stillFailing label="Still Failing" }}
   {{#if runDiff.noLongerRun.length}}

package/dist/templates/styles/base.css

@@ -954,3 +954,58 @@ code {
 /* The aggregate failure-analysis cluster section was retired — root causes now
    render as inline per-test chips in the suite breakdown (.root-cause-chip above).
    The .analysis-oneliner one-liner lives further up and is still used by executive. */
+
+/* ── Cross-browser comparison matrix (sections.browserMatrix) ───────────── */
+/* Divergent tests only; identical tests collapse into the note line. Cells
+   reuse the .badge--* status palette so the grid reads like the rest of the
+   report. Lives here (not a template css) because the section is toggle-able
+   across all three layouts. */
+.browser-matrix__intro {
+  font-size: 10px; color: var(--text-3); margin-bottom: 12px;
+}
+.browser-matrix__table th.browser-matrix__col {
+  width: 88px; text-align: center; text-transform: capitalize;
+}
+.browser-matrix__title {
+  font-size: 9.5px; color: var(--text-1); word-break: break-word;
+}
+.browser-matrix__cell { text-align: center; }
+.browser-matrix__cell .badge { min-width: 0; font-size: 7.5px; }
+.browser-matrix__na {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 8.5px; color: var(--text-3);
+}
+.browser-matrix__note {
+  font-size: 9px; color: var(--text-3); margin-top: 6px;
+}
+
+/* ── Flaky intelligence (quarantine + streak) ───────────────────────────── */
+/* The title cell ellipsizes; the chip must never be the part that clips, so
+   the cell content is a flex row: shrinking title span + fixed chip. */
+.flakiness-table__test-inner { display: flex; align-items: center; gap: 5px; min-width: 0; }
+.flakiness-table__test-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.flakiness-quarantine-callout {
+  font-size: 9.5px; color: var(--text-2);
+  background: var(--flaky-dim);
+  border: 1px solid var(--flaky);
+  border-radius: 6px; padding: 7px 10px; margin-bottom: 10px;
+}
+.quarantine-chip {
+  flex: none;
+  font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
+  font-size: 6.5px; letter-spacing: 0.7px;
+  color: var(--flaky); border: 1px solid var(--flaky);
+  border-radius: 3px; padding: 1px 4px;
+}
+.flakiness-table__streak { text-align: center; width: 52px; }
+.run-diff__count--flaky strong { color: var(--flaky); }
+
+/* ── Evidence deep links + QR (evidenceUrlTemplate) ─────────────────────── */
+.evidence-link__path--url {
+  color: var(--accent); text-decoration: none;
+  word-break: break-all;
+}
+.evidence-link__qr {
+  width: 44px; height: 44px; margin-left: 8px; vertical-align: middle;
+  border: 1px solid var(--border); border-radius: 3px; background: #fff;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Playwright Test reporter that generates designed PDF reports: minimal, detailed, and executive templates with CI/CD integrations",
   "license": "Elastic-2.0",
   "author": "ReportForge",
@@ -91,6 +91,7 @@
     "chrome-finder": "^1.0.7",
     "glob": "^13.0.6",
     "handlebars": "^4.7.8",
+    "qrcode-generator": "^2.0.4",
     "sharp": "^0.35.3",
     "zod": "^3.23.8"
   },