@wdio/visual-service 6.4.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,228 @@
 # @wdio/visual-service
 
+## 8.0.0
+
+### Major Changes
+
+- bfe6aca: ## 💥 BREAKING CHANGES
+
+  ### 🧪 Web Screenshot Strategy Now Uses BiDi by Default
+
+  #### What was the problem?
+
+  Screenshots taken via WebDriver's traditional protocol often lacked precision:
+
+  - Emulated devices didn't reflect true resolutions
+  - Device Pixel Ratio (DPR) was often lost
+  - Images were cropped or downscaled
+
+  #### What changed?
+
+  All screenshot-related methods now use the **WebDriver BiDi protocol** by default (if supported by the browser), enabling:
+
+  ✅ Native support for emulated and high-DPR devices
+  ✅ Better fidelity in screenshot size and clarity
+  ✅ Faster, browser-native screenshots via [`browsingContext.captureScreenshot`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-captureScreenshot)
+
+  The following methods now use BiDi:
+
+  - `saveScreen` / `checkScreen`
+  - `saveElement` / `checkElement`
+  - `saveFullPageScreen` / `checkFullPageScreen`
+
+  #### What’s the impact?
+
+  ⚠️ **Existing baselines may no longer match.**
+  Because BiDi screenshots are **sharper** and **match device settings more accurately**, even a small difference in resolution or DPR can cause mismatches.
+
+  > If you rely on existing baseline images, you'll need to regenerate them to avoid false positives.
+
+  #### Want to keep using the legacy method?
+
+  You can disable BiDi screenshots globally or per test using the `enableLegacyScreenshotMethod` flag:
+
+  **Globally in `wdio.conf.ts`:**
+
+  ```ts
+  import { join } from "node:path";
+
+  export const config = {
+    services: [
+      [
+        "visual",
+        {
+          baselineFolder: join(process.cwd(), "./localBaseline/"),
+          debug: true,
+          formatImageName: "{tag}-{logName}-{width}x{height}",
+          screenshotPath: join(process.cwd(), ".tmp/"),
+          enableLegacyScreenshotMethod: true, // 👈 fallback to W3C-based screenshots
+        },
+      ],
+    ],
+  };
+  ```
+
+  **Or per test:**
+
+  ```ts
+  it("should compare an element successfully using legacy screenshots", async function () {
+    await expect($(".hero__title-logo")).toMatchElementSnapshot(
+      "legacyScreenshotLogo",
+      { enableLegacyScreenshotMethod: true } // 👈 fallback to W3C-based screenshots
+    );
+  });
+  ```
+
+  ## 🐛 Bug Fixes
+
+  - ✅ [#916](https://github.com/webdriverio/visual-testing/issues/916): Visual Testing Screenshot Behavior Changed in Emulated Devices
+
+  ## Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+### Patch Changes
+
+- Updated dependencies [bfe6aca]
+  - webdriver-image-comparison@9.0.0
+
+## 7.0.0
+
+### Major Changes
+
+- 42956e4: ## 💥 BREAKING CHANGES
+
+  ### 🔍 Viewport Screenshot Logic Reworked for Mobile Web & Hybrid Apps
+
+  #### What was the problem?
+
+  Screenshots for mobile devices were inconsistent due to platform differences. iOS captures the entire device screen (including status and address bars), while Android (using ChromeDriver) only captures the webview, unless the capability `"appium:nativeWebScreenshot": true` is used.
+
+  #### What changed?
+
+  We’ve reimplemented the logic to correctly handle both platforms by default.
+  This fix addresses [[#747](https://github.com/webdriverio/visual-testing/pull/747)](https://github.com/webdriverio/visual-testing/pull/747).
+
+  💡 Credit to [Benjamin Karran (@ebekebe)](https://github.com/ebekebe) for pointing us in the right direction to improve this logic!
+
+  #### What’s the advantage?
+
+  ✅ More **accurate full-page and element screenshots** on both Android and iOS.
+  ⚠️ But this change may **break your current baselines**, especially on Android and iOS.
+
+  ***
+
+  ### 🍏 iOS Element Screenshot Strategy Changed
+
+  #### What was the problem?
+
+  iOS element screenshots were previously cut from full-device screenshots, which could lead to misalignment or off-by-a-few-pixels issues.
+
+  #### What changed?
+
+  We now use the element screenshot endpoint directly.
+
+  #### What’s the advantage?
+
+  ✅ More accurate iOS element screenshots.
+  ⚠️ But again, this may affect your existing baselines.
+
+  ***
+
+  ### 🖥️ New Full-Page Screenshot Strategy for **Desktop Web**
+
+  #### What was the problem?
+
+  The "previous" scroll-and-stitch method simulated user interaction by scrolling the page, waiting, taking a screenshot, and repeating until the entire page was captured.
+  This works well for **lazy-loaded content**, but it is **slow and unstable** on other pages.
+
+  #### What changed?
+
+  We now use WebDriver BiDi’s [`[browsingContext.captureScreenshot](https://webdriver.io/docs/api/webdriverBidi#browsingcontextcapturescreenshot)`] to capture **full-page screenshots in one go**. This is the new **default strategy for desktop web browsers**.
+
+  📌 **Mobile platforms (iOS/Android)** still use the scroll-and-stitch approach for now.
+
+  #### What’s the advantage?
+
+  ✅ Execution time reduced by **50%+**
+  ✅ Logic is greatly simplified
+  ✅ More consistent and stable results on static or non-lazy pages
+  📸 ![Example](https://github.com/user-attachments/assets/394ad1d6-bbc7-42dd-b93b-ff7eb5a80429)
+
+  **Still want the old scroll-and-stitch behavior or need fullpage screenshots for pages who have lazy-loading?**
+
+  Use the `userBasedFullPageScreenshot` option to simulate user-like scrolling. This remains the **better choice for pages with lazy-loading**:
+
+  ```ts
+  // wdio.conf.ts
+  services: [
+    [
+      "visual",
+      {
+        userBasedFullPageScreenshot: true,
+      },
+    ],
+  ];
+  ```
+
+  Or per test:
+
+  ```ts
+  await expect(browser).toMatchFullPageSnapshot("homepage", {
+    userBasedFullPageScreenshot: true,
+  });
+  ```
+
+  ***
+
+  ## 💅 Polish
+
+  ### ⚠️ Deprecated Root-Level Compare Options
+
+  #### What was the problem?
+
+  Compare options were allowed at the root level of the service config, making them harder to group or discover.
+
+  #### What changed?
+
+  You now get a warning if you still use root-level keys. Please move them under the `compareOptions` property instead.
+
+  **Example warning:**
+
+  ```log
+  WARN The following root-level compare options are deprecated and should be moved under 'compareOptions':
+    - blockOutStatusBar
+    - ignoreColors
+  In the next major version, these options will be removed from the root level.
+  ```
+
+  📘 See: [[compareOptions docs](https://webdriver.io/docs/visual-testing/service-options#compare-options)](https://webdriver.io/docs/visual-testing/service-options#compare-options)
+
+  ***
+
+  ## 🐛 Bug Fixes
+
+  - ✅ [[#747](https://github.com/your-repo/issues/747)](https://github.com/your-repo/issues/747): Fixed incorrect mobile webview context data.
+
+  ***
+
+  ## 🔧 Other
+
+  - 🆙 Updated dependencies
+  - 🧪 Improved test coverage
+  - 📸 Refreshed image baselines
+
+  ***
+
+  ## Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+### Patch Changes
+
+- Updated dependencies [42956e4]
+  - webdriver-image-comparison@8.0.0
+
 ## 6.4.0
 
 ### Minor Changes

package/dist/contextManager.d.ts

@@ -0,0 +1,15 @@
+import type { DeviceRectangles } from 'webdriver-image-comparison';
+export declare class ContextManager {
+    #private;
+    private cachedViewport;
+    constructor(browser: WebdriverIO.Browser);
+    getViewportContext(): DeviceRectangles;
+    setViewPortContext(viewport: DeviceRectangles): void;
+    get browser(): WebdriverIO.Browser;
+    get needsUpdate(): boolean;
+    markForUpdate(): void;
+    setCurrentContext(context: string): void;
+    getCurrentContext(): Promise<string | undefined>;
+    get isNativeContext(): boolean;
+}
+//# sourceMappingURL=contextManager.d.ts.map

package/dist/contextManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextManager.d.ts","sourceRoot":"","sources":["../src/contextManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAMlE,qBAAa,cAAc;;IAKvB,OAAO,CAAC,cAAc,CAAsC;gBAEhD,OAAO,EAAE,WAAW,CAAC,OAAO;IAOxC,kBAAkB,IAAI,gBAAgB;IAItC,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI;IAKpD,IAAI,OAAO,IAAI,WAAW,CAAC,OAAO,CAEjC;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,aAAa,IAAI,IAAI;IAIrB,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAO3B,iBAAiB;IAIvB,IAAI,eAAe,YAElB;CA0BJ"}

package/dist/contextManager.js

@@ -0,0 +1,71 @@
+import logger from '@wdio/logger';
+import { DEVICE_RECTANGLES } from 'webdriver-image-comparison';
+import { getNativeContext } from './utils.js';
+const log = logger('@wdio/visual-service:ContextManager');
+export class ContextManager {
+    #browser;
+    #needsUpdate = false;
+    #currentContext;
+    #isNativeContext;
+    cachedViewport = DEVICE_RECTANGLES;
+    constructor(browser) {
+        this.#browser = browser;
+        const capabilities = this.#browser.requestedCapabilities;
+        this.#isNativeContext = getNativeContext({ capabilities, isMobile: this.#browser.isMobile });
+        this.#browser.on('result', this.#onCommandResult.bind(this));
+    }
+    getViewportContext() {
+        return this.cachedViewport;
+    }
+    setViewPortContext(viewport) {
+        this.cachedViewport = viewport;
+        this.#needsUpdate = false;
+    }
+    get browser() {
+        return this.#browser;
+    }
+    get needsUpdate() {
+        return this.#needsUpdate;
+    }
+    markForUpdate() {
+        this.#needsUpdate = true;
+    }
+    setCurrentContext(context) {
+        this.#currentContext = context;
+        if (this.#browser.isMobile) {
+            this.#isNativeContext = context ? context === 'NATIVE_APP' : this.#isNativeContext;
+        }
+    }
+    async getCurrentContext() {
+        return this.#currentContext;
+    }
+    get isNativeContext() {
+        return this.#isNativeContext;
+    }
+    async #onCommandResult(event) {
+        const commands = ['switchAppiumContext', 'switchContext', 'setOrientation'];
+        if (commands.includes(event.command)) {
+            const { body: { name, orientation }, result } = event;
+            // Check if result exists and is not an error object
+            // @ts-expect-error
+            const isSuccess = result && !result.error && typeof result === 'object';
+            if (isSuccess) {
+                if (event.command === 'setOrientation') {
+                    log.info(`Device rotation to "${orientation}" detected, context will need recalculation.`);
+                    this.markForUpdate();
+                }
+                else {
+                    if (name && name !== 'NATIVE_APP') {
+                        log.info(`Context changed to "${name}", context will need recalculation.`);
+                        this.markForUpdate();
+                    }
+                    // Set the context to the current context
+                    this.setCurrentContext(name);
+                }
+            }
+            else {
+                log.warn('Orientation set failed: \n', result, '\nWe could not recalibrate the context');
+            }
+        }
+    }
+}

package/dist/service.d.ts

@@ -1,9 +1,11 @@
 import type { Frameworks } from '@wdio/types';
 import { BaseClass } from 'webdriver-image-comparison';
 import type { VisualServiceOptions } from './types.js';
+import { ContextManager } from './contextManager.js';
 export default class WdioImageComparisonService extends BaseClass {
     #private;
-    private _isNativeContext;
+    private _contextManager?;
+    private _contextManagers?;
     constructor(options: VisualServiceOptions, _: WebdriverIO.Capabilities, config: WebdriverIO.Config);
     /**
      * Set up the service if users want to use it in standalone mode
@@ -12,6 +14,6 @@ export default class WdioImageComparisonService extends BaseClass {
     before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<void>;
     beforeTest(test: Frameworks.Test): Promise<void>;
     beforeScenario(world: Frameworks.World): void;
-    afterCommand(commandName: string, _args: string[], result: number | string, error: any): void;
+    get contextManager(): ContextManager;
 }
 //# sourceMappingURL=service.d.ts.map

package/dist/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,EACH,SAAS,EAWZ,MAAM,4BAA4B,CAAA;AAYnC,OAAO,KAAK,EAA+C,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAenG,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAM7D,OAAO,CAAC,gBAAgB,CAA+B;gBAE3C,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAOlG;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAIzE,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAgC3D,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAOtC,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK;IAItC,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG;CA2WzF"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,EACH,SAAS,EAWZ,MAAM,4BAA4B,CAAA;AAkBnC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAepD,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAM7D,OAAO,CAAC,eAAe,CAAC,CAAgB;IACxC,OAAO,CAAC,gBAAgB,CAAC,CAAyC;gBAEtD,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAMlG;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAIzE,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IA2B3D,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAOtC,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK;IAqctC,IAAI,cAAc,IAAI,cAAc,CAKnC;CACJ"}

package/dist/service.js

@@ -3,10 +3,12 @@ import { expect } from '@wdio/globals';
 import { dirname, normalize, resolve } from 'node:path';
 import { BaseClass, checkElement, checkFullPageScreen, checkScreen, saveElement, saveFullPageScreen, saveScreen, saveTabbablePage, checkTabbablePage, FOLDERS, DEFAULT_TEST_CONTEXT, } from 'webdriver-image-comparison';
 import { SevereServiceError } from 'webdriverio';
-import { determineNativeContext, enrichTestContext, getFolders, getInstanceData, getNativeContext } from './utils.js';
+import { enrichTestContext, getFolders, getInstanceData, getNativeContext, isBiDiScreenshotSupported, } from './utils.js';
 import { toMatchScreenSnapshot, toMatchFullPageSnapshot, toMatchElementSnapshot, toMatchTabbablePageSnapshot } from './matcher.js';
 import { waitForStorybookComponentToBeLoaded } from './storybook/utils.js';
 import { PAGE_OPTIONS_MAP } from './constants.js';
+import { ContextManager } from './contextManager.js';
+import { wrapWithContext } from './wrapWithContext.js';
 const log = logger('@wdio/visual-service');
 const elementCommands = { saveElement, checkElement };
 const pageCommands = {
@@ -24,11 +26,11 @@ export default class WdioImageComparisonService extends BaseClass {
     #currentFilePath;
     #testContext;
     #browser;
-    _isNativeContext;
+    _contextManager;
+    _contextManagers = new Map();
     constructor(options, _, config) {
         super(options);
         this.#config = config;
-        this._isNativeContext = undefined;
         this.#testContext = DEFAULT_TEST_CONTEXT;
     }
     /**
@@ -39,7 +41,6 @@ export default class WdioImageComparisonService extends BaseClass {
     }
     async before(capabilities, _specs, browser) {
         this.#browser = browser;
-        this._isNativeContext = determineNativeContext(this.#browser);
         if (!this.#browser.isMultiremote) {
             log.info('Adding commands to global browser');
             await this.#addCommandsToBrowser(this.#browser);
@@ -47,9 +48,6 @@ export default class WdioImageComparisonService extends BaseClass {
         else {
             await this.#extendMultiremoteBrowser(capabilities);
         }
-        if (browser.isMultiremote) {
-            this.#setupMultiremoteContextListener();
-        }
         /**
          * add custom matcher for visual comparison when expect has been added.
          * this is not the case in standalone mode
@@ -75,13 +73,6 @@ export default class WdioImageComparisonService extends BaseClass {
     beforeScenario(world) {
         this.#testContext = this.#getTestContext(world);
     }
-    afterCommand(commandName, _args, result, error) {
-        // This is for the cases where in the E2E tests we switch to a WEBVIEW or back to NATIVE_APP context
-        if (commandName === 'getContext' && error === undefined && typeof result === 'string') {
-            // Multiremote logic is handled in the `before` method during an event listener
-            this._isNativeContext = this.#browser?.isMultiremote ? this._isNativeContext : result.includes('NATIVE');
-        }
-    }
     #getBaselineFolder() {
         const isDefaultBaselineFolder = normalize(FOLDERS.DEFAULT.BASE) === this.folders.baselineFolder;
         const baselineFolder = (isDefaultBaselineFolder && this.#currentFilePath ? this.#currentFilePath : this.folders.baselineFolder);
@@ -108,6 +99,8 @@ export default class WdioImageComparisonService extends BaseClass {
         for (const browserName of browserNames) {
             log.info(`Adding commands to Multi Browser: ${browserName}`);
             const browserInstance = browser.getInstance(browserName);
+            const contextManager = new ContextManager(browserInstance);
+            this._contextManagers?.set(browserName, contextManager);
             await this.#addCommandsToBrowser(browserInstance);
         }
         /**
@@ -130,123 +123,181 @@ export default class WdioImageComparisonService extends BaseClass {
      * Add commands to the "normal" browser object
      */
     async #addCommandsToBrowser(currentBrowser) {
-        const instanceData = await getInstanceData(currentBrowser);
-        const isNativeContext = getNativeContext(this.#browser, currentBrowser, this._isNativeContext);
+        this._contextManager = new ContextManager(currentBrowser);
+        currentBrowser.visualService = this;
+        const instanceData = await getInstanceData({
+            currentBrowser,
+            initialDeviceRectangles: this._contextManager.getViewportContext(),
+            isNativeContext: this._contextManager.isNativeContext,
+        });
+        // Update the context manager with the current viewport
+        this._contextManager.setViewPortContext(instanceData.deviceRectangles);
         for (const [commandName, command] of Object.entries(elementCommands)) {
-            this.#addElementCommand(currentBrowser, commandName, command, instanceData, isNativeContext);
+            this.#addElementCommand(currentBrowser, commandName, command, instanceData);
         }
         for (const [commandName, command] of Object.entries(pageCommands)) {
-            this.#addPageCommand(currentBrowser, commandName, command, instanceData, isNativeContext);
+            this.#addPageCommand(currentBrowser, commandName, command, instanceData);
         }
     }
     /**
      * Add new element commands to the browser object
      */
-    #addElementCommand(browser, commandName, command, instanceData, isNativeContext) {
+    #addElementCommand(browser, commandName, command, initialInstanceData) {
         log.info(`Adding element command "${commandName}" to browser object`);
+        const elementOptionsKey = commandName === 'saveElement' ? 'saveElementOptions' : 'checkElementOptions';
         const self = this;
         browser.addCommand(commandName, function (element, tag, elementOptions = {}) {
-            const elementOptionsKey = commandName === 'saveElement' ? 'saveElementOptions' : 'checkElementOptions';
-            return command({
-                methods: {
-                    executor: (fn, ...args) => {
-                        return this.execute.bind(browser)(fn, ...args);
-                    },
-                    getElementRect: this.getElementRect.bind(browser),
-                    screenShot: this.takeScreenshot.bind(browser),
-                    takeElementScreenshot: this.takeElementScreenshot.bind(browser),
-                },
-                instanceData,
-                folders: getFolders(elementOptions, self.folders, self.#getBaselineFolder()),
-                element,
-                tag,
-                [elementOptionsKey]: {
-                    wic: self.defaultOptions,
-                    method: elementOptions,
-                },
-                isNativeContext,
-                testContext: enrichTestContext({
-                    commandName,
-                    currentTestContext: self.#testContext,
-                    instanceData,
-                    tag,
-                })
+            const wrapped = wrapWithContext({
+                browser,
+                command,
+                contextManager: self.contextManager,
+                getArgs: () => {
+                    const updatedInstanceData = {
+                        ...initialInstanceData,
+                        deviceRectangles: self.contextManager.getViewportContext(),
+                    };
+                    const isCurrentContextNative = self.contextManager.isNativeContext;
+                    return [{
+                            methods: {
+                                bidiScreenshot: isBiDiScreenshotSupported(browser) ? this.browsingContextCaptureScreenshot.bind(browser) : undefined,
+                                executor: (fn, ...args) => {
+                                    return this.execute(fn, ...args);
+                                },
+                                getElementRect: this.getElementRect.bind(this),
+                                getWindowHandle: this.getWindowHandle.bind(browser),
+                                screenShot: this.takeScreenshot.bind(this),
+                                takeElementScreenshot: this.takeElementScreenshot.bind(this),
+                            },
+                            instanceData: updatedInstanceData,
+                            folders: getFolders(elementOptions, self.folders, self.#getBaselineFolder()),
+                            element,
+                            tag,
+                            [elementOptionsKey]: {
+                                wic: self.defaultOptions,
+                                method: elementOptions,
+                            },
+                            isNativeContext: isCurrentContextNative,
+                            testContext: enrichTestContext({
+                                commandName,
+                                currentTestContext: self.#testContext,
+                                instanceData: updatedInstanceData,
+                                tag,
+                            }),
+                        }];
+                }
             });
+            return wrapped.call(this);
         });
     }
     /**
      * Add new page commands to the browser object
      */
-    #addPageCommand(browser, commandName, command, instanceData, isNativeContext) {
+    #addPageCommand(browser, commandName, command, initialInstanceData) {
         log.info(`Adding browser command "${commandName}" to browser object`);
         const self = this;
         const pageOptionsKey = PAGE_OPTIONS_MAP[commandName];
         if (commandName === 'waitForStorybookComponentToBeLoaded') {
             browser.addCommand(commandName, (options) => waitForStorybookComponentToBeLoaded(options));
+            return;
         }
-        else {
-            browser.addCommand(commandName, function (tag, pageOptions = {}) {
-                return command({
-                    methods: {
-                        executor: (fn, ...args) => {
-                            return this.execute.bind(browser)(fn, ...args);
-                        },
-                        getElementRect: this.getElementRect.bind(browser),
-                        screenShot: this.takeScreenshot.bind(browser),
-                    },
-                    instanceData,
-                    folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
-                    tag,
-                    [pageOptionsKey]: {
-                        wic: self.defaultOptions,
-                        method: pageOptions,
-                    },
-                    isNativeContext,
-                    testContext: enrichTestContext({
-                        commandName,
-                        currentTestContext: self.#testContext,
-                        instanceData,
-                        tag,
-                    })
-                });
+        browser.addCommand(commandName, function (tag, pageOptions = {}) {
+            const wrapped = wrapWithContext({
+                browser,
+                command,
+                contextManager: self.contextManager,
+                getArgs: () => {
+                    const updatedInstanceData = {
+                        ...initialInstanceData,
+                        deviceRectangles: self.contextManager.getViewportContext()
+                    };
+                    const isCurrentContextNative = self.contextManager.isNativeContext;
+                    return [{
+                            methods: {
+                                bidiScreenshot: isBiDiScreenshotSupported(browser) ? this.browsingContextCaptureScreenshot.bind(browser) : undefined,
+                                executor: (fn, ...args) => {
+                                    return this.execute(fn, ...args);
+                                },
+                                getElementRect: this.getElementRect.bind(browser),
+                                getWindowHandle: this.getWindowHandle.bind(browser),
+                                screenShot: this.takeScreenshot.bind(browser),
+                            },
+                            instanceData: updatedInstanceData,
+                            folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
+                            tag,
+                            [pageOptionsKey]: {
+                                wic: self.defaultOptions,
+                                method: pageOptions,
+                            },
+                            isNativeContext: isCurrentContextNative,
+                            testContext: enrichTestContext({
+                                commandName,
+                                currentTestContext: self.#testContext,
+                                instanceData: updatedInstanceData,
+                                tag,
+                            }),
+                        }];
+                }
             });
-        }
+            return wrapped.call(this);
+        });
     }
     #addMultiremoteElementCommand(browser, browserNames, commandName, command) {
         log.info(`Adding element command "${commandName}" to Multi browser object`);
         const self = this;
-        browser.addCommand(commandName, async function (element, tag, pageOptions = {}) {
+        browser.addCommand(commandName, async function (element, tag, elementOptions = {}) {
             const returnData = {};
             const elementOptionsKey = commandName === 'saveElement' ? 'saveElementOptions' : 'checkElementOptions';
             for (const browserName of browserNames) {
                 const browserInstance = browser.getInstance(browserName);
-                const isNativeContext = getNativeContext(self.#browser, browserInstance, self._isNativeContext);
-                const instanceData = await getInstanceData(browserInstance);
-                returnData[browserName] = await command({
-                    methods: {
-                        executor: (fn, ...args) => {
-                            return this.execute.bind(browser)(fn, ...args);
-                        },
-                        getElementRect: browserInstance.getElementRect.bind(browserInstance),
-                        screenShot: browserInstance.takeScreenshot.bind(browserInstance),
-                        takeElementScreenshot: browserInstance.takeElementScreenshot.bind(browserInstance),
-                    },
-                    instanceData,
-                    folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
-                    tag,
-                    element,
-                    [elementOptionsKey]: {
-                        wic: self.defaultOptions,
-                        method: pageOptions,
-                    },
-                    isNativeContext,
-                    testContext: enrichTestContext({
-                        commandName,
-                        currentTestContext: self.#testContext,
-                        instanceData,
-                        tag,
-                    })
+                const contextManager = self._contextManagers?.get(browserName);
+                if (!contextManager) {
+                    throw new Error(`No ContextManager found for browser instance: ${browserName}`);
+                }
+                const isNativeContext = contextManager.isNativeContext;
+                const initialInstanceData = await getInstanceData({
+                    currentBrowser: browserInstance,
+                    initialDeviceRectangles: contextManager.getViewportContext(),
+                    isNativeContext
+                });
+                const wrapped = wrapWithContext({
+                    browser: browserInstance,
+                    command,
+                    contextManager,
+                    getArgs: () => {
+                        const updatedInstanceData = {
+                            ...initialInstanceData,
+                            deviceRectangles: contextManager.getViewportContext(),
+                        };
+                        return [{
+                                methods: {
+                                    bidiScreenshot: isBiDiScreenshotSupported(browserInstance) ? browserInstance.browsingContextCaptureScreenshot.bind(browserInstance) : undefined,
+                                    executor: (fn, ...args) => {
+                                        return browserInstance.execute(fn, ...args);
+                                    },
+                                    getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                                    getWindowHandle: browserInstance.getWindowHandle.bind(browserInstance),
+                                    screenShot: browserInstance.takeScreenshot.bind(browserInstance),
+                                    takeElementScreenshot: browserInstance.takeElementScreenshot.bind(browserInstance),
+                                },
+                                instanceData: updatedInstanceData,
+                                folders: getFolders(elementOptions, self.folders, self.#getBaselineFolder()),
+                                tag,
+                                element,
+                                [elementOptionsKey]: {
+                                    wic: self.defaultOptions,
+                                    method: elementOptions,
+                                },
+                                isNativeContext,
+                                testContext: enrichTestContext({
+                                    commandName,
+                                    currentTestContext: self.#testContext,
+                                    instanceData: updatedInstanceData,
+                                    tag,
+                                }),
+                            }];
+                    }
                 });
+                returnData[browserName] = await wrapped.call(browserInstance);
             }
             return returnData;
         });
@@ -256,59 +307,67 @@ export default class WdioImageComparisonService extends BaseClass {
         const self = this;
         if (commandName === 'waitForStorybookComponentToBeLoaded') {
             browser.addCommand(commandName, waitForStorybookComponentToBeLoaded);
+            return;
         }
-        else {
-            browser.addCommand(commandName, async function (tag, pageOptions = {}) {
-                const returnData = {};
-                const pageOptionsKey = PAGE_OPTIONS_MAP[commandName];
-                for (const browserName of browserNames) {
-                    const browserInstance = browser.getInstance(browserName);
-                    const isNativeContext = getNativeContext(self.#browser, browserInstance, self._isNativeContext);
-                    const instanceData = await getInstanceData(browserInstance);
-                    returnData[browserName] = await command({
-                        methods: {
-                            executor: (fn, ...args) => {
-                                return this.execute.bind(browser)(fn, ...args);
-                            },
-                            getElementRect: browserInstance.getElementRect.bind(browserInstance),
-                            screenShot: browserInstance.takeScreenshot.bind(browserInstance),
-                        },
-                        instanceData,
-                        folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
-                        tag,
-                        [pageOptionsKey]: {
-                            wic: self.defaultOptions,
-                            method: pageOptions,
-                        },
-                        isNativeContext,
-                        testContext: enrichTestContext({
-                            commandName,
-                            currentTestContext: self.#testContext,
-                            instanceData,
-                            tag,
-                        })
-                    });
+        browser.addCommand(commandName, async function (tag, pageOptions = {}) {
+            const returnData = {};
+            const pageOptionsKey = PAGE_OPTIONS_MAP[commandName];
+            for (const browserName of browserNames) {
+                const browserInstance = browser.getInstance(browserName);
+                const contextManager = self._contextManagers?.get(browserName);
+                if (!contextManager) {
+                    throw new Error(`No ContextManager found for browser instance: ${browserName}`);
                 }
-                return returnData;
-            });
-        }
-    }
-    #setupMultiremoteContextListener() {
-        const multiremoteBrowser = this.#browser;
-        const browserInstances = multiremoteBrowser.instances;
-        for (const instanceName of browserInstances) {
-            const instance = multiremoteBrowser[instanceName];
-            instance.on('result', (result) => {
-                if (result.command === 'getContext') {
-                    const value = result.result.value;
-                    const sessionId = instance.sessionId;
-                    if (typeof this._isNativeContext !== 'object' || this._isNativeContext === null) {
-                        this._isNativeContext = {};
+                const isNativeContext = getNativeContext({
+                    capabilities: browserInstance.requestedCapabilities,
+                    isMobile: browserInstance.isMobile,
+                });
+                const initialInstanceData = await getInstanceData({
+                    currentBrowser: browserInstance,
+                    initialDeviceRectangles: contextManager.getViewportContext(),
+                    isNativeContext
+                });
+                const wrapped = wrapWithContext({
+                    browser: browserInstance,
+                    command,
+                    contextManager,
+                    getArgs: () => {
+                        const updatedInstanceData = {
+                            ...initialInstanceData,
+                            deviceRectangles: contextManager.getViewportContext()
+                        };
+                        const isCurrentContextNative = contextManager.isNativeContext;
+                        return [{
+                                methods: {
+                                    bidiScreenshot: isBiDiScreenshotSupported(browserInstance) ? browserInstance.browsingContextCaptureScreenshot.bind(browserInstance) : undefined,
+                                    executor: (fn, ...args) => {
+                                        return browserInstance.execute(fn, ...args);
+                                    },
+                                    getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                                    getWindowHandle: browserInstance.getWindowHandle.bind(browserInstance),
+                                    screenShot: browserInstance.takeScreenshot.bind(browserInstance),
+                                },
+                                instanceData: updatedInstanceData,
+                                folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
+                                tag,
+                                [pageOptionsKey]: {
+                                    wic: self.defaultOptions,
+                                    method: pageOptions,
+                                },
+                                isNativeContext: isCurrentContextNative,
+                                testContext: enrichTestContext({
+                                    commandName,
+                                    currentTestContext: self.#testContext,
+                                    instanceData: updatedInstanceData,
+                                    tag,
+                                }),
+                            }];
                     }
-                    this._isNativeContext[sessionId] = value.includes('NATIVE');
-                }
-            });
-        }
+                });
+                returnData[browserName] = await wrapped.call(browserInstance);
+            }
+            return returnData;
+        });
     }
     #getTestContext(test) {
         const framework = this.#config?.framework;
@@ -359,4 +418,10 @@ export default class WdioImageComparisonService extends BaseClass {
         }
         throw new SevereServiceError(`Framework ${framework} is not supported by the Visual Service and should be either "mocha", "jasmine" or "cucumber".`);
     }
+    get contextManager() {
+        if (!this._contextManager) {
+            throw new Error('ContextManager has not been initialized');
+        }
+        return this._contextManager;
+    }
 }

package/dist/types.d.ts

@@ -1,5 +1,6 @@
-import type { ScreenshotOutput, ImageCompareResult, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, ClassOptions } from 'webdriver-image-comparison';
+import type { ScreenshotOutput, ImageCompareResult, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, ClassOptions, DeviceRectangles, TestContext, InstanceData } from 'webdriver-image-comparison';
 import type { ChainablePromiseElement } from 'webdriverio';
+import type { ContextManager } from './contextManager.js';
 type MultiOutput = {
     [browserName: string]: ScreenshotOutput;
 };
@@ -8,19 +9,38 @@ type MultiResult = {
     [browserName: string]: ImageCompareResult | number;
 };
 export type Result = MultiResult | (ImageCompareResult | number);
-export type NativeContextType = boolean | Record<string, boolean>;
-export type MultiremoteCommandResult = {
-    command: string;
-    method: string;
-    endpoint: string;
-    body: Record<string, any>;
-    result: {
-        value: string;
-    };
-    sessionId: string | undefined;
-    cid: string;
-    type: string;
+export type MobileInstanceData = {
+    devicePixelRatio: number;
+    deviceRectangles: DeviceRectangles;
 };
+export type getFolderMethodOptions = CheckElementMethodOptions | CheckFullPageMethodOptions | CheckScreenMethodOptions | SaveElementMethodOptions | SaveFullPageMethodOptions | SaveScreenMethodOptions;
+export type GetInstanceDataOptions = {
+    currentBrowser: WebdriverIO.Browser;
+    initialDeviceRectangles: DeviceRectangles;
+    isNativeContext: boolean;
+};
+export type EnrichTestContextOptions = {
+    commandName: string;
+    currentTestContext: TestContext;
+    instanceData: InstanceData;
+    tag: string;
+};
+export type GetMobileInstanceDataOptions = {
+    currentBrowser: WebdriverIO.Browser;
+    initialDeviceRectangles: DeviceRectangles;
+    isNativeContext: boolean;
+    nativeWebScreenshot: boolean;
+};
+export interface WrapWithContextOptions<T extends (...args: any[]) => any> {
+    browser: WebdriverIO.Browser;
+    command: T;
+    contextManager: ContextManager;
+    getArgs: () => Parameters<T>;
+}
+export interface WdioIcsOptions {
+    logName?: string;
+    name?: string;
+}
 export interface WdioIcsCommonOptions {
     hideElements?: (WebdriverIO.Element | ChainablePromiseElement)[];
     removeElements?: (WebdriverIO.Element | ChainablePromiseElement)[];

package/dist/types.d.ts.map

@@ -1 +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,EACzB,YAAY,EACf,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAE1D,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;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACjE,MAAM,MAAM,wBAAwB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACpB,CAAA;AAED,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;IACjE,cAAc,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CACtE;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAC9D,oBAAoB,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CAC5E;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;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,YAAY;CAAG"}
+{"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,EACzB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,YAAY,EACf,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzD,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;AACjE,MAAM,MAAM,kBAAkB,GAAG;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,gBAAgB,CAAC;CACtC,CAAA;AACD,MAAM,MAAM,sBAAsB,GAC5B,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAC9B,MAAM,MAAM,sBAAsB,GAAG;IACjC,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC;IACpC,uBAAuB,EAAE,gBAAgB,CAAC;IAC1C,eAAe,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,WAAW,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;CACf,CAAA;AACD,MAAM,MAAM,4BAA4B,GAAG;IACvC,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC;IACpC,uBAAuB,EAAE,gBAAgB,CAAC;IAC1C,eAAe,EAAC,OAAO,CAAC;IACxB,mBAAmB,EAAC,OAAO,CAAC;CAC/B,CAAA;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG;IACrE,OAAO,EAAE,WAAW,CAAC,OAAO,CAAA;IAC5B,OAAO,EAAE,CAAC,CAAA;IACV,cAAc,EAAE,cAAc,CAAA;IAC9B,OAAO,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,CAAA;CAC/B;AAED,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;IACjE,cAAc,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CACtE;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAC9D,oBAAoB,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CAC5E;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;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,YAAY;CAAG"}

package/dist/utils.d.ts

@@ -1,17 +1,16 @@
-import type { Folders, InstanceData, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, TestContext } from 'webdriver-image-comparison';
-import type { NativeContextType } from './types.js';
+import type { Folders, InstanceData, TestContext } from 'webdriver-image-comparison';
+import type { EnrichTestContextOptions, getFolderMethodOptions, GetInstanceDataOptions } from './types.js';
 /**
  * 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, currentTestPath: string): Folders;
 /**
- * Get the size of a screenshot in pixels without the device pixel ratio
+ * Get the size of a base64 screenshot in pixels without the device pixel ratio
  */
-export declare function getScreenshotSize(screenshot: string, devicePixelRation?: number): {
+export declare function getBase64ScreenshotSize(screenshot: string, devicePixelRation?: number): {
     height: number;
     width: number;
 };
@@ -29,27 +28,21 @@ export declare function getLtOptions(capabilities: WebdriverIO.Capabilities): an
 /**
  * Get the instance data
  */
-export declare function getInstanceData(currentBrowser: WebdriverIO.Browser): Promise<InstanceData>;
+export declare function getInstanceData({ currentBrowser, initialDeviceRectangles, isNativeContext }: GetInstanceDataOptions): Promise<InstanceData>;
 /**
  * Traverse up the scope chain until browser element was reached
  */
 export declare function getBrowserObject(elem: WebdriverIO.Element | WebdriverIO.Browser): WebdriverIO.Browser;
+export declare function getNativeContext({ capabilities, isMobile }: {
+    capabilities: WebdriverIO.Capabilities;
+    isMobile: boolean;
+}): boolean;
 /**
- * We can't say it's native context if the autoWebview is provided and set to true, for all other cases we can say it's native
- */
-export declare function determineNativeContext(driver: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): NativeContextType;
-/**
- * Get the native context for the current browser
+ * Make sure we have all the data for the test context
  */
-export declare function getNativeContext(browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser, currentBrowser: WebdriverIO.Browser, nativeContext: NativeContextType): boolean;
+export declare function enrichTestContext({ commandName, currentTestContext: { framework, parent, title, }, instanceData: { appName, browserName, browserVersion, deviceName, isAndroid, isIOS, isMobile, platformName, platformVersion, }, tag, }: EnrichTestContextOptions): TestContext;
 /**
- * Make sure we have all the data for the test context
+ * Check if the current browser supports isBidi screenshots
  */
-export declare function enrichTestContext({ commandName, currentTestContext: { framework, parent, title, }, instanceData: { appName, browserName, browserVersion, deviceName, isAndroid, isIOS, isMobile, platformName, platformVersion, }, tag, }: {
-    commandName: string;
-    currentTestContext: TestContext;
-    instanceData: InstanceData;
-    tag: string;
-}): TestContext;
-export {};
+export declare function isBiDiScreenshotSupported(driver: WebdriverIO.Browser): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +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,EACxB,WAAW,EACd,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAOnD;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAE9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,MAAM,GACxB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,SAAI,GAAG;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAKA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAOhH;AAkFD;;GAEG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,YAAY,GAAG,GAAG,GAAG,SAAS,CAMpF;AAmCD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA+DhG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAClC,MAAM,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,GAC7D,iBAAiB,CAmDnB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,EAC7D,cAAc,EAAE,WAAW,CAAC,OAAO,EACnC,aAAa,EAAE,iBAAiB,GACjC,OAAO,CAQT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,EACI,WAAW,EACX,kBAAkB,EAAE,EAChB,SAAS,EACT,MAAM,EACN,KAAK,GACR,EACD,YAAY,EAAE,EACV,OAAO,EACP,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,eAAe,GAClB,EACD,GAAG,GACN,EACD;IACI,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,WAAW,CAAC;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;CACf,GACF,WAAW,CAuBb"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACpF,OAAO,KAAK,EACR,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,EAIzB,MAAM,YAAY,CAAA;AAEnB;;;;;GAKG;AAEH,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,MAAM,GACxB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,SAAI,GAAG;IAChF,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAKA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAOhH;AAiGD;;GAEG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,YAAY,GAAG,GAAG,GAAG,SAAS,CAMpF;AAmCD;;GAEG;AACH,wBAAsB,eAAe,CAAC,EAClC,cAAc,EACd,uBAAuB,EACvB,eAAe,EAClB,EAAE,sBAAsB,GAAG,OAAO,CAAC,YAAY,CAAC,CAgEhD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EACvD;IAAE,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9D,OAAO,CAuBT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,EACI,WAAW,EACX,kBAAkB,EAAE,EAChB,SAAS,EACT,MAAM,EACN,KAAK,GACR,EACD,YAAY,EAAE,EACV,OAAO,EACP,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,eAAe,GAClB,EACD,GAAG,GACN,EAAE,wBAAwB,GAAG,WAAW,CAuB5C;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAK9E"}

package/dist/utils.js

@@ -1,5 +1,10 @@
-import { IOS_OFFSETS } from 'webdriver-image-comparison';
-import { NOT_KNOWN } from 'webdriver-image-comparison/dist/helpers/constants.js';
+import { getMobileScreenSize, getMobileViewPortPosition, IOS_OFFSETS, NOT_KNOWN } from 'webdriver-image-comparison';
+/**
+ * Get the folders data
+ *
+ * If folder options are passed in use those values
+ * Otherwise, use the values set during instantiation
+ */
 export function getFolders(methodOptions, folders, currentTestPath) {
     return {
         actualFolder: methodOptions.actualFolder ?? folders.actualFolder,
@@ -8,9 +13,9 @@ export function getFolders(methodOptions, folders, currentTestPath) {
     };
 }
 /**
- * Get the size of a screenshot in pixels without the device pixel ratio
+ * Get the size of a base64 screenshot in pixels without the device pixel ratio
  */
-export function getScreenshotSize(screenshot, devicePixelRation = 1) {
+export function getBase64ScreenshotSize(screenshot, devicePixelRation = 1) {
     return {
         height: Buffer.from(screenshot, 'base64').readUInt32BE(20) / devicePixelRation,
         width: Buffer.from(screenshot, 'base64').readUInt32BE(16) / devicePixelRation,
@@ -20,7 +25,7 @@ export function getScreenshotSize(screenshot, devicePixelRation = 1) {
  * Get the device pixel ratio
  */
 export function getDevicePixelRatio(screenshot, deviceScreenSize) {
-    const screenshotSize = getScreenshotSize(screenshot);
+    const screenshotSize = getBase64ScreenshotSize(screenshot);
     const devicePixelRatio = Math.round(screenshotSize.width / deviceScreenSize.width) === Math.round(screenshotSize.height / deviceScreenSize.height)
         ? Math.round(screenshotSize.width / deviceScreenSize.width)
         : Math.round(screenshotSize.height / deviceScreenSize.width);
@@ -29,21 +34,42 @@ export function getDevicePixelRatio(screenshot, deviceScreenSize) {
 /**
  * Get the mobile instance data
  */
-async function getMobileInstanceData({ currentBrowser, isAndroid, isMobile }) {
-    const deviceScreenSize = {
-        height: 0,
-        width: 0,
-    };
-    const devicePlatformRect = {
-        statusBar: { height: 0, x: 0, width: 0, y: 0 },
-        homeBar: { height: 0, x: 0, width: 0, y: 0 },
-    };
+async function getMobileInstanceData({ currentBrowser, initialDeviceRectangles, isNativeContext, nativeWebScreenshot, }) {
+    const { isAndroid, isIOS, isMobile } = currentBrowser;
     let devicePixelRatio = 1;
+    let deviceRectangles = initialDeviceRectangles;
     if (isMobile) {
+        const executor = (fn, ...args) => currentBrowser.execute(fn, ...args);
+        const getUrl = () => currentBrowser.getUrl();
+        const url = (arg) => currentBrowser.url(arg);
         const currentDriverCapabilities = currentBrowser.capabilities;
-        const { height, width } = await currentBrowser.getWindowSize();
-        deviceScreenSize.height = height;
-        deviceScreenSize.width = width;
+        const { height: screenHeight, width: screenWidth } = await getMobileScreenSize({
+            currentBrowser,
+            executor,
+            isIOS,
+            isNativeContext,
+        });
+        // Update the width for the device rectangles for bottomBar, screenSize, statusBar, statusBarAndAddressBar
+        deviceRectangles.screenSize.height = screenHeight;
+        deviceRectangles.screenSize.width = screenWidth;
+        deviceRectangles.bottomBar.width = screenWidth;
+        deviceRectangles.statusBarAndAddressBar.width = screenWidth;
+        deviceRectangles.statusBar.width = screenWidth;
+        deviceRectangles = await getMobileViewPortPosition({
+            initialDeviceRectangles,
+            isAndroid,
+            isIOS,
+            isNativeContext,
+            methods: {
+                executor,
+                getUrl,
+                url,
+            },
+            nativeWebScreenshot,
+            screenHeight,
+            screenWidth,
+        });
+        // @TODO: 20250317: When we have all things tested with the above, we can simplify the below part to only use the iOS part
         // @TODO: This is al based on PORTRAIT mode
         if (isAndroid && currentDriverCapabilities) {
             // We use a few `@ts-ignore` here because `pixelRatio` and `statBarHeight`
@@ -56,35 +82,38 @@ async function getMobileInstanceData({ currentBrowser, isAndroid, isMobile }) {
             // @ts-ignore
             if (currentDriverCapabilities?.statBarHeight !== undefined) {
                 // @ts-ignore
-                devicePlatformRect.statusBar.height = currentDriverCapabilities?.statBarHeight;
-                devicePlatformRect.statusBar.width = width;
+                deviceRectangles.statusBar.height = currentDriverCapabilities?.statBarHeight;
+                deviceRectangles.statusBar.width = deviceRectangles.screenSize.width;
             }
         }
         else {
             // This is to already determine the device pixel ratio if it's not set in the capabilities
             const base64Image = await currentBrowser.takeScreenshot();
-            devicePixelRatio = getDevicePixelRatio(base64Image, deviceScreenSize);
-            const isIphone = width < 1024 && height < 1024;
+            devicePixelRatio = getDevicePixelRatio(base64Image, deviceRectangles.screenSize);
+            const isIphone = deviceRectangles.screenSize.width < 1024 && deviceRectangles.screenSize.height < 1024;
             const deviceType = isIphone ? 'IPHONE' : 'IPAD';
             const defaultPortraitHeight = isIphone ? 667 : 1024;
-            const portraitHeight = width > height ? width : height;
-            const offsetPortraitHeight = Object.keys(IOS_OFFSETS[deviceType]).indexOf(portraitHeight.toString()) > -1 ? portraitHeight : defaultPortraitHeight;
+            const portraitHeight = deviceRectangles.screenSize.width > deviceRectangles.screenSize.height ?
+                deviceRectangles.screenSize.width :
+                deviceRectangles.screenSize.height;
+            const offsetPortraitHeight = Object.keys(IOS_OFFSETS[deviceType]).indexOf(portraitHeight.toString()) > -1 ?
+                portraitHeight :
+                defaultPortraitHeight;
             const currentOffsets = IOS_OFFSETS[deviceType][offsetPortraitHeight].PORTRAIT;
             // NOTE: The values for iOS are based on CSS pixels, so we need to multiply them with the devicePixelRatio,
             // This will NOT be done here but in a central place
-            devicePlatformRect.statusBar = {
-                y: 0,
+            deviceRectangles.statusBar = {
                 x: 0,
-                width,
+                y: 0,
+                width: deviceRectangles.screenSize.width,
                 height: currentOffsets.STATUS_BAR,
             };
-            devicePlatformRect.homeBar = currentOffsets.HOME_BAR;
+            deviceRectangles.homeBar = currentOffsets.HOME_BAR;
         }
     }
     return {
         devicePixelRatio,
-        devicePlatformRect,
-        deviceScreenSize,
+        deviceRectangles,
     };
 }
 /**
@@ -125,8 +154,7 @@ function getDeviceName(currentBrowser) {
 /**
  * Get the instance data
  */
-export async function getInstanceData(currentBrowser) {
-    const NOT_KNOWN = 'not-known';
+export async function getInstanceData({ currentBrowser, initialDeviceRectangles, isNativeContext }) {
     const { capabilities: currentCapabilities, requestedCapabilities } = currentBrowser;
     const { browserName: rawBrowserName = NOT_KNOWN, browserVersion: rawBrowserVersion = NOT_KNOWN, platformName: rawPlatformName = NOT_KNOWN, } = currentCapabilities;
     // Generic data
@@ -158,7 +186,7 @@ export async function getInstanceData(currentBrowser) {
     // 20241216: LT doesn't have the option to take a ChromeDriver screenshot, so if it's Android it's always native
     const nativeWebScreenshot = isAndroid && ltOptions || !!(requestedCapabilities['appium:nativeWebScreenshot']);
     const platformVersion = (rawPlatformVersion === undefined || rawPlatformVersion === '') ? NOT_KNOWN : rawPlatformVersion.toLowerCase();
-    const { devicePixelRatio: mobileDevicePixelRatio, devicePlatformRect, deviceScreenSize, } = await getMobileInstanceData({ currentBrowser, isAndroid, isMobile });
+    const { devicePixelRatio: mobileDevicePixelRatio, deviceRectangles, } = await getMobileInstanceData({ currentBrowser, initialDeviceRectangles, isNativeContext, nativeWebScreenshot });
     devicePixelRatio = isMobile ? mobileDevicePixelRatio : devicePixelRatio;
     return {
         appName,
@@ -166,8 +194,7 @@ export async function getInstanceData(currentBrowser) {
         browserVersion,
         deviceName,
         devicePixelRatio,
-        devicePlatformRect,
-        deviceScreenSize,
+        deviceRectangles,
         isAndroid,
         isIOS,
         isMobile,
@@ -185,65 +212,28 @@ export function getBrowserObject(elem) {
     const elemObject = elem;
     return elemObject.parent ? getBrowserObject(elemObject.parent) : elem;
 }
-/**
- * We can't say it's native context if the autoWebview is provided and set to true, for all other cases we can say it's native
- */
-export function determineNativeContext(driver) {
-    // First check if it's multi remote
-    if (driver.isMultiremote) {
-        return Object.keys(driver).reduce((acc, instanceName) => {
-            const instance = driver[instanceName];
-            if (instance.sessionId) {
-                acc[instance.sessionId] = determineNativeContext(instance);
-            }
-            return acc;
-        }, {});
-    }
-    // If not check if it's a mobile
-    if (driver.isMobile) {
-        const isAppiumAppCapPresent = (capabilities) => {
-            const appiumKeys = [
-                'appium:app',
-                'appium:bundleId',
-                'appium:appPackage',
-                'appium:appActivity',
-                'appium:appWaitActivity',
-                'appium:appWaitPackage',
-                'appium:autoWebview',
-            ];
-            const optionsKeys = appiumKeys.map(key => key.replace('appium:', ''));
-            const isInRoot = appiumKeys.some(key => capabilities[key] !== undefined);
-            // @ts-expect-error
-            const isInAppiumOptions = capabilities['appium:options'] &&
-                // @ts-expect-error
-                optionsKeys.some(key => capabilities['appium:options']?.[key] !== undefined);
-            // @ts-expect-error
-            const isInLtOptions = capabilities['lt:options'] &&
-                // @ts-expect-error
-                optionsKeys.some(key => capabilities['lt:options']?.[key] !== undefined);
-            return !!(isInRoot || isInAppiumOptions || isInLtOptions);
-        };
-        const capabilities = driver.requestedCapabilities;
-        const isBrowserNameFalse = !!capabilities.browserName === false;
-        const isAutoWebviewFalse = !(capabilities['appium:autoWebview'] === true ||
-            capabilities['appium:options']?.autoWebview === true ||
-            capabilities['lt:options']?.autoWebview === true);
-        return isBrowserNameFalse && isAppiumAppCapPresent(capabilities) && isAutoWebviewFalse;
-    }
-    // If not, it's webcontext
-    return false;
-}
 /**
  * Get the native context for the current browser
  */
-export function getNativeContext(browser, currentBrowser, nativeContext) {
-    if (browser.isMultiremote) {
-        return nativeContext[currentBrowser.sessionId];
+const appiumKeys = ['app', 'bundleId', 'appPackage', 'appActivity', 'appWaitActivity', 'appWaitPackage'];
+export function getNativeContext({ capabilities, isMobile }) {
+    if (!capabilities || typeof capabilities !== 'object' || !isMobile) {
+        return false;
     }
-    else if (typeof nativeContext === 'boolean') {
-        return nativeContext;
-    }
-    return false;
+    const isAppiumAppCapPresent = (capabilities) => {
+        return appiumKeys.some((key) => (capabilities[key] !== undefined ||
+            capabilities[`appium:${key}`] !== undefined ||
+            capabilities['appium:options']?.[key] !== undefined ||
+            capabilities['lt:options']?.[key] !== undefined));
+    };
+    const isBrowserNameFalse = !!capabilities?.browserName === false;
+    const isAutoWebviewFalse = !(
+    // @ts-expect-error
+    capabilities?.autoWebview === true ||
+        capabilities['appium:autoWebview'] === true ||
+        capabilities['appium:options']?.autoWebview === true ||
+        capabilities['lt:options']?.autoWebview === true);
+    return isBrowserNameFalse && isAppiumAppCapPresent(capabilities) && isAutoWebviewFalse;
 }
 /**
  * Make sure we have all the data for the test context
@@ -272,3 +262,11 @@ export function enrichTestContext({ commandName, currentTestContext: { framework
         title,
     };
 }
+/**
+ * Check if the current browser supports isBidi screenshots
+ */
+export function isBiDiScreenshotSupported(driver) {
+    const { isBidi } = driver;
+    const isBiDiSupported = typeof driver.browsingContextCaptureScreenshot === 'function';
+    return isBidi && isBiDiSupported;
+}

package/dist/wrapWithContext.d.ts

@@ -0,0 +1,8 @@
+import type { WrapWithContextOptions } from './types.js';
+/**
+ * Wrap the command with the context manager
+ * This will make sure that the context manager is updated when needed
+ * and that the command is executed in the correct context
+ */
+export declare function wrapWithContext<T extends (...args: any[]) => any>(opts: WrapWithContextOptions<T>): () => Promise<ReturnType<T>>;
+//# sourceMappingURL=wrapWithContext.d.ts.map

package/dist/wrapWithContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapWithContext.d.ts","sourceRoot":"","sources":["../src/wrapWithContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAGxD;;;;GAIG;AAEH,wBAAgB,eAAe,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAkBhI"}

package/dist/wrapWithContext.js

@@ -0,0 +1,21 @@
+import { getInstanceData } from './utils.js';
+/**
+ * Wrap the command with the context manager
+ * This will make sure that the context manager is updated when needed
+ * and that the command is executed in the correct context
+ */
+export function wrapWithContext(opts) {
+    const { browser, command, contextManager, getArgs } = opts;
+    return async function () {
+        if (contextManager.needsUpdate) {
+            const instanceData = await getInstanceData({
+                currentBrowser: browser,
+                initialDeviceRectangles: contextManager.getViewportContext(),
+                isNativeContext: contextManager.isNativeContext,
+            });
+            contextManager.setViewPortContext(instanceData.deviceRectangles);
+        }
+        const finalArgs = getArgs();
+        return command.apply(this, finalArgs);
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "6.4.0",
+  "version": "8.0.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -20,11 +20,11 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@wdio/globals": "^9.9.1",
+    "@wdio/globals": "^9.12.7",
     "@wdio/logger": "^9.4.4",
-    "@wdio/types": "^9.12.2",
+    "@wdio/types": "^9.12.6",
     "expect-webdriverio": "^5.1.0",
-    "webdriver-image-comparison": "7.4.0"
+    "webdriver-image-comparison": "9.0.0"
   },
   "scripts": {
     "build": "run-s clean build:*",