reporting-labs 0.4.0 → 0.4.2

package/README.md

@@ -73,6 +73,7 @@ One line per test. With this the report can rank failures by priority, group the
 - Known keys: `priority`, `severity`, `owner`, `feature`, `epic`, `story`, `issue`, `component`, `team`. Any other key you pass is shown too.
 - Your Playwright tags like `@sanity` or `@regression` stay as they are and still show on the test.
 - To make story and epic keys clickable, set `links` in the config: `links: { story: 'https://yourteam.atlassian.net/browse/{id}' }`.
+- `priority`, `severity`, `feature` and `owner` each get a tab in the Breakdown chart and a filter on the Tests page. Want the same for your own key, say `meta({ team: 'web' })`? Add it to `dimensions` in the config: `dimensions: ['priority', 'severity', 'feature', 'owner', 'team']`.
 
 ### `log()`: a line in the report
 
@@ -219,6 +220,42 @@ Every outcome Playwright can produce, not just pass and fail:
 - interrupted runs show a banner with how many tests did not finish
 - the Environment card shows Playwright and Node versions, OS, browsers, workers, shard, the CI job link and the git commit
 
+## How it compares
+
+Legend: ✅ built in · 🟡 possible with manual setup or extra config · ❌ not in the official docs
+
+| Feature | Playwright HTML | Allure | reportingLabs |
+|---|:---:|:---:|:---:|
+| Single HTML file, opens without a server | ❌ folder, served by `show-report` | 🟡 single-file mode (2.24+, Allure 3 plugin), otherwise `allure open` | ✅ |
+| No extra tooling | ✅ | ❌ CLI needed; Allure 2 needs Java | ✅ npm package only |
+| Setup | ✅ built in | 🟡 reporter + generate step | ✅ one line in `reporter:` |
+| Steps, screenshots, videos, traces | ✅ | ✅ | ✅ |
+| Visual comparison viewer (slider, side by side, diff) | ❌ | ❌ | ✅ |
+| Tags and annotations shown | ✅ | ✅ labels via runtime API | ✅ `meta()` + tags |
+| Priority / severity / owner / feature / epic / story | 🟡 custom annotations | ✅ labels | ✅ |
+| Links to Jira, TMS | 🟡 annotation with a URL | ✅ `issue()`, `tms()` | ✅ `links` templates |
+| Failures ranked by priority and severity | ❌ | ❌ | ✅ Needs attention |
+| Failures by owner | ❌ | 🟡 owner label, no rollup documented | ✅ |
+| History across runs | ❌ | 🟡 History Trend when historical data is accumulated | ✅ history file, zero setup |
+| New vs known failures ("failing since #1840") | ❌ | ❌ | ✅ |
+| Flaky detection | ✅ `flaky` outcome per run | 🟡 `@Flaky` annotation (Java) | ✅ outcome + flakiest over last runs |
+| Got slower vs last run | ❌ | ❌ | ✅ |
+| Trend chart | ❌ | ✅ | ✅ |
+| Failures grouped by root cause | ❌ | 🟡 `categories.json` with regex | ✅ automatic clusters |
+| Failures explained in plain words | ❌ | ❌ | ✅ 18 kinds |
+| Bug report in one click | ❌ | ❌ | ✅ Markdown, Jira, text |
+| Environment info | ❌ | 🟡 `environment.properties` | ✅ automatic + `env` option |
+| API calls with request/response | ❌ | 🟡 manual attachments | ✅ automatic, Copy as cURL |
+| Logs and test data blocks | 🟡 attachments | 🟡 attachments, parameters | ✅ `log()`, `testData()` |
+| Secrets masked | ❌ | 🟡 parameter masking | ✅ automatic |
+| CSV / JSON export of failures, Slack summary | ❌ | ❌ | ✅ |
+| Timeline by worker | ❌ | ✅ | ✅ |
+| Combine shards / several runs | ✅ blob + `merge-reports` | ✅ Launches | ❌ on the roadmap |
+| Frameworks beyond Playwright | ❌ | ✅ many languages | ❌ on the roadmap |
+| Free and open source | ✅ | ✅ (Allure TestOps is a separate paid product) | ✅ MIT |
+
+Based on the official docs as of September 2026. ❌ means the feature is not described in the tool's documentation, not that it is impossible. Sources: Playwright [reporters](https://github.com/microsoft/playwright/blob/main/docs/src/test-reporters-js.md), [annotations](https://github.com/microsoft/playwright/blob/main/docs/src/test-annotations-js.md), [retries](https://github.com/microsoft/playwright/blob/main/docs/src/test-retries-js.md), [sharding](https://github.com/microsoft/playwright/blob/main/docs/src/test-sharding-js.md), [trace viewer](https://github.com/microsoft/playwright/blob/main/docs/src/trace-viewer-intro-js.md); Allure [allure-playwright](https://github.com/allure-framework/allure-js/blob/main/packages/allure-playwright/README.md), [Allure 3](https://github.com/allure-framework/allure3), [Allure 2.24.0 release](https://github.com/allure-framework/allure2/releases/tag/2.24.0), [Allure docs: command line](https://github.com/allure-framework/allure-docs/blob/main/content/reporting/commandline.md), [features](https://github.com/allure-framework/allure-docs/blob/main/content/gettingstarted/features.md), [report structure](https://github.com/allure-framework/allure-docs/blob/main/content/gettingstarted/report-structure.md). If something here is out of date, open an issue and it will be fixed.
+
 ## All options
 
 Every option is optional. `npx reporting-labs init` writes them all, with comments, into `reporting-labs.config.ts` (`--js` for JavaScript, `--force` to overwrite).
