@pixeyedev/playwright 0.4.5 → 0.4.7

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/codemods/from-argos.d.ts

@@ -1,10 +1 @@
-/**
- * Transform Argos CI code to Pixeye.
- * Usage: import and call transformArgos(sourceCode) -> transformed code
- *
- * Handles:
- * - import { argosScreenshot } from '@argos-ci/playwright' -> import { pixeye } from '@pixeyedev/playwright'
- * - argosScreenshot(page, name, opts) -> pixeye.screenshot(page, name, opts)
- * - { argosCSS: '...' } -> { css: '...' }
- */
 export declare const transformArgos: (source: string) => string;

package/dist/codemods/from-argos.js

@@ -1,19 +1,7 @@
-/**
- * Transform Argos CI code to Pixeye.
- * Usage: import and call transformArgos(sourceCode) -> transformed code
- *
- * Handles:
- * - import { argosScreenshot } from '@argos-ci/playwright' -> import { pixeye } from '@pixeyedev/playwright'
- * - argosScreenshot(page, name, opts) -> pixeye.screenshot(page, name, opts)
- * - { argosCSS: '...' } -> { css: '...' }
- */
 export const transformArgos = (source) => {
     let result = source;
-    // 1. Transform import
     result = result.replace(/import\s*\{\s*argosScreenshot\s*\}\s*from\s*['"]@argos-ci\/playwright['"]/g, "import { pixeye } from '@pixeyedev/playwright'");
-    // 2. Transform function calls
     result = result.replace(/argosScreenshot\s*\(/g, 'pixeye.screenshot(');
-    // 3. Transform option names
     result = result.replace(/argosCSS\s*:/g, 'css:');
     return result;
 };

package/dist/codemods/from-percy.d.ts

@@ -1,10 +1 @@
-/**
- * Transform Percy code to Pixeye.
- * Usage: import and call transformPercy(sourceCode) -> transformed code
- *
- * Handles:
- * - import percySnapshot from '@percy/playwright' -> import { pixeye } from '@pixeyedev/playwright'
- * - percySnapshot(page, name, opts) -> pixeye.screenshot(page, name, opts)
- * - { percyCSS: '...' } -> { css: '...' }
- */
 export declare const transformPercy: (source: string) => string;

package/dist/codemods/from-percy.js

@@ -1,19 +1,7 @@
-/**
- * Transform Percy code to Pixeye.
- * Usage: import and call transformPercy(sourceCode) -> transformed code
- *
- * Handles:
- * - import percySnapshot from '@percy/playwright' -> import { pixeye } from '@pixeyedev/playwright'
- * - percySnapshot(page, name, opts) -> pixeye.screenshot(page, name, opts)
- * - { percyCSS: '...' } -> { css: '...' }
- */
 export const transformPercy = (source) => {
     let result = source;
-    // 1. Transform import (default import)
     result = result.replace(/import\s+percySnapshot\s+from\s*['"]@percy\/playwright['"]/g, "import { pixeye } from '@pixeyedev/playwright'");
-    // 2. Transform function calls
     result = result.replace(/percySnapshot\s*\(/g, 'pixeye.screenshot(');
-    // 3. Transform option names
     result = result.replace(/percyCSS\s*:/g, 'css:');
     return result;
 };

package/dist/fixture.d.ts

@@ -1,17 +1,3 @@
-/**
- * Playwright test fixture that provides `pixeye` in every test.
- *
- * Usage:
- *   import { test, expect } from '@pixeyedev/playwright';
- *
- *   test('login page', async ({ page, pixeye }) => {
- *     await page.goto('/login');
- *     await pixeye.screenshot(page, 'login-page');
- *   });
- *
- * The fixture automatically populates testFile and testName from
- * Playwright's testInfo, so metadata is always accurate.
- */
 import { expect } from '@playwright/test';
 import { screenshot, type ScreenshotOptions } from './screenshot.js';
 export interface PixeyeFixture {

package/dist/fixture.js

@@ -1,29 +1,15 @@
-/**
- * Playwright test fixture that provides `pixeye` in every test.
- *
- * Usage:
- *   import { test, expect } from '@pixeyedev/playwright';
- *
- *   test('login page', async ({ page, pixeye }) => {
- *     await page.goto('/login');
- *     await pixeye.screenshot(page, 'login-page');
- *   });
- *
- * The fixture automatically populates testFile and testName from
- * Playwright's testInfo, so metadata is always accurate.
- */
 import { join } from 'node:path';
 import { expect, test as base } from '@playwright/test';
 import { screenshot, setContext } from './screenshot.js';
 export const test = base.extend({
-    // eslint-disable-next-line no-empty-pattern
     pixeye: async ({}, use, testInfo) => {
         const outputDir = join(process.cwd(), '.pixeye', 'screenshots');
         const testFile = testInfo.file ? testInfo.file.replace(process.cwd() + '/', '') : 'unknown';
         setContext({
             outputDir,
             testFile,
-            testName: testInfo.title
+            testName: testInfo.title,
+            testId: testInfo.testId
         });
         const pixeyeApi = {
             screenshot: (target, name, options) => screenshot(target, name, options)

package/dist/index.js

@@ -1,5 +1,4 @@
 export { expect, test } from './fixture.js';
 export { getContext, PIXEYE_BROWSER_ARGS, screenshot, setContext } from './screenshot.js';
-// ── Convenience namespace (backwards compat with design docs) ───────────────
 import { screenshot as screenshotFn } from './screenshot.js';
 export const pixeye = { screenshot: screenshotFn };

package/dist/reporter.d.ts

@@ -3,26 +3,22 @@ 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;
 };
+export declare const failedTestIds: (suite: Suite | null) => Set<string>;
+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<{
         status: FullResult['status'];

package/dist/reporter.js

@@ -1,14 +1,12 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { detectCIEnvironment, discoverScreenshots, isUploadMisconfig, PixeyeClient, renderUploadFailureBanner, resolveFailOnError, runParallel, uploadErrorSummary } from '@pixeyedev/core';
+import { detectCIEnvironment, discoverScreenshots, PixeyeClient, renderUploadFailureBanner, resolveFailOnError, resolveUploadConcurrency, runParallel, swapImageExtension } from '@pixeyedev/core';
+import { CONTENT_TYPE_BY_FORMAT } from '@pixeyedev/shared';
 import { getContext } from './screenshot.js';
-const DEFAULT_UPLOAD_CONCURRENCY = 32;
 const detectShard = (config) => {
-    // 1. Playwright config (1-indexed → 0-indexed)
     if (config.shard) {
         return { index: config.shard.current - 1, total: config.shard.total };
     }
-    // 2. Environment variables (0-indexed)
     const envIndex = process.env.PIXEYE_SHARD_INDEX;
     const envTotal = process.env.PIXEYE_SHARD_TOTAL;
     if (envIndex !== undefined) {
@@ -17,22 +15,29 @@ const detectShard = (config) => {
             total: envTotal ? parseInt(envTotal, 10) : 1
         };
     }
-    // 3. Default: no sharding
     return { index: 0, total: 1 };
 };
 const detectRunner = () => {
     return 'playwright';
 };
+export const failedTestIds = (suite) => new Set((suite ? suite.allTests() : [])
+    .filter(test => test.outcome() === 'unexpected')
+    .map(test => test.id));
+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.');
@@ -42,8 +47,6 @@ class PixeyeReporter {
         this.shard = detectShard(config);
     }
     onTestEnd(_test, _result) {
-        // Screenshots are already saved to disk by pixeye.screenshot().
-        // Nothing to do per-test.
     }
     async onEnd(_result) {
         if (this.skipUpload) {
@@ -54,15 +57,15 @@ class PixeyeReporter {
         if (!token) {
             return;
         }
-        // Discover screenshots saved by pixeye.screenshot()
         const ctx = getContext();
         const outputDir = ctx?.outputDir ?? join(process.cwd(), '.pixeye', 'screenshots');
         let files;
         try {
             files = await discoverScreenshots(outputDir);
         }
-        catch {
-            console.log('[pixeye] No screenshots found. Nothing to upload.');
+        catch (err) {
+            console.error(`[pixeye] Could not read screenshots in ${outputDir}.`);
+            console.error(`[pixeye] ${err.message}`);
             return;
         }
         if (files.length === 0) {
@@ -78,10 +81,11 @@ class PixeyeReporter {
             return;
         }
         const runner = detectRunner();
-        const concurrency = this.options.uploadConcurrency ?? DEFAULT_UPLOAD_CONCURRENCY;
+        let observes = false;
         try {
+            const concurrency = resolveUploadConcurrency(this.options.uploadConcurrency);
             const client = new PixeyeClient({ serverUrl: server, token });
-            // 1. Create build
+            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,
@@ -93,9 +97,9 @@ class PixeyeReporter {
                 baseBranch: ci?.baseBranch
             });
             const buildId = buildResponse.build.id;
-            // 2. Presign upload URLs
+            observes = client.observes;
             const hashes = files.map(f => f.fileHash);
-            const formats = Object.fromEntries(files.filter(f => f.format === 'webp').map(f => [f.fileHash, 'webp']));
+            const formats = Object.fromEntries(files.filter(f => f.format !== 'png').map(f => [f.fileHash, f.format]));
             const presign = await client.presignUpload({
                 buildId,
                 hashes,
@@ -106,7 +110,6 @@ class PixeyeReporter {
                     console.warn(`[pixeye] ${w}`);
                 }
             }
-            // 3. Upload new files
             const hashUrlPairs = Object.entries(presign.urls);
             const hashToFile = new Map(files.map(f => [f.fileHash, f]));
             let uploaded = 0;
@@ -117,22 +120,19 @@ 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++;
                 });
             }
-            // 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');
                     metadata = JSON.parse(metaContent);
                 }
                 catch {
-                    // No sidecar — that's fine
                 }
                 return {
                     name: f.name,
@@ -140,10 +140,9 @@ class PixeyeReporter {
                     format: f.format,
                     width: f.width,
                     height: f.height,
-                    metadata
+                    metadata: markFailedTests(metadata, failed)
                 };
             }));
-            // 5. Submit shard
             await client.submitShard({
                 buildId,
                 shardIndex: this.shard.index,
@@ -152,23 +151,10 @@ class PixeyeReporter {
             console.log(`[pixeye] ${files.length} screenshots (${uploaded} new, ${presign.existing.length} cached) — ${server}/builds/${buildId}`);
         }
         catch (err) {
-            // 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 (transient — CI not failed): ${uploadErrorSummary(err)}`);
+            const willFail = this.failOnError && !observes;
+            console.error(renderUploadFailureBanner(err, { willFail }));
+            if (willFail) {
+                return { status: 'failed' };
             }
         }
     }

package/dist/screenshot.d.ts

@@ -1,5 +1,4 @@
 import type { Locator, Page } from '@playwright/test';
-/** Browser args recommended for deterministic screenshots. */
 export declare const PIXEYE_BROWSER_ARGS: string[];
 export interface ScreenshotOptions {
     fullPage?: boolean;
@@ -27,6 +26,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

@@ -2,21 +2,16 @@ import { createHash } from 'node:crypto';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-/** Browser args recommended for deterministic screenshots. */
 export const PIXEYE_BROWSER_ARGS = [
     '--force-device-scale-factor=1',
     '--font-render-hinting=none',
     '--disable-lcd-text'
 ];
-// Shared context set by the reporter or test setup
 let _context = null;
 export const setContext = (ctx) => {
     _context = ctx;
 };
 export const getContext = () => _context;
-// ── IIFE loader ──────────────────────────────────────────────────────────────
-// The browser IIFE is copied into dist/ at build time (see package.json build script).
-// This avoids a runtime dependency on @pixeyedev/browser, which is private/internal.
 const THIS_DIR = dirname(fileURLToPath(import.meta.url));
 let _iifeCache = null;
 const loadIIFE = async () => {
@@ -26,13 +21,9 @@ const loadIIFE = async () => {
     _iifeCache = await readFile(join(THIS_DIR, 'browser.iife.js'), 'utf-8');
     return _iifeCache;
 };
-// ── Helpers ──────────────────────────────────────────────────────────────────
 const injectBrowserScripts = async (page) => {
     const iife = await loadIIFE();
-    // Check if already injected to avoid double-injection
-    const alreadyInjected = await page.evaluate(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    () => typeof window.__pixeye !== 'undefined');
+    const alreadyInjected = await page.evaluate(() => typeof window.__pixeye !== 'undefined');
     if (!alreadyInjected) {
         await page.evaluate(iife);
     }
@@ -49,7 +40,6 @@ const isLocator = (target) => {
 const sanitizePath = (str) => {
     return str.replace(/[^a-zA-Z0-9._/-]/g, '_');
 };
-// ── Mask resolution ──────────────────────────────────────────────────────────
 const resolveMaskRegions = async (page, masks) => {
     const regions = [];
     for (const selectorOrLocator of masks) {
@@ -72,7 +62,6 @@ const resolveMaskRegions = async (page, masks) => {
             }
         }
         else {
-            // Locator
             const box = await selectorOrLocator.boundingBox();
             if (box) {
                 regions.push({
@@ -90,7 +79,6 @@ const resolveMaskRegions = async (page, masks) => {
     }
     return regions;
 };
-// ── Capture with retry ───────────────────────────────────────────────────────
 const RETRY_DELAY_MS = 100;
 const captureOnce = async (target, options) => {
     const screenshotOpts = {};
@@ -115,7 +103,6 @@ const captureStable = async (target, options) => {
     if (retries <= 0) {
         return captureOnce(target, options);
     }
-    // Capture retries+1 times, find first consecutive duplicate (stable frame)
     const captures = [];
     const page = getPage(target);
     for (let i = 0; i <= retries; i++) {
@@ -130,13 +117,10 @@ const captureStable = async (target, options) => {
             return captures[i];
         }
     }
-    // No stable frame found — return the last capture
     return captures[captures.length - 1];
 };
-// ── Main screenshot function ─────────────────────────────────────────────────
 export const screenshot = async (target, name, options = {}) => {
     const page = getPage(target);
-    // Determine output directory
     const outputDir = _context?.outputDir ?? join(process.cwd(), '.pixeye', 'screenshots');
     const testFile = _context?.testFile ?? 'unknown';
     const testName = _context?.testName ?? '';
@@ -145,38 +129,27 @@ export const screenshot = async (target, name, options = {}) => {
     await mkdir(dir, { recursive: true });
     const pngPath = join(dir, `${name}.png`);
     const metaPath = join(dir, `${name}.meta.json`);
-    // 1. Inject browser scripts
     await injectBrowserScripts(page);
-    // 2. Stabilize the page
     await page.evaluate((opts) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         window.__pixeye.stabilize({
             css: opts.css,
             colorScheme: opts.colorScheme
         });
     }, { css: options.css, colorScheme: options.colorScheme });
-    // 3. Wait for page to be ready
     await page.evaluate((timeout) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return window.__pixeye.waitForReady({ timeout });
     }, options.waitForTimeout ?? 10_000);
-    // 4. Custom waitFor selector
     if (options.waitFor) {
         await page.waitForSelector(options.waitFor, {
             timeout: options.waitForTimeout ?? 10_000
         });
     }
-    // 5. Scan DOM for region attributes
     const scannedRegions = await page.evaluate(() => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return window.__pixeye.scanRegions();
     });
-    // 6. Resolve mask selectors/locators to region bounds
     const maskRegions = options.mask ? await resolveMaskRegions(page, options.mask) : [];
     const allRegions = [...scannedRegions, ...maskRegions];
-    // 7. Capture screenshot (with optional retry for stability)
     const buffer = await captureStable(target, options);
-    // 8. Get component bounds for element-level screenshots
     let componentBounds = null;
     if (isLocator(target)) {
         const box = await target.boundingBox();
@@ -189,10 +162,8 @@ export const screenshot = async (target, name, options = {}) => {
             };
         }
     }
-    // 9. Gather viewport + browser info
     const viewportSize = page.viewportSize();
     const browserName = page.context().browser()?.browserType().name() ?? 'unknown';
-    // 10. Build metadata sidecar
     const metadata = {
         version: 1,
         viewport: viewportSize ? { width: viewportSize.width, height: viewportSize.height } : undefined,
@@ -200,11 +171,11 @@ 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
     };
-    // 11. Write .png and .meta.json
     await writeFile(pngPath, buffer);
     await writeFile(metaPath, JSON.stringify(metadata, null, 2) + '\n');
     return pngPath;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pixeyedev/playwright",
-  "version": "0.4.5",
+  "version": "0.4.7",
+  "license": "MIT",
   "private": false,
   "type": "module",
   "files": [
@@ -27,14 +28,15 @@
   },
   "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'",
     "ai-check": "exit 0"
   },
   "dependencies": {
-    "@pixeyedev/core": "^0.4.0",
-    "@pixeyedev/shared": "^0.4.0"
+    "@pixeyedev/core": "^0.4.7",
+    "@pixeyedev/shared": "^0.4.7"
   },
   "peerDependencies": {
     "@playwright/test": ">=1.40.0"