@testivai/witness-playwright 1.1.5 → 1.2.1

package/dist/config/ignore-selectors.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Helpers for the ignoreSelectors feature.
+ *
+ * Three sources, merged with deduplication (last-write-wins dedup via Set):
+ *   1. .testivai/config.json     — global OSS config (`ignoreSelectors` array)
+ *   2. testivai.config.ts/js     — power-user project config (`ignoreSelectors`)
+ *   3. testivai.witness() call   — per-snapshot override (`ignoreSelectors`)
+ *
+ * These functions are pure (no Playwright dependency) so they can be
+ * exercised in plain Jest unit tests without a browser.
+ */
+import { TestivAIConfig, TestivAIProjectConfig } from '../types';
+/**
+ * Read ignoreSelectors from `.testivai/config.json`.
+ * Returns `[]` when the file doesn't exist or is malformed.
+ *
+ * @param projectRoot  Directory that contains the `.testivai/` folder
+ */
+export declare function readWitnessConfigSelectors(projectRoot: string): string[];
+/**
+ * Collect and deduplicate ignoreSelectors from all three sources.
+ *
+ * Order of precedence for deduplication: earlier sources win (Set preserves
+ * insertion order, so the first occurrence of any selector survives).
+ *
+ * @param projectRoot    Path to the project root (where `.testivai/` lives)
+ * @param projectConfig  Loaded `testivai.config.ts` project config
+ * @param effectiveConfig  Merged per-snapshot TestivAIConfig
+ */
+export declare function collectIgnoreSelectors(projectRoot: string, projectConfig: TestivAIProjectConfig, effectiveConfig: TestivAIConfig): string[];
+/**
+ * Build a `<style>` tag content that hides every given selector via
+ * `visibility: hidden !important`.
+ *
+ * Returns an empty string when the selectors list is empty so callers can
+ * guard with `if (css)` before calling `page.addStyleTag`.
+ */
+export declare function buildIgnoreSelectorsCSS(selectors: string[]): string;

package/dist/config/ignore-selectors.js

@@ -0,0 +1,97 @@
+"use strict";
+/**
+ * Helpers for the ignoreSelectors feature.
+ *
+ * Three sources, merged with deduplication (last-write-wins dedup via Set):
+ *   1. .testivai/config.json     — global OSS config (`ignoreSelectors` array)
+ *   2. testivai.config.ts/js     — power-user project config (`ignoreSelectors`)
+ *   3. testivai.witness() call   — per-snapshot override (`ignoreSelectors`)
+ *
+ * These functions are pure (no Playwright dependency) so they can be
+ * exercised in plain Jest unit tests without a browser.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readWitnessConfigSelectors = readWitnessConfigSelectors;
+exports.collectIgnoreSelectors = collectIgnoreSelectors;
+exports.buildIgnoreSelectorsCSS = buildIgnoreSelectorsCSS;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Read ignoreSelectors from `.testivai/config.json`.
+ * Returns `[]` when the file doesn't exist or is malformed.
+ *
+ * @param projectRoot  Directory that contains the `.testivai/` folder
+ */
+function readWitnessConfigSelectors(projectRoot) {
+    try {
+        const configPath = path.join(projectRoot, '.testivai', 'config.json');
+        if (!fs.existsSync(configPath))
+            return [];
+        const raw = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+        return Array.isArray(raw.ignoreSelectors) ? raw.ignoreSelectors : [];
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Collect and deduplicate ignoreSelectors from all three sources.
+ *
+ * Order of precedence for deduplication: earlier sources win (Set preserves
+ * insertion order, so the first occurrence of any selector survives).
+ *
+ * @param projectRoot    Path to the project root (where `.testivai/` lives)
+ * @param projectConfig  Loaded `testivai.config.ts` project config
+ * @param effectiveConfig  Merged per-snapshot TestivAIConfig
+ */
+function collectIgnoreSelectors(projectRoot, projectConfig, effectiveConfig) {
+    const fromWitnessConfig = readWitnessConfigSelectors(projectRoot);
+    const fromProjectConfig = projectConfig.ignoreSelectors ?? [];
+    const fromSnapshot = effectiveConfig.ignoreSelectors ?? [];
+    return [...new Set([...fromWitnessConfig, ...fromProjectConfig, ...fromSnapshot])];
+}
+/**
+ * Build a `<style>` tag content that hides every given selector via
+ * `visibility: hidden !important`.
+ *
+ * Returns an empty string when the selectors list is empty so callers can
+ * guard with `if (css)` before calling `page.addStyleTag`.
+ */
+function buildIgnoreSelectorsCSS(selectors) {
+    if (selectors.length === 0)
+        return '';
+    return selectors.map(s => `${s} { visibility: hidden !important; }`).join('\n');
+}

package/dist/snapshot.js

@@ -42,6 +42,7 @@ const path = __importStar(require("path"));
 const url_1 = require("url");
 const sharp_1 = __importDefault(require("sharp"));
 const loader_1 = require("./config/loader");
+const ignore_selectors_1 = require("./config/ignore-selectors");
 /**
  * Generates a safe filename from a URL.
  * @param pageUrl The URL of the page.
@@ -94,6 +95,20 @@ async function snapshot(page, testInfo, name, config) {
     const baseFilename = `${timestamp}_${safeName}`;
     // 1. Capture full-page screenshot
     const screenshotPath = path.join(outputDir, `${baseFilename}.png`);
+    // In local mode: hide elements matching ignoreSelectors before the screenshot
+    // so dynamic content (version badges, timestamps, ads) doesn't cause false diffs.
+    // Sources (merged, deduped) — see config/ignore-selectors.ts:
+    //   1. .testivai/config.json  → ignoreSelectors  (global, OSS config)
+    //   2. testivai.config.ts     → ignoreSelectors  (global, power users)
+    //   3. testivai.witness(...)  → { ignoreSelectors } (per-snapshot override)
+    let ignoreStyleEl = null;
+    if (isLocalMode) {
+        const allSelectors = (0, ignore_selectors_1.collectIgnoreSelectors)(process.cwd(), projectConfig, effectiveConfig);
+        const css = (0, ignore_selectors_1.buildIgnoreSelectorsCSS)(allSelectors);
+        if (css) {
+            ignoreStyleEl = await page.addStyleTag({ content: css });
+        }
+    }
     // Check if scroll-and-stitch is explicitly requested (backup method)
     if (effectiveConfig.useBrowserCapture === false) {
         // Use scroll-and-stitch approach (backup method)
@@ -310,6 +325,11 @@ async function snapshot(page, testInfo, name, config) {
             await page.screenshot({ path: screenshotPath, fullPage: true });
         }
     }
+    // Restore any elements hidden for ignoreSelectors
+    if (ignoreStyleEl) {
+        await ignoreStyleEl.evaluate((el) => el.remove()).catch(() => { });
+        ignoreStyleEl = null;
+    }
     // 1.5. Local mode: also place the screenshot in the layout expected by
     //      @testivai/witness/report (subdirectory keyed by snapshot name).
     //      This is what `BaselineStore.listTemp()` and `compareAll()` enumerate.

package/dist/types.d.ts

@@ -216,6 +216,18 @@ export interface TestivAIConfig {
     selectors?: string[];
     /** Use browser capture for full-page screenshots (default: true, set to false for scroll-and-stitch) */
     useBrowserCapture?: boolean;
+    /**
+     * CSS selectors for elements to hide during screenshot capture (local mode).
+     * Elements are set to `visibility: hidden` before the screenshot is taken and
+     * restored immediately after — so dynamic content (version badges, timestamps,
+     * ads, live clocks) never contributes to the pixel diff.
+     *
+     * Can also be set globally in `.testivai/config.json` under `ignoreSelectors`.
+     * Per-snapshot values are merged with (not replaced by) the global list.
+     *
+     * Example: ["[data-testivai-ignore]", ".version-badge", "#live-chat-widget"]
+     */
+    ignoreSelectors?: string[];
 }
 /**
  * Layout/Bounding box data for an element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testivai/witness-playwright",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "description": "Playwright sensor for Testivai Visual Regression Test system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
     "sharp": "^0.34.5",
     "simple-git": "^3.21.0",
     "@testivai/common": "0.2.2",
-    "@testivai/witness": "1.0.4"
+    "@testivai/witness": "1.1.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",