reporting-labs 0.1.1 → 0.1.3

package/README.md

@@ -35,6 +35,52 @@ open reporting-labs/index.html
 
 That is all. Everything below is optional.
 
+## Keep the reporter options in their own file (recommended)
+
+As soon as you set more than a title, put the reportingLabs options in a separate file. Your `playwright.config.ts` stays short, and all report settings live in one place.
+
+**Step 1.** Create the file (or let the CLI do it with `npx reporting-labs init`):
+
+```ts
+// reporting-labs.config.ts  (next to playwright.config.ts)
+import type { ReportingLabsOptions } from 'reporting-labs';
+
+const config: ReportingLabsOptions = {
+  title: 'My app – regression',
+  outputFolder: 'reports/reporting-labs',
+  embedVideos: true,
+  metadata: { env: process.env.TEST_ENV ?? 'local' },
+  // links: { story: 'https://yourteam.atlassian.net/browse/{id}' },
+};
+
+export default config;
+```
+
+**Step 2.** Import it in `playwright.config.ts` and add one line to your reporter list. Your other reporters keep working as before.
+
+```ts
+import { defineConfig } from '@playwright/test';
+import reportingLabs from './reporting-labs.config';
+
+export default defineConfig({
+  reporter: [
+    ['list'],
+    ['html', { open: 'never' }],
+    ['reporting-labs', reportingLabs],   // <- this line
+  ],
+});
+```
+
+That is it. The `ReportingLabsOptions` type gives you autocomplete for every option in your editor.
+
+If your reporter list differs between CI and local (a common pattern), add the same line to both branches:
+
+```ts
+reporter: process.env.CI
+  ? [['blob'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]]
+  : [['list'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]],
+```
+
 ## A tour of the report
 
 ### Overview: the state of the run in one screen
@@ -194,7 +240,7 @@ reporter: [['reporting-labs', {
 }]]
 ```
 
-`npx reporting-labs init` writes a starter `reporting-labs.config.ts`.
+`npx reporting-labs init` writes a starter `reporting-labs.config.ts`; see [Keep the reporter options in their own file](#keep-the-reporter-options-in-their-own-file-recommended).
 
 ## Running in CI
 
@@ -233,6 +279,7 @@ Ready-to-copy samples: [docs/ci/github-actions.yml](https://github.com/naveenani
 
 - **Single file.** Screenshots and fonts are embedded, so `index.html` works from a mail attachment or a CI artifact. Videos and large files go to `./assets` next to it, so keep the folder together when you move or share the report.
 - **Re-running tests replaces the report.** The previous report stays intact until the new run finishes, then `index.html` and `assets/` are replaced. A report tab opened from an earlier run will lose its videos at that point; archive the folder if you need to keep it.
+- **Videos on macOS.** If the report lives in Downloads, Desktop or Documents and you open it as a file, Chrome may be blocked from reading the sibling `assets/` files (the player shows a clear message). Allow Chrome under System Settings → Privacy & Security → Files and Folders, move the project elsewhere, or set `embedVideos: true` to put videos inside the HTML.
 - **Video download.** Served over http (CI artifact viewer, a local server) the download link saves the file; opened as a plain file the browser opens the video in a new tab instead, where the player's menu offers Save.
 - **Keyboard.** `j` / `k` next and previous test, `f` failed only, `/` search, `1`–`5` switch views, `Esc` close.
 - **Print.** A print stylesheet is included for PDF export.

package/dist/template.js

@@ -1321,7 +1321,7 @@ function renderDetail(t){
   const plainImgs=imgs.filter(a=>!/-(expected|actual|diff)(\.\w+)?$/.test(a.name));
   for(const [name,set] of cmp) if(set.expected&&set.actual) body.append(h('h4',{},'Visual comparison · '+name), compare(set)); else for(const k of Object.keys(set)) plainImgs.push(set[k]);
   if(vids.length){ body.append(h('h4',{},vids.length>1?'Videos':'Video'), h('div',{class:'vids'}, vids.map(a=>{ const fig=h('figure',{}); const v=h('video',{src:a.src,controls:'',preload:'metadata',playsinline:''});
-    v.addEventListener('error',()=>{ const code=v.error&&v.error.code; const why=code===4?'The file is missing, or it is not a format this browser can play.':code===2?'The file could not be read.':'The file could not be decoded.'; v.replaceWith(h('div',{class:'att-err'}, h('b',{},'Video could not be loaded.'), ' '+why+' Expected at ', h('code',{},a.src), '. Note: re-running the tests replaces the assets folder, so a report opened from an earlier run loses its videos.')); });
+    v.addEventListener('error',()=>{ const code=v.error&&v.error.code; const why=code===4?'The file is missing, or it is not a format this browser can play.':code===2?'The file could not be read.':'The file could not be decoded.'; v.replaceWith(h('div',{class:'att-err'}, h('b',{},'Video could not be loaded.'), ' '+why+' Expected at ', h('code',{},a.src), '. Common causes: on macOS, Chrome cannot read files next to a report opened from Downloads, Desktop or Documents until you allow it under System Settings → Privacy & Security → Files and Folders (or move the project elsewhere); or the assets folder was replaced by a newer run. Setting embedVideos: true in the reporter options puts videos inside the HTML and avoids both.')); });
     fig.append(v, h('figcaption',{}, a.name, a.size?h('span',{},' · '+kb(a.size)):null, ' · ', h('a',{href:a.src,download:'',target:'_blank',rel:'noopener',title:'Downloads when the report is served over http; opens in a new tab when opened as a file'},'download'))); return fig; }))); }
   if(plainImgs.length){ body.append(h('h4',{},plainImgs.length>1?'Screenshots':'Screenshot'), h('div',{class:'att'}, plainImgs.map(a=>h('figure',{}, h('img',{src:a.src,alt:a.name,loading:'lazy',onclick:()=>lightbox(a.src)}), h('figcaption',{},a.name))))); }
   if(traces.length){ body.append(h('h4',{},'Trace'), h('div',{class:'trace'}, traces.map(a=>h('div',{class:'trace-card'},

package/package.json

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