@wdio/visual-service 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,159 @@
 # @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

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/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,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"}
+{"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, getNativeContext } 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,11 +38,11 @@ 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);
@@ -62,15 +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') {
             // Multiremote logic is handled in the `before` method during an event listener
-            this._isNativeContext = this._browser?.isMultiremote ? this._isNativeContext : result.includes('NATIVE');
+            this._isNativeContext = this.#browser?.isMultiremote ? this._isNativeContext : result.includes('NATIVE');
         }
     }
     #getBaselineFolder() {
@@ -94,7 +103,7 @@ export default class WdioImageComparisonService extends BaseClass {
      * Add commands to the Multi Remote browser object
      */
     async #extendMultiremoteBrowser(capabilities) {
-        const browser = this._browser;
+        const browser = this.#browser;
         const browserNames = Object.keys(capabilities);
         /**
          * Add all the commands to each browser in the Multi Remote
@@ -125,7 +134,7 @@ export default class WdioImageComparisonService extends BaseClass {
      */
     async #addCommandsToBrowser(currentBrowser) {
         const instanceData = await getInstanceData(currentBrowser);
-        const isNativeContext = getNativeContext(this._browser, currentBrowser, this._isNativeContext);
+        const isNativeContext = getNativeContext(this.#browser, currentBrowser, this._isNativeContext);
         for (const [commandName, command] of Object.entries(elementCommands)) {
             this.#addElementCommand(currentBrowser, commandName, command, instanceData, isNativeContext);
         }
@@ -140,17 +149,32 @@ export default class WdioImageComparisonService extends BaseClass {
         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({
-                executor: (script, ...varArgs) => {
-                    return this.execute.bind(browser)(script, ...varArgs);
+                methods: {
+                    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,
+                folders: getFolders(elementOptions, self.folders, self.#getBaselineFolder()),
+                element,
+                tag,
+                [elementOptionsKey]: {
+                    wic: self.defaultOptions,
+                    method: elementOptions,
                 },
-                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);
+                isNativeContext,
+                testContext: enrichTestContext({
+                    commandName,
+                    currentTestContext: self.#testContext,
+                    instanceData,
+                    tag,
+                })
+            });
         });
     }
     /**
@@ -159,24 +183,77 @@ export default class WdioImageComparisonService extends BaseClass {
     #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));
         }
         else {
             browser.addCommand(commandName, function (tag, pageOptions = {}) {
                 return command({
-                    executor: (script, ...varArgs) => {
-                        return this.execute.bind(browser)(script, ...varArgs);
+                    methods: {
+                        executor: (script, ...varArgs) => {
+                            return this.execute.bind(browser)(script, ...varArgs);
+                        },
+                        getElementRect: this.getElementRect.bind(browser),
+                        screenShot: this.takeScreenshot.bind(browser),
                     },
-                    getElementRect: this.getElementRect.bind(browser),
-                    screenShot: this.takeScreenshot.bind(browser),
-                }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
-                    wic: self.defaultOptions,
-                    method: pageOptions,
-                }, isNativeContext);
+                    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 browserInstance.execute.bind(browserInstance)(script, ...varArgs);
+                        },
+                        getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                        screenShot: browserInstance.takeScreenshot.bind(browserInstance),
+                        takeElementScreenshot: browserInstance.takeElementScreenshot.bind(browserInstance),
+                    },
+                    instanceData,
+                    folders: getFolders(pageOptions, self.folders, self.#getBaselineFolder()),
+                    tag,
+                    element,
+                    [elementOptionsKey]: {
+                        wic: self.defaultOptions,
+                        method: pageOptions,
+                    },
+                    isNativeContext,
+                    testContext: enrichTestContext({
+                        commandName,
+                        currentTestContext: self.#testContext,
+                        instanceData,
+                        tag,
+                    })
+                });
+            }
+            return returnData;
+        });
+    }
     #addMultiremoteCommand(browser, browserNames, commandName, command) {
         log.info(`Adding browser command "${commandName}" to Multi browser object`);
         const self = this;
@@ -186,51 +263,41 @@ export default class WdioImageComparisonService extends BaseClass {
         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 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);
+                        methods: {
+                            executor: (script, ...varArgs) => {
+                                return browserInstance.execute.bind(browserInstance)(script, ...varArgs);
+                            },
+                            getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                            screenShot: browserInstance.takeScreenshot.bind(browserInstance),
                         },
-                        getElementRect: browserInstance.getElementRect.bind(browserInstance),
-                        screenShot: browserInstance.takeScreenshot.bind(browserInstance),
-                    }, instanceData, getFolders(pageOptions, self.folders, self.#getBaselineFolder()), tag, {
-                        wic: self.defaultOptions,
-                        method: pageOptions,
-                    }, isNativeContext);
+                        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;
             });
         }
     }
-    #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 browserInstance.execute.bind(browserInstance)(script, ...varArgs);
-                    },
-                    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,
-                }, isNativeContext);
-            }
-            return returnData;
-        });
-    }
     #setupMultiremoteContextListener() {
-        const multiremoteBrowser = this._browser;
+        const multiremoteBrowser = this.#browser;
         const browserInstances = multiremoteBrowser.instances;
         for (const instanceName of browserInstances) {
             const instance = multiremoteBrowser[instanceName];
@@ -246,4 +313,53 @@ export default class WdioImageComparisonService extends BaseClass {
             });
         }
     }
+    #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.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;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"}
+{"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,4 @@
-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
@@ -38,5 +38,14 @@ export declare function determineNativeContext(driver: WebdriverIO.Browser | Web
  * 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;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"}
+{"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']);
@@ -206,3 +206,30 @@ export function getNativeContext(browser, currentBrowser, 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.1",
+  "version": "5.2.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -24,7 +24,7 @@
     "@wdio/logger": "^8.38.0",
     "@wdio/types": "^8.39.0",
     "node-fetch": "^3.3.2",
-    "webdriver-image-comparison": "^6.0.2"
+    "webdriver-image-comparison": "^6.1.0"
   },
   "devDependencies": {},
   "scripts": {