@wdio/visual-service 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @wdio/visual-service
+
+## 1.0.0
+
+### Major Changes
+
+- 36d3868: Support for WebdriverIO v8
+
+### Minor Changes
+
+- 36d3868: (feat): add visual matcher
+
+### Patch Changes
+
+- Updated dependencies [36d3868]
+  - webdriver-image-comparison@3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 OpenJS Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+WebdriverIO Visual Service
+==========================
+
+> A WebdriverIO service for image comparison / visual regression testing.
+
+## Installation
+
+The easiest way is to keep `@wdio/visual-service` as a dev-dependency in your `package.json`, via:
+
+```sh
+npm install @wdio/visual-service --save-dev
+```
+
+Instructions on how to get started can be found in the [visual testing](https://webdriver.io/docs/visual-testing) docs on the WebdriverIO project page.

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="./expect-webdriverio.js" />
+import WdioImageComparisonService from './service.js';
+import type { Output, Result, WdioCheckFullPageMethodOptions, WdioSaveFullPageMethodOptions, WdioSaveElementMethodOptions, WdioSaveScreenMethodOptions, WdioCheckElementMethodOptions, WdioCheckScreenMethodOptions } from './types.js';
+declare global {
+    namespace WebdriverIO {
+        interface Browser {
+            /**
+             * Saves an image of an element
+             */
+            saveElement(element: Element, tag: string, saveElementOptions?: WdioSaveElementMethodOptions): Promise<Output>;
+            /**
+             * Saves an image of a viewport
+             */
+            saveScreen(tag: string, saveScreenOptions?: WdioSaveScreenMethodOptions): Promise<Output>;
+            /**
+             * Saves an image of the complete screen
+             */
+            saveFullPageScreen(tag: string, saveFullPageScreenOptions?: WdioSaveFullPageMethodOptions): Promise<Output>;
+            /**
+             * Saves an image of the complete screen with the tabbable lines and dots
+             */
+            saveTabbablePage(tag: string, saveTabbableOptions?: WdioSaveFullPageMethodOptions): Promise<Output>;
+            /**
+             * Compare an image of an element
+             */
+            checkElement(element: Element, tag: string, checkElementOptions?: WdioCheckElementMethodOptions): Promise<Result>;
+            /**
+             * Compares an image of a viewport
+             */
+            checkScreen(tag: string, checkScreenOptions?: WdioCheckScreenMethodOptions): Promise<Result>;
+            /**
+             * Compares an image of the complete screen
+             */
+            checkFullPageScreen(tag: string, checkFullPageOptions?: WdioCheckFullPageMethodOptions): Promise<Result>;
+            /**
+             * Compares an image of the complete screen with the tabbable lines and dots
+             */
+            checkTabbablePage(tag: string, checkTabbableOptions?: WdioCheckFullPageMethodOptions): Promise<Result>;
+        }
+        interface Element {
+        }
+        interface Capabilities {
+            'wdio-ics:options'?: {
+                logName?: string;
+            };
+        }
+    }
+    namespace ExpectWebdriverIO {
+        interface Matchers<R, T> {
+            /**
+             * cks that if current screen matches with snapshot of baseline.
+             * @param tag snapshot name
+             * @param expectedResult either a number representing a mismatch percentage (defaults to 0) or an asymmetric matcher
+             * @param options options to pass into the `checkScreen` method
+             */
+            toMatchScreenSnapshot(tag: string, expectedResult?: number | ExpectWebdriverIO.PartialMatcher, options?: WdioCheckScreenMethodOptions): R;
+            toMatchScreenSnapshot(tag: string, options?: WdioCheckScreenMethodOptions): R;
+            /**
+             * Checks that if the full page screenshot matches with snapshot of baseline.
+             * @param tag snapshot name
+             * @param expectedResult either a number representing a mismatch percentage (defaults to 0) or an asymmetric matcher
+             * @param options options to pass into the `checkFullPageScreen` method
+             */
+            toMatchFullPageSnapshot(tag: string, expectedResult?: number | ExpectWebdriverIO.PartialMatcher, options?: WdioCheckFullPageMethodOptions): R;
+            toMatchFullPageSnapshot(tag: string, options?: WdioCheckFullPageMethodOptions): R;
+            /**
+             * Checks that if given element matches with snapshot of baseline.
+             * @param tag snapshot name
+             * @param expectedResult either a number representing a mismatch percentage (defaults to 0) or an asymmetric matcher
+             * @param options options to pass into the `checkElement` method
+             */
+            toMatchElementSnapshot(tag: string, expectedResult?: number | ExpectWebdriverIO.PartialMatcher, options?: WdioCheckElementMethodOptions): R;
+            toMatchElementSnapshot(tag: string, options?: WdioCheckElementMethodOptions): R;
+            /**
+             * Checks that if the full page screenshot including tab marks matches with snapshot of baseline.
+             * @param tag snapshot name
+             * @param expectedResult either a number representing a mismatch percentage (defaults to 0) or an asymmetric matcher
+             * @param options options to pass into the `checkTabbablePage` method
+             */
+            toMatchTabbablePageSnapshot(tag: string, expectedResult?: number | ExpectWebdriverIO.PartialMatcher, options?: WdioCheckFullPageMethodOptions): R;
+            toMatchTabbablePageSnapshot(tag: string, options?: WdioCheckFullPageMethodOptions): R;
+        }
+    }
+}
+export default WdioImageComparisonService;
+//# 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,0BAA0B,MAAM,cAAc,CAAA;AACrD,OAAO,KAAK,EACR,MAAM,EACN,MAAM,EACN,8BAA8B,EAC9B,6BAA6B,EAC7B,4BAA4B,EAC5B,2BAA2B,EAC3B,6BAA6B,EAC7B,4BAA4B,EAC/B,MAAM,YAAY,CAAA;AAEnB,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,WAAW,CAAC;QAClB,UAAU,OAAO;YACb;;eAEG;YACH,WAAW,CACP,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,kBAAkB,CAAC,EAAE,4BAA4B,GAClD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,UAAU,CACN,GAAG,EAAE,MAAM,EACX,iBAAiB,CAAC,EAAE,2BAA2B,GAChD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,kBAAkB,CACd,GAAG,EAAE,MAAM,EACX,yBAAyB,CAAC,EAAE,6BAA6B,GAC1D,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,gBAAgB,CACZ,GAAG,EAAE,MAAM,EACX,mBAAmB,CAAC,EAAE,6BAA6B,GACpD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,YAAY,CACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,mBAAmB,CAAC,EAAE,6BAA6B,GACpD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,WAAW,CACP,GAAG,EAAE,MAAM,EACX,kBAAkB,CAAC,EAAE,4BAA4B,GAClD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,mBAAmB,CACf,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,8BAA8B,GACtD,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnB;;eAEG;YACH,iBAAiB,CACb,GAAG,EAAE,MAAM,EACX,oBAAoB,CAAC,EAAE,8BAA8B,GACtD,OAAO,CAAC,MAAM,CAAC,CAAC;SACtB;QACD,UAAU,OAAO;SAAG;QACpB,UAAU,YAAY;YAClB,kBAAkB,CAAC,EAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;aACpB,CAAA;SACJ;KACJ;IAED,UAAU,iBAAiB,CAAC;QAGxB,UAAU,QAAQ,CAAC,CAAC,EAAE,CAAC;YACnB;;;;;eAKG;YACH,qBAAqB,CACjB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,4BAA4B,GACvC,CAAC,CAAA;YACJ,qBAAqB,CACjB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,4BAA4B,GACvC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,uBAAuB,CACnB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ,uBAAuB,CACnB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,sBAAsB,CAClB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,6BAA6B,GACxC,CAAC,CAAA;YACJ,sBAAsB,CAClB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,6BAA6B,GACxC,CAAC,CAAA;YACJ;;;;;eAKG;YACH,2BAA2B,CACvB,GAAG,EAAE,MAAM,EACX,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EAC1D,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;YACJ,2BAA2B,CACvB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,8BAA8B,GACzC,CAAC,CAAA;SACP;KACJ;CACJ;AAED,eAAe,0BAA0B,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import WdioImageComparisonService from './service.js';
+export default WdioImageComparisonService;

package/dist/matcher.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="./expect-webdriverio.js" />
+import type { WdioCheckFullPageMethodOptions, WdioCheckElementMethodOptions, WdioCheckScreenMethodOptions } from './types.js';
+export declare function toMatchScreenSnapshot(browser: WebdriverIO.Browser, tag: string, expectedResultOrOptions?: number | ExpectWebdriverIO.PartialMatcher, optionsOrUndefined?: WdioCheckScreenMethodOptions): Promise<{
+    pass: boolean;
+    message: () => string;
+}>;
+export declare function toMatchFullPageSnapshot(browser: WebdriverIO.Browser, tag: string, expectedResultOrOptions?: number | ExpectWebdriverIO.PartialMatcher, optionsOrUndefined?: WdioCheckFullPageMethodOptions): Promise<{
+    pass: boolean;
+    message: () => string;
+}>;
+export declare function toMatchElementSnapshot(element: WebdriverIO.Element, tag: string, expectedResultOrOptions?: number | ExpectWebdriverIO.PartialMatcher, optionsOrUndefined?: WdioCheckElementMethodOptions): Promise<{
+    pass: boolean;
+    message: () => string;
+}>;
+export declare function toMatchTabbablePageSnapshot(browser: WebdriverIO.Browser, tag: string, expectedResultOrOptions?: number | ExpectWebdriverIO.PartialMatcher, optionsOrUndefined?: WdioCheckFullPageMethodOptions): Promise<{
+    pass: boolean;
+    message: () => string;
+}>;
+//# sourceMappingURL=matcher.d.ts.map

package/dist/matcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matcher.d.ts","sourceRoot":"","sources":["../src/matcher.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EACR,8BAA8B,EAC9B,6BAA6B,EAC7B,4BAA4B,EAC/B,MAAM,YAAY,CAAA;AA2FnB,wBAAsB,qBAAqB,CACvC,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,GAAG,EAAE,MAAM,EACX,uBAAuB,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EACnE,kBAAkB,CAAC,EAAE,4BAA4B;;;GAKpD;AAED,wBAAsB,uBAAuB,CACzC,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,GAAG,EAAE,MAAM,EACX,uBAAuB,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EACnE,kBAAkB,CAAC,EAAE,8BAA8B;;;GAKtD;AAED,wBAAsB,sBAAsB,CACxC,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,GAAG,EAAE,MAAM,EACX,uBAAuB,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EACnE,kBAAkB,CAAC,EAAE,6BAA6B;;;GAMrD;AAED,wBAAsB,2BAA2B,CAC7C,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,GAAG,EAAE,MAAM,EACX,uBAAuB,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,cAAc,EACnE,kBAAkB,CAAC,EAAE,8BAA8B;;;GAKtD"}

package/dist/matcher.js

@@ -0,0 +1,93 @@
+import { getBrowserObject } from './utils.js';
+const DEFAULT_EXPECTED_RESULT = 0;
+const asymmetricMatcher = typeof Symbol === 'function' && Symbol.for
+    ? Symbol.for('jest.asymmetricMatcher')
+    : 1267621;
+function isAsymmetricMatcher(expected) {
+    return Boolean(expected && typeof expected === 'object' && '$$typeof' in expected && expected.$$typeof === asymmetricMatcher && 'asymmetricMatch' in expected);
+}
+function compareResult(result, expected) {
+    /**
+     * expected value is an asymmetric matcher, e.g.
+     *
+     * ```ts
+     * expect(browser).toMatchScreenSnapshot('foo', expect.closeTo(0, 2))
+     * ```
+     */
+    if (isAsymmetricMatcher(expected)) {
+        const pass = expected.asymmetricMatch(result.misMatchPercentage);
+        return {
+            pass,
+            message: () => 'Expected image to match with given asymmetric matcher but did not pass!\n'
+        };
+    }
+    /**
+     * expected value is a number
+     *
+     * ```ts
+     * expect(browser).toMatchScreenSnapshot('foo', 0)
+     * ```
+     */
+    if (typeof expected === 'number') {
+        return {
+            pass: result.misMatchPercentage === expected,
+            message: () => (`Expected image to have a mismatch percentage of ${expected}%, but was ${result.misMatchPercentage}%\n` +
+                'Please compare the images manually and update the baseline if the new screenshot is correct.\n' +
+                `\nBaseline: ${result.folders.baseline}\n` +
+                `Actual Screenshot: ${result.folders.actual}\n` +
+                `Difference: ${result.folders.diff}\n` +
+                '\nSee https://webdriver.io/docs/api/visual-regression.html for more information.')
+        };
+    }
+    throw new Error(`Invalid matcher, expect either a number or an asymmetric matcher, but found ${expected}`);
+}
+function parseMatcherParams(tag, expectedResult, options) {
+    /**
+     * throw if `tag` is not a string
+     */
+    if (typeof tag !== 'string') {
+        throw new Error(`Expected a snapshot tag as a string but received "${typeof tag}"`);
+    }
+    /**
+     * if `expectedResult` is an object, it is an options object
+     * ```ts
+     * expect(browser).toMatchScreenSnapshot('foo', { hideAfterFirstScroll: [element] })
+     * ```
+     */
+    if (typeof expectedResult === 'object' && !isAsymmetricMatcher(expectedResult)) {
+        options = expectedResult;
+        expectedResult = DEFAULT_EXPECTED_RESULT;
+    }
+    /**
+     * make sure `options` is an object
+     */
+    if (typeof options !== 'object') {
+        options = {};
+    }
+    /**
+     * overwrite `returnAllCompareData` to allow us to provide a better assertion message
+     */
+    options.returnAllCompareData = true;
+    return { expectedResult, options };
+}
+export async function toMatchScreenSnapshot(browser, tag, expectedResultOrOptions, optionsOrUndefined) {
+    const { expectedResult, options } = parseMatcherParams(tag, expectedResultOrOptions, optionsOrUndefined);
+    const result = await browser.checkScreen(tag, options);
+    return compareResult(result, expectedResult || DEFAULT_EXPECTED_RESULT);
+}
+export async function toMatchFullPageSnapshot(browser, tag, expectedResultOrOptions, optionsOrUndefined) {
+    const { expectedResult, options } = parseMatcherParams(tag, expectedResultOrOptions, optionsOrUndefined);
+    const result = await browser.checkFullPageScreen(tag, options);
+    return compareResult(result, expectedResult || DEFAULT_EXPECTED_RESULT);
+}
+export async function toMatchElementSnapshot(element, tag, expectedResultOrOptions, optionsOrUndefined) {
+    const { expectedResult, options } = parseMatcherParams(tag, expectedResultOrOptions, optionsOrUndefined);
+    const browser = getBrowserObject(await element);
+    const result = await browser.checkElement(await element, tag, options);
+    return compareResult(result, expectedResult || DEFAULT_EXPECTED_RESULT);
+}
+export async function toMatchTabbablePageSnapshot(browser, tag, expectedResultOrOptions, optionsOrUndefined) {
+    const { expectedResult, options } = parseMatcherParams(tag, expectedResultOrOptions, optionsOrUndefined);
+    const result = await browser.checkTabbablePage(tag, options);
+    return compareResult(result, expectedResult || DEFAULT_EXPECTED_RESULT);
+}

package/dist/service.d.ts

@@ -0,0 +1,9 @@
+import type { ClassOptions } from 'webdriver-image-comparison';
+import { BaseClass } from 'webdriver-image-comparison';
+export default class WdioImageComparisonService extends BaseClass {
+    #private;
+    private _browser?;
+    constructor(options: ClassOptions);
+    before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): void;
+}
+//# sourceMappingURL=service.d.ts.map

package/dist/service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EASZ,MAAM,4BAA4B,CAAA;AAsBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAC7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;gBAE3D,OAAO,EAAE,YAAY;IAGjC,MAAM,CACF,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;CA2HpE"}

package/dist/service.js

@@ -0,0 +1,100 @@
+import logger from '@wdio/logger';
+import { expect } from '@wdio/globals';
+import { BaseClass, checkElement, checkFullPageScreen, checkScreen, saveElement, saveFullPageScreen, saveScreen, saveTabbablePage, checkTabbablePage, } from 'webdriver-image-comparison';
+import { getFolders, getInstanceData } from './utils.js';
+import { toMatchScreenSnapshot, toMatchFullPageSnapshot, toMatchElementSnapshot, toMatchTabbablePageSnapshot } from './matcher.js';
+const log = logger('@wdio/visual-service');
+const elementCommands = { saveElement, checkElement };
+const pageCommands = {
+    saveScreen,
+    saveFullPageScreen,
+    saveTabbablePage,
+    checkScreen,
+    checkFullPageScreen,
+    checkTabbablePage,
+};
+export default class WdioImageComparisonService extends BaseClass {
+    _browser;
+    constructor(options) {
+        super(options);
+    }
+    before(capabilities, _specs, browser) {
+        this._browser = browser;
+        if (!this._browser.isMultiremote) {
+            log.info('Adding commands to global browser');
+            this.#addCommandsToBrowser(capabilities, this._browser);
+        }
+        else {
+            this.#extendMultiremoteBrowser(capabilities);
+        }
+        /**
+         * add custom matcher for visual comparison
+         */
+        expect.extend({
+            toMatchScreenSnapshot,
+            toMatchFullPageSnapshot,
+            toMatchElementSnapshot,
+            toMatchTabbablePageSnapshot,
+        });
+    }
+    #extendMultiremoteBrowser(capabilities) {
+        const browser = this._browser;
+        const browserNames = Object.keys(capabilities);
+        log.info(`Adding commands to Multi Browser: ${browserNames.join(', ')}`);
+        for (const browserName of browserNames) {
+            const multiremoteBrowser = browser;
+            const browserInstance = multiremoteBrowser.getInstance(browserName);
+            this.#addCommandsToBrowser(capabilities[browserName].capabilities, browserInstance);
+        }
+        /**
+         * Add all the commands to the global browser object that will execute
+         * on each browser in the Multi Remote
+         */
+        for (const command of [
+            ...Object.keys(elementCommands),
+            ...Object.keys(pageCommands),
+        ]) {
+            browser.addCommand(command, function (...args) {
+                const returnData = {};
+                for (const browserName of browserNames) {
+                    const multiremoteBrowser = browser;
+                    const browserInstance = multiremoteBrowser.getInstance(browserName);
+                    /**
+                     * casting command to `checkScreen` to simplify type handling here
+                     */
+                    returnData[browserName] = browserInstance[command].call(browserInstance, ...args);
+                }
+                return returnData;
+            });
+        }
+    }
+    #addCommandsToBrowser(capabilities, currentBrowser) {
+        const instanceData = getInstanceData(capabilities, currentBrowser);
+        const folders = this.folders;
+        const defaultOptions = this.defaultOptions;
+        for (const [commandName, command] of Object.entries(elementCommands)) {
+            log.info(`Adding element command "${commandName}" to browser object`);
+            currentBrowser.addCommand(commandName, function (element, tag, elementOptions = {}) {
+                return command({
+                    executor: this.execute.bind(currentBrowser),
+                    screenShot: this.takeScreenshot.bind(currentBrowser),
+                }, instanceData, getFolders(elementOptions, folders), element, tag, {
+                    wic: defaultOptions,
+                    method: elementOptions,
+                });
+            });
+        }
+        for (const [commandName, command] of Object.entries(pageCommands)) {
+            log.info(`Adding element command "${commandName}" to browser object`);
+            currentBrowser.addCommand(commandName, function (tag, pageOptions = {}) {
+                return command({
+                    executor: this.execute.bind(currentBrowser),
+                    screenShot: this.takeScreenshot.bind(currentBrowser),
+                }, instanceData, getFolders(pageOptions, folders), tag, {
+                    wic: defaultOptions,
+                    method: pageOptions,
+                });
+            });
+        }
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import type { ScreenshotOutput, ImageCompareResult, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions } from 'webdriver-image-comparison';
+type MultiOutput = {
+    [browserName: string]: ScreenshotOutput;
+};
+export type Output = MultiOutput | ScreenshotOutput;
+type MultiResult = {
+    [browserName: string]: ImageCompareResult | number;
+};
+export type Result = MultiResult | (ImageCompareResult | number);
+export interface WdioIcsCommonOptions {
+    hideElements?: WebdriverIO.Element[];
+    removeElements?: WebdriverIO.Element[];
+}
+export interface WdioIcsScrollOptions extends WdioIcsCommonOptions {
+    hideAfterFirstScroll?: WebdriverIO.Element[];
+}
+export interface WdioCheckFullPageMethodOptions extends Omit<CheckFullPageMethodOptions, keyof WdioIcsScrollOptions>, WdioIcsScrollOptions {
+}
+export interface WdioSaveFullPageMethodOptions extends Omit<SaveFullPageMethodOptions, keyof WdioIcsScrollOptions>, WdioIcsScrollOptions {
+}
+export interface WdioSaveElementMethodOptions extends Omit<SaveElementMethodOptions, keyof WdioIcsCommonOptions>, WdioIcsCommonOptions {
+}
+export interface WdioSaveScreenMethodOptions extends Omit<SaveScreenMethodOptions, keyof WdioIcsCommonOptions>, WdioIcsCommonOptions {
+}
+export interface WdioCheckElementMethodOptions extends Omit<CheckElementMethodOptions, keyof WdioIcsCommonOptions>, WdioIcsCommonOptions {
+}
+export interface WdioCheckScreenMethodOptions extends Omit<CheckScreenMethodOptions, keyof WdioIcsCommonOptions>, WdioIcsCommonOptions {
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,gBAAgB,EAChB,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,EAC1B,yBAAyB,EAC5B,MAAM,4BAA4B,CAAA;AAEnC,KAAK,WAAW,GAAG;IACf,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAC3C,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,gBAAgB,CAAC;AACpD,KAAK,WAAW,GAAG;IACf,CAAC,WAAW,EAAE,MAAM,GAAG,kBAAkB,GAAG,MAAM,CAAC;CACtD,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC,kBAAkB,GAAG,MAAM,CAAC,CAAC;AAEjE,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;CAC1C;AACD,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAC9D,oBAAoB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;CAChD;AAED,MAAM,WAAW,8BACb,SAAQ,IAAI,CAAC,0BAA0B,EAAE,MAAM,oBAAoB,CAAC,EAChE,oBAAoB;CAAG;AAC/B,MAAM,WAAW,6BACb,SAAQ,IAAI,CAAC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC,EAC/D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,4BACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,oBAAoB,CAAC,EAC9D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,2BACb,SAAQ,IAAI,CAAC,uBAAuB,EAAE,MAAM,oBAAoB,CAAC,EAC7D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,6BACb,SAAQ,IAAI,CAAC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC,EAC/D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,4BACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,oBAAoB,CAAC,EAC9D,oBAAoB;CAAG"}

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1,19 @@
+import type { Folders, InstanceData, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions } from 'webdriver-image-comparison';
+/**
+ * Get the folders data
+ *
+ * If folder options are passed in use those values
+ * Otherwise, use the values set during instantiation
+ */
+type getFolderMethodOptions = CheckElementMethodOptions | CheckFullPageMethodOptions | CheckScreenMethodOptions | SaveElementMethodOptions | SaveFullPageMethodOptions | SaveScreenMethodOptions;
+export declare function getFolders(methodOptions: getFolderMethodOptions, folders: Folders): Folders;
+/**
+ * Get the instance data
+ */
+export declare function getInstanceData(capabilities: WebdriverIO.Capabilities, currentBrowser: WebdriverIO.Browser): InstanceData;
+/**
+ * traverse up the scope chain until browser element was reached
+ */
+export declare function getBrowserObject(elem: WebdriverIO.Element | WebdriverIO.Browser): WebdriverIO.Browser;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,OAAO,EACP,YAAY,EACZ,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EAC3B,MAAM,4BAA4B,CAAA;AAOnC;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAC9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,GACjB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,cAAc,EAAE,WAAW,CAAC,OAAO,GACpC,YAAY,CAyDd;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG"}

package/dist/utils.js

@@ -0,0 +1,56 @@
+/// <reference types="webdriverio" />
+export function getFolders(methodOptions, folders) {
+    return {
+        actualFolder: methodOptions.actualFolder ?? folders.actualFolder,
+        baselineFolder: methodOptions.baselineFolder ?? folders.baselineFolder,
+        diffFolder: methodOptions.diffFolder ?? folders.diffFolder,
+    };
+}
+/**
+ * Get the instance data
+ */
+export function getInstanceData(capabilities, currentBrowser) {
+    const currentCapabilities = currentBrowser.requestedCapabilities.alwaysMatch
+        ? currentBrowser.requestedCapabilities.alwaysMatch
+        : currentBrowser.requestedCapabilities;
+    const browserName = (capabilities.browserName ||
+        currentCapabilities.browserName ||
+        'browserName-not-known').toLowerCase();
+    const browserVersion = (capabilities.browserVersion ||
+        currentCapabilities.browserVersion ||
+        'not-known').toLowerCase();
+    const logName = 'wdio-ics:options' in capabilities
+        ? capabilities['wdio-ics:options']?.logName ??
+            ''
+        : '';
+    const name = 'wdio-ics:options' in capabilities
+        ? capabilities['wdio-ics:options']?.name ?? ''
+        : '';
+    // For mobile
+    const platformName = (capabilities.platformName ||
+        currentCapabilities.platformName ||
+        'not-known').toLowerCase();
+    const platformVersion = (capabilities['appium:platformVersion'] ||
+        currentCapabilities['appium:platformVersion'] ||
+        'not-known').toLowerCase();
+    const deviceName = (capabilities['appium:deviceName'] || '').toLowerCase();
+    const nativeWebScreenshot = !!(capabilities['appium:nativeWebScreenshot'] ||
+        currentCapabilities['appium:nativeWebScreenshot']);
+    return {
+        browserName,
+        browserVersion,
+        deviceName,
+        logName,
+        name,
+        nativeWebScreenshot,
+        platformName,
+        platformVersion,
+    };
+}
+/**
+ * traverse up the scope chain until browser element was reached
+ */
+export function getBrowserObject(elem) {
+    const elemObject = elem;
+    return elemObject.parent ? getBrowserObject(elemObject.parent) : elem;
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@wdio/visual-service",
+  "author": "Wim Selles - wswebcreation",
+  "description": "Image comparison / visual regression testing for WebdriverIO",
+  "version": "1.0.0",
+  "license": "MIT",
+  "homepage": "https://webdriver.io/docs/visual-testing",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webdriverio/visual-testing.git"
+  },
+  "keywords": [
+    "webdriverio",
+    "visual",
+    "regression",
+    "image",
+    "comparison"
+  ],
+  "exports": "./dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@wdio/logger": "^8.24.12",
+    "@wdio/types": "^8.26.2",
+    "webdriver-image-comparison": "^3.0.0"
+  },
+  "scripts": {
+    "build": "run-s clean build:*",
+    "build:tsc": "tsc --project ./tsconfig.json",
+    "clean": "rimraf coverage build .tmp",
+    "watch": "pnpm run build:tsc -w"
+  }
+}