@@ -232,8 +269,8 @@ Every option is optional. `npx reporting-labs init` writes them all, with commen
 | `env` | – | Extra rows on the Environment card |
 | `links` | `{}` | Turn meta keys into links. `{id}` is replaced by the value |
 | `maskKeys` | `[]` | Extra keys to mask as `****` |
-| `dimensions` | `['priority','severity','feature','owner']` | Meta keys that get charts and filters |
-| `dimensionOrder` | P0…P4, blocker…trivial | Sort order per dimension |
+| `dimensions` | `['priority','severity','feature','owner']` | Which `meta()` keys get a tab in the Breakdown chart and a dropdown filter on the Tests page. Add your own key, e.g. `'team'`, to get a chart for it |
+| `dimensionOrder` | P0…P4, blocker…trivial | The order values appear in those charts and filters. Only needed for your own values, e.g. `{ severity: ['high','medium','low'] }` |
 | `widgets` | all on | Hide cards: `{ tags: false, timeline: false, ... }`. Failure clusters and the Trend chart are always shown |
 | `sections` | `[]` | Extra HTML below the summary, e.g. release notes |
 | `history` | `{ enabled: true, keep: 30 }` | Run history file; `file` sets a custom path |

package/bin/config-template.txt

@@ -35,8 +35,17 @@ const config: ReportingLabsOptions = {
 
   // ── Test details ─────────────────────────────────────────────────────────────
   // Values come from meta({ priority, severity, owner, feature, epic, story, ... }) in your tests.
-  // dimensions: ['priority', 'severity', 'feature', 'owner'],   // which meta keys get charts and filters
-  // dimensionOrder: { severity: ['blocker', 'critical', 'major', 'minor', 'trivial'] },
+  //
+  // dimensions: which meta keys get their own tab in the Breakdown chart and a dropdown filter on the
+  // Tests page. Default: priority, severity, feature, owner. Add your own key when you want a chart
+  // for it, e.g. meta({ team: 'web' }) + 'team' here = a "Team" tab showing pass/fail per team.
+  // Keys like epic and story do not need to be here: they show as chips and links on every test anyway.
+  // dimensions: ['priority', 'severity', 'feature', 'owner', 'team'],
+  //
+  // dimensionOrder: the order values appear in those charts and filters. Priority (P0..P4) and
+  // severity (blocker..trivial) are already ordered. Set this only for your own values,
+  // e.g. { severity: ['high', 'medium', 'low'] } or { team: ['web', 'api', 'mobile'] }.
+  // dimensionOrder: { severity: ['high', 'medium', 'low'] },
   // links: {                                         // turn meta keys into links; {id} is the value
   //   story: 'https://acme.atlassian.net/browse/{id}',
   //   epic: 'https://acme.atlassian.net/browse/{id}',

package/dist/template.js

@@ -176,7 +176,7 @@ a{color:var(--accent)}
 .donut svg circle{stroke-linecap:butt}
 /* failure clusters */
 .clu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
-.clu li{border:1px solid var(--line);border-left:3px solid var(--fail);border-radius:var(--radius);padding:8px 10px}
+.clu li{border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}
 .clu .msg{font:12px/1.45 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink);max-height:3em;overflow:hidden}
 .clu .who{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
 .clu .who button{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--fail-bg);color:var(--fail)} .clu .who button:hover{outline:1px solid var(--fail)}
@@ -283,7 +283,7 @@ a{color:var(--accent)}
 .tab{padding:8px 12px;font-size:13px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
 .tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
 .detail h4{font-size:13px;font-weight:600;color:var(--ink-2);margin:20px 0 8px}
-.err{background:var(--fail-bg);border-left:3px solid var(--fail);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;font:12.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink)}
+.err{background:var(--fail-bg);border:1px solid var(--line);padding:12px 14px;border-radius:var(--radius);font:12.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink)}
 .err+.err{margin-top:10px}
 .err details{margin-top:8px} .err summary{cursor:pointer;color:var(--ink-2);font-family:var(--sans);font-size:12px}
 .err .stack{color:var(--ink-2);margin-top:6px}
@@ -586,7 +586,7 @@ html,body{-webkit-font-smoothing:antialiased}
 .tabs{gap:6px} .tab{border-radius:8px 8px 0 0;font-weight:500}
 .tab[aria-selected=true]{color:var(--accent-2);border-bottom-color:var(--accent)}
 .detail h4{color:var(--accent-2);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
-.err{border-radius:0 8px 8px 0}
+.err{border-radius:8px}
 .meta{border-radius:8px;background:var(--surface)}
 .meta .k{text-transform:uppercase;font-size:10.5px;letter-spacing:.05em}
 .step{border-radius:6px} .step .cat{border-radius:4px}
@@ -627,12 +627,12 @@ html,body{-webkit-font-smoothing:antialiased}
 .note{padding:10px 14px;border-radius:8px;margin-bottom:10px;border:1px solid var(--line)} .note.ok{background:var(--pass-bg);color:var(--ink)} .note.warn{background:var(--flaky-bg);color:var(--flaky-ink)}
 .badge.xfail{background:var(--flaky-bg);color:var(--flaky-ink)}
 .errwrap+.errwrap{margin-top:14px}
-.why{border:1px solid var(--line);border-left:3px solid var(--fail);border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;margin-bottom:10px;background:var(--surface)}
+.why{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;background:var(--surface)}
 .why-c{font-size:12.5px;color:var(--ink);margin-bottom:2px;line-height:1.4} .why-c .why-k{margin-right:2px}
 .why-l{display:flex;align-items:center;gap:8px;margin-bottom:4px} .why-k{font-size:12px;font-weight:600;color:var(--fail)} .why-a{font:11.5px var(--mono);color:var(--ink-3)}
 .why-s{font-size:var(--fs);color:var(--ink);line-height:1.45} .why-h{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
-.why.assertion,.why.visual{border-left-color:#C77D14} .why.assertion .why-k,.why.visual .why-k{color:#9A6A00}
-.why.script,.why.thrown,.why.file{border-left-color:var(--ink-3)} .why.script .why-k,.why.thrown .why-k,.why.file .why-k{color:var(--ink-2)}
+.why.assertion .why-k,.why.visual .why-k{color:#9A6A00}
+.why.script .why-k,.why.thrown .why-k,.why.file .why-k{color:var(--ink-2)}
 .errloc{font-family:var(--mono);color:var(--ink-3);margin-bottom:6px} .errloc a{color:var(--accent-2);text-decoration:none} .errloc a:hover{text-decoration:underline}
 .snip{margin:10px 0 0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);line-height:1.55;white-space:pre;overflow:auto;color:var(--ink-2)}
 /* ---------- triage extras: history, diff, export, env, heatmap ---------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reporting-labs",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "reportingLabs – beautiful, customizable single-file HTML test reports. One line of config. Playwright adapter included, more runners on the way.",
   "keywords": [
     "test-report",