@wdio/image-comparison-core 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import BaseClass from './base.js';
+import saveScreen from './commands/saveScreen.js';
+import saveElement from './commands/saveElement.js';
+import saveFullPageScreen from './commands/saveFullPageScreen.js';
+import saveTabbablePage from './commands/saveTabbablePage.js';
+import checkScreen from './commands/checkScreen.js';
+import checkElement from './commands/checkElement.js';
+import checkFullPageScreen from './commands/checkFullPageScreen.js';
+import checkTabbablePage from './commands/checkTabbablePage.js';
+import { ClassOptions } from './helpers/options.interfaces.js';
+import { ImageCompareResult } from './methods/images.interfaces.js';
+import { DEFAULT_TEST_CONTEXT, DEVICE_RECTANGLES, IOS_OFFSETS, FOLDERS, NOT_KNOWN } from './helpers/constants.js';
+import { getMobileScreenSize, getMobileViewPortPosition } from './helpers/utils.js';
+import { InternalCheckElementMethodOptions, InternalCheckFullPageMethodOptions, InternalCheckScreenMethodOptions, InternalCheckTabbablePageMethodOptions } from './commands/check.interfaces.js';
+import { InternalSaveElementMethodOptions, InternalSaveFullPageMethodOptions, InternalSaveScreenMethodOptions, InternalSaveTabbablePageMethodOptions } from './commands/save.interfaces.js';
+export type { ScreenshotOutput } from './helpers/afterScreenshot.interfaces.js';
+export type { CheckScreenMethodOptions, SaveScreenMethodOptions, } from './commands/screen.interfaces.js';
+export type { WicElement, CheckElementMethodOptions, SaveElementMethodOptions, } from './commands/element.interfaces.js';
+export type { CheckFullPageMethodOptions, SaveFullPageMethodOptions, } from './commands/fullPage.interfaces.js';
+export type { TestContext } from './methods/compareReport.interfaces.js';
+export type { Folders } from './base.interfaces.js';
+export type { InstanceData } from './methods/instanceData.interfaces.js';
+export type { DeviceRectangles } from './methods/rectangles.interfaces.js';
+export type { ResultReport } from './methods/compareReport.interfaces.js';
+export { DEFAULT_TEST_CONTEXT, DEVICE_RECTANGLES, IOS_OFFSETS, FOLDERS, NOT_KNOWN, BaseClass, saveScreen, saveElement, saveFullPageScreen, saveTabbablePage, checkScreen, checkElement, checkFullPageScreen, checkTabbablePage, getMobileScreenSize, getMobileViewPortPosition, InternalSaveScreenMethodOptions, InternalSaveElementMethodOptions, InternalSaveFullPageMethodOptions, InternalSaveTabbablePageMethodOptions, InternalCheckScreenMethodOptions, InternalCheckElementMethodOptions, InternalCheckFullPageMethodOptions, InternalCheckTabbablePageMethodOptions, ImageCompareResult, ClassOptions, };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,kBAAkB,MAAM,kCAAkC,CAAA;AACjE,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAC7D,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AACnE,OAAO,iBAAiB,MAAM,iCAAiC,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACjH,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAA;AACnF,OAAO,EAAE,iCAAiC,EAAE,kCAAkC,EAAE,gCAAgC,EAAE,sCAAsC,EAAE,MAAM,gCAAgC,CAAA;AAChM,OAAO,EAAE,gCAAgC,EAAE,iCAAiC,EAAE,+BAA+B,EAAE,qCAAqC,EAAE,MAAM,+BAA+B,CAAA;AAE3L,YAAY,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAC/E,YAAY,EACR,wBAAwB,EACxB,uBAAuB,GAC1B,MAAM,iCAAiC,CAAA;AACxC,YAAY,EACR,UAAU,EACV,yBAAyB,EACzB,wBAAwB,GAC3B,MAAM,kCAAkC,CAAA;AACzC,YAAY,EACR,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,mCAAmC,CAAA;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACxE,YAAY,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACxE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,YAAY,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AAEzE,OAAO,EAEH,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,SAAS,EAET,SAAS,EAET,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EAEzB,+BAA+B,EAC/B,gCAAgC,EAChC,iCAAiC,EACjC,qCAAqC,EACrC,gCAAgC,EAChC,iCAAiC,EACjC,kCAAkC,EAClC,sCAAsC,EACtC,kBAAkB,EAClB,YAAY,GACf,CAAA"}

package/dist/index.js

@@ -0,0 +1,18 @@
+import BaseClass from './base.js';
+import saveScreen from './commands/saveScreen.js';
+import saveElement from './commands/saveElement.js';
+import saveFullPageScreen from './commands/saveFullPageScreen.js';
+import saveTabbablePage from './commands/saveTabbablePage.js';
+import checkScreen from './commands/checkScreen.js';
+import checkElement from './commands/checkElement.js';
+import checkFullPageScreen from './commands/checkFullPageScreen.js';
+import checkTabbablePage from './commands/checkTabbablePage.js';
+import { DEFAULT_TEST_CONTEXT, DEVICE_RECTANGLES, IOS_OFFSETS, FOLDERS, NOT_KNOWN } from './helpers/constants.js';
+import { getMobileScreenSize, getMobileViewPortPosition } from './helpers/utils.js';
+export { 
+// Constants
+DEFAULT_TEST_CONTEXT, DEVICE_RECTANGLES, IOS_OFFSETS, FOLDERS, NOT_KNOWN, 
+// Base class
+BaseClass, 
+// Commands
+saveScreen, saveElement, saveFullPageScreen, saveTabbablePage, checkScreen, checkElement, checkFullPageScreen, checkTabbablePage, getMobileScreenSize, getMobileViewPortPosition, };

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

@@ -0,0 +1,109 @@
+import type { CompareData } from 'src/resemble/compare.interfaces.js';
+import type { WicImageCompareOptions } from './images.interfaces.js';
+import type { BoundingBoxes, ReportFileSizes } from './rectangles.interfaces.js';
+import type { FilePaths, FolderPaths } from 'src/base.interfaces.js';
+export type TestContext = {
+    /** The name of the command being executed */
+    commandName: string;
+    /** The testing framework being used */
+    framework: string;
+    /** The parent test suite or describe block */
+    parent: string;
+    /** The tag associated with the test */
+    tag: string;
+    /** The title of the test */
+    title: string;
+    instanceData: {
+        browser: {
+            /** The name of the browser */
+            name: string;
+            /** The version of the browser */
+            version: string;
+        };
+        /** The name of the device */
+        deviceName: string;
+        platform: {
+            /** The name of the platform */
+            name: string;
+            /** The version of the platform */
+            version: string;
+        };
+        /** The application identifier */
+        app: string;
+        /** Whether the device is mobile */
+        isMobile: boolean;
+        /** Whether the device is Android */
+        isAndroid: boolean;
+        /** Whether the device is iOS */
+        isIOS: boolean;
+    };
+};
+export type BaseCreateCompareReportOptions = {
+    /** Bounding boxes for diff and ignored areas */
+    boundingBoxes: BoundingBoxes;
+    /** Comparison data from the image comparison process */
+    data: CompareData;
+    /** Name of the file being compared */
+    fileName: string;
+    /** Test execution context and metadata */
+    testContext: TestContext;
+};
+export type CreateCompareReportOptions = BaseCreateCompareReportOptions & {
+    /** Folder paths for actual, baseline, and diff images */
+    folders: FolderPaths;
+    /** Size information for actual, baseline, and diff images */
+    size: ReportFileSizes;
+};
+export type CreateJsonReportIfNeededOptions = BaseCreateCompareReportOptions & {
+    /** Complete file paths for all comparison images */
+    filePaths: FolderPaths & FilePaths;
+    /** Device pixel ratio for the comparison */
+    devicePixelRatio: number;
+    /** Image comparison configuration options */
+    imageCompareOptions: WicImageCompareOptions;
+    /** Whether to store diff images */
+    storeDiffs: boolean;
+};
+export type ResultReport = {
+    /** Test description or suite name */
+    description: string;
+    /** Test title or name */
+    test: string;
+    /** Test tag identifier */
+    tag: string;
+    /** Test instance information (browser, device, platform) */
+    instanceData: {
+        /** Application identifier */
+        app?: string;
+        /** Browser name and version */
+        browser?: {
+            name: string;
+            version: string;
+        };
+        /** Device name */
+        deviceName?: string;
+        /** Platform name and version */
+        platform: {
+            name: string;
+            version: string;
+        };
+    };
+    /** Command that was executed */
+    commandName: string;
+    /** Testing framework being used */
+    framework: string;
+    /** Bounding boxes for diff and ignored areas */
+    boundingBoxes: BoundingBoxes;
+    /** File data including paths and sizes */
+    fileData: FilePaths & {
+        /** Name of the file */
+        fileName: string;
+        /** Size information for images */
+        size: ReportFileSizes;
+    };
+    /** Mismatch percentage as formatted string */
+    misMatchPercentage: string;
+    /** Raw mismatch percentage as number */
+    rawMisMatchPercentage: number;
+};
+//# sourceMappingURL=compareReport.interfaces.d.ts.map

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

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

package/dist/methods/compareReport.interfaces.js

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

package/dist/methods/createCompareReport.d.ts

@@ -0,0 +1,7 @@
+import type { CreateCompareReportOptions, CreateJsonReportIfNeededOptions } from './compareReport.interfaces.js';
+export declare function createCompareReport({ boundingBoxes, data, fileName, folders, size, testContext: { commandName, instanceData: { app, browser, deviceName, isIOS, isMobile, platform, }, framework, parent, tag, title }, }: CreateCompareReportOptions): void;
+/**
+ * Create JSON report if requested
+ */
+export declare function createJsonReportIfNeeded({ boundingBoxes, data, fileName, filePaths, devicePixelRatio, imageCompareOptions, testContext, storeDiffs, }: CreateJsonReportIfNeededOptions): Promise<void>;
+//# sourceMappingURL=createCompareReport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCompareReport.d.ts","sourceRoot":"","sources":["../../src/methods/createCompareReport.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,+BAA+B,EAAgB,MAAM,+BAA+B,CAAA;AAG9H,wBAAgB,mBAAmB,CAAC,EAChC,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EAAE,EACT,WAAW,EACX,YAAY,EAAE,EACV,GAAG,EACH,OAAO,EACP,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,GACX,EACD,SAAS,EACT,MAAM,EACN,GAAG,EACH,KAAK,EACR,GACJ,EAAE,0BAA0B,QAmC5B;AAED;;GAEG;AACH,wBAAsB,wBAAwB,CAAC,EAC3C,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,UAAU,GACb,EAAE,+BAA+B,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBjD"}

package/dist/methods/createCompareReport.js

@@ -0,0 +1,61 @@
+import { resolve as pathResolve } from 'node:path';
+import { writeFileSync, readFileSync } from 'node:fs';
+import { getBase64ScreenshotSize } from '../helpers/utils.js';
+export function createCompareReport({ boundingBoxes, data, fileName, folders, size, testContext: { commandName, instanceData: { app, browser, deviceName, isIOS, isMobile, platform, }, framework, parent, tag, title }, }) {
+    const { misMatchPercentage, rawMisMatchPercentage } = data;
+    const jsonFileName = fileName.split('.').slice(0, -1).join('.');
+    const jsonFilePath = pathResolve(folders.actualFolderPath, `${jsonFileName}-report.json`);
+    const browserContext = {
+        browser,
+        platform,
+    };
+    const mobileContext = {
+        ...(app !== 'not-known'
+            ? { app }
+            : { browser: { name: browser.name, version: isIOS ? platform.version : browser.version } }),
+        deviceName,
+        platform,
+    };
+    const jsonData = {
+        description: parent,
+        test: title,
+        tag,
+        instanceData: isMobile ? mobileContext : browserContext,
+        commandName,
+        framework,
+        boundingBoxes,
+        fileData: {
+            actualFilePath: pathResolve(folders.actualFolderPath, fileName),
+            baselineFilePath: pathResolve(folders.baselineFolderPath, fileName),
+            diffFilePath: pathResolve(folders.diffFolderPath, fileName),
+            fileName,
+            size,
+        },
+        misMatchPercentage: misMatchPercentage.toString(),
+        rawMisMatchPercentage,
+    };
+    writeFileSync(jsonFilePath, JSON.stringify(jsonData), 'utf8');
+}
+/**
+ * Create JSON report if requested
+ */
+export async function createJsonReportIfNeeded({ boundingBoxes, data, fileName, filePaths, devicePixelRatio, imageCompareOptions, testContext, storeDiffs, }) {
+    if (imageCompareOptions.createJsonReportFiles) {
+        createCompareReport({
+            boundingBoxes,
+            data,
+            fileName,
+            folders: {
+                actualFolderPath: filePaths.actualFolderPath,
+                baselineFolderPath: filePaths.baselineFolderPath,
+                diffFolderPath: filePaths.diffFolderPath,
+            },
+            size: {
+                actual: getBase64ScreenshotSize(readFileSync(filePaths.actualFilePath).toString('base64'), devicePixelRatio),
+                baseline: getBase64ScreenshotSize(readFileSync(filePaths.baselineFilePath).toString('base64'), devicePixelRatio),
+                ...(storeDiffs && filePaths.diffFilePath && { diff: getBase64ScreenshotSize(readFileSync(filePaths.diffFilePath).toString('base64'), devicePixelRatio) }),
+            },
+            testContext,
+        });
+    }
+}

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

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

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

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

package/dist/methods/createCompareReport.test.js

@@ -0,0 +1,236 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { writeFileSync, readFileSync } from 'node:fs';
+import { createCompareReport, createJsonReportIfNeeded } from './createCompareReport.js';
+import { getBase64ScreenshotSize } from '../helpers/utils.js';
+vi.mock('node:fs', () => ({
+    writeFileSync: vi.fn(),
+    readFileSync: vi.fn(),
+}));
+vi.mock('../helpers/utils.js', () => ({
+    getBase64ScreenshotSize: vi.fn(),
+}));
+describe('createCompareReport', () => {
+    const createMockData = (misMatchPercentage = 0) => ({
+        misMatchPercentage,
+        rawMisMatchPercentage: misMatchPercentage,
+        getBuffer: () => Buffer.from(''),
+        diffBounds: { top: 0, left: 0, bottom: 0, right: 0 },
+        analysisTime: 0,
+        diffPixels: [],
+    });
+    const createMockFolders = () => ({
+        actualFolderPath: '/actual',
+        baselineFolderPath: '/baseline',
+        diffFolderPath: '/diff',
+    });
+    const createMockSize = () => ({
+        actual: { width: 100, height: 100 },
+        baseline: { width: 100, height: 100 },
+        diff: { width: 100, height: 100 },
+    });
+    const createMockBoundingBoxes = () => ({
+        diffBoundingBoxes: [],
+        ignoredBoxes: [],
+    });
+    const createTestContext = (options = {}) => ({
+        commandName: 'test-command',
+        instanceData: {
+            app: options.app ?? 'not-known',
+            browser: options.browser ?? { name: 'chrome', version: '100' },
+            deviceName: options.deviceName ?? 'desktop',
+            isIOS: options.isIOS ?? false,
+            isAndroid: options.isAndroid ?? false,
+            isMobile: options.isMobile ?? false,
+            platform: options.platform ?? { name: 'windows', version: '10' },
+        },
+        framework: 'wdio',
+        parent: 'test parent',
+        tag: 'test-tag',
+        title: 'test title',
+    });
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('should create a report for desktop browser', () => {
+        createCompareReport({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            folders: createMockFolders(),
+            size: createMockSize(),
+            testContext: createTestContext(),
+        });
+        const writtenData = JSON.parse(writeFileSync.mock.calls[0][1]);
+        expect(writtenData).toMatchSnapshot();
+    });
+    it('should create a report for mobile browser', () => {
+        createCompareReport({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            folders: createMockFolders(),
+            size: createMockSize(),
+            testContext: createTestContext({
+                browser: { name: 'safari', version: '15' },
+                deviceName: 'iPhone 12',
+                isIOS: true,
+                isMobile: true,
+                platform: { name: 'ios', version: '15' },
+            }),
+        });
+        const writtenData = JSON.parse(writeFileSync.mock.calls[0][1]);
+        expect(writtenData).toMatchSnapshot();
+    });
+    it('should create a report for mobile app', () => {
+        createCompareReport({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            folders: createMockFolders(),
+            size: createMockSize(),
+            testContext: createTestContext({
+                app: 'my-app',
+                deviceName: 'Pixel 6',
+                isAndroid: true,
+                isMobile: true,
+                platform: { name: 'android', version: '12' },
+            }),
+        });
+        const writtenData = JSON.parse(writeFileSync.mock.calls[0][1]);
+        expect(writtenData).toMatchSnapshot();
+    });
+    it('should include misMatchPercentage in the report', () => {
+        createCompareReport({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(5.5),
+            fileName: 'test.png',
+            folders: createMockFolders(),
+            size: createMockSize(),
+            testContext: createTestContext(),
+        });
+        const writtenData = JSON.parse(writeFileSync.mock.calls[0][1]);
+        expect(writtenData).toMatchSnapshot();
+    });
+});
+describe('createJsonReportIfNeeded', () => {
+    const createMockData = (misMatchPercentage = 0) => ({
+        misMatchPercentage,
+        rawMisMatchPercentage: misMatchPercentage,
+        getBuffer: () => Buffer.from(''),
+        diffBounds: { top: 0, left: 0, bottom: 0, right: 0 },
+        analysisTime: 0,
+        diffPixels: [],
+    });
+    const createMockBoundingBoxes = () => ({
+        diffBoundingBoxes: [],
+        ignoredBoxes: [],
+    });
+    const createTestContext = (options = {}) => ({
+        commandName: 'test-command',
+        instanceData: {
+            app: options.app ?? 'not-known',
+            browser: options.browser ?? { name: 'chrome', version: '100' },
+            deviceName: options.deviceName ?? 'desktop',
+            isIOS: options.isIOS ?? false,
+            isAndroid: options.isAndroid ?? false,
+            isMobile: options.isMobile ?? false,
+            platform: options.platform ?? { name: 'windows', version: '10' },
+        },
+        framework: 'wdio',
+        parent: 'test parent',
+        tag: 'test-tag',
+        title: 'test title',
+    });
+    const createMockFilePaths = () => ({
+        actualFolderPath: '/actual',
+        baselineFolderPath: '/baseline',
+        diffFolderPath: '/diff',
+        actualFilePath: '/actual/test.png',
+        baselineFilePath: '/baseline/test.png',
+        diffFilePath: '/diff/test.png',
+    });
+    const createMockImageCompareOptions = (createJsonReportFiles = false) => ({
+        createJsonReportFiles,
+        returnEarlyOnMismatch: false,
+        scaleToSameSize: false,
+        globalCompareOptions: {},
+        localCompareOptions: {},
+        diffPixelBoundingBoxProximity: 0,
+        output: {
+            actualScreenshotRelatedPath: '',
+            baselineScreenshotRelatedPath: '',
+            diffScreenshotRelatedPath: '',
+            screenshotFolderOptions: {
+                baselineImagesFolderName: '',
+                actualImagesFolderName: '',
+                diffImagesFolderName: '',
+            },
+        },
+    });
+    const createMockBase64Data = () => 'base64-image-data';
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.mocked(readFileSync).mockReturnValue(Buffer.from(createMockBase64Data()));
+        vi.mocked(getBase64ScreenshotSize).mockReturnValue({ width: 100, height: 100 });
+    });
+    it('should not create report when createJsonReportFiles is false', async () => {
+        await createJsonReportIfNeeded({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            filePaths: createMockFilePaths(),
+            devicePixelRatio: 1,
+            imageCompareOptions: createMockImageCompareOptions(false),
+            testContext: createTestContext(),
+            storeDiffs: true,
+        });
+        expect(vi.mocked(readFileSync).mock.calls).toMatchSnapshot();
+        expect(vi.mocked(getBase64ScreenshotSize).mock.calls).toMatchSnapshot();
+    });
+    it('should create report when createJsonReportFiles is true without diff', async () => {
+        await createJsonReportIfNeeded({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            filePaths: createMockFilePaths(),
+            devicePixelRatio: 2,
+            imageCompareOptions: createMockImageCompareOptions(true),
+            testContext: createTestContext(),
+            storeDiffs: false,
+        });
+        expect(vi.mocked(readFileSync).mock.calls).toMatchSnapshot();
+        expect(vi.mocked(getBase64ScreenshotSize).mock.calls).toMatchSnapshot();
+    });
+    it('should create report when createJsonReportFiles is true with diff', async () => {
+        await createJsonReportIfNeeded({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            filePaths: createMockFilePaths(),
+            devicePixelRatio: 1,
+            imageCompareOptions: createMockImageCompareOptions(true),
+            testContext: createTestContext(),
+            storeDiffs: true,
+        });
+        expect(vi.mocked(readFileSync).mock.calls).toMatchSnapshot();
+        expect(vi.mocked(getBase64ScreenshotSize).mock.calls).toMatchSnapshot();
+    });
+    it('should create report without diff when diffFilePath is undefined', async () => {
+        const filePathsWithoutDiff = {
+            ...createMockFilePaths(),
+            diffFilePath: undefined,
+        };
+        await createJsonReportIfNeeded({
+            boundingBoxes: createMockBoundingBoxes(),
+            data: createMockData(),
+            fileName: 'test.png',
+            filePaths: filePathsWithoutDiff,
+            devicePixelRatio: 1,
+            imageCompareOptions: createMockImageCompareOptions(true),
+            testContext: createTestContext(),
+            storeDiffs: true,
+        });
+        expect(vi.mocked(readFileSync).mock.calls).toMatchSnapshot();
+        expect(vi.mocked(getBase64ScreenshotSize).mock.calls).toMatchSnapshot();
+    });
+});

package/dist/methods/elementPosition.d.ts

@@ -0,0 +1,18 @@
+import type { ElementPosition } from '../clientSideScripts/elementPosition.interfaces.js';
+import type { DeviceRectangles } from './rectangles.interfaces.js';
+import type { GetElementPositionAndroidOptions, GetElementPositionDesktopOptions } from './elementPosition.interfaces.js';
+/**
+ * Get the element position on a Android device
+ */
+export declare function getElementPositionAndroid(browserInstance: WebdriverIO.Browser, element: HTMLElement, { deviceRectangles, isAndroidNativeWebScreenshot }: GetElementPositionAndroidOptions): Promise<ElementPosition>;
+/**
+ * Get the element position on a desktop browser
+ */
+export declare function getElementPositionDesktop(browserInstance: WebdriverIO.Browser, element: HTMLElement, { innerHeight, screenshotHeight }: GetElementPositionDesktopOptions): Promise<ElementPosition>;
+/**
+ * Get the element position calculated from the webview
+ */
+export declare function getElementWebviewPosition(browserInstance: WebdriverIO.Browser, element: HTMLElement, { deviceRectangles: { viewport: { x, y } } }: {
+    deviceRectangles: DeviceRectangles;
+}): Promise<ElementPosition>;
+//# sourceMappingURL=elementPosition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementPosition.d.ts","sourceRoot":"","sources":["../../src/methods/elementPosition.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAA;AAEzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,KAAK,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,MAAM,iCAAiC,CAAA;AAEzH;;GAEG;AACH,wBAAsB,yBAAyB,CAC3C,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,OAAO,EAAE,WAAW,EACpB,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,EAAE,gCAAgC,GACrF,OAAO,CAAC,eAAe,CAAC,CAQ1B;AAED;;GAEG;AACH,wBAAsB,yBAAyB,CAC3C,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,OAAO,EAAE,WAAW,EACpB,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,gCAAgC,GACpE,OAAO,CAAC,eAAe,CAAC,CAM1B;AAED;;GAEG;AACH,wBAAsB,yBAAyB,CAC3C,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,OAAO,EAAE,WAAW,EACpB,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,gBAAgB,EAAE,gBAAgB,CAAA;CAAE,GACpF,OAAO,CAAC,eAAe,CAAC,CAS1B"}

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

@@ -0,0 +1,14 @@
+import type { DeviceRectangles } from './rectangles.interfaces.js';
+export interface GetElementPositionDesktopOptions {
+    /** The inner height of the screen */
+    innerHeight: number;
+    /** The screenshot height */
+    screenshotHeight: number;
+}
+export interface GetElementPositionAndroidOptions {
+    /** The device rectangles */
+    deviceRectangles: DeviceRectangles;
+    /** Is the device Android */
+    isAndroidNativeWebScreenshot: boolean;
+}
+//# sourceMappingURL=elementPosition.interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementPosition.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/elementPosition.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAElE,MAAM,WAAW,gCAAgC;IAC7C,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,gBAAgB,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,gCAAgC;IAC7C,4BAA4B;IAC5B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,4BAA4B;IAC5B,4BAA4B,EAAE,OAAO,CAAC;CACzC"}

package/dist/methods/elementPosition.interfaces.js

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

package/dist/methods/elementPosition.js

@@ -0,0 +1,34 @@
+import getElementPositionTopDom from '../clientSideScripts/getElementPositionTopDom.js';
+import { getBoundingClientRect } from '../clientSideScripts/getBoundingClientRect.js';
+/**
+ * Get the element position on a Android device
+ */
+export async function getElementPositionAndroid(browserInstance, element, { deviceRectangles, isAndroidNativeWebScreenshot }) {
+    // This is the native web screenshot
+    if (isAndroidNativeWebScreenshot) {
+        return getElementWebviewPosition(browserInstance, element, { deviceRectangles });
+    }
+    // This is the ChromeDriver screenshot
+    return browserInstance.execute(getBoundingClientRect, element);
+}
+/**
+ * Get the element position on a desktop browser
+ */
+export async function getElementPositionDesktop(browserInstance, element, { innerHeight, screenshotHeight }) {
+    if (screenshotHeight > innerHeight) {
+        return browserInstance.execute(getElementPositionTopDom, element);
+    }
+    return browserInstance.execute(getBoundingClientRect, element);
+}
+/**
+ * Get the element position calculated from the webview
+ */
+export async function getElementWebviewPosition(browserInstance, element, { deviceRectangles: { viewport: { x, y } } }) {
+    const { height, width, x: boundingClientX, y: boundingClientY } = (await browserInstance.execute(getBoundingClientRect, element));
+    return {
+        height,
+        width,
+        x: boundingClientX + x,
+        y: boundingClientY + y,
+    };
+}

package/dist/methods/images.d.ts

@@ -0,0 +1,69 @@
+import type { AdjustedAxis, CheckBaselineImageExists, CropAndConvertToDataURL, CroppedBase64Image, DimensionsWarning, ExecuteImageCompare, HandleIOSBezelCorners, ImageCompareResult, MakeFullPageBase64ImageOptions, RotateBase64ImageOptions, RotatedImage, TakeBase64ElementScreenshotOptions, TakeResizedBase64ScreenshotOptions } from './images.interfaces.js';
+import type { IgnoreBoxes } from './rectangles.interfaces.js';
+import type { FullPageScreenshotsData } from './screenshots.interfaces.js';
+/**
+ * Check if an image exists and return a boolean
+ */
+export declare function checkIfImageExists(filePath: string): Promise<boolean>;
+/**
+ * Remove the diff image if it exists
+ */
+export declare function removeDiffImageIfExists(diffFilePath: string): Promise<void>;
+/**
+ * Check if the image exists and create a new baseline image if needed
+ */
+export declare function checkBaselineImageExists({ actualFilePath, baselineFilePath, autoSaveBaseline, updateBaseline }: CheckBaselineImageExists): Promise<void>;
+/**
+ * Get the rotated image if needed
+ */
+export declare function getRotatedImageIfNeeded({ isWebDriverElementScreenshot, isLandscape, base64Image }: RotatedImage): Promise<string>;
+/**
+ * Log a warning when the crop goes out of the screen
+ */
+export declare function logDimensionWarning({ dimension, maxDimension, position, type, }: DimensionsWarning): void;
+/**
+ * Get the adjusted axis
+ */
+export declare function getAdjustedAxis({ length, maxDimension, paddingEnd, paddingStart, start, warningType, }: AdjustedAxis): [number, number];
+/**
+ * Handle the iOS bezel corners
+ */
+export declare function handleIOSBezelCorners({ addIOSBezelCorners, image, deviceName, devicePixelRatio, height, isLandscape, width, }: HandleIOSBezelCorners): Promise<void>;
+/**
+ * Crop the image and convert it to a base64 image
+ */
+export declare function cropAndConvertToDataURL({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, height, isIOS, isLandscape, sourceX, sourceY, width, }: CropAndConvertToDataURL): Promise<string>;
+/**
+ * Make a cropped image with Canvas
+ */
+export declare function makeCroppedBase64Image({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, isWebDriverElementScreenshot, isIOS, isLandscape, rectangles, resizeDimensions, }: CroppedBase64Image): Promise<string>;
+/**
+ * Execute the image compare
+ */
+export declare function executeImageCompare({ isViewPortScreenshot, isNativeContext, options, testContext, }: ExecuteImageCompare): Promise<ImageCompareResult | number>;
+/**
+ * Make a full page image with Canvas
+ */
+export declare function makeFullPageBase64Image(screenshotsData: FullPageScreenshotsData, { devicePixelRatio, isLandscape }: MakeFullPageBase64ImageOptions): Promise<string>;
+/**
+ * Save the base64 image to a file
+ */
+export declare function saveBase64Image(base64Image: string, filePath: string): Promise<void>;
+/**
+ * Create a canvas with the ignore boxes if they are present
+ */
+export declare function addBlockOuts(screenshot: string, ignoredBoxes: IgnoreBoxes[]): Promise<string>;
+/**
+ * Rotate a base64 image
+ * Tnx to https://gist.github.com/Zyndoras/6897abdf53adbedf02564808aaab94db
+ */
+export declare function rotateBase64Image({ base64Image, degrees }: RotateBase64ImageOptions): Promise<string>;
+/**
+ * Take a based64 screenshot of an element and resize it
+ */
+export declare function takeResizedBase64Screenshot({ browserInstance, element, devicePixelRatio, isIOS, resizeDimensions, }: TakeResizedBase64ScreenshotOptions): Promise<string>;
+/**
+ * Take a base64 screenshot of an element
+ */
+export declare function takeBase64ElementScreenshot({ browserInstance, element, devicePixelRatio, isIOS, resizeDimensions, }: TakeBase64ElementScreenshotOptions): Promise<string>;
+//# sourceMappingURL=images.d.ts.map

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

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

package/dist/methods/images.executeImageCompare.test.d.ts

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