reporting-labs 0.1.0 → 0.1.2

package/README.md

@@ -231,7 +231,10 @@ Ready-to-copy samples: [docs/ci/github-actions.yml](https://github.com/naveenani
 
 ## Good to know
 
-- **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.
+- **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.
 - **Themes.** Light and dark follow the OS; the toggle in the header remembers the choice.

package/dist/reporter.d.ts

@@ -20,6 +20,8 @@ export default class ReportingLabsReporter implements Reporter {
     private pushOutput;
     onBegin(config: FullConfig, suite: Suite): void;
     onEnd(result: FullResult): Promise<void>;
+    /** Videos and traces are finalized asynchronously by the runner; wait until every file-backed attachment stops growing. */
+    private settleAttachmentFiles;
     /** Runtime facts for the Environment card: Playwright, Node, OS, browsers, CI job, git commit. */
     private collectEnv;
     private toDataBlock;

package/dist/reporter.js

@@ -73,10 +73,15 @@ class ReportingLabsReporter {
         const base = config.configFile ? path.dirname(config.configFile) : process.cwd();
         this.outDir = path.resolve(base, this.options.outputFolder ?? 'reporting-labs');
         this.assetsDir = path.join(this.outDir, 'assets');
-        fs.rmSync(this.outDir, { recursive: true, force: true });
-        fs.mkdirSync(this.assetsDir, { recursive: true });
+        // The previous report (and its assets) stays intact while the run is in progress;
+        // the folder is refreshed in onEnd, right before the new report is written.
+        fs.mkdirSync(this.outDir, { recursive: true });
     }
     async onEnd(result) {
+        await this.settleAttachmentFiles();
+        fs.rmSync(this.assetsDir, { recursive: true, force: true });
+        fs.mkdirSync(this.assetsDir, { recursive: true });
+        this.assetCounter = 0;
         const tests = [];
         const projects = new Set();
         let workers = 0;
@@ -196,6 +201,34 @@ class ReportingLabsReporter {
         }
     }
     // ---- helpers -------------------------------------------------------------
+    /** Videos and traces are finalized asynchronously by the runner; wait until every file-backed attachment stops growing. */
+    async settleAttachmentFiles() {
+        const paths = new Set();
+        for (const test of this.suite.allTests())
+            for (const r of test.results)
+                for (const a of r.attachments)
+                    if (a.path)
+                        paths.add(a.path);
+        const size = (p) => { try {
+            return fs.statSync(p).size;
+        }
+        catch {
+            return -1;
+        } };
+        const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+        for (const p of paths) {
+            let last = size(p);
+            for (let i = 0; i < 20; i++) { // up to ~5 s per file
+                if (last < 0)
+                    break; // not on disk (yet); nothing to wait for
+                await sleep(250);
+                const now = size(p);
+                if (now === last && now > 0)
+                    break;
+                last = now;
+            }
+        }
+    }
     /** Runtime facts for the Environment card: Playwright, Node, OS, browsers, CI job, git commit. */
     collectEnv(base) {
         const rows = [];

package/dist/template.js

@@ -612,6 +612,7 @@ html,body{-webkit-font-smoothing:antialiased}
 .clu2 .who .sep{color:var(--line-2);margin:0 7px} .clu2 .who .ex{color:var(--ink-3)}
 @media (max-width:640px){.attn2 .ow{display:none} .attn2 .pr{width:72px} .attn2 .pr small{display:none}}
 /* ---------- run status, errors outside tests, snippets ---------- */
+.att-err{padding:12px 14px;background:var(--fail-bg);color:var(--ink);border-radius:8px 8px 0 0;line-height:1.5} .att-err code{font:12px var(--mono);background:var(--surface);padding:1px 5px;border-radius:4px}
 .runbanner{margin-bottom:14px;padding:10px 14px;border-radius:10px;background:var(--flaky-bg);color:var(--flaky-ink);border:1px solid color-mix(in srgb,var(--flaky) 40%,transparent)}
 .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)}
@@ -1319,7 +1320,9 @@ function renderDetail(t){
   for(const a of imgs){ const m=a.name.match(/^(.*)-(expected|actual|diff)(\.\w+)?$/); if(m){ const set=cmp.get(m[1])||{}; set[m[2]]=a; cmp.set(m[1],set); } }
   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=>h('figure',{}, h('video',{src:a.src,controls:'',preload:'metadata',playsinline:''}), h('figcaption',{}, a.name, a.size?h('span',{},' · '+kb(a.size)):null, ' · ', h('a',{href:a.src,download:''},'download')))))); }
+  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), '. 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'},
     h('div',{}, h('b',{},a.name), a.size?h('span',{style:'color:var(--ink-3)'},' · '+kb(a.size)):null),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reporting-labs",
-  "version": "0.1.0",
-  "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.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",
     "html-report",