@wdio/visual-service 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,182 @@
 # @wdio/visual-service
 
+## 5.2.0
+
+### Minor Changes
+
+- 0b01b64: ### @wdio/visual-service
+
+  #### 🚀 New Features
+
+  **Added Reporting output**
+  You now have the option to export the compare results into a JSON report file. By enabling the module option `createJsonReportFiles: true`, each image that is compared will create a report stored in the `actual` folder, next to each `actual` image result.
+
+  The output will look like this:
+
+  ```json
+  {
+    "parent": "check methods",
+    "test": "should fail comparing with a baseline",
+    "tag": "examplePageFail",
+    "instanceData": {
+      "browser": {
+        "name": "chrome-headless-shell",
+        "version": "126.0.6478.183"
+      },
+      "platform": {
+        "name": "mac",
+        "version": "not-known"
+      }
+    },
+    "commandName": "checkScreen",
+    "boundingBoxes": {
+      "diffBoundingBoxes": [
+        {
+          "left": 1088,
+          "top": 717,
+          "right": 1186,
+          "bottom": 730
+        }
+        //....
+      ],
+      "ignoredBoxes": [
+        {
+          "left": 159,
+          "top": 652,
+          "right": 356,
+          "bottom": 703
+        }
+        //...
+      ]
+    },
+    "fileData": {
+      "actualFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
+      "baselineFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
+      "diffFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
+      "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
+      "size": {
+        "actual": {
+          "height": 768,
+          "width": 1366
+        },
+        "baseline": {
+          "height": 768,
+          "width": 1366
+        },
+        "diff": {
+          "height": 768,
+          "width": 1366
+        }
+      }
+    },
+    "misMatchPercentage": "12.90",
+    "rawMisMatchPercentage": 12.900729014153246
+  }
+  ```
+
+  When all tests are executed, a new JSON file with the collection of the comparisons will be generated and can be found in the root of your actual folder. The data is grouped by:
+
+  - `describe` for Jasmine/Mocha or `Feature` for CucumberJS
+  - `it` for Jasmine/Mocha or `Scenario` for CucumberJS
+
+  and then sorted by:
+
+  - `commandName`, which are the compare method names used to compare the images
+  - `instanceData`, browser first, then device, then platform
+
+  it will look like this
+
+  ```json
+  [
+    {
+      "description": "check methods",
+      "data": [
+        {
+          "test": "should fail comparing with a baseline",
+          "data": [
+            {
+              "tag": "examplePageFail",
+              "instanceData": {},
+              "commandName": "checkScreen",
+              "framework": "mocha",
+              "boundingBoxes": {
+                "diffBoundingBoxes": [],
+                "ignoredBoxes": []
+              },
+              "fileData": {},
+              "misMatchPercentage": "14.34",
+              "rawMisMatchPercentage": 14.335403703025868
+            },
+            {
+              "tag": "exampleElementFail",
+              "instanceData": {},
+              "commandName": "checkElement",
+              "framework": "mocha",
+              "boundingBoxes": {
+                "diffBoundingBoxes": [],
+                "ignoredBoxes": []
+              },
+              "fileData": {},
+              "misMatchPercentage": "1.34",
+              "rawMisMatchPercentage": 1.335403703025868
+            }
+          ]
+        }
+      ]
+    }
+  ]
+  ```
+
+  The report data will give you the opportunity to build your own visual report without doing all the magic and data collection yourself.
+
+  ### webdriver-image-comparison
+
+  #### 🚀 New Features
+
+  - Add support to generate single JSON report files
+
+  ### @wdio/ocr-service
+
+  #### 💅 Polish
+
+  - Refactored the CLI to use `@inquirer/prompts` instead of `inquirer`
+
+  ### Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+  ```
+
+  ```
+
+### Patch Changes
+
+- Updated dependencies [0b01b64]
+  - webdriver-image-comparison@6.1.0
+
+## 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

package/dist/constants.d.ts

@@ -1,4 +1,7 @@
 export declare const V6_CLIP_SELECTOR = "#root > :first-child:not(script):not(style)";
 export declare const CLIP_SELECTOR = "#storybook-root > :first-child:not(script):not(style)";
 export declare const NUM_SHARDS = 1;
+export declare const PAGE_OPTIONS_MAP: {
+    [key: string]: string;
+};
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,gDAAgD,CAAA;AAC7E,eAAO,MAAM,aAAa,0DAA0D,CAAA;AACpF,eAAO,MAAM,UAAU,IAAI,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,gDAAgD,CAAA;AAC7E,eAAO,MAAM,aAAa,0DAA0D,CAAA;AACpF,eAAO,MAAM,UAAU,IAAI,CAAA;AAC3B,eAAO,MAAM,gBAAgB,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAOrD,CAAA"}

package/dist/constants.js

@@ -1,3 +1,11 @@
 export const V6_CLIP_SELECTOR = '#root > :first-child:not(script):not(style)';
 export const CLIP_SELECTOR = '#storybook-root > :first-child:not(script):not(style)';
 export const NUM_SHARDS = 1;
+export const PAGE_OPTIONS_MAP = {
+    'saveScreen': 'saveScreenOptions',
+    'saveFullPageScreen': 'saveFullPageOptions',
+    'saveTabbablePage': 'saveTabbableOptions',
+    'checkScreen': 'checkScreenOptions',
+    'checkFullPageScreen': 'checkFullPageOptions',
+    'checkTabbablePage': 'checkTabbableOptions'
+};

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="./expect-webdriverio.js" />
 import type { WicElement } from 'webdriver-image-comparison';
 import WdioImageComparisonService from './service.js';
 import VisualLauncher from './storybook/launcher.js';

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/reporter.d.ts

@@ -0,0 +1,14 @@
+declare class VisualReportGenerator {
+    directoryPath: string;
+    constructor({ directoryPath }: {
+        directoryPath: string;
+    });
+    generate(): void;
+    private readJsonFilesRecursively;
+    private readDirectory;
+    private readJsonFile;
+    private groupAndSortTestData;
+    private writeJsonToFile;
+}
+export default VisualReportGenerator;
+//# sourceMappingURL=reporter.d.ts.map

package/dist/reporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reporter.d.ts","sourceRoot":"","sources":["../src/reporter.ts"],"names":[],"mappings":"AAiBA,cAAM,qBAAqB;IACvB,aAAa,EAAE,MAAM,CAAA;gBAET,EAAE,aAAa,EAAE,EAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC;IAI9C,QAAQ,IAAI,IAAI;IAcvB,OAAO,CAAC,wBAAwB;IAOhC,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,oBAAoB;IAsD5B,OAAO,CAAC,eAAe;CAG1B;AAED,eAAe,qBAAqB,CAAA"}

package/dist/reporter.js

@@ -0,0 +1,97 @@
+import fs from 'node:fs';
+import { join } from 'node:path';
+import logger from '@wdio/logger';
+const log = logger('@wdio/visual-service:webdriver-image-comparison-reporter');
+class VisualReportGenerator {
+    directoryPath;
+    constructor({ directoryPath }) {
+        this.directoryPath = directoryPath;
+    }
+    generate() {
+        try {
+            log.info('Generating visual report...');
+            const testData = this.readJsonFilesRecursively(this.directoryPath);
+            log.info('Read all json files');
+            const groupedAndSortedData = this.groupAndSortTestData(testData);
+            log.info('Grouped and sorted data');
+            this.writeJsonToFile(join(this.directoryPath, 'output.json'), groupedAndSortedData);
+            log.info('Report generated');
+        }
+        catch (e) {
+            log.error('Error generating visual report:', e);
+        }
+    }
+    readJsonFilesRecursively(directory) {
+        log.info(`Reading json files from ${directory}`);
+        const testData = [];
+        this.readDirectory(directory, testData);
+        return testData;
+    }
+    readDirectory(dir, testData) {
+        const items = fs.readdirSync(dir);
+        items.forEach(item => {
+            const fullPath = join(dir, item);
+            const stat = fs.statSync(fullPath);
+            if (stat.isDirectory()) {
+                this.readDirectory(fullPath, testData);
+            }
+            else if (stat.isFile() && item.endsWith('-report.json')) {
+                this.readJsonFile(fullPath, testData);
+            }
+        });
+    }
+    readJsonFile(filePath, testData) {
+        const fileContent = fs.readFileSync(filePath, 'utf-8');
+        const jsonContent = JSON.parse(fileContent);
+        testData.push(jsonContent); // Add JSON content to testData array
+    }
+    groupAndSortTestData(testData) {
+        const groupedData = [];
+        // Grouping by description and test
+        testData.forEach(report => {
+            const mainTestName = report.description;
+            let mainGroup = groupedData.find(group => group.description === mainTestName);
+            if (!mainGroup) {
+                mainGroup = { description: mainTestName, data: [] };
+                groupedData.push(mainGroup);
+            }
+            let testGroup = mainGroup.data.find(test => test.test === report.test);
+            if (!testGroup) {
+                testGroup = { test: report.test, data: [] };
+                mainGroup.data.push(testGroup);
+            }
+            testGroup.data.push(report);
+        });
+        // Sorting within each group
+        groupedData.forEach(mainGroup => {
+            mainGroup.data.forEach(testGroup => {
+                testGroup.data.sort((a, b) => {
+                    // Sort by commandName
+                    if (a.commandName !== b.commandName) {
+                        return a.commandName.localeCompare(b.commandName);
+                    }
+                    // Sort by instanceData (browser first, then device, then platform)
+                    const aBrowserName = a.instanceData.browser?.name || '';
+                    const bBrowserName = b.instanceData.browser?.name || '';
+                    if (aBrowserName !== bBrowserName) {
+                        return aBrowserName.localeCompare(bBrowserName);
+                    }
+                    const aDeviceName = a.instanceData.deviceName || '';
+                    const bDeviceName = b.instanceData.deviceName || '';
+                    if (aDeviceName !== bDeviceName) {
+                        return aDeviceName.localeCompare(bDeviceName);
+                    }
+                    if (a.instanceData.platform.name !== b.instanceData.platform.name) {
+                        return a.instanceData.platform.name.localeCompare(b.instanceData.platform.name);
+                    }
+                    return 0;
+                });
+            });
+        });
+        return groupedData;
+    }
+    writeJsonToFile(filePath, data) {
+        fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8');
+    }
+}
+export default VisualReportGenerator;

package/dist/service.d.ts

@@ -1,17 +1,17 @@
 import type { Frameworks } from '@wdio/types';
-import type { ClassOptions } from 'webdriver-image-comparison';
 import { BaseClass } from 'webdriver-image-comparison';
+import type { VisualServiceOptions } from './types.js';
 export default class WdioImageComparisonService extends BaseClass {
     #private;
-    private _browser?;
     private _isNativeContext;
-    constructor(options: ClassOptions, _: WebdriverIO.Capabilities, config: WebdriverIO.Config);
+    constructor(options: VisualServiceOptions, _: WebdriverIO.Capabilities, config: WebdriverIO.Config);
     /**
      * Set up the service if users want to use it in standalone mode
      */
     remoteSetup(browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<void>;
     before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<void>;
-    beforeTest(test: Frameworks.Test): void;
+    beforeTest(test: Frameworks.Test): Promise<void>;
+    beforeScenario(world: Frameworks.World): void;
     afterCommand(commandName: string, _args: string[], result: number | string, error: any): void;
 }
 //# 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,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,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;CA4IpF"}
+{"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;CAsWzF"}

package/dist/service.js

@@ -1,10 +1,12 @@
 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 { 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 { toMatchScreenSnapshot, toMatchFullPageSnapshot, toMatchElementSnapshot, toMatchTabbablePageSnapshot } from './matcher.js';
 import { waitForStorybookComponentToBeLoaded } from './storybook/utils.js';
+import { PAGE_OPTIONS_MAP } from './constants.js';
 const log = logger('@wdio/visual-service');
 const elementCommands = { saveElement, checkElement };
 const pageCommands = {
@@ -20,12 +22,14 @@ export default class WdioImageComparisonService extends BaseClass {
     #config;
     #currentFile;
     #currentFilePath;
-    _browser;
+    #testContext;
+    #browser;
     _isNativeContext;
     constructor(options, _, config) {
         super(options);
         this.#config = config;
         this._isNativeContext = undefined;
+        this.#testContext = DEFAULT_TEST_CONTEXT;
     }
     /**
      * Set up the service if users want to use it in standalone mode
@@ -34,15 +38,18 @@ export default class WdioImageComparisonService extends BaseClass {
         await this.before(browser.capabilities, [], browser);
     }
     async before(capabilities, _specs, browser) {
-        this._browser = browser;
-        this._isNativeContext = determineNativeContext(this._browser);
-        if (!this._browser.isMultiremote) {
+        this.#browser = browser;
+        this._isNativeContext = determineNativeContext(this.#browser);
+        if (!this.#browser.isMultiremote) {
             log.info('Adding commands to global browser');
-            await this.#addCommandsToBrowser(this._browser);
+            await this.#addCommandsToBrowser(this.#browser);
         }
         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
@@ -59,14 +66,20 @@ export default class WdioImageComparisonService extends BaseClass {
             log.warn('Expect package not found. This means that the custom matchers `toMatchScreenSnapshot|toMatchFullPageSnapshot|toMatchElementSnapshot|toMatchTabbablePageSnapshot` are not added and can not be used. Please make sure to add it to your `package.json` if you want to use the Visual custom matchers.');
         }
     }
-    beforeTest(test) {
+    async beforeTest(test) {
         this.#currentFile = (test.file || test.filename);
         this.#currentFilePath = resolve(dirname(this.#currentFile), FOLDERS.DEFAULT.BASE);
+        this.#testContext = this.#getTestContext(test);
+    }
+    // For Cucumber only
+    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') {
-            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() {
@@ -86,81 +99,267 @@ export default class WdioImageComparisonService extends BaseClass {
         }
         return baselineFolder;
     }
+    /**
+     * Add commands to the Multi Remote browser object
+     */
     async #extendMultiremoteBrowser(capabilities) {
-        const browser = this._browser;
+        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),
-        ]) {
-            if (command === 'waitForStorybookComponentToBeLoaded') {
-                browser.addCommand(command, waitForStorybookComponentToBeLoaded);
-            }
-            else {
-                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 = {}) {
-                return command({
+            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 = {}) {
+            const elementOptionsKey = commandName === 'saveElement' ? 'saveElementOptions' : 'checkElementOptions';
+            return command({
+                methods: {
                     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),
+                    takeElementScreenshot: this.takeElementScreenshot.bind(browser),
+                },
+                instanceData,
+                folders: getFolders(elementOptions, self.folders, self.#getBaselineFolder()),
+                element,
+                tag,
+                [elementOptionsKey]: {
                     wic: self.defaultOptions,
                     method: elementOptions,
-                }, self._isNativeContext);
+                },
+                isNativeContext,
+                testContext: enrichTestContext({
+                    commandName,
+                    currentTestContext: self.#testContext,
+                    instanceData,
+                    tag,
+                })
             });
+        });
+    }
+    /**
+     * 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;
+        const pageOptionsKey = PAGE_OPTIONS_MAP[commandName];
+        if (commandName === 'waitForStorybookComponentToBeLoaded') {
+            browser.addCommand(commandName, (options) => waitForStorybookComponentToBeLoaded(options));
         }
-        for (const [commandName, command] of Object.entries(pageCommands)) {
-            log.info(`Adding element command "${commandName}" to browser object`);
-            if (commandName === 'waitForStorybookComponentToBeLoaded') {
-                currentBrowser.addCommand(commandName, (options) => waitForStorybookComponentToBeLoaded(options));
-            }
-            else {
-                currentBrowser.addCommand(commandName, function (tag, pageOptions = {}) {
-                    const options = {
+        else {
+            browser.addCommand(commandName, function (tag, pageOptions = {}) {
+                return command({
+                    methods: {
+                        executor: (script, ...varArgs) => {
+                            return this.execute.bind(browser)(script, ...varArgs);
+                        },
+                        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,
+                    })
+                });
+            });
+        }
+    }
+    #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 = {};
+            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: (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),
-                    };
-                    return command(options, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
+                        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,
-                    }, self._isNativeContext);
+                    },
+                    isNativeContext,
+                    testContext: enrichTestContext({
+                        commandName,
+                        currentTestContext: self.#testContext,
+                        instanceData,
+                        tag,
+                    })
                 });
             }
+            return returnData;
+        });
+    }
+    #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 = {};
+                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: (script, ...varArgs) => {
+                                return browserInstance.execute.bind(browserInstance)(script, ...varArgs);
+                            },
+                            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,
+                        })
+                    });
+                }
+                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');
+                }
+            });
+        }
+    }
+    #getTestContext(test) {
+        const framework = this.#config?.framework;
+        if (framework === 'mocha' && test) {
+            return {
+                ...this.#testContext,
+                framework: 'mocha',
+                parent: test.parent,
+                title: test.title,
+            };
+        }
+        else if (framework === 'jasmine' && test) {
+            /**
+             * When using Jasmine as the framework the title/parent are not set as with mocha.
+             *
+             * `fullName` contains all describe(), and it() separated by a space.
+             * `description` contains the current it() statement.
+             *
+             * e.g.:
+             * With the following configuration
+             *
+             * describe('x', () => {
+             *   describe('y', () => {
+             *     it('z', () => {});
+             *   })
+             * })
+             *
+             * fullName will be "x y z"
+             * description will be "z"
+             *
+             */
+            const { description: title, fullName } = test;
+            return {
+                ...this.#testContext,
+                framework: 'jasmine',
+                parent: fullName?.replace(` ${title}`, ''),
+                title: title,
+            };
+        }
+        else if (framework === 'cucumber' && test) {
+            return {
+                ...this.#testContext,
+                framework: 'cucumber',
+                // @ts-ignore
+                parent: test?.gherkinDocument?.feature?.name,
+                title: test?.pickle?.name,
+            };
         }
+        throw new SevereServiceError(`Framework ${framework} is not supported by the Visual Service and should be either "mocha", "jasmine" or "cucumber".`);
     }
 }

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;IAuEpF,UAAU;CAiBnB"}
+{"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;AAetD,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;CAuBnB"}

package/dist/storybook/launcher.js

@@ -4,6 +4,7 @@ import { SevereServiceError } from 'webdriverio';
 import { BaseClass } from 'webdriver-image-comparison';
 import { createStorybookCapabilities, createTestFiles, getArgvValue, isCucumberFramework, isStorybookMode, parseSkipStories, scanStorybook, } from './utils.js';
 import { CLIP_SELECTOR, NUM_SHARDS, V6_CLIP_SELECTOR } from '../constants.js';
+import generateVisualReport from '../reporter.js';
 const log = logger('@wdio/visual-service');
 export default class VisualLauncher extends BaseClass {
     #options;
@@ -91,5 +92,8 @@ export default class VisualLauncher extends BaseClass {
             delete process.env.VISUAL_STORYBOOK_URL;
             delete process.env.VISUAL_STORYBOOK_CLIP_SELECTOR;
         }
+        if (this.#options.createJsonReportFiles) {
+            new generateVisualReport({ directoryPath: this.folders.actualFolder }).generate();
+        }
     }
 }

package/dist/types.d.ts

@@ -1,6 +1,4 @@
 import type { ScreenshotOutput, ImageCompareResult, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, ClassOptions } from 'webdriver-image-comparison';
-import type { RectanglesOutput } from 'webdriver-image-comparison/dist/methods/rectangles.interfaces.js';
-import type { WaitForStorybookComponentToBeLoaded } from './storybook/Types.js';
 type MultiOutput = {
     [browserName: string]: ScreenshotOutput;
 };
@@ -9,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[];
@@ -30,14 +41,5 @@ export interface WdioCheckScreenMethodOptions extends Omit<CheckScreenMethodOpti
 }
 export interface VisualServiceOptions extends ClassOptions {
 }
-export type PageCommandOptions = {
-    executor: <T>(script: string | ((...innerArgs: any[]) => unknown), ...varArgs: any[]) => Promise<T>;
-    getElementRect: (elementId: string) => Promise<RectanglesOutput>;
-    screenShot: () => Promise<string>;
-};
-export type PageCommand = (options: PageCommandOptions, ...args: any[]) => Promise<any>;
-export interface PageCommands {
-    [commandName: string]: PageCommand | ((options: WaitForStorybookComponentToBeLoaded) => Promise<void>);
-}
 export {};
 //# sourceMappingURL=types.d.ts.map

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,gBAAgB,EAAE,MAAM,kEAAkE,CAAA;AACxG,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAA;AAE/E,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;AAE7D,MAAM,MAAM,kBAAkB,GAAG;IAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,SAAS,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACpG,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjE,UAAU,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;AACxF,MAAM,WAAW,YAAY;IACzB,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC,OAAO,EAAE,mCAAmC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;CAC1G"}
+{"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;CAAG"}

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 { Folders, InstanceData, CheckScreenMethodOptions, SaveScreenMethodOptions, CheckFullPageMethodOptions, SaveFullPageMethodOptions, CheckElementMethodOptions, SaveElementMethodOptions, TestContext } from 'webdriver-image-comparison';
+import type { NativeContextType } from './types.js';
 /**
  * Get the folders data
  *
@@ -32,6 +33,19 @@ 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;
+/**
+ * Make sure we have all the data for the test context
+ */
+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 {};
 //# 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,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;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;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"}

package/dist/utils.js

@@ -137,7 +137,7 @@ export async function getInstanceData(currentBrowser) {
     // @ts-ignore
     platformVersion: rawPlatformVersion = NOT_KNOWN, } = currentCapabilities;
     const appName = rawApp !== NOT_KNOWN
-        ? rawApp.replace(/\\/g, '/').split('/').pop().replace(/[^a-zA-Z0-9]/g, '_')
+        ? rawApp.replace(/\\/g, '/').split('/').pop().replace(/[^a-zA-Z0-9.]/g, '_')
         : NOT_KNOWN;
     const deviceName = getDeviceName(currentBrowser);
     const nativeWebScreenshot = !!(requestedCapabilities['appium:nativeWebScreenshot']);
@@ -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,45 @@ 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;
+}
+/**
+ * Make sure we have all the data for the test context
+ */
+export function enrichTestContext({ commandName, currentTestContext: { framework, parent, title, }, instanceData: { appName, browserName, browserVersion, deviceName, isAndroid, isIOS, isMobile, platformName, platformVersion, }, tag, }) {
+    return {
+        commandName,
+        instanceData: {
+            app: appName,
+            browser: {
+                name: browserName,
+                version: browserVersion,
+            },
+            deviceName,
+            isMobile,
+            isAndroid,
+            isIOS,
+            platform: {
+                name: platformName,
+                version: platformVersion,
+            },
+        },
+        framework,
+        parent,
+        tag,
+        title,
+    };
+}

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.1.0",
+  "version": "5.2.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": "^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.1.0"
   },
   "devDependencies": {},
   "scripts": {