@pixeyedev/playwright 0.4.4 → 0.4.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pixeye (pixeye.dev)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/browser.iife.js

@@ -1,10 +1,10 @@
-"use strict";var __pixeye=(()=>{var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of h(t))!f.call(e,i)&&i!==o&&c(e,i,{get:()=>t[i],enumerable:!(n=p(t,i))||n.enumerable});return e};var x=e=>b(c({},"__esModule",{value:!0}),e);var A={};g(A,{scanRegions:()=>l,stabilize:()=>m,waitForReady:()=>u});var S=[{selector:"[data-pixeye-mask]",type:"mask"},{selector:"[data-pixeye-ignore]",type:"ignore"},{selector:"[data-pixeye-dynamic]",type:"dynamic"},{selector:'[data-visual-test="blackout"]',type:"mask"},{selector:'[data-visual-test="removed"]',type:"ignore"},{selector:'[data-visual-test="transparent"]',type:"mask"},{selector:"[data-percy-ignore]",type:"ignore"},{selector:"[data-percy-mask]",type:"mask"},{selector:'[data-chromatic="ignore"]',type:"ignore"}],l=()=>{let e=[],t=new Set;for(let{selector:o,type:n}of S){let i=document.querySelectorAll(o);for(let a of i){if(t.has(a))continue;t.add(a);let r=a.getBoundingClientRect();r.width===0||r.height===0||e.push({type:n,selector:o,bounds:{x:Math.max(0,Math.round(r.x)),y:Math.max(0,Math.round(r.y)),width:Math.round(r.width),height:Math.round(r.height)}})}}return e};var d="__pixeye_stabilize",s=e=>{let t=document.getElementById(d);t||(t=document.createElement("style"),t.id=d,document.head.appendChild(t)),t.textContent+=e+`
+"use strict";var __pixeye=(()=>{var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!h.call(e,i)&&i!==o&&c(e,i,{get:()=>t[i],enumerable:!(n=p(t,i))||n.enumerable});return e};var S=e=>b(c({},"__esModule",{value:!0}),e);var T={};g(T,{scanRegions:()=>l,stabilize:()=>m,waitForReady:()=>y});var x=[{selector:"[data-pixeye-mask]",type:"mask"},{selector:"[data-pixeye-ignore]",type:"ignore"},{selector:"[data-pixeye-dynamic]",type:"dynamic"},{selector:'[data-visual-test="blackout"]',type:"mask"},{selector:'[data-visual-test="removed"]',type:"ignore"},{selector:'[data-visual-test="transparent"]',type:"mask"},{selector:"[data-percy-ignore]",type:"ignore"},{selector:"[data-percy-mask]",type:"mask"},{selector:'[data-chromatic="ignore"]',type:"ignore"}],l=()=>{let e=[],t=new Set;for(let{selector:o,type:n}of x){let i=document.querySelectorAll(o);for(let a of i){if(t.has(a))continue;t.add(a);let r=a.getBoundingClientRect();r.width===0||r.height===0||e.push({type:n,selector:o,bounds:{x:Math.max(0,Math.round(r.x)),y:Math.max(0,Math.round(r.y)),width:Math.round(r.width),height:Math.round(r.height)}})}}return e};var d="__pixeye_stabilize",s=e=>{let t=document.getElementById(d);t||(t=document.createElement("style"),t.id=d,document.head.appendChild(t)),t.textContent+=e+`
 `},w=()=>{s(`
     * {
       -webkit-font-smoothing: antialiased !important;
       -moz-osx-font-smoothing: grayscale !important;
     }
-  `)},E=()=>{s(`
+  `)},E=()=>{if(s(`
     *, *::before, *::after {
       animation-duration: 0s !important;
       animation-delay: 0s !important;
@@ -12,9 +12,9 @@
       transition-delay: 0s !important;
       scroll-behavior: auto !important;
     }
-  `)},R=()=>{s(`
+  `),typeof document.getAnimations=="function")for(let e of document.getAnimations())try{e.finish()}catch{e.cancel()}for(let e of document.querySelectorAll("svg")){let t=e;if(typeof t.pauseAnimations=="function")try{t.pauseAnimations(),t.setCurrentTime(0)}catch{}}},A=()=>{s(`
     * { caret-color: transparent !important; }
     ::-webkit-scrollbar { display: none !important; }
     * { scrollbar-width: none !important; }
-  `),document.querySelectorAll("[contenteditable], textarea, input").forEach(e=>{e.setAttribute("spellcheck","false")})},v=()=>{document.querySelectorAll("img").forEach(e=>{let t=e.getBoundingClientRect(),o=Math.round(t.width),n=Math.round(t.height);(o!==t.width||n!==t.height)&&(e.style.width=`${o}px`,e.style.height=`${n}px`)})},T=()=>{document.querySelectorAll("*").forEach(e=>{let t=getComputedStyle(e);(t.position==="sticky"||t.position==="fixed")&&(e.style.position="absolute")})},m=(e={})=>{e.colorScheme&&(document.documentElement.style.colorScheme=e.colorScheme),e.fontAntialiasing!==!1&&w(),e.disableAnimations!==!1&&E(),e.hideNonDeterministic!==!1&&R(),e.roundImageSizes!==!1&&v(),e.stabilizeStickyFixed!==!1&&T(),e.css&&s(e.css)};var y=async(e,t,o)=>{let n=Date.now();for(;!e();){if(Date.now()-n>o)throw new Error(`[pixeye] waitForReady timed out waiting for: ${t}`);await new Promise(i=>setTimeout(i,100))}},u=async(e={})=>{let t=e.timeout??1e4,o=async()=>{await document.fonts.ready;let i=Array.from(document.querySelectorAll("img"));await Promise.all(i.filter(a=>!a.complete).map(a=>new Promise(r=>{a.addEventListener("load",()=>r(),{once:!0}),a.addEventListener("error",()=>r(),{once:!0})}))),await y(()=>!document.querySelector('[aria-busy="true"]'),'aria-busy="true" elements to clear',t),await y(()=>!document.querySelector("[data-pixeye-loading]"),"data-pixeye-loading elements to disappear",t)},n=new Promise((i,a)=>{setTimeout(()=>a(new Error(`[pixeye] waitForReady timed out after ${t}ms`)),t)});await Promise.race([o(),n])};return x(A);})();
+  `),document.querySelectorAll("[contenteditable], textarea, input").forEach(e=>{e.setAttribute("spellcheck","false")})},v=()=>{document.querySelectorAll("img").forEach(e=>{let t=e.getBoundingClientRect(),o=Math.round(t.width),n=Math.round(t.height);(o!==t.width||n!==t.height)&&(e.style.width=`${o}px`,e.style.height=`${n}px`)})},R=()=>{document.querySelectorAll("*").forEach(e=>{let t=getComputedStyle(e);(t.position==="sticky"||t.position==="fixed")&&(e.style.position="absolute")})},m=(e={})=>{e.colorScheme&&(document.documentElement.style.colorScheme=e.colorScheme),e.fontAntialiasing!==!1&&w(),e.disableAnimations!==!1&&E(),e.hideNonDeterministic!==!1&&A(),e.roundImageSizes!==!1&&v(),e.stabilizeStickyFixed!==!1&&R(),e.css&&s(e.css)};var u=async(e,t,o)=>{let n=Date.now();for(;!e();){if(Date.now()-n>o)throw new Error(`[pixeye] waitForReady timed out waiting for: ${t}`);await new Promise(i=>setTimeout(i,100))}},y=async(e={})=>{let t=e.timeout??1e4,o=async()=>{await document.fonts.ready;let i=Array.from(document.querySelectorAll("img"));await Promise.all(i.filter(a=>!a.complete).map(a=>new Promise(r=>{a.addEventListener("load",()=>r(),{once:!0}),a.addEventListener("error",()=>r(),{once:!0})}))),await u(()=>!document.querySelector('[aria-busy="true"]'),'aria-busy="true" elements to clear',t),await u(()=>!document.querySelector("[data-pixeye-loading]"),"data-pixeye-loading elements to disappear",t)},n=new Promise((i,a)=>{setTimeout(()=>a(new Error(`[pixeye] waitForReady timed out after ${t}ms`)),t)});await Promise.race([o(),n])};return S(T);})();
 if(typeof window!=="undefined")window.__pixeye=__pixeye;

