@wdio/image-comparison-core 1.0.0

package/dist/methods/processDiffPixels.test.js

@@ -0,0 +1,122 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { join } from 'node:path';
+import { processDiffPixels } from './processDiffPixels.js';
+import logger from '@wdio/logger';
+const log = logger('test');
+vi.mock('@wdio/logger', () => import(join(process.cwd(), '__mocks__', '@wdio/logger')));
+describe('processDiffPixels', () => {
+    let logInfoSpy;
+    let logErrorSpy;
+    const createMockPixels = (count, startX = 0, startY = 0) => {
+        const pixels = [];
+        for (let i = 0; i < count; i++) {
+            pixels.push({
+                x: startX + (i % 10),
+                y: startY + Math.floor(i / 10),
+            });
+        }
+        return pixels;
+    };
+    const createMockPixelsInBox = (box) => {
+        const pixels = [];
+        for (let x = box.left; x <= box.right; x++) {
+            for (let y = box.top; y <= box.bottom; y++) {
+                pixels.push({ x, y });
+            }
+        }
+        return pixels;
+    };
+    const normalizeTimingValues = (calls) => {
+        return calls.map(call => {
+            const message = call[0];
+            return [
+                message
+                    .replace(/Union time: \d+ms/, 'Union time: XXXms')
+                    .replace(/Grouping time: \d+ms/, 'Grouping time: XXXms')
+                    .replace(/Total analysis time: \d+ms/, 'Total analysis time: XXXms')
+                    .replace(/Post-processing time: \d+ms/, 'Post-processing time: XXXms')
+            ];
+        });
+    };
+    beforeEach(() => {
+        logInfoSpy = vi.spyOn(log, 'info').mockImplementation(() => { });
+        logErrorSpy = vi.spyOn(log, 'error').mockImplementation(() => { });
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+        logInfoSpy.mockRestore();
+        logErrorSpy.mockRestore();
+    });
+    it('should handle empty pixel array', () => {
+        const result = processDiffPixels([], 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should process a single pixel', () => {
+        const pixels = createMockPixels(1);
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should merge nearby pixels into a single bounding box', () => {
+        const pixels = createMockPixels(4, 0, 0); // Creates a 2x2 square
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should create separate bounding boxes for distant pixels', () => {
+        const pixels = [
+            ...createMockPixels(4, 0, 0), // First 2x2 square
+            ...createMockPixels(4, 20, 20), // Second 2x2 square far away
+        ];
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should handle a large number of pixels', () => {
+        const pixels = createMockPixels(1000);
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should respect proximity parameter when merging boxes', () => {
+        const pixels = [
+            ...createMockPixels(4, 0, 0), // First 2x2 square
+            ...createMockPixels(4, 6, 6), // Second 2x2 square just outside proximity
+        ];
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should handle pixels in a complex pattern', () => {
+        const pixels = [
+            ...createMockPixelsInBox({ left: 0, top: 0, right: 5, bottom: 5 }), // Square
+            ...createMockPixelsInBox({ left: 10, top: 10, right: 15, bottom: 15 }), // Another square
+            ...createMockPixelsInBox({ left: 20, top: 20, right: 25, bottom: 25 }), // Third square
+        ];
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+    it('should handle maximum diff percentage threshold', () => {
+        const pixels = createMockPixels(1000000);
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(logErrorSpy.mock.calls).toMatchSnapshot();
+    });
+    it('should handle maximum diff pixels threshold', () => {
+        const pixels = createMockPixels(6000000);
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(logErrorSpy.mock.calls).toMatchSnapshot();
+    });
+    it('should handle two adjacent pixels to trigger equal rank union', () => {
+        const pixels = [
+            { x: 0, y: 0 },
+            { x: 1, y: 0 }
+        ];
+        const result = processDiffPixels(pixels, 5);
+        expect(result).toMatchSnapshot();
+        expect(normalizeTimingValues(logInfoSpy.mock.calls)).toMatchSnapshot();
+    });
+});

package/dist/methods/rectangles.d.ts

@@ -0,0 +1,51 @@
+import type { DetermineDeviceBlockOutsOptions, DeviceRectangles, ElementRectangles, PrepareIgnoreRectanglesOptions, PreparedIgnoreRectangles, RectanglesOutput, ScreenRectanglesOptions, SplitIgnores, StatusAddressToolBarRectangles, StatusAddressToolBarRectanglesOptions } from './rectangles.interfaces.js';
+import type { ElementIgnore } from 'src/commands/element.interfaces.js';
+/**
+ * Determine the element rectangles on the page / screenshot
+ */
+export declare function determineElementRectangles({ browserInstance, base64Image, options, element, }: ElementRectangles): Promise<RectanglesOutput>;
+/**
+ * Determine the rectangles of the screen for the screenshot
+ */
+export declare function determineScreenRectangles(base64Image: string, options: ScreenRectanglesOptions): RectanglesOutput;
+/**
+ * Determine the rectangles for the mobile devices
+ */
+export declare function determineStatusAddressToolBarRectangles({ deviceRectangles, options }: {
+    deviceRectangles: DeviceRectangles;
+    options: StatusAddressToolBarRectanglesOptions;
+}): StatusAddressToolBarRectangles;
+/**
+ * Validate that the element is a WebdriverIO element
+ */
+export declare function isWdioElement(x: unknown): boolean;
+/**
+ * Validate that the object is a valid ignore region
+ */
+export declare function validateIgnoreRegion(x: unknown): boolean;
+/**
+ * Format the error message
+ */
+export declare function formatErrorMessage(item: unknown, message: string): string;
+/**
+ * Split the ignores into elements and regions and throw an error if
+ * an element is not a valid WebdriverIO element/region
+ */
+export declare function splitIgnores(items: unknown[]): SplitIgnores;
+/**
+ * Get the regions from the elements
+ */
+export declare function getRegionsFromElements(browserInstance: WebdriverIO.Browser, elements: WebdriverIO.Element[]): Promise<RectanglesOutput[]>;
+/**
+ * Translate ignores to regions
+ */
+export declare function determineIgnoreRegions(browserInstance: WebdriverIO.Browser, ignores: ElementIgnore[]): Promise<RectanglesOutput[]>;
+/**
+ * Determine the device block outs
+ */
+export declare function determineDeviceBlockOuts({ isAndroid, screenCompareOptions, instanceData }: DetermineDeviceBlockOutsOptions): Promise<RectanglesOutput[]>;
+/**
+ * Prepare all ignore rectangles for image comparison
+ */
+export declare function prepareIgnoreRectangles(options: PrepareIgnoreRectanglesOptions): PreparedIgnoreRectangles;
+//# sourceMappingURL=rectangles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rectangles.d.ts","sourceRoot":"","sources":["../../src/methods/rectangles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,+BAA+B,EAC/B,gBAAgB,EAChB,iBAAiB,EACjB,8BAA8B,EAC9B,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,YAAY,EACZ,8BAA8B,EAC9B,qCAAqC,EACxC,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAEvE;;GAEG;AACH,wBAAsB,0BAA0B,CAAC,EAC7C,eAAe,EACf,WAAW,EACX,OAAO,EACP,OAAO,GACV,EAAE,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CA4C/C;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,uBAAuB,GAAG,gBAAgB,CAoCjH;AAED;;GAEG;AACH,wBAAgB,uCAAuC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAC;IAClF,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,OAAO,EAAE,qCAAqC,CAAC;CAClD,GAAG,8BAA8B,CAgDjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,WASvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,OAAO,WAS9C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,UAG9D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAC,OAAO,EAAE,GAAG,YAAY,CA4B1D;AAED;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,eAAe,EAAE,WAAW,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAQ/I;AAED;;GAEG;AACH,wBAAsB,sBAAsB,CACxC,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,OAAO,EAAE,aAAa,EAAE,GACzB,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAY7B;AAED;;GAEG;AACH,wBAAsB,wBAAwB,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,YAAY,EAAE,EAAE,+BAA+B,+BAwBhI;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,8BAA8B,GAAG,wBAAwB,CAwEzG"}

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

@@ -0,0 +1,146 @@
+import type { CheckScreenMethodOptions } from '../commands/screen.interfaces.js';
+import type { BaseBoundingBox, BaseDimensions, BaseRectangle } from '../base.interfaces.js';
+import type { InstanceData } from './instanceData.interfaces.js';
+export interface RectanglesOptions {
+    /** The device pixel ratio of the screen / device */
+    devicePixelRatio: number;
+    /** If this is an Android native screenshot */
+    isAndroidNativeWebScreenshot: boolean;
+    /** The inner height of a screen */
+    innerHeight: number;
+    /** If this is an iOS device */
+    isIOS: boolean;
+}
+export interface ElementRectanglesOptions extends RectanglesOptions {
+    /** The device rectangles */
+    deviceRectangles: DeviceRectangles;
+    /** If this is an Android device */
+    isAndroid: boolean;
+    /** If the screen is emulated */
+    isEmulated: boolean;
+    /** The initial devicePixelRatio of the instance */
+    initialDevicePixelRatio: number;
+}
+export interface ScreenRectanglesOptions extends RectanglesOptions {
+    /** If the legacy screenshot method is enabled */
+    enableLegacyScreenshotMethod: boolean;
+    /** The inner width of the screen */
+    innerWidth: number;
+    /** If this is an Android ChromeDriver screenshot */
+    isAndroidChromeDriverScreenshot: boolean;
+    /** The initial devicePixelRatio of the instance */
+    initialDevicePixelRatio: number;
+    /** If the screen is emulated */
+    isEmulated: boolean;
+    /** If the screen is in landscape mode */
+    isLandscape: boolean;
+}
+export interface RectanglesOutput extends BaseRectangle {
+}
+export type DeviceRectangles = {
+    /** The bottom bar rectangle */
+    bottomBar: RectanglesOutput;
+    /** The home bar rectangle */
+    homeBar: RectanglesOutput;
+    /** The left side padding rectangle */
+    leftSidePadding: RectanglesOutput;
+    /** The right side padding rectangle */
+    rightSidePadding: RectanglesOutput;
+    /** The screen size dimensions */
+    screenSize: BaseDimensions;
+    /** The status bar and address bar rectangle */
+    statusBarAndAddressBar: RectanglesOutput;
+    /** The status bar rectangle */
+    statusBar: RectanglesOutput;
+    /** The viewport rectangle */
+    viewport: RectanglesOutput;
+};
+export interface StatusAddressToolBarRectanglesOptions {
+    /** If the side bar needs to be blocked out */
+    blockOutSideBar: boolean;
+    /** If the status and address bar needs to be blocked out */
+    blockOutStatusBar: boolean;
+    /** If the tool bar needs to be blocked out */
+    blockOutToolBar: boolean;
+    /** Determine if it's an Android device */
+    isAndroid: boolean;
+    /** The name of the platform */
+    isAndroidNativeWebScreenshot: boolean;
+    /** If the instance is a mobile phone */
+    isMobile: boolean;
+    /** If the comparison needs to be done for a viewport screenshot or not */
+    isViewPortScreenshot: boolean;
+}
+export type StatusAddressToolBarRectangles = Array<RectanglesOutput>;
+export interface ElementRectangles {
+    /** The browser instance */
+    browserInstance: WebdriverIO.Browser;
+    /** The base64 encoded image */
+    base64Image: string;
+    /** The options for element rectangles */
+    options: ElementRectanglesOptions;
+    /** The element to be compared */
+    element: any;
+}
+export interface SplitIgnores {
+    /** The elements to be ignored */
+    elements: WebdriverIO.Element[];
+    /** The regions to be ignored */
+    regions: RectanglesOutput[];
+}
+export interface DetermineDeviceBlockOutsOptions {
+    isAndroid: boolean;
+    screenCompareOptions: CheckScreenMethodOptions;
+    instanceData: InstanceData;
+}
+export interface PrepareIgnoreRectanglesOptions {
+    /** The blockOut rectangles from imageCompareOptions */
+    blockOut: RectanglesOutput[];
+    /** The ignore regions */
+    ignoreRegions: RectanglesOutput[];
+    /** The device rectangles */
+    deviceRectangles: DeviceRectangles;
+    /** The device pixel ratio */
+    devicePixelRatio: number;
+    /** Whether this is mobile */
+    isMobile: boolean;
+    /** Whether this is native context */
+    isNativeContext: boolean;
+    /** Whether this is Android */
+    isAndroid: boolean;
+    /** Whether this is Android native web screenshot */
+    isAndroidNativeWebScreenshot: boolean;
+    /** Whether this is viewport screenshot */
+    isViewPortScreenshot: boolean;
+    /** Image compare options for status/address/toolbar blocking */
+    imageCompareOptions: {
+        blockOutSideBar?: boolean;
+        blockOutStatusBar?: boolean;
+        blockOutToolBar?: boolean;
+    };
+}
+export interface PreparedIgnoreRectangles {
+    /** The final ignored boxes ready for resemble comparison */
+    ignoredBoxes: any[];
+    /** Whether any ignore rectangles were found */
+    hasIgnoreRectangles: boolean;
+}
+export interface BoundingBox extends BaseBoundingBox {
+}
+export interface IgnoreBoxes extends BoundingBox {
+}
+export interface BoundingBoxes {
+    /** Areas where visual differences were detected */
+    diffBoundingBoxes: BoundingBox[];
+    /** Areas to exclude from comparison analysis */
+    ignoredBoxes: IgnoreBoxes[];
+}
+export interface ReportFileSizes {
+    /** Dimensions of the actual screenshot */
+    actual: BaseDimensions;
+    /** Dimensions of the baseline image */
+    baseline: BaseDimensions;
+    /** Dimensions of the diff image (if generated) */
+    diff?: BaseDimensions;
+}
+//# sourceMappingURL=rectangles.interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rectangles.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/rectangles.interfaces.ts"],"names":[],"mappings":"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"}

package/dist/methods/rectangles.interfaces.js

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

package/dist/methods/rectangles.js

@@ -0,0 +1,266 @@
+import { calculateDprData, getBase64ScreenshotSize, isObject } from '../helpers/utils.js';
+import { getElementPositionAndroid, getElementPositionDesktop, getElementWebviewPosition } from './elementPosition.js';
+/**
+ * Determine the element rectangles on the page / screenshot
+ */
+export async function determineElementRectangles({ browserInstance, base64Image, options, element, }) {
+    // Determine screenshot data
+    const { devicePixelRatio, deviceRectangles, initialDevicePixelRatio, innerHeight, isAndroid, isAndroidNativeWebScreenshot, isEmulated, isIOS, } = options;
+    const internalDpr = isEmulated ? initialDevicePixelRatio : devicePixelRatio;
+    const { height } = getBase64ScreenshotSize(base64Image, internalDpr);
+    let elementPosition;
+    // Determine the element position on the screenshot
+    if (isIOS) {
+        elementPosition = await getElementWebviewPosition(browserInstance, element, { deviceRectangles });
+    }
+    else if (isAndroid) {
+        elementPosition = await getElementPositionAndroid(browserInstance, element, { deviceRectangles, isAndroidNativeWebScreenshot });
+    }
+    else {
+        elementPosition = await getElementPositionDesktop(browserInstance, element, { innerHeight, screenshotHeight: height });
+    }
+    // Validate if the element is visible
+    if (elementPosition.height === 0 || elementPosition.width === 0) {
+        let selectorMessage = ' ';
+        if (element.selector) {
+            selectorMessage = `, with selector "$(${element.selector})",`;
+        }
+        const message = `The element${selectorMessage}is not visible. The dimensions are ${elementPosition.width}x${elementPosition.height}`;
+        throw new Error(message);
+    }
+    // Determine the rectangles based on the device pixel ratio
+    return calculateDprData({
+        height: elementPosition.height,
+        width: elementPosition.width,
+        x: elementPosition.x,
+        y: elementPosition.y,
+    }, internalDpr);
+}
+/**
+ * Determine the rectangles of the screen for the screenshot
+ */
+export function determineScreenRectangles(base64Image, options) {
+    // Determine screenshot data
+    const { devicePixelRatio, enableLegacyScreenshotMethod, initialDevicePixelRatio, innerHeight, innerWidth, isEmulated, isIOS, isAndroidChromeDriverScreenshot, isAndroidNativeWebScreenshot, isLandscape, } = options;
+    // For #967: When a screenshot of an emulated device is taken, but the browser was initially
+    // started as a "desktop" session, so not with emulated caps, we need to store the initial
+    // devicePixelRatio when we take a screenshot and enableLegacyScreenshotMethod is enabled
+    const internalDpr = isEmulated && enableLegacyScreenshotMethod ? initialDevicePixelRatio : devicePixelRatio;
+    const { height, width } = getBase64ScreenshotSize(base64Image, internalDpr);
+    // Determine the width
+    const screenshotWidth = isIOS || isAndroidChromeDriverScreenshot ? width : innerWidth;
+    const screenshotHeight = isIOS || isAndroidNativeWebScreenshot ? height : innerHeight;
+    const isRotated = isLandscape && height > width;
+    // Determine the rectangles
+    return calculateDprData({
+        height: isRotated ? screenshotWidth : screenshotHeight,
+        width: isRotated ? screenshotHeight : screenshotWidth,
+        x: 0,
+        y: 0,
+    }, internalDpr);
+}
+/**
+ * Determine the rectangles for the mobile devices
+ */
+export function determineStatusAddressToolBarRectangles({ deviceRectangles, options }) {
+    const { blockOutSideBar, blockOutStatusBar, blockOutToolBar, isAndroid, isAndroidNativeWebScreenshot, isMobile, isViewPortScreenshot, } = options;
+    const rectangles = [];
+    if (isViewPortScreenshot &&
+        isMobile &&
+        (isAndroid && isAndroidNativeWebScreenshot || !isAndroid)) {
+        const statusAddressBar = {
+            x: deviceRectangles.statusBarAndAddressBar.x, y: deviceRectangles.statusBarAndAddressBar.y,
+            width: deviceRectangles.statusBarAndAddressBar.width, height: deviceRectangles.statusBarAndAddressBar.height,
+        };
+        const toolBar = {
+            x: deviceRectangles.bottomBar.x, y: deviceRectangles.bottomBar.y,
+            width: deviceRectangles.bottomBar.width, height: deviceRectangles.bottomBar.height,
+        };
+        const leftSidePadding = {
+            x: deviceRectangles.leftSidePadding.x, y: deviceRectangles.leftSidePadding.y,
+            width: deviceRectangles.leftSidePadding.width, height: deviceRectangles.leftSidePadding.height,
+        };
+        const rightSidePadding = {
+            x: deviceRectangles.rightSidePadding.x, y: deviceRectangles.rightSidePadding.y,
+            width: deviceRectangles.rightSidePadding.width, height: deviceRectangles.rightSidePadding.height,
+        };
+        if (blockOutStatusBar) {
+            rectangles.push(statusAddressBar);
+        }
+        if (blockOutToolBar) {
+            rectangles.push(toolBar);
+        }
+        if (blockOutSideBar) {
+            rectangles.push(leftSidePadding, rightSidePadding);
+        }
+    }
+    return rectangles;
+}
+/**
+ * Validate that the element is a WebdriverIO element
+ */
+export function isWdioElement(x) {
+    if (!isObject(x)) {
+        return false;
+    }
+    const region = x;
+    const keys = ['selector', 'elementId'];
+    return keys.every(key => typeof region[key] === 'string');
+}
+/**
+ * Validate that the object is a valid ignore region
+ */
+export function validateIgnoreRegion(x) {
+    if (!isObject(x)) {
+        return false;
+    }
+    const region = x;
+    const keys = ['height', 'width', 'x', 'y'];
+    return keys.every(key => typeof region[key] === 'number');
+}
+/**
+ * Format the error message
+ */
+export function formatErrorMessage(item, message) {
+    const formattedItem = isObject(item) ? JSON.stringify(item) : item;
+    return `${formattedItem} ${message}`;
+}
+/**
+ * Split the ignores into elements and regions and throw an error if
+ * an element is not a valid WebdriverIO element/region
+ */
+export function splitIgnores(items) {
+    const elements = [];
+    const regions = [];
+    const errorMessages = [];
+    for (const item of items) {
+        if (Array.isArray(item)) {
+            for (const nestedItem of item) {
+                if (!isWdioElement(nestedItem)) {
+                    errorMessages.push(formatErrorMessage(nestedItem, 'is not a valid WebdriverIO element'));
+                }
+                else {
+                    elements.push(nestedItem);
+                }
+            }
+        }
+        else if (isWdioElement(item)) {
+            elements.push(item);
+        }
+        else if (validateIgnoreRegion(item)) {
+            regions.push(item);
+        }
+        else {
+            errorMessages.push(formatErrorMessage(item, 'is not a valid WebdriverIO element or region'));
+        }
+    }
+    if (errorMessages.length > 0) {
+        throw new Error('Invalid elements or regions: ' + errorMessages.join(', '));
+    }
+    return { elements, regions };
+}
+/**
+ * Get the regions from the elements
+ */
+export async function getRegionsFromElements(browserInstance, elements) {
+    const regions = [];
+    for (const element of elements) {
+        const region = await browserInstance.getElementRect(element.elementId);
+        regions.push(region);
+    }
+    return regions;
+}
+/**
+ * Translate ignores to regions
+ */
+export async function determineIgnoreRegions(browserInstance, ignores) {
+    const awaitedIgnores = await Promise.all(ignores);
+    const { elements, regions } = splitIgnores(awaitedIgnores);
+    const regionsFromElements = await getRegionsFromElements(browserInstance, elements);
+    return [...regions, ...regionsFromElements]
+        .map((region) => ({
+        x: Math.round(region.x),
+        y: Math.round(region.y),
+        width: Math.round(region.width),
+        height: Math.round(region.height),
+    }));
+}
+/**
+ * Determine the device block outs
+ */
+export async function determineDeviceBlockOuts({ isAndroid, screenCompareOptions, instanceData }) {
+    const rectangles = [];
+    const { blockOutStatusBar, blockOutToolBar } = screenCompareOptions;
+    const { deviceRectangles: { homeBar, statusBar } } = instanceData;
+    if (blockOutStatusBar) {
+        rectangles.push(statusBar);
+    }
+    if (isAndroid) {
+        //
+    }
+    else if (blockOutToolBar) {
+        rectangles.push(homeBar);
+    }
+    // @TODO: This is from the native-app-compare module, I can't really find the diffs between the two
+    // if (options.blockOutStatusBar) {
+    //     rectangles.push(deviceInfo.rectangles.statusBar)
+    // }
+    // if (driver.isAndroid && options.blockOutNavigationBar) {
+    //     rectangles.push(deviceInfo.rectangles.androidNavigationBar)
+    // }
+    return rectangles;
+}
+/**
+ * Prepare all ignore rectangles for image comparison
+ */
+export function prepareIgnoreRectangles(options) {
+    const { blockOut, ignoreRegions, deviceRectangles, devicePixelRatio, isMobile, isNativeContext, isAndroid, isAndroidNativeWebScreenshot, isViewPortScreenshot, imageCompareOptions } = options;
+    // Get blockOut rectangles
+    let webStatusAddressToolBarOptions = [];
+    // Handle mobile web status/address/toolbar rectangles
+    if (isMobile && !isNativeContext) {
+        const statusAddressToolBarOptions = {
+            blockOutSideBar: imageCompareOptions.blockOutSideBar,
+            blockOutStatusBar: imageCompareOptions.blockOutStatusBar,
+            blockOutToolBar: imageCompareOptions.blockOutToolBar,
+            isAndroid,
+            isAndroidNativeWebScreenshot,
+            isMobile,
+            isViewPortScreenshot,
+        };
+        webStatusAddressToolBarOptions.push(...(determineStatusAddressToolBarRectangles({ deviceRectangles, options: statusAddressToolBarOptions })) || []);
+        if (webStatusAddressToolBarOptions.length > 0) {
+            // There's an issue with the resemble lib when all the rectangles are 0,0,0,0, it will see this as a full
+            // blockout of the image and the comparison will succeed with 0 % difference
+            webStatusAddressToolBarOptions = webStatusAddressToolBarOptions
+                .filter((rectangle) => !(rectangle.x === 0 && rectangle.y === 0 && rectangle.width === 0 && rectangle.height === 0));
+        }
+    }
+    // Combine all ignore regions
+    const ignoredBoxes = [
+        // These come from the method
+        ...blockOut,
+        // @TODO: I'm defaulting ignore regions for devices
+        // Need to check if this is the right thing to do for web and mobile browser tests
+        ...ignoreRegions,
+        // Only get info about the status bars when we are in the web context
+        ...webStatusAddressToolBarOptions
+    ]
+        .map(
+    // Make sure all the rectangles are equal to the dpr for the screenshot
+    (rectangles) => {
+        return calculateDprData({
+            // Adjust for the ResembleJS API
+            bottom: rectangles.y + rectangles.height,
+            right: rectangles.x + rectangles.width,
+            left: rectangles.x,
+            top: rectangles.y,
+        }, 
+        // For Android we don't need to do it times the pixel ratio, for all others we need to
+        isAndroid ? 1 : devicePixelRatio);
+    });
+    return {
+        ignoredBoxes,
+        hasIgnoreRectangles: ignoredBoxes.length > 0
+    };
+}

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

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

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

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