@wdio/image-comparison-core 1.0.0

package/dist/methods/instanceData.d.ts

@@ -0,0 +1,6 @@
+import type { EnrichedInstanceData, InstanceOptions } from './instanceData.interfaces.js';
+/**
+ * Enrich the instance data with more data
+ */
+export default function getEnrichedInstanceData(browserInstance: WebdriverIO.Browser, instanceOptions: InstanceOptions, addShadowPadding: boolean): Promise<EnrichedInstanceData>;
+//# sourceMappingURL=instanceData.d.ts.map

package/dist/methods/instanceData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instanceData.d.ts","sourceRoot":"","sources":["../../src/methods/instanceData.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAEzF;;GAEG;AACH,wBAA8B,uBAAuB,CACjD,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,OAAO,GAC1B,OAAO,CAAC,oBAAoB,CAAC,CAsC/B"}

package/dist/methods/instanceData.interfaces.d.ts

@@ -0,0 +1,57 @@
+import type { ScreenDimensions } from '../clientSideScripts/screenDimensions.interfaces.js';
+import type { DeviceRectangles } from './rectangles.interfaces.js';
+export interface InstanceData {
+    /** The name of the app */
+    appName: string;
+    /** The browser name of the instance */
+    browserName: string;
+    /** The browser version of the instance */
+    browserVersion: string;
+    /** The device name of the instance */
+    deviceName: string;
+    /** The devicePixelRatio of the instance */
+    devicePixelRatio: number;
+    /** The mobile viewport position */
+    deviceRectangles: DeviceRectangles;
+    /** The initial devicePixelRatio of the instance */
+    initialDevicePixelRatio: number;
+    /** Is this an Android device */
+    isAndroid: boolean;
+    /** Is this an iOS device */
+    isIOS: boolean;
+    /** Is this a mobile instance */
+    isMobile: boolean;
+    /** The log name of the instance */
+    logName: string;
+    /** The name of the instance */
+    name: string;
+    /** If the instance creates native webscreenshots */
+    nativeWebScreenshot: boolean;
+    /** The platform name of the instance */
+    platformName: string;
+    /** The platform version of the instance */
+    platformVersion: string;
+}
+export interface InstanceOptions extends InstanceData {
+    /** The browser name of the instance */
+    addressBarShadowPadding: number;
+    /** The browser name of the instance */
+    toolBarShadowPadding: number;
+}
+export interface EnrichedInstanceData extends ScreenDimensions, InstanceOptions {
+    /** Is this an Android device */
+    isAndroid: boolean;
+    /** Is this an Android ChromeDriver screenshot */
+    isAndroidChromeDriverScreenshot: boolean;
+    /** Is this an Android Native screenshot */
+    isAndroidNativeWebScreenshot: boolean;
+    /** Is this an iOS device */
+    isIOS: boolean;
+    /** Is this a mobile instance */
+    isMobile: boolean;
+    /** Is this a test in a desktop browser */
+    isTestInBrowser: boolean;
+    /** Is this a test in a mobile browser */
+    isTestInMobileBrowser: boolean;
+}
+//# sourceMappingURL=instanceData.interfaces.d.ts.map

package/dist/methods/instanceData.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instanceData.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/instanceData.interfaces.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAA;AAC3F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAElE,MAAM,WAAW,YAAY;IACzB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mDAAmD;IACnD,uBAAuB,EAAE,MAAM,CAAC;IAChC,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACjD,uCAAuC;IACvC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uCAAuC;IACvC,oBAAoB,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,EAAE,eAAe;IAC3E,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,+BAA+B,EAAE,OAAO,CAAC;IACzC,2CAA2C;IAC3C,4BAA4B,EAAE,OAAO,CAAC;IACtC,4BAA4B;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,EAAE,OAAO,CAAC;IACzB,yCAAyC;IACzC,qBAAqB,EAAE,OAAO,CAAC;CAClC"}

package/dist/methods/instanceData.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/methods/instanceData.js

@@ -0,0 +1,42 @@
+import { checkAndroidChromeDriverScreenshot, checkAndroidNativeWebScreenshot, checkTestInBrowser, checkTestInMobileBrowser, getAddressBarShadowPadding, getToolBarShadowPadding, } from '../helpers/utils.js';
+import getScreenDimensions from '../clientSideScripts/getScreenDimensions.js';
+/**
+ * Enrich the instance data with more data
+ */
+export default async function getEnrichedInstanceData(browserInstance, instanceOptions, addShadowPadding) {
+    // Get the current browser data
+    const browserData = await browserInstance.execute(getScreenDimensions, instanceOptions.isMobile);
+    const { addressBarShadowPadding, toolBarShadowPadding, browserName, nativeWebScreenshot } = instanceOptions;
+    // Determine some constants
+    const isAndroid = browserInstance.isAndroid;
+    const isIOS = browserInstance.isIOS;
+    const isMobile = browserInstance.isMobile;
+    const isTestInBrowser = checkTestInBrowser(browserName);
+    const isTestInMobileBrowser = checkTestInMobileBrowser(isMobile, browserName);
+    const isAndroidNativeWebScreenshot = checkAndroidNativeWebScreenshot(isAndroid, nativeWebScreenshot);
+    const isAndroidChromeDriverScreenshot = checkAndroidChromeDriverScreenshot(isAndroid, nativeWebScreenshot);
+    const addressBarPadding = getAddressBarShadowPadding({
+        browserName,
+        isAndroid,
+        isIOS,
+        isMobile,
+        nativeWebScreenshot,
+        addressBarShadowPadding,
+        addShadowPadding,
+    });
+    const toolBarPadding = getToolBarShadowPadding({ isAndroid, isIOS, isMobile, browserName, toolBarShadowPadding, addShadowPadding });
+    // Return the new instance data object
+    return {
+        ...browserData,
+        ...instanceOptions,
+        addressBarShadowPadding: addressBarPadding,
+        isAndroid,
+        isAndroidChromeDriverScreenshot,
+        isAndroidNativeWebScreenshot,
+        isIOS,
+        isMobile,
+        isTestInBrowser,
+        isTestInMobileBrowser,
+        toolBarShadowPadding: toolBarPadding,
+    };
+}

package/dist/methods/instanceData.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=instanceData.test.d.ts.map

package/dist/methods/instanceData.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instanceData.test.d.ts","sourceRoot":"","sources":["../../src/methods/instanceData.test.ts"],"names":[],"mappings":""}

package/dist/methods/instanceData.test.js

@@ -0,0 +1,224 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import getEnrichedInstanceData from './instanceData.js';
+import { DEVICE_RECTANGLES, NOT_KNOWN } from '../helpers/constants.js';
+describe('getEnrichedInstanceData', () => {
+    const createMockBrowserInstance = (mockExecuteFn = vi.fn().mockResolvedValue({
+        dimensions: {
+            body: {
+                offsetHeight: 0,
+                scrollHeight: 0,
+            },
+            html: {
+                clientHeight: 0,
+                clientWidth: 0,
+                offsetHeight: 0,
+                scrollHeight: 0,
+                scrollWidth: 0,
+            },
+            window: {
+                devicePixelRatio: 1,
+                isEmulated: false,
+                innerHeight: 768,
+                innerWidth: 1024,
+                outerHeight: 768,
+                outerWidth: 1024,
+                screenHeight: 0,
+                screenWidth: 0,
+            },
+        }
+    }), customProperties = {}) => {
+        return {
+            execute: mockExecuteFn,
+            ...customProperties
+        };
+    };
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    const baseInstanceOptions = {
+        addressBarShadowPadding: 6,
+        toolBarShadowPadding: 6,
+        browserName: 'browserName',
+        browserVersion: 'browserVersion',
+        deviceName: 'deviceName',
+        logName: 'logName',
+        name: 'name',
+        nativeWebScreenshot: false,
+        platformName: 'platformName',
+        platformVersion: 'platformVersion',
+        // Defaults
+        appName: NOT_KNOWN,
+        devicePixelRatio: 1,
+        deviceRectangles: DEVICE_RECTANGLES,
+        initialDevicePixelRatio: 1,
+        isAndroid: false,
+        isIOS: false,
+        isMobile: false,
+    };
+    const createInstanceOptions = (overrides = {}) => ({
+        ...baseInstanceOptions,
+        ...overrides,
+    });
+    it('should be able to enrich the instance data with all the defaults for desktop with no shadow padding', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: false, isIOS: false, isMobile: false });
+        const instanceOptions = createInstanceOptions();
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), false);
+    });
+    it('should be able to enrich the instance data with all the defaults for Android ChromeDriver with no shadow padding', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: true, isIOS: false, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            platformName: 'Android',
+            platformVersion: '8.0',
+            isAndroid: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should be able to enrich the instance data with all the defaults for Android Native Webscreenshot with no shadow padding', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: true, isIOS: false, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            nativeWebScreenshot: true,
+            platformName: 'Android',
+            platformVersion: '8.0',
+            isAndroid: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should be able to enrich the instance data with all the defaults for iOS with shadow padding', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: false, isIOS: true, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            platformName: 'iOS',
+            platformVersion: '12.4',
+            isIOS: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, true);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle test in mobile browser scenario', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: true, isIOS: false, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            browserName: 'Chrome',
+            platformName: 'Android',
+            platformVersion: '11.0',
+            isAndroid: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle native context without browserName', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: false, isIOS: true, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            browserName: '',
+            platformName: 'iOS',
+            platformVersion: '15.0',
+            isIOS: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle case-insensitive platform names', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: true, isIOS: false, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            platformName: 'ANDROID',
+            platformVersion: '12.0',
+            isAndroid: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, true);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle unknown platform name', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: false, isIOS: false, isMobile: false });
+        const instanceOptions = createInstanceOptions({
+            platformName: 'Windows',
+            platformVersion: '10',
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), false);
+    });
+    it('should handle Android with shadow padding enabled', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: true, isIOS: false, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            browserName: 'Chrome',
+            nativeWebScreenshot: true,
+            platformName: 'Android',
+            platformVersion: '10.0',
+            isAndroid: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, true);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle iOS home bar padding calculation', async () => {
+        const mockBrowserInstance = createMockBrowserInstance(undefined, { isAndroid: false, isIOS: true, isMobile: true });
+        const instanceOptions = createInstanceOptions({
+            browserName: 'Safari',
+            platformName: 'iOS',
+            platformVersion: '16.0',
+            toolBarShadowPadding: 10,
+            isIOS: true,
+            isMobile: true,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, true);
+        expect(result).toMatchSnapshot();
+        expect(mockBrowserInstance.execute).toHaveBeenCalledWith(expect.any(Function), true);
+    });
+    it('should handle different screen dimensions', async () => {
+        const mockExecute = vi.fn().mockResolvedValue({
+            dimensions: {
+                body: {
+                    offsetHeight: 100,
+                    scrollHeight: 2000,
+                },
+                html: {
+                    clientHeight: 1080,
+                    clientWidth: 1920,
+                    offsetHeight: 1080,
+                    scrollHeight: 2000,
+                    scrollWidth: 1920,
+                },
+                window: {
+                    devicePixelRatio: 2,
+                    isEmulated: true,
+                    innerHeight: 1080,
+                    innerWidth: 1920,
+                    outerHeight: 1080,
+                    outerWidth: 1920,
+                    screenHeight: 1080,
+                    screenWidth: 1920,
+                },
+            }
+        });
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const instanceOptions = createInstanceOptions({
+            devicePixelRatio: 2,
+        });
+        const result = await getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false);
+        expect(result).toBeDefined();
+        expect(result.dimensions.window.devicePixelRatio).toBe(2);
+        expect(result.dimensions.window.isEmulated).toBe(true);
+    });
+    it('should handle browser execute failure gracefully', async () => {
+        const mockExecute = vi.fn().mockRejectedValue(new Error('Failed to get screen dimensions'));
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const instanceOptions = createInstanceOptions();
+        await expect(getEnrichedInstanceData(mockBrowserInstance, instanceOptions, false))
+            .rejects.toThrow('Failed to get screen dimensions');
+    });
+});

package/dist/methods/processDiffPixels.d.ts

@@ -0,0 +1,59 @@
+/**
+ * NOTE: This code/logic is based on logical research and support from the following sources:
+ * - Copilot AI
+ * - ChatGPT
+ *
+ * This is still a draft and may not be accurate, more research is needed and will tell you if this is correct.
+ * It produces the following log based on `150585` diff pixels:
+ *
+ * [0-0] Processing diff pixels started
+ * [0-0] Bounding boxes: [
+ * [0-0]   { left: 912, top: 743, right: 1144, bottom: 762 },
+ * [0-0]   { left: 650, top: 749, right: 790, bottom: 760 },
+ * [0-0]   { left: 537, top: 749, right: 644, bottom: 760 },
+ * [0-0]   { left: 377, top: 749, right: 415, bottom: 760 },
+ * [0-0]   { left: 362, top: 749, right: 371, bottom: 759 },
+ * [0-0]   { left: 290, top: 750, right: 356, bottom: 762 },
+ * [0-0]   { left: 159, top: 746, right: 284, bottom: 760 },
+ * [0-0]   { left: 536, top: 711, right: 754, bottom: 730 },
+ * [0-0]   { left: 913, top: 711, right: 1186, bottom: 730 },
+ * [0-0]   { left: 368, top: 717, right: 413, bottom: 730 },
+ * [0-0]   { left: 159, top: 711, right: 362, bottom: 728 },
+ * [0-0]   { left: 912, top: 652, right: 1144, bottom: 703 },
+ * [0-0]   { left: 536, top: 652, right: 790, bottom: 701 },
+ * [0-0]   { left: 377, top: 690, right: 415, bottom: 701 },
+ * [0-0]   { left: 362, top: 690, right: 371, bottom: 700 },
+ * [0-0]   { left: 159, top: 652, right: 356, bottom: 703 },
+ * [0-0]   { left: 129, top: 529, right: 1236, bottom: 633 },
+ * [0-0]   { left: 475, top: 457, right: 1046, bottom: 513 },
+ * [0-0]   { left: 319, top: 470, right: 454, bottom: 513 },
+ * [0-0]   { left: 387, top: 399, right: 514, bottom: 428 },
+ * [0-0]   { left: 818, top: 398, right: 978, bottom: 422 },
+ * [0-0]   { left: 527, top: 398, right: 807, bottom: 428 },
+ * [0-0]   { left: 600, top: 143, right: 766, bottom: 338 },
+ * [0-0]   { left: 25, top: 27, right: 56, bottom: 58 }
+ * [0-0] ]
+ * [0-0] Processing 150585 diff pixels
+ * [0-0] Union operations started
+ * [0-0] Union time: 155ms
+ * [0-0] Grouping pixels into bounding boxes
+ * [0-0] Grouping time: 19ms
+ * [0-0] Total analysis time: 209ms
+ * [0-0] Post-processing bounding boxes
+ * [0-0] Post-processing time: 3ms
+ * [0-0] Number merged: 24
+ */
+import type { Pixel, WicImageCompareOptions } from 'src/methods/images.interfaces.js';
+import type { BoundingBox } from './rectangles.interfaces.js';
+import type { IgnoreBoxes } from './rectangles.interfaces.js';
+import type { CompareData } from '../resemble/compare.interfaces.js';
+declare function processDiffPixels(diffPixels: Pixel[], proximity: number): BoundingBox[];
+/**
+ * Generate and save diff image with bounding boxes
+ */
+export declare function generateAndSaveDiff(data: CompareData, imageCompareOptions: WicImageCompareOptions, ignoredBoxes: IgnoreBoxes[], diffFilePath: string, rawMisMatchPercentage: number): Promise<{
+    diffBoundingBoxes: BoundingBox[];
+    storeDiffs: boolean;
+}>;
+export { processDiffPixels };
+//# sourceMappingURL=processDiffPixels.d.ts.map

package/dist/methods/processDiffPixels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processDiffPixels.d.ts","sourceRoot":"","sources":["../../src/methods/processDiffPixels.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAqFpE,iBAAS,iBAAiB,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,WAAW,EAAE,CAkHhF;AAED;;GAEG;AACH,wBAAsB,mBAAmB,CACrC,IAAI,EAAE,WAAW,EACjB,mBAAmB,EAAE,sBAAsB,EAC3C,YAAY,EAAE,WAAW,EAAE,EAC3B,YAAY,EAAE,MAAM,EACpB,qBAAqB,EAAE,MAAM,GAC9B,OAAO,CAAC;IAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC,CA2BpE;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/methods/processDiffPixels.js

@@ -0,0 +1,242 @@
+/**
+ * NOTE: This code/logic is based on logical research and support from the following sources:
+ * - Copilot AI
+ * - ChatGPT
+ *
+ * This is still a draft and may not be accurate, more research is needed and will tell you if this is correct.
+ * It produces the following log based on `150585` diff pixels:
+ *
+ * [0-0] Processing diff pixels started
+ * [0-0] Bounding boxes: [
+ * [0-0]   { left: 912, top: 743, right: 1144, bottom: 762 },
+ * [0-0]   { left: 650, top: 749, right: 790, bottom: 760 },
+ * [0-0]   { left: 537, top: 749, right: 644, bottom: 760 },
+ * [0-0]   { left: 377, top: 749, right: 415, bottom: 760 },
+ * [0-0]   { left: 362, top: 749, right: 371, bottom: 759 },
+ * [0-0]   { left: 290, top: 750, right: 356, bottom: 762 },
+ * [0-0]   { left: 159, top: 746, right: 284, bottom: 760 },
+ * [0-0]   { left: 536, top: 711, right: 754, bottom: 730 },
+ * [0-0]   { left: 913, top: 711, right: 1186, bottom: 730 },
+ * [0-0]   { left: 368, top: 717, right: 413, bottom: 730 },
+ * [0-0]   { left: 159, top: 711, right: 362, bottom: 728 },
+ * [0-0]   { left: 912, top: 652, right: 1144, bottom: 703 },
+ * [0-0]   { left: 536, top: 652, right: 790, bottom: 701 },
+ * [0-0]   { left: 377, top: 690, right: 415, bottom: 701 },
+ * [0-0]   { left: 362, top: 690, right: 371, bottom: 700 },
+ * [0-0]   { left: 159, top: 652, right: 356, bottom: 703 },
+ * [0-0]   { left: 129, top: 529, right: 1236, bottom: 633 },
+ * [0-0]   { left: 475, top: 457, right: 1046, bottom: 513 },
+ * [0-0]   { left: 319, top: 470, right: 454, bottom: 513 },
+ * [0-0]   { left: 387, top: 399, right: 514, bottom: 428 },
+ * [0-0]   { left: 818, top: 398, right: 978, bottom: 422 },
+ * [0-0]   { left: 527, top: 398, right: 807, bottom: 428 },
+ * [0-0]   { left: 600, top: 143, right: 766, bottom: 338 },
+ * [0-0]   { left: 25, top: 27, right: 56, bottom: 58 }
+ * [0-0] ]
+ * [0-0] Processing 150585 diff pixels
+ * [0-0] Union operations started
+ * [0-0] Union time: 155ms
+ * [0-0] Grouping pixels into bounding boxes
+ * [0-0] Grouping time: 19ms
+ * [0-0] Total analysis time: 209ms
+ * [0-0] Post-processing bounding boxes
+ * [0-0] Post-processing time: 3ms
+ * [0-0] Number merged: 24
+ */
+import logger from '@wdio/logger';
+import { saveBase64Image, addBlockOuts } from './images.js';
+const log = logger('@wdio/visual-service:@wdio/image-comparison-core:pixelDiffProcessing');
+class DisjointSet {
+    parent;
+    rank;
+    constructor() {
+        this.parent = new Map();
+        this.rank = new Map();
+    }
+    find(x) {
+        if (this.parent.get(x) !== x) {
+            this.parent.set(x, this.find(this.parent.get(x))); // Path compression
+        }
+        return this.parent.get(x);
+    }
+    union(x, y) {
+        const rootX = this.find(x);
+        const rootY = this.find(y);
+        if (rootX !== rootY) {
+            const rankX = this.rank.get(rootX) || 0;
+            const rankY = this.rank.get(rootY) || 0;
+            if (rankX > rankY) {
+                this.parent.set(rootY, rootX);
+            }
+            else if (rankX < rankY) {
+                this.parent.set(rootX, rootY);
+            }
+            else {
+                this.parent.set(rootY, rootX);
+                this.rank.set(rootX, rankX + 1);
+            }
+        }
+    }
+    add(x) {
+        if (!this.parent.has(x)) {
+            this.parent.set(x, x);
+            this.rank.set(x, 0);
+        }
+    }
+}
+function mergeBoundingBoxes(boxes, proximity) {
+    log.info(`Merging bounding boxes started with a proximity of ${proximity} pixels`);
+    const merged = [];
+    while (boxes.length) {
+        const box = boxes.pop();
+        let mergedWithAnotherBox = false;
+        for (let i = 0; i < boxes.length; i++) {
+            const otherBox = boxes[i];
+            if (box.left <= otherBox.right + proximity &&
+                box.right >= otherBox.left - proximity &&
+                box.top <= otherBox.bottom + proximity &&
+                box.bottom >= otherBox.top - proximity) {
+                boxes.splice(i, 1);
+                boxes.push({
+                    left: Math.min(box.left, otherBox.left),
+                    top: Math.min(box.top, otherBox.top),
+                    right: Math.max(box.right, otherBox.right),
+                    bottom: Math.max(box.bottom, otherBox.bottom),
+                });
+                mergedWithAnotherBox = true;
+                break;
+            }
+        }
+        if (!mergedWithAnotherBox) {
+            merged.push(box);
+        }
+    }
+    return merged;
+}
+function processDiffPixels(diffPixels, proximity) {
+    log.info('Processing diff pixels started');
+    log.info(`Processing ${diffPixels.length} diff pixels`);
+    // Calculate total pixels and diff percentage
+    let maxX = 0;
+    let maxY = 0;
+    for (const pixel of diffPixels) {
+        maxX = Math.max(maxX, pixel.x);
+        maxY = Math.max(maxY, pixel.y);
+    }
+    const totalPixels = diffPixels.length > 0 ? (maxX + 1) * (maxY + 1) : 0;
+    const diffPercentage = totalPixels > 0 ? (diffPixels.length / totalPixels) * 100 : 0;
+    log.info(`Total pixels in image: ${totalPixels.toLocaleString()}`);
+    log.info(`Number of diff pixels: ${diffPixels.length.toLocaleString()}`);
+    log.info(`Diff percentage: ${diffPercentage.toFixed(2)}%`);
+    // Fail fast if there are too many differences
+    const MAX_DIFF_PERCENTAGE = 20; // 20% threshold
+    const MAX_DIFF_PIXELS = 5000000; // 5M pixels threshold
+    if (diffPercentage > MAX_DIFF_PERCENTAGE || diffPixels.length > MAX_DIFF_PIXELS) {
+        log.error(`Too many differences detected! Diff percentage: ${diffPercentage.toFixed(2)}%, Diff pixels: ${diffPixels.length.toLocaleString()}`);
+        log.error('This likely indicates a major visual difference or an issue with the comparison.');
+        log.error('Consider checking if the baseline image is correct or if there are major UI changes.');
+        // Return a single bounding box covering the entire image
+        return [{
+                left: 0,
+                top: 0,
+                right: maxX,
+                bottom: maxY
+            }];
+    }
+    const totalStartTime = Date.now();
+    const ds = new DisjointSet();
+    const pixelMap = new Map();
+    const directions = [
+        { dx: 1, dy: 0 },
+        { dx: 0, dy: 1 },
+        { dx: 1, dy: 1 },
+        { dx: -1, dy: 1 },
+    ];
+    // Initialize disjoint set and pixel map
+    for (const pixel of diffPixels) {
+        const key = `${pixel.x},${pixel.y}`;
+        ds.add(key);
+        pixelMap.set(key, pixel);
+    }
+    log.info('Union operations started');
+    const unionStartTime = Date.now();
+    // Union pixels within the proximity range
+    for (const pixel of diffPixels) {
+        const key = `${pixel.x},${pixel.y}`;
+        for (const { dx, dy } of directions) {
+            const neighborKey = `${pixel.x + dx},${pixel.y + dy}`;
+            if (pixelMap.has(neighborKey)) {
+                ds.union(key, neighborKey);
+            }
+        }
+    }
+    log.info(`Union time: ${Date.now() - unionStartTime}ms`);
+    log.info('Grouping pixels into bounding boxes');
+    const groupingStartTime = Date.now();
+    // Group pixels by their root
+    const groups = new Map();
+    for (const key of pixelMap.keys()) {
+        const root = ds.find(key);
+        if (!groups.has(root)) {
+            groups.set(root, []);
+        }
+        groups.get(root)?.push(pixelMap.get(key));
+    }
+    // Calculate bounding boxes
+    const boundingBoxes = [];
+    for (const pixels of groups.values()) {
+        let left = Infinity;
+        let top = Infinity;
+        let right = -Infinity;
+        let bottom = -Infinity;
+        for (const pixel of pixels) {
+            if (pixel.x < left) {
+                left = pixel.x;
+            }
+            if (pixel.y < top) {
+                top = pixel.y;
+            }
+            if (pixel.x > right) {
+                right = pixel.x;
+            }
+            if (pixel.y > bottom) {
+                bottom = pixel.y;
+            }
+        }
+        boundingBoxes.push({ left, top, right, bottom });
+    }
+    log.info(`Grouping time: ${Date.now() - groupingStartTime}ms`);
+    const totalAnalysisTime = Date.now() - totalStartTime;
+    log.info(`Total analysis time: ${totalAnalysisTime}ms`);
+    // Post-process to merge nearby bounding boxes
+    log.info('Post-processing bounding boxes');
+    const postProcessStartTime = Date.now();
+    const mergedBoxes = mergeBoundingBoxes(boundingBoxes, proximity);
+    log.info(`Post-processing time: ${Date.now() - postProcessStartTime}ms`);
+    log.info(`Number merged: ${mergedBoxes.length}`);
+    return mergedBoxes;
+}
+/**
+ * Generate and save diff image with bounding boxes
+ */
+export async function generateAndSaveDiff(data, imageCompareOptions, ignoredBoxes, diffFilePath, rawMisMatchPercentage) {
+    const diffBoundingBoxes = [];
+    const saveAboveTolerance = imageCompareOptions.saveAboveTolerance ?? 0;
+    const storeDiffs = rawMisMatchPercentage > saveAboveTolerance || process.argv.includes('--store-diffs');
+    if (storeDiffs) {
+        const isDifference = rawMisMatchPercentage > saveAboveTolerance;
+        const isDifferenceMessage = 'WARNING:\n There was a difference. Saved the difference to';
+        const debugMessage = 'INFO:\n Debug mode is enabled. Saved the debug file to:';
+        if (imageCompareOptions.createJsonReportFiles) {
+            diffBoundingBoxes.push(...processDiffPixels(data.diffPixels, imageCompareOptions.diffPixelBoundingBoxProximity));
+        }
+        await saveBase64Image(await addBlockOuts(Buffer.from(await data.getBuffer()).toString('base64'), ignoredBoxes), diffFilePath);
+        log.warn('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+ ${isDifference ? isDifferenceMessage : debugMessage}
+ ${diffFilePath}
+#####################################################################################`);
+    }
+    return { diffBoundingBoxes, storeDiffs };
+}
+export { processDiffPixels };

package/dist/methods/processDiffPixels.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=processDiffPixels.test.d.ts.map

package/dist/methods/processDiffPixels.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processDiffPixels.test.d.ts","sourceRoot":"","sources":["../../src/methods/processDiffPixels.test.ts"],"names":[],"mappings":""}