@wdio/visual-service 5.0.1 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,185 @@
 # @wdio/visual-service
 
+## 5.1.1
+
+### Patch Changes
+
+- 26c1a17: This release contains better support for Multiremote tests on the instances and global level, including better Native App support. This is related to issue https://github.com/webdriverio/visual-testing/issues/418 which is fixed by this release
+
+  # 💅 Polish
+
+  - cab1219: Update dependencies
+  - 2583542 / 8b1f837: add new tests
+  - eec29e1 / e2b2d38: update images
+
+  # 🐛 Bug Fixes
+
+  - 29f6f82 / 1ba9817: fix issue https://github.com/webdriverio/visual-testing/issues/418
+
+  # Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+- Updated dependencies [26c1a17]
+  - webdriver-image-comparison@6.0.2
+
+## 5.1.0
+
+### Minor Changes
+
+- a0e29f2: Adding storybook interaction testing
+
+  ### Storybook Interaction Testing
+
+  Storybook Interaction Testing allows you to interact with your component by creating custom scripts with WDIO commands to set a component into a certain state. For example, see the code snippet below:
+
+  ```ts
+  import { browser, expect } from "@wdio/globals";
+
+  describe("Storybook Interaction", () => {
+    it("should create screenshots for the logged in state when it logs out", async () => {
+      const componentId = "example-page--logged-in";
+      await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
+
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-in-state`
+      );
+      await $("button=Log out").click();
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-out-state`
+      );
+    });
+
+    it("should create screenshots for the logged out state when it logs in", async () => {
+      const componentId = "example-page--logged-out";
+      await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
+
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-out-state`
+      );
+      await $("button=Log in").click();
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-in-state`
+      );
+    });
+  });
+  ```
+
+  Two tests on two different components are executed. Each test first sets a state and then takes a screenshot. You will also notice that a new custom command has been introduced, which can be found [here](#new-custom-command).
+
+  The above spec file can be saved in a folder and added to the command line with the following command:
+
+  ```sh
+  npm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'
+  ```
+
+  The Storybook runner will first automatically scan your Storybook instance and then add your tests to the stories that need to be compared. If you don't want the components that you use for interaction testing to be compared twice, you can add a filter to remove the "default" stories from the scan by providing the [`--skipStories`](#--skipstories) filter. This would look like this:
+
+  ```sh
+  npm run test.local.desktop.storybook.localhost -- --skipStories="/example-page.*/gm" --spec='tests/specs/storybook-interaction/*.ts'
+  ```
+
+  ### New Custom Command
+
+  A new custom command called `browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' })` will be added to the `browser/driver`-object that will automatically load the component and wait for it to be done, so you don't need to use the `browser.url('url.com')` method. It can be used like this
+
+  ```ts
+  import { browser, expect } from "@wdio/globals";
+
+  describe("Storybook Interaction", () => {
+    it("should create screenshots for the logged in state when it logs out", async () => {
+      const componentId = "example-page--logged-in";
+      await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
+
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-in-state`
+      );
+      await $("button=Log out").click();
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-out-state`
+      );
+    });
+
+    it("should create screenshots for the logged out state when it logs in", async () => {
+      const componentId = "example-page--logged-out";
+      await browser.waitForStorybookComponentToBeLoaded({ id: componentId });
+
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-out-state`
+      );
+      await $("button=Log in").click();
+      await expect($("header")).toMatchElementSnapshot(
+        `${componentId}-logged-in-state`
+      );
+    });
+  });
+  ```
+
+  The options are:
+
+  #### `clipSelector`
+
+  - **Type:** `string`
+  - **Mandatory:** No
+  - **Default:** `#storybook-root > :first-child` for Storybook V7 and `#root > :first-child:not(script):not(style)` for Storybook V6
+  - **Example:**
+
+  ```ts
+  await browser.waitForStorybookComponentToBeLoaded({
+    clipSelector: "#your-selector",
+    id: "componentId",
+  });
+  ```
+
+  This is the selector that will be used:
+
+  - to select the element to take the screenshot of
+  - for the element to wait to be visible before a screenshot is taken
+
+  #### `id`
+
+  - **Type:** `string`
+  - **Mandatory:** yes
+  - **Example:**
+
+  ```ts
+  await browser.waitForStorybookComponentToBeLoaded({ '#your-selector', id: 'componentId' })
+  ```
+
+  Use the `id` of the story that can be found in the URL of the story. For example, the `id` in this URL `http://localhost:6006/?path=/story/example-page--logged-out` is `example-page--logged-out`
+
+  #### `timeout`
+
+  - **Type:** `number`
+  - **Mandatory:** No
+  - **Default:** 1100 milliseconds
+  - **Example:**
+
+  ```ts
+  await browser.waitForStorybookComponentToBeLoaded({
+    id: "componentId",
+    timeout: 20000,
+  });
+  ```
+
+  The max timeout we want to wait for a component to be visible after loading on the page
+
+  #### `url`
+
+  - **Type:** `string`
+  - **Mandatory:** No
+  - **Default:** `http://127.0.0.1:6006`
+  - **Example:**
+
+  ```ts
+  await browser.waitForStorybookComponentToBeLoaded({
+    id: "componentId",
+    url: "https://your.url",
+  });
+  ```
+
+  The URL where your Storybook instance is hosted.
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="./expect-webdriverio.js" />
 import type { WicElement } from 'webdriver-image-comparison';
 import WdioImageComparisonService from './service.js';
 import VisualLauncher from './storybook/launcher.js';
 import type { Output, Result, WdioCheckFullPageMethodOptions, WdioSaveFullPageMethodOptions, WdioSaveElementMethodOptions, WdioSaveScreenMethodOptions, WdioCheckElementMethodOptions, WdioCheckScreenMethodOptions } from './types.js';
+import type { WaitForStorybookComponentToBeLoaded } from './storybook/Types.js';
 declare global {
     namespace WebdriverIO {
         interface Browser {
@@ -38,6 +38,10 @@ declare global {
              * Compares an image of the complete screen with the tabbable lines and dots
              */
             checkTabbablePage(tag: string, checkTabbableOptions?: WdioCheckFullPageMethodOptions): Promise<Result>;
+            /**
+             * Waits for a component to be loaded
+             */
+            waitForStorybookComponentToBeLoaded(options: WaitForStorybookComponentToBeLoaded): Promise<void>;
         }
         interface Element {
         }

package/dist/index.d.ts.map

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

package/dist/matcher.d.ts

@@ -1,4 +1,3 @@
-/// <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;

package/dist/matcher.d.ts.map

@@ -1 +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"}
+{"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/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,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EAUZ,MAAM,4BAA4B,CAAA;AAoBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAI7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;IACvE,OAAO,CAAC,gBAAgB,CAAqB;gBAEjC,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAM1F;;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;IA4BjE,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAMhC,YAAY,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,EAAE,MAAM,EAAC,MAAM,GAAC,MAAM,EAAE,KAAK,EAAC,GAAG;CAgIpF"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EAUZ,MAAM,4BAA4B,CAAA;AAwBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAI7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;IACvE,OAAO,CAAC,gBAAgB,CAA+B;gBAE3C,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAM1F;;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;IAgCjE,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAKhC,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG;CAkQzF"}

package/dist/service.js

@@ -2,8 +2,9 @@ import logger from '@wdio/logger';
 import { expect } from '@wdio/globals';
 import { dirname, normalize, resolve } from 'node:path';
 import { BaseClass, checkElement, checkFullPageScreen, checkScreen, saveElement, saveFullPageScreen, saveScreen, saveTabbablePage, checkTabbablePage, FOLDERS, } from 'webdriver-image-comparison';
-import { determineNativeContext, getFolders, getInstanceData } from './utils.js';
+import { determineNativeContext, getFolders, getInstanceData, getNativeContext } from './utils.js';
 import { toMatchScreenSnapshot, toMatchFullPageSnapshot, toMatchElementSnapshot, toMatchTabbablePageSnapshot } from './matcher.js';
+import { waitForStorybookComponentToBeLoaded } from './storybook/utils.js';
 const log = logger('@wdio/visual-service');
 const elementCommands = { saveElement, checkElement };
 const pageCommands = {
@@ -13,6 +14,7 @@ const pageCommands = {
     checkScreen,
     checkFullPageScreen,
     checkTabbablePage,
+    waitForStorybookComponentToBeLoaded,
 };
 export default class WdioImageComparisonService extends BaseClass {
     #config;
@@ -41,6 +43,9 @@ 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
@@ -64,7 +69,8 @@ export default class WdioImageComparisonService extends BaseClass {
     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') {
-            this._isNativeContext = result.includes('NATIVE');
+            // Multiremote logic is handled in the `before` method during an event listener
+            this._isNativeContext = this._browser?.isMultiremote ? this._isNativeContext : result.includes('NATIVE');
         }
     }
     #getBaselineFolder() {
@@ -84,69 +90,159 @@ export default class WdioImageComparisonService extends BaseClass {
         }
         return baselineFolder;
     }
+    /**
+     * Add commands to the Multi Remote browser object
+     */
     async #extendMultiremoteBrowser(capabilities) {
         const browser = this._browser;
         const browserNames = Object.keys(capabilities);
-        log.info(`Adding commands to Multi Browser: ${browserNames.join(', ')}`);
+        /**
+         * Add all the commands to each browser in the Multi Remote
+         */
         for (const browserName of browserNames) {
-            const multiremoteBrowser = browser;
-            const browserInstance = multiremoteBrowser.getInstance(browserName);
+            log.info(`Adding commands to Multi Browser: ${browserName}`);
+            const browserInstance = browser.getInstance(browserName);
             await this.#addCommandsToBrowser(browserInstance);
         }
         /**
          * Add all the commands to the global browser object that will execute
          * on each browser in the Multi Remote
+         * Start with the page commands
          */
-        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;
-            });
+        for (const [commandName, command] of Object.entries(pageCommands)) {
+            this.#addMultiremoteCommand(browser, browserNames, commandName, command);
+        }
+        /**
+         * Add all the element commands to the global browser object that will execute
+         * on each browser in the Multi Remote
+         */
+        for (const [commandName, command] of Object.entries(elementCommands)) {
+            this.#addMultiremoteElementCommand(browser, browserNames, commandName, command);
         }
     }
+    /**
+     * Add commands to the "normal" browser object
+     */
     async #addCommandsToBrowser(currentBrowser) {
         const instanceData = await getInstanceData(currentBrowser);
-        const self = this;
+        const isNativeContext = getNativeContext(this._browser, currentBrowser, this._isNativeContext);
         for (const [commandName, command] of Object.entries(elementCommands)) {
-            log.info(`Adding element command "${commandName}" to browser object`);
-            currentBrowser.addCommand(commandName, function (element, tag, elementOptions = {}) {
+            this.#addElementCommand(currentBrowser, commandName, command, instanceData, isNativeContext);
+        }
+        for (const [commandName, command] of Object.entries(pageCommands)) {
+            this.#addPageCommand(currentBrowser, commandName, command, instanceData, isNativeContext);
+        }
+    }
+    /**
+     * Add new element commands to the browser object
+     */
+    #addElementCommand(browser, commandName, command, instanceData, isNativeContext) {
+        log.info(`Adding element command "${commandName}" to browser object`);
+        const self = this;
+        browser.addCommand(commandName, function (element, tag, elementOptions = {}) {
+            return command({
+                executor: (script, ...varArgs) => {
+                    return this.execute.bind(browser)(script, ...varArgs);
+                },
+                getElementRect: this.getElementRect.bind(browser),
+                screenShot: this.takeScreenshot.bind(browser),
+                takeElementScreenshot: this.takeElementScreenshot.bind(browser),
+            }, instanceData, getFolders(elementOptions, self.folders, self.#getBaselineFolder()), element, tag, {
+                wic: self.defaultOptions,
+                method: elementOptions,
+            }, isNativeContext);
+        });
+    }
+    /**
+     * Add new page commands to the browser object
+     */
+    #addPageCommand(browser, commandName, command, instanceData, isNativeContext) {
+        log.info(`Adding browser command "${commandName}" to browser object`);
+        const self = this;
+        if (commandName === 'waitForStorybookComponentToBeLoaded') {
+            browser.addCommand(commandName, (options) => waitForStorybookComponentToBeLoaded(options));
+        }
+        else {
+            browser.addCommand(commandName, function (tag, pageOptions = {}) {
                 return command({
                     executor: (script, ...varArgs) => {
-                        return this.execute.bind(currentBrowser)(script, ...varArgs);
+                        return this.execute.bind(browser)(script, ...varArgs);
                     },
-                    getElementRect: this.getElementRect.bind(currentBrowser),
-                    screenShot: this.takeScreenshot.bind(currentBrowser),
-                    takeElementScreenshot: this.takeElementScreenshot.bind(currentBrowser),
-                }, instanceData, getFolders(elementOptions, self.folders, self.#getBaselineFolder()), element, tag, {
+                    getElementRect: this.getElementRect.bind(browser),
+                    screenShot: this.takeScreenshot.bind(browser),
+                }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
                     wic: self.defaultOptions,
-                    method: elementOptions,
-                }, self._isNativeContext);
+                    method: pageOptions,
+                }, isNativeContext);
             });
         }
-        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({
+    }
+    #addMultiremoteCommand(browser, browserNames, commandName, command) {
+        log.info(`Adding browser command "${commandName}" to Multi browser object`);
+        const self = this;
+        if (commandName === 'waitForStorybookComponentToBeLoaded') {
+            browser.addCommand(commandName, waitForStorybookComponentToBeLoaded);
+        }
+        else {
+            browser.addCommand(commandName, async function (tag, pageOptions = {}) {
+                const returnData = {};
+                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({
+                        executor: (script, ...varArgs) => {
+                            return browserInstance.execute.bind(browserInstance)(script, ...varArgs);
+                        },
+                        getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                        screenShot: browserInstance.takeScreenshot.bind(browserInstance),
+                    }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
+                        wic: self.defaultOptions,
+                        method: pageOptions,
+                    }, isNativeContext);
+                }
+                return returnData;
+            });
+        }
+    }
+    #addMultiremoteElementCommand(browser, browserNames, commandName, command) {
+        log.info(`Adding element command "${commandName}" to Multi browser object`);
+        const self = this;
+        browser.addCommand(commandName, async function (tag, element, pageOptions = {}) {
+            const returnData = {};
+            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({
                     executor: (script, ...varArgs) => {
-                        return this.execute.bind(currentBrowser)(script, ...varArgs);
+                        return browserInstance.execute.bind(browserInstance)(script, ...varArgs);
                     },
-                    getElementRect: this.getElementRect.bind(currentBrowser),
-                    screenShot: this.takeScreenshot.bind(currentBrowser),
-                }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
+                    getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                    screenShot: browserInstance.takeScreenshot.bind(browserInstance),
+                    takeElementScreenshot: browserInstance.takeElementScreenshot.bind(browserInstance),
+                }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, element, {
                     wic: self.defaultOptions,
                     method: pageOptions,
-                }, self._isNativeContext);
+                }, isNativeContext);
+            }
+            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 = {};
+                    }
+                    this._isNativeContext[sessionId] = value.includes('NATIVE');
+                }
             });
         }
     }

package/dist/storybook/Types.d.ts

@@ -39,7 +39,7 @@ export type CreateTestFileOptions = {
     framework: string;
     numShards: number;
     skipStories: string[] | RegExp;
-    storiesJson: Stories;
+    storiesJson: StorybookData[];
     storybookUrl: string;
 };
 export interface CapabilityMap {
@@ -71,7 +71,7 @@ export type CategoryComponent = {
     component: string;
 };
 export type ScanStorybookReturnData = {
-    storiesJson: Stories;
+    storiesJson: StorybookData[];
     storybookUrl: string;
     tempDir: string;
 };
@@ -84,4 +84,10 @@ export type EmulatedDeviceType = {
     };
     userAgent: string;
 };
+export type WaitForStorybookComponentToBeLoaded = {
+    clipSelector?: string;
+    id: string;
+    timeout?: number;
+    url?: string;
+};
 //# sourceMappingURL=Types.d.ts.map

package/dist/storybook/Types.d.ts.map

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

package/dist/storybook/launcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"launcher.d.ts","sourceRoot":"","sources":["../../src/storybook/launcher.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AActD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;gBAGrC,OAAO,EAAE,YAAY;IAK3B,SAAS,CAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,kBAAkB;IAmEpF,UAAU;CAenB"}
+{"version":3,"file":"launcher.d.ts","sourceRoot":"","sources":["../../src/storybook/launcher.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AActD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;gBAGrC,OAAO,EAAE,YAAY;IAK3B,SAAS,CAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,kBAAkB;IAuEpF,UAAU;CAiBnB"}

package/dist/storybook/launcher.js

@@ -23,6 +23,8 @@ export default class VisualLauncher extends BaseClass {
             const { storiesJson, storybookUrl, tempDir } = await scanStorybook(config, this.#options);
             // Set an environment variable so it can be used in the onComplete hook
             process.env.VISUAL_STORYBOOK_TEMP_SPEC_FOLDER = tempDir;
+            // Add the storybook URL to the environment variables
+            process.env.VISUAL_STORYBOOK_URL = storybookUrl;
             // Check the capabilities
             // Multiremote capabilities are not supported
             if (typeof capabilities === 'object' && !Array.isArray(capabilities)) {
@@ -50,6 +52,8 @@ export default class VisualLauncher extends BaseClass {
             const clipSelectorArgv = getArgvValue('--clipSelector', value => value);
             // V6 has '#root' as the root element, V7 has '#storybook-root'
             const clipSelector = (clipSelectorOption ?? clipSelectorArgv) ?? (version === 6 ? V6_CLIP_SELECTOR : CLIP_SELECTOR);
+            // Add the clip selector to the environment variables
+            process.env.VISUAL_STORYBOOK_CLIP_SELECTOR = clipSelector;
             // --skipStories
             const skipStoriesOption = this.#options?.storybook?.skipStories;
             const skipStoriesArgv = getArgvValue('--skipStories', value => value);
@@ -84,6 +88,8 @@ export default class VisualLauncher extends BaseClass {
             }
             // Remove the environment variables
             delete process.env.VISUAL_STORYBOOK_TEMP_SPEC_FOLDER;
+            delete process.env.VISUAL_STORYBOOK_URL;
+            delete process.env.VISUAL_STORYBOOK_CLIP_SELECTOR;
         }
     }
 }

package/dist/storybook/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Options } from '@wdio/types';
 import type { ClassOptions } from 'webdriver-image-comparison';
-import type { CategoryComponent, CreateItContent, CreateTestContent, CreateTestFileOptions, ScanStorybookReturnData, Stories, EmulatedDeviceType, CapabilityMap } from './Types.js';
+import type { CategoryComponent, CreateItContent, CreateTestContent, CreateTestFileOptions, ScanStorybookReturnData, Stories, EmulatedDeviceType, CapabilityMap, WaitForStorybookComponentToBeLoaded } from './Types.js';
 /**
  * Check if we run for Storybook
  */
@@ -50,6 +50,10 @@ export declare function writeTestFile(directoryPath: string, fileID: string, tes
  * Create the test content
  */
 export declare function createTestContent({ clip, clipSelector, folders, framework, skipStories, stories, storybookUrl }: CreateTestContent, itFunc?: typeof itFunction): string;
+/**
+ * The custom command
+ */
+export declare function waitForStorybookComponentToBeLoaded(options: WaitForStorybookComponentToBeLoaded, isStorybookModeFunc?: typeof isStorybookMode): Promise<void>;
 /**
  * Create the file data
  */

package/dist/storybook/utils.d.ts.map

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

package/dist/storybook/utils.js

@@ -135,9 +135,11 @@ export function itFunction({ clip, clipSelector, folders: { baselineFolder }, fr
     };
     const it = `
     ${itText}(\`should take a${screenshotType} screenshot of ${id}\`, async () => {
-        await browser.url(\`${storybookUrl}iframe.html?id=${id}\`);
-        await $('${clipSelector}').waitForDisplayed();
-        await waitForAllImagesLoaded();
+        await browser.waitForStorybookComponentToBeLoaded({
+            clipSelector: '${clipSelector}',
+            id: '${id}',
+            storybookUrl: '${storybookUrl}',
+        });
         ${clip
         ? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(methodOptions)})`
         : `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(methodOptions)})`}
@@ -168,53 +170,68 @@ itFunc = itFunction) {
     const itFunctionOptions = { clip, clipSelector, folders, framework, skipStories, storybookUrl };
     return stories.reduce((acc, storyData) => acc + itFunc({ ...itFunctionOptions, storyData }), '');
 }
-const waitForAllImagesLoaded = `
-async function waitForAllImagesLoaded() {
-    await browser.executeAsync(async (done) => {
-        const timeout = 11000; // 11 seconds
-        let timedOut = false;
-
-        const timeoutPromise = new Promise((resolve, reject) => {
-            setTimeout(() => {
-                timedOut = true;
-                reject('Timeout: Not all images loaded within 11 seconds');
-            }, timeout);
-        });
-
-        const isImageLoaded = (img) => img.complete && img.naturalWidth > 0;
-
-        // Check for <img> elements
-        const imgElements = Array.from(document.querySelectorAll('img'));
-        const imgPromises = imgElements.map(img => isImageLoaded(img) ? Promise.resolve() : new Promise(resolve => {
-            img.onload = () => !timedOut && resolve();
-            img.onerror = () => !timedOut && resolve();
-        }));
-
-        // Check for CSS background images
-        const allElements = Array.from(document.querySelectorAll('*'));
-        const bgImagePromises = allElements.map(el => {
-            const bgImage = window.getComputedStyle(el).backgroundImage;
-            if (bgImage && bgImage !== 'none' && bgImage.startsWith('url')) {
-                const imageUrl = bgImage.slice(5, -2); // Extract URL from the 'url("")'
-                const image = new Image();
-                image.src = imageUrl;
-                return isImageLoaded(image) ? Promise.resolve() : new Promise(resolve => {
-                    image.onload = () => !timedOut && resolve();
-                    image.onerror = () => !timedOut && resolve();
-                });
+/**
+ * The custom command
+ */
+export async function waitForStorybookComponentToBeLoaded(options, 
+// For testing purposes only
+isStorybookModeFunc = isStorybookMode) {
+    const isStorybook = isStorybookModeFunc();
+    if (isStorybook) {
+        const { clipSelector = process.env.VISUAL_STORYBOOK_CLIP_SELECTOR, id, url = process.env.VISUAL_STORYBOOK_URL, timeout = 11000, } = options;
+        await browser.url(`${url}iframe.html?id=${id}`);
+        await $(clipSelector).waitForDisplayed();
+        await browser.executeAsync(async (timeout, done) => {
+            let timedOut = false;
+            const timeoutPromise = new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    timedOut = true;
+                    reject('Timeout: Not all images loaded within 11 seconds');
+                }, timeout);
+            });
+            const isImageLoaded = (img) => img.complete && img.naturalWidth > 0;
+            // Check for <img> elements
+            const imgElements = Array.from(document.querySelectorAll('img'));
+            const imgPromises = imgElements.map(img => isImageLoaded(img) ? Promise.resolve() : new Promise(resolve => {
+                img.onload = () => { if (!timedOut) {
+                    resolve();
+                } };
+                img.onerror = () => { if (!timedOut) {
+                    resolve();
+                } };
+            }));
+            // Check for CSS background images
+            const allElements = Array.from(document.querySelectorAll('*'));
+            const bgImagePromises = allElements.map(el => {
+                const bgImage = window.getComputedStyle(el).backgroundImage;
+                if (bgImage && bgImage !== 'none' && bgImage.startsWith('url')) {
+                    const imageUrl = bgImage.slice(5, -2); // Extract URL from the 'url("")'
+                    const image = new Image();
+                    image.src = imageUrl;
+                    return isImageLoaded(image) ? Promise.resolve() : new Promise(resolve => {
+                        image.onload = () => { if (!timedOut) {
+                            resolve();
+                        } };
+                        image.onerror = () => { if (!timedOut) {
+                            resolve();
+                        } };
+                    });
+                }
+                return Promise.resolve();
+            });
+            try {
+                await Promise.race([Promise.all([...imgPromises, ...bgImagePromises]), timeoutPromise]);
+                done();
             }
-            return Promise.resolve();
-        });
-
-        try {
-            await Promise.race([Promise.all([...imgPromises, ...bgImagePromises]), timeoutPromise]);
-            done();
-        } catch (error) {
-            done(error);
-        }
-    });
+            catch (error) {
+                done(error);
+            }
+        }, timeout);
+    }
+    else {
+        throw new Error('The method `waitForStorybookComponentToBeLoaded` can only be used in Storybook mode.');
+    }
 }
-`;
 /**
  * Create the file data
  */
@@ -223,33 +240,36 @@ export function createFileData(describeTitle, testContent) {
 describe(\`${describeTitle}\`, () => {
     ${testContent}
 });
-${waitForAllImagesLoaded}
 `;
 }
+/**
+ * Filter the stories, by default only keep the stories, not the docs
+ */
+function filterStories(storiesJson) {
+    return Object.values(storiesJson)
+        // storyData?.type === 'story' is V7+, storyData.parameters?.docsOnly is V6
+        .filter((storyData) => storyData.type === 'story' || (storyData.parameters && !storyData.parameters.docsOnly));
+}
 /**
  * Create the test files
  */
 export function createTestFiles({ clip, clipSelector, directoryPath, folders, framework, numShards, skipStories, storiesJson, storybookUrl }, 
 // For testing purposes only
 createTestCont = createTestContent, createFileD = createFileData, writeTestF = writeTestFile) {
-    const storiesArray = Object.values(storiesJson)
-        // By default only keep the stories, not the docs
-        // storyData?.type === 'story' is V7+, storyData.parameters?.docsOnly is V6
-        .filter((storyData) => storyData.type === 'story' || (storyData.parameters && !storyData.parameters.docsOnly));
     const fileNamePrefix = 'visual-storybook';
-    const createTestContentData = { clip, clipSelector, folders, framework, skipStories, stories: storiesArray, storybookUrl };
+    const createTestContentData = { clip, clipSelector, folders, framework, skipStories, stories: storiesJson, storybookUrl };
     if (numShards === 1) {
         const testContent = createTestCont(createTestContentData);
         const fileData = createFileD('All stories', testContent);
         writeTestF(directoryPath, `${fileNamePrefix}-1-1`, fileData);
     }
     else {
-        const totalStories = storiesArray.length;
+        const totalStories = storiesJson.length;
         const storiesPerShard = Math.ceil(totalStories / numShards);
         for (let shard = 0; shard < numShards; shard++) {
             const startIndex = shard * storiesPerShard;
             const endIndex = Math.min(startIndex + storiesPerShard, totalStories);
-            const shardStories = storiesArray.slice(startIndex, endIndex);
+            const shardStories = storiesJson.slice(startIndex, endIndex);
             const testContent = createTestCont({ ...createTestContentData, stories: shardStories });
             const fileId = `${fileNamePrefix}-${shard + 1}-${numShards}`;
             const describeTitle = `Shard ${shard + 1} of ${numShards}`;
@@ -396,11 +416,19 @@ getArgvVal = getArgvValue, checkStorybookIsRun = checkStorybookIsRunning, saniti
     const tempDir = resolve(tmpdir(), `wdio-storybook-tests-${Date.now()}`);
     mkdirSync(tempDir);
     log.info(`Using temporary folder for storybook specs: ${tempDir}`);
-    config.specs = [join(tempDir, '*.js')];
     // Get the stories
     const storiesJson = await getStoriesJsonFunc(storybookUrl);
+    const filteredStories = filterStories(storiesJson);
+    // Check if the specs are provided via the CLI so they can be added to the specs
+    // when users provide stories with interactive components
+    const isCliSpecs = getArgvVal('--spec', value => value);
+    const cliSpecs = [];
+    if (isCliSpecs) {
+        cliSpecs.push(...config.specs);
+    }
+    config.specs = [join(tempDir, '*.{js,mjs,ts}'), ...cliSpecs];
     return {
-        storiesJson,
+        storiesJson: filteredStories,
         storybookUrl,
         tempDir,
     };

package/dist/types.d.ts

@@ -7,6 +7,19 @@ 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 interface WdioIcsCommonOptions {
     hideElements?: WebdriverIO.Element[];
     removeElements?: WebdriverIO.Element[];

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;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;AAED,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;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,EACf,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;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,WAAW,CAAC,OAAO,EAAE,CAAC;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC;CAC1C;AAED,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;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,YAAY;CAAI"}

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Folders, InstanceData, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions } from 'webdriver-image-comparison';
+import type { NativeContextType } from './types.js';
 /**
  * Get the folders data
  *
@@ -32,6 +33,10 @@ export declare function getBrowserObject(elem: WebdriverIO.Element | WebdriverIO
 /**
  * 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): boolean;
+export declare function determineNativeContext(driver: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): NativeContextType;
+/**
+ * Get the native context for the current browser
+ */
+export declare function getNativeContext(browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser, currentBrowser: WebdriverIO.Browser, nativeContext: NativeContextType): boolean;
 export {};
 //# 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,EAC3B,MAAM,4BAA4B,CAAA;AAQnC;;;;;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;AA4GD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA4DhG;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,OAAO,CAaT"}
+{"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;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;AA4GD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA4DhG;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,CA0BnB;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"}

package/dist/utils.js

@@ -173,6 +173,17 @@ export function getBrowserObject(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) {
         return !!driver.requestedCapabilities?.browserName === false
             && (driver.requestedCapabilities?.['appium:app'] !== undefined
@@ -180,5 +191,18 @@ export function determineNativeContext(driver) {
                 || driver.requestedCapabilities?.['appium:appPackage'] !== undefined)
             && driver.requestedCapabilities?.['appium:autoWebview'] !== true;
     }
+    // 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];
+    }
+    else if (typeof nativeContext === 'boolean') {
+        return nativeContext;
+    }
     return false;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "5.0.1",
+  "version": "5.1.1",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -20,11 +20,11 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@wdio/globals": "^8.38.2",
+    "@wdio/globals": "^8.39.1",
     "@wdio/logger": "^8.38.0",
-    "@wdio/types": "^8.38.2",
+    "@wdio/types": "^8.39.0",
     "node-fetch": "^3.3.2",
-    "webdriver-image-comparison": "^6.0.1"
+    "webdriver-image-comparison": "^6.0.2"
   },
   "devDependencies": {},
   "scripts": {