package/dist/fixture.js

@@ -23,7 +23,8 @@ export const test = base.extend({
         setContext({
             outputDir,
             testFile,
-            testName: testInfo.title
+            testName: testInfo.title,
+            testId: testInfo.testId
         });
         const pixeyeApi = {
             screenshot: (target, name, options) => screenshot(target, name, options)

package/dist/reporter.d.ts

@@ -3,19 +3,38 @@ interface ReporterOptions {
     token?: string;
     server?: string;
     uploadConcurrency?: number;
+    /**
+     * Fail the test run (non-zero exit) when the upload is rejected for a
+     * CUSTOMER misconfiguration (bad token, lapsed plan/quota, permissions) so a
+     * run can't pass green with zero screenshots uploaded. Default `true`. Our
+     * transient faults (5xx/network) never fail the run regardless. Opt out with
+     * `failOnError: false` or `PIXEYE_FAIL_ON_ERROR=false`.
+     */
+    failOnError?: boolean;
 }
 declare const detectShard: (config: FullConfig) => {
     index: number;
     total: number;
 };
+/** The tests that failed after their retries, by the id the sidecar carries
+ *  (`testInfo.testId` = `TestCase.id`, unique across files, describes and
+ *  projects); a flaky test's last files are from the attempt that passed. */
+export declare const failedTestIds: (suite: Suite | null) => Set<string>;
+/** The server reads `testStatus` and keeps such a shot out of the review
+ *  and out of the baselines (`failed` diff status). */
+export declare const markFailedTests: (metadata: Record<string, unknown> | undefined, failed: Set<string>) => Record<string, unknown> | undefined;
 declare class PixeyeReporter implements Reporter {
     private options;
     private shard;
     private skipUpload;
+    private failOnError;
+    private suite;
     constructor(options?: ReporterOptions);
-    onBegin(config: FullConfig, _suite: Suite): void;
+    onBegin(config: FullConfig, suite: Suite): void;
     onTestEnd(_test: TestCase, _result: TestResult): void;
-    onEnd(_result: FullResult): Promise<void>;
+    onEnd(_result: FullResult): Promise<{
+        status: FullResult['status'];
+    } | undefined>;
 }
 export default PixeyeReporter;
 export { detectShard };

package/dist/reporter.js

@@ -1,6 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { detectCIEnvironment, discoverScreenshots, PixeyeClient, PixeyeError, runParallel } from '@pixeyedev/core';
+import { detectCIEnvironment, discoverScreenshots, isUploadMisconfig, PixeyeClient, renderUploadFailureBanner, resolveFailOnError, runParallel, swapImageExtension, uploadErrorSummary } from '@pixeyedev/core';
+import { CONTENT_TYPE_BY_FORMAT } from '@pixeyedev/shared';
 import { getContext } from './screenshot.js';
 const DEFAULT_UPLOAD_CONCURRENCY = 32;
 const detectShard = (config) => {
@@ -23,14 +24,29 @@ const detectShard = (config) => {
 const detectRunner = () => {
     return 'playwright';
 };
+/** The tests that failed after their retries, by the id the sidecar carries
+ *  (`testInfo.testId` = `TestCase.id`, unique across files, describes and
+ *  projects); a flaky test's last files are from the attempt that passed. */
+export const failedTestIds = (suite) => new Set((suite ? suite.allTests() : [])
+    .filter(test => test.outcome() === 'unexpected')
+    .map(test => test.id));
+/** The server reads `testStatus` and keeps such a shot out of the review
+ *  and out of the baselines (`failed` diff status). */
+export const markFailedTests = (metadata, failed) => metadata && typeof metadata.testId === 'string' && failed.has(metadata.testId)
+    ? { ...metadata, testStatus: 'failed' }
+    : metadata;
 class PixeyeReporter {
     options;
     shard = { index: 0, total: 1 };
     skipUpload = false;
+    failOnError;
+    suite = null;
     constructor(options = {}) {
         this.options = options;
+        this.failOnError = resolveFailOnError(options.failOnError, process.env.PIXEYE_FAIL_ON_ERROR);
     }
-    onBegin(config, _suite) {
+    onBegin(config, suite) {
+        this.suite = suite;
         const token = this.options.token ?? process.env.PIXEYE_TOKEN;
         if (!token) {
             console.warn('[pixeye] No PIXEYE_TOKEN found. Skipping upload. Screenshots will still be captured.');
@@ -59,8 +75,11 @@ class PixeyeReporter {
         try {
             files = await discoverScreenshots(outputDir);
         }
-        catch {
-            console.log('[pixeye] No screenshots found. Nothing to upload.');
+        catch (err) {
+            // A missing directory yields an empty list, so a THROW here is always a
+            // file we could not read — say which, instead of "no screenshots".
+            console.error(`[pixeye] Could not read screenshots in ${outputDir}.`);
+            console.error(`[pixeye] ${err.message}`);
             return;
         }
         if (files.length === 0) {
@@ -79,7 +98,9 @@ class PixeyeReporter {
         const concurrency = this.options.uploadConcurrency ?? DEFAULT_UPLOAD_CONCURRENCY;
         try {
             const client = new PixeyeClient({ serverUrl: server, token });
-            // 1. Create build
+            // 1. Create build. A run with a failed test is partial: the shots it
+            // never reached are not removed, and keep their baseline.
+            const failed = failedTestIds(this.suite);
             const prNumber = process.env.PIXEYE_PR ? parseInt(process.env.PIXEYE_PR, 10) : ci?.prNumber;
             const buildResponse = await client.createBuild({
                 projectToken: token,
@@ -87,13 +108,16 @@ class PixeyeReporter {
                 branch,
                 prNumber: prNumber && !isNaN(prNumber) ? prNumber : undefined,
                 shardCount: this.shard.total,
+                partial: failed.size > 0,
                 runner,
                 baseBranch: ci?.baseBranch
             });
             const buildId = buildResponse.build.id;
             // 2. Presign upload URLs
             const hashes = files.map(f => f.fileHash);
-            const formats = Object.fromEntries(files.filter(f => f.format === 'webp').map(f => [f.fileHash, 'webp']));
+            // Only non-PNG needs declaring: the server defaults to png. Filtering
+            // on 'webp' alone stored a sniffed jpeg under a .png key.
+            const formats = Object.fromEntries(files.filter(f => f.format !== 'png').map(f => [f.fileHash, f.format]));
             const presign = await client.presignUpload({
                 buildId,
                 hashes,
@@ -115,7 +139,7 @@ class PixeyeReporter {
                         return;
                     }
                     const buffer = await readFile(file.filePath);
-                    const contentType = file.format === 'webp' ? 'image/webp' : 'image/png';
+                    const contentType = CONTENT_TYPE_BY_FORMAT[file.format];
                     await client.uploadFile(url, buffer, contentType);
                     uploaded++;
                 });
@@ -123,7 +147,7 @@ class PixeyeReporter {
             // 4. Read metadata sidecars and build manifest
             const manifest = await Promise.all(files.map(async (f) => {
                 // Try to read companion .meta.json
-                const metaPath = f.filePath.replace(/\.(png|webp)$/, '.meta.json');
+                const metaPath = swapImageExtension(f.filePath, '.meta.json');
                 let metadata;
                 try {
                     const metaContent = await readFile(metaPath, 'utf-8');
@@ -138,7 +162,7 @@ class PixeyeReporter {
                     format: f.format,
                     width: f.width,
                     height: f.height,
-                    metadata
+                    metadata: markFailedTests(metadata, failed)
                 };
             }));
             // 5. Submit shard
@@ -150,12 +174,23 @@ class PixeyeReporter {
             console.log(`[pixeye] ${files.length} screenshots (${uploaded} new, ${presign.existing.length} cached) — ${server}/builds/${buildId}`);
         }
         catch (err) {
-            // Upload failure should NOT fail the test run
-            if (err instanceof PixeyeError) {
-                console.warn(`[pixeye] Upload failed (${err.status}): ${err.message}`);
+            // P0-2: a CUSTOMER misconfiguration (bad token, lapsed plan/quota,
+            // permissions) must NOT pass silently — surface a loud banner and fail
+            // the run by default so a green CI can't hide zero uploaded screenshots.
+            // Our transient faults (5xx/network/R2) only warn — never break their CI.
+            if (isUploadMisconfig(err)) {
+                console.error(renderUploadFailureBanner(err, { willFail: this.failOnError }));
+                if (this.failOnError) {
+                    // Playwright IGNORES `process.exitCode` — its runner calls
+                    // `process.exit(status === 'passed' ? 0 : 1)`, overriding it. The ONLY
+                    // reporter-side lever is returning a status from onEnd, which the
+                    // multiplexer applies (`result.status = outResult.status`). Return
+                    // 'failed' so a passing run with a rejected upload still exits non-zero.
+                    return { status: 'failed' };
+                }
             }
             else {
-                console.warn(`[pixeye] Upload failed: ${err.message}`);
+                console.warn(`[pixeye] Upload failed (transient — CI not failed): ${uploadErrorSummary(err)}`);
             }
         }
     }

package/dist/screenshot.d.ts

@@ -27,6 +27,7 @@ export interface ScreenshotContext {
     outputDir: string;
     testFile: string;
     testName: string;
+    testId?: string;
 }
 export declare const setContext: (ctx: ScreenshotContext) => void;
 export declare const getContext: () => ScreenshotContext | null;

package/dist/screenshot.js

@@ -200,6 +200,7 @@ export const screenshot = async (target, name, options = {}) => {
         colorScheme: options.colorScheme,
         testFile,
         testName,
+        testId: _context?.testId,
         threshold: options.threshold,
         regions: allRegions.length > 0 ? allRegions : undefined,
         componentBounds

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pixeyedev/playwright",
-  "version": "0.4.4",
+  "version": "0.4.6",
+  "license": "MIT",
   "private": false,
   "type": "module",
   "files": [
@@ -27,6 +28,7 @@
   },
   "scripts": {
     "build": "tsc && cp ../browser/dist/browser.iife.js dist/browser.iife.js",
+    "prepack": "rm -rf dist && npm run build",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "lint": "echo 'ok'",