@wdio/image-comparison-core 1.0.0

package/dist/helpers/afterScreenshot.js

@@ -0,0 +1,55 @@
+import { join } from 'node:path';
+import logger from '@wdio/logger';
+import hideScrollBars from '../clientSideScripts/hideScrollbars.js';
+import removeElementFromDom from '../clientSideScripts/removeElementFromDom.js';
+import { CUSTOM_CSS_ID } from './constants.js';
+import { formatFileName, getAndCreatePath } from './utils.js';
+import { saveBase64Image } from '../methods/images.js';
+import hideRemoveElements from '../clientSideScripts/hideRemoveElements.js';
+import toggleTextTransparency from '../clientSideScripts/toggleTextTransparency.js';
+const log = logger('@wdio/visual-service:@wdio/image-comparison-core:afterScreenshot');
+/**
+ * Methods that need to be executed after a screenshot has been taken
+ * to set all back to the original state
+ */
+export default async function afterScreenshot(browserInstance, options) {
+    const { actualFolder, base64Image, disableBlinkingCursor, disableCSSAnimation, enableLayoutTesting, fileName: fileNameOptions, filePath, hideElements, hideScrollBars: noScrollBars, isLandscape, isNativeContext, removeElements, } = options;
+    const path = getAndCreatePath(actualFolder, filePath);
+    const fileName = formatFileName(fileNameOptions);
+    await saveBase64Image(base64Image, join(path, fileName));
+    const result = {
+        devicePixelRatio: fileNameOptions.devicePixelRatio,
+        fileName,
+        isLandscape,
+        path,
+    };
+    if (isNativeContext) {
+        return result;
+    }
+    if (noScrollBars) {
+        await browserInstance.execute(hideScrollBars, !noScrollBars);
+    }
+    if ((hideElements && hideElements.length > 0) || (removeElements && removeElements.length > 0)) {
+        try {
+            await browserInstance.execute(hideRemoveElements, { hide: hideElements, remove: removeElements }, false);
+        }
+        catch (e) {
+            log.warn('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+ WARNING:
+ (One of) the elements that needed to be hidden or removed could not be found on the
+ page and caused this error
+ Error: ${e}
+ We made sure the test didn't break.
+#####################################################################################
+`);
+        }
+    }
+    if (disableCSSAnimation || disableBlinkingCursor || browserInstance.isMobile) {
+        await browserInstance.execute(removeElementFromDom, CUSTOM_CSS_ID);
+    }
+    if (enableLayoutTesting) {
+        await browserInstance.execute(toggleTextTransparency, !enableLayoutTesting);
+    }
+    return result;
+}

package/dist/helpers/afterScreenshot.test.d.ts

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

package/dist/helpers/afterScreenshot.test.d.ts.map

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

package/dist/helpers/afterScreenshot.test.js

@@ -0,0 +1,241 @@
+import { join } from 'node:path';
+import logger from '@wdio/logger';
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
+import afterScreenshot from './afterScreenshot.js';
+import hideScrollBars from '../clientSideScripts/hideScrollbars.js';
+import hideRemoveElements from '../clientSideScripts/hideRemoveElements.js';
+import removeElementFromDom from '../clientSideScripts/removeElementFromDom.js';
+import toggleTextTransparency from '../clientSideScripts/toggleTextTransparency.js';
+import { CUSTOM_CSS_ID } from './constants.js';
+const log = logger('test');
+vi.mock('@wdio/logger', () => import(join(process.cwd(), '__mocks__', '@wdio/logger')));
+vi.mock('../methods/images.js', () => ({
+    saveBase64Image: vi.fn()
+}));
+vi.mock('./utils.js', () => ({
+    getAndCreatePath: vi.fn(),
+    formatFileName: vi.fn()
+}));
+import { saveBase64Image } from '../methods/images.js';
+import { getAndCreatePath, formatFileName } from './utils.js';
+describe('afterScreenshot', () => {
+    const mockPath = '/mocked/path';
+    const mockFileName = 'mocked-file-name.png';
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    beforeEach(() => {
+        vi.mocked(getAndCreatePath).mockReturnValue(mockPath);
+        vi.mocked(formatFileName).mockReturnValue(mockFileName);
+    });
+    const createMockBrowserInstance = (mockExecuteFn = vi.fn().mockResolvedValue(''), customProperties = {}) => {
+        return {
+            execute: mockExecuteFn,
+            ...customProperties
+        };
+    };
+    const baseFilePath = {
+        browserName: 'browserName',
+        deviceName: 'deviceName',
+        isMobile: false,
+        savePerInstance: true,
+    };
+    const baseFileName = {
+        browserName: 'browserName',
+        browserVersion: 'browserVersion',
+        deviceName: 'deviceName',
+        devicePixelRatio: 2,
+        formatImageName: '{tag}-{browserName}-{width}x{height}-dpr-{dpr}',
+        isMobile: false,
+        isTestInBrowser: true,
+        logName: 'logName',
+        name: 'name',
+        outerHeight: 850,
+        outerWidth: 1400,
+        platformName: 'platformName',
+        platformVersion: 'platformVersion',
+        screenHeight: 900,
+        screenWidth: 1440,
+        tag: 'tag',
+    };
+    const createBaseOptions = (overrides = {}) => ({
+        actualFolder: mockPath,
+        base64Image: 'string',
+        filePath: baseFilePath,
+        fileName: baseFileName,
+        hideScrollBars: false,
+        isLandscape: false,
+        isNativeContext: false,
+        platformName: '',
+        ...overrides,
+    });
+    it('should be able to return the ScreenshotOutput with default options', async () => {
+        const mockBrowserInstance = createMockBrowserInstance();
+        const options = createBaseOptions({
+            disableBlinkingCursor: false,
+            disableCSSAnimation: false,
+            hideScrollBars: true,
+            hideElements: ['<div></div>'],
+            removeElements: ['<div></div>'],
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle native context and skip browser operations', async () => {
+        const mockBrowserInstance = createMockBrowserInstance();
+        const options = createBaseOptions({
+            disableBlinkingCursor: true,
+            disableCSSAnimation: true,
+            enableLayoutTesting: true,
+            fileName: {
+                ...baseFileName,
+                devicePixelRatio: 1.5,
+                outerHeight: 600,
+                outerWidth: 800,
+                screenHeight: 700,
+                screenWidth: 900,
+            },
+            hideScrollBars: true,
+            isLandscape: true,
+            isNativeContext: true,
+            hideElements: ['<div></div>'],
+            platformName: 'iOS',
+            removeElements: ['<div></div>'],
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockBrowserInstance.execute).not.toHaveBeenCalled();
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle layout testing with enableLayoutTesting', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const options = createBaseOptions({
+            enableLayoutTesting: true,
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(toggleTextTransparency, false);
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle mobile platform and remove custom CSS', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute, { isMobile: true });
+        const options = createBaseOptions({
+            disableBlinkingCursor: false,
+            disableCSSAnimation: false,
+            filePath: {
+                ...baseFilePath,
+                isMobile: true,
+            },
+            fileName: {
+                ...baseFileName,
+                isMobile: true,
+                platformName: 'Android',
+            },
+            platformName: 'Android',
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(removeElementFromDom, CUSTOM_CSS_ID);
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle hide/remove elements with error handling', async () => {
+        const mockExecute = vi.fn().mockRejectedValueOnce(new Error('Element not found'));
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const hideElements = ['<div></div>'];
+        const removeElements = ['<div></div>'];
+        const options = createBaseOptions({
+            hideElements,
+            removeElements,
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(hideRemoveElements, { hide: hideElements, remove: removeElements }, false);
+        expect(log.warn).toHaveBeenCalledTimes(1);
+        expect(vi.mocked(log.warn).mock.calls[0]).toMatchSnapshot();
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle hideScrollBars when hideScrollBars is true', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const options = createBaseOptions({
+            hideScrollBars: true,
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(hideScrollBars, false);
+        expect(result).toMatchSnapshot();
+    });
+    it('should skip hide/remove elements when both are empty arrays', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const options = createBaseOptions({
+            hideElements: [],
+            removeElements: [],
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).not.toHaveBeenCalledWith(hideRemoveElements, expect.any(Object), false);
+        expect(result).toMatchSnapshot();
+    });
+    it('should skip hide/remove elements when both are falsy', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const options = createBaseOptions({
+            hideElements: undefined,
+            removeElements: null,
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).not.toHaveBeenCalledWith(hideRemoveElements, expect.any(Object), false);
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle only hideElements with length > 0', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const hideElements = ['<div></div>'];
+        const options = createBaseOptions({
+            hideElements,
+            removeElements: [],
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(hideRemoveElements, { hide: hideElements, remove: [] }, false);
+        expect(result).toMatchSnapshot();
+    });
+    it('should handle only removeElements with length > 0', async () => {
+        const mockExecute = vi.fn().mockResolvedValue('');
+        const mockBrowserInstance = createMockBrowserInstance(mockExecute);
+        const removeElements = ['<div></div>'];
+        const options = createBaseOptions({
+            hideElements: null,
+            removeElements,
+        });
+        const result = await afterScreenshot(mockBrowserInstance, options);
+        expect(vi.mocked(getAndCreatePath)).toHaveBeenCalledWith(mockPath, options.filePath);
+        expect(vi.mocked(formatFileName)).toHaveBeenCalledWith(options.fileName);
+        expect(vi.mocked(saveBase64Image)).toHaveBeenCalledWith(options.base64Image, join(mockPath, mockFileName));
+        expect(mockExecute).toHaveBeenCalledWith(hideRemoveElements, { hide: null, remove: removeElements }, false);
+        expect(result).toMatchSnapshot();
+    });
+});

package/dist/helpers/beforeScreenshot.d.ts

@@ -0,0 +1,6 @@
+import type { BeforeScreenshotOptions, BeforeScreenshotResult } from './beforeScreenshot.interfaces.js';
+/**
+ * Methods that need to be executed before a screenshot will be taken
+ */
+export default function beforeScreenshot(browserInstance: WebdriverIO.Browser, options: BeforeScreenshotOptions, addShadowPadding?: boolean): Promise<BeforeScreenshotResult>;
+//# sourceMappingURL=beforeScreenshot.d.ts.map

package/dist/helpers/beforeScreenshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beforeScreenshot.d.ts","sourceRoot":"","sources":["../../src/helpers/beforeScreenshot.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAOvG;;GAEG;AACH,wBAA8B,gBAAgB,CAC1C,eAAe,EAAE,WAAW,CAAC,OAAO,EACpC,OAAO,EAAE,uBAAuB,EAChC,gBAAgB,UAAQ,GACzB,OAAO,CAAC,sBAAsB,CAAC,CAmFjC"}

package/dist/helpers/beforeScreenshot.interfaces.d.ts

@@ -0,0 +1,15 @@
+import type { EnrichedInstanceData, InstanceData } from '../methods/instanceData.interfaces.js';
+export interface BeforeScreenshotOptions {
+    instanceData: InstanceData;
+    addressBarShadowPadding: number;
+    disableBlinkingCursor: boolean;
+    disableCSSAnimation: boolean;
+    enableLayoutTesting: boolean;
+    noScrollBars: boolean;
+    toolBarShadowPadding: number;
+    hideElements: HTMLElement[];
+    removeElements: HTMLElement[];
+    waitForFontsLoaded: boolean;
+}
+export type BeforeScreenshotResult = EnrichedInstanceData;
+//# sourceMappingURL=beforeScreenshot.interfaces.d.ts.map

package/dist/helpers/beforeScreenshot.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beforeScreenshot.interfaces.d.ts","sourceRoot":"","sources":["../../src/helpers/beforeScreenshot.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AAE/F,MAAM,WAAW,uBAAuB;IAEpC,YAAY,EAAE,YAAY,CAAC;IAE3B,uBAAuB,EAAE,MAAM,CAAC;IAEhC,qBAAqB,EAAE,OAAO,CAAC;IAE/B,mBAAmB,EAAE,OAAO,CAAC;IAE7B,mBAAmB,EAAE,OAAO,CAAC;IAE7B,YAAY,EAAE,OAAO,CAAC;IAEtB,oBAAoB,EAAE,MAAM,CAAC;IAE7B,YAAY,EAAE,WAAW,EAAE,CAAC;IAE5B,cAAc,EAAE,WAAW,EAAE,CAAC;IAE9B,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,CAAC"}

package/dist/helpers/beforeScreenshot.interfaces.js

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

package/dist/helpers/beforeScreenshot.js

@@ -0,0 +1,79 @@
+import logger from '@wdio/logger';
+import hideScrollBars from '../clientSideScripts/hideScrollbars.js';
+import setCustomCss from '../clientSideScripts/setCustomCss.js';
+import { CUSTOM_CSS_ID } from './constants.js';
+import { getAddressBarShadowPadding, getToolBarShadowPadding, waitFor } from './utils.js';
+import getEnrichedInstanceData from '../methods/instanceData.js';
+import hideRemoveElements from '../clientSideScripts/hideRemoveElements.js';
+import toggleTextTransparency from '../clientSideScripts/toggleTextTransparency.js';
+import waitForFonts from '../clientSideScripts/waitForFonts.js';
+const log = logger('@wdio/visual-service:beforeScreenshot');
+/**
+ * Methods that need to be executed before a screenshot will be taken
+ */
+export default async function beforeScreenshot(browserInstance, options, addShadowPadding = false) {
+    const { browserName, nativeWebScreenshot } = options.instanceData;
+    const { isAndroid, isIOS, isMobile } = browserInstance;
+    const { addressBarShadowPadding, disableBlinkingCursor, disableCSSAnimation, enableLayoutTesting, hideElements, noScrollBars, removeElements, toolBarShadowPadding, waitForFontsLoaded, } = options;
+    const addressBarPadding = getAddressBarShadowPadding({
+        browserName,
+        isAndroid,
+        isIOS,
+        isMobile,
+        nativeWebScreenshot,
+        addressBarShadowPadding,
+        addShadowPadding,
+    });
+    const toolBarPadding = getToolBarShadowPadding({ isAndroid, isIOS, isMobile, browserName, toolBarShadowPadding, addShadowPadding });
+    // Wait for the fonts to be loaded
+    if (waitForFontsLoaded) {
+        try {
+            await browserInstance.execute(waitForFonts);
+        }
+        catch (e) {
+            log.debug('Waiting for fonts to load threw an error:', e);
+        }
+    }
+    // Hide the scrollbars
+    if (noScrollBars) {
+        await browserInstance.execute(hideScrollBars, noScrollBars);
+    }
+    // Hide and or Remove elements
+    if (hideElements.length > 0 || removeElements.length > 0) {
+        try {
+            await browserInstance.execute(hideRemoveElements, { hide: hideElements, remove: removeElements }, true);
+        }
+        catch (e) {
+            log.warn('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+ WARNING:
+ (One of) the elements that needed to be hidden or removed could not be found on the
+ page and caused this error
+ Error: ${e}
+ We made sure the test didn't break.
+#####################################################################################
+`);
+        }
+    }
+    // Set some custom css
+    if (disableCSSAnimation || disableBlinkingCursor || browserInstance.isMobile) {
+        await browserInstance.execute(setCustomCss, { addressBarPadding, disableBlinkingCursor, disableCSSAnimation, id: CUSTOM_CSS_ID, toolBarPadding });
+        // Wait at least 500 milliseconds to make sure the css is applied
+        // Not every device is fast enough to apply the css faster
+        await waitFor(500);
+    }
+    // Make all text transparent
+    if (enableLayoutTesting) {
+        await browserInstance.execute(toggleTextTransparency, enableLayoutTesting);
+        // Wait at least 500 milliseconds to make sure the css is applied
+        // Not every device is fast enough to apply the css faster
+        await waitFor(500);
+    }
+    // Get all the needed instance data
+    const instanceOptions = {
+        addressBarShadowPadding: options.addressBarShadowPadding,
+        toolBarShadowPadding: options.toolBarShadowPadding,
+        ...options.instanceData,
+    };
+    return getEnrichedInstanceData(browserInstance, instanceOptions, addShadowPadding);
+}

package/dist/helpers/beforeScreenshot.test.d.ts

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

package/dist/helpers/beforeScreenshot.test.d.ts.map

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