@wdio/visual-service 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @wdio/visual-service
 
+## 2.0.0
+
+### Major Changes
+
+- ef386b6: # 💥 Breaking changes:
+
+  - `resizeDimensions` on the element can now only be an object, it has been deprecated for a while
+
+  # 💅 New Features
+
+  - Next to supporting Web snapshot testing this module now also supports 💥 **Native App** 💥 snapshot testing. The methods `saveElement|checkElement | saveScreen | checkScreen` and the matchers `toMatchElementSnapshot |  toMatchScreenSnapshot` are available for **Native Apps**
+
+  > [!NOTE]
+  > This module will automatically detect the context (web | webview | native_app) and will handle all complex logic for you
+
+  The methods `saveFullPageScreen | checkFullPageScreen | saveTabbablePage|checkTabbablePage` will throw an error when they are used in the native context for native mobile apps and will look like this
+
+  ```logs
+  $ wdio tests/configs/wdio.local.android.emus.app.conf.ts
+
+  Execution of 1 workers started at 2024-01-30T06:18:24.865Z
+
+  [0-0] RUNNING in Android - file:///tests/specs/mobile.app.spec.ts
+  [0-0] Error in "@wdio/visual-service mobile app.should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode"
+  Error: The method saveFullPageScreen is not supported in native context for native mobile apps!
+      at /wdio/visual-testing/packages/webdriver-image-comparison/src/commands/saveFullPageScreen.ts:26:15
+      at step (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:33:23)
+      at Object.next (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:14:53)
+      at /wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:8:71
+      at new Promise (<anonymous>)
+      at __awaiter (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:4:12)
+      at saveFullPageScreen (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:47:12)
+      at Browser.<anonymous> (file:///wdio/visual-testing/packages/service/dist/service.js:101:24)
+  [0-0] FAILED in Android - file:///tests/specs/mobile.app.spec.ts
+
+   "spec" Reporter:
+  ------------------------------------------------------------------
+  [/wdio/visual-testing/apps/app.apk Android #0-0] Running: /wdio/visual-testing/apps/app.apk on Android
+  [/wdio/visual-testing/apps/app.apk Android #0-0] Session ID: c1101184-e3d5-42b5-a31f-8ebaa211f1a1
+  [/wdio/visual-testing/apps/app.apk Android #0-0]
+  [/wdio/visual-testing/apps/app.apk Android #0-0] » /tests/specs/mobile.app.spec.ts
+  [/wdio/visual-testing/apps/app.apk Android #0-0] @wdio/visual-service mobile app
+  [/wdio/visual-testing/apps/app.apk Android #0-0]    ✖ should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode
+  [/wdio/visual-testing/apps/app.apk Android #0-0]
+  [/wdio/visual-testing/apps/app.apk Android #0-0] 1 failing (1.5s)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]
+  [/wdio/visual-testing/apps/app.apk Android #0-0] 1) @wdio/visual-service mobile app should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode
+  [/wdio/visual-testing/apps/app.apk Android #0-0] The method saveFullPageScreen is not supported in native context for native mobile apps!
+  [/wdio/visual-testing/apps/app.apk Android #0-0] Error: The method saveFullPageScreen is not supported in native context for native mobile apps!
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at /wdio/visual-testing/packages/webdriver-image-comparison/src/commands/saveFullPageScreen.ts:26:15
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at step (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:33:23)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at Object.next (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:14:53)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at /wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:8:71
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at new Promise (<anonymous>)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at __awaiter (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:4:12)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at saveFullPageScreen (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:47:12)
+  [/wdio/visual-testing/apps/app.apk Android #0-0]     at Browser.<anonymous> (file:///wdio/visual-testing/packages/service/dist/service.js:101:24)
+
+
+  Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:11
+
+  error Command failed with exit code 1.
+  ```
+
+  - `autoSaveBaseline` is true by default, so if no baseline images are present it will automatically create a new baseline
+  - Mobile screenshots of the complete screen now automatically exclude all native OS elements like the notification bar, home bar, address bar, and so on, the settings `blockOutSideBar | blockOutStatusBar |blockOutToolBar` are now all defaulted to `true`
+  -
+
+  # 🐛 Fixed bugs:
+
+  - element screenshots could also get resized dimensions, which would cut out a bigger portion around the element. This was failing when the dimensions got out of the boundaries of the official screenshot. This has now been fixed with:
+    - not going outside of the screenshot
+    - log extra warnings
+
+### Patch Changes
+
+- Updated dependencies [ef386b6]
+  - webdriver-image-comparison@4.0.0
+
 ## 1.0.0
 
 ### Major Changes

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="./expect-webdriverio.js" />
+import type { WicElement } from 'webdriver-image-comparison/dist/commands/element.interfaces.js';
 import WdioImageComparisonService from './service.js';
 import type { Output, Result, WdioCheckFullPageMethodOptions, WdioSaveFullPageMethodOptions, WdioSaveElementMethodOptions, WdioSaveScreenMethodOptions, WdioCheckElementMethodOptions, WdioCheckScreenMethodOptions } from './types.js';
 declare global {
@@ -7,7 +8,7 @@ declare global {
             /**
              * Saves an image of an element
              */
-            saveElement(element: Element, tag: string, saveElementOptions?: WdioSaveElementMethodOptions): Promise<Output>;
+            saveElement(element: WicElement, tag: string, saveElementOptions?: WdioSaveElementMethodOptions): Promise<Output>;
             /**
              * Saves an image of a viewport
              */
@@ -23,7 +24,7 @@ declare global {
             /**
              * Compare an image of an element
              */
-            checkElement(element: Element, tag: string, checkElementOptions?: WdioCheckElementMethodOptions): Promise<Result>;
+            checkElement(element: WicElement, tag: string, checkElementOptions?: WdioCheckElementMethodOptions): Promise<Result>;
             /**
              * Compares an image of a viewport
              */
@@ -48,7 +49,7 @@ declare global {
     namespace ExpectWebdriverIO {
         interface Matchers<R, T> {
             /**
-             * cks that if current screen matches with snapshot of baseline.
+             * Checks that if current screen matches with snapshot of baseline.
              * @param tag snapshot name
              * @param expectedResult either a number representing a mismatch percentage (defaults to 0) or an asymmetric matcher
              * @param options options to pass into the `checkScreen` method

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

@@ -3,7 +3,9 @@ import { BaseClass } from 'webdriver-image-comparison';
 export default class WdioImageComparisonService extends BaseClass {
     #private;
     private _browser?;
+    private _isNativeContext;
     constructor(options: ClassOptions);
-    before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): void;
+    before(capabilities: WebdriverIO.Capabilities, _specs: string[], browser: WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser): Promise<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,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EASZ,MAAM,4BAA4B,CAAA;AAsBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAC7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;gBAE3D,OAAO,EAAE,YAAY;IAGjC,MAAM,CACF,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;CA2HpE"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EACH,SAAS,EASZ,MAAM,4BAA4B,CAAA;AAqBnC,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAC7D,OAAO,CAAC,QAAQ,CAAC,CAAsD;IACvE,OAAO,CAAC,gBAAgB,CAAqB;gBAEjC,OAAO,EAAE,YAAY;IAI3B,MAAM,CACR,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,MAAM,EAAE,MAAM,EAAE,EAChB,OAAO,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB;IAuBjE,YAAY,CAAE,WAAW,EAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAE,EAAE,MAAM,EAAC,MAAM,GAAC,MAAM,EAAE,KAAK,EAAC,GAAG;CA2GpF"}

package/dist/service.js

@@ -1,7 +1,7 @@
 import logger from '@wdio/logger';
 import { expect } from '@wdio/globals';
 import { BaseClass, checkElement, checkFullPageScreen, checkScreen, saveElement, saveFullPageScreen, saveScreen, saveTabbablePage, checkTabbablePage, } from 'webdriver-image-comparison';
-import { getFolders, getInstanceData } from './utils.js';
+import { determineNativeContext, getFolders, getInstanceData } from './utils.js';
 import { toMatchScreenSnapshot, toMatchFullPageSnapshot, toMatchElementSnapshot, toMatchTabbablePageSnapshot } from './matcher.js';
 const log = logger('@wdio/visual-service');
 const elementCommands = { saveElement, checkElement };
@@ -15,17 +15,20 @@ const pageCommands = {
 };
 export default class WdioImageComparisonService extends BaseClass {
     _browser;
+    _isNativeContext;
     constructor(options) {
         super(options);
+        this._isNativeContext = undefined;
     }
-    before(capabilities, _specs, browser) {
+    async before(capabilities, _specs, browser) {
         this._browser = browser;
+        this._isNativeContext = determineNativeContext(this._browser);
         if (!this._browser.isMultiremote) {
             log.info('Adding commands to global browser');
-            this.#addCommandsToBrowser(capabilities, this._browser);
+            await this.#addCommandsToBrowser(this._browser);
         }
         else {
-            this.#extendMultiremoteBrowser(capabilities);
+            await this.#extendMultiremoteBrowser(capabilities);
         }
         /**
          * add custom matcher for visual comparison
@@ -37,14 +40,20 @@ export default class WdioImageComparisonService extends BaseClass {
             toMatchTabbablePageSnapshot,
         });
     }
-    #extendMultiremoteBrowser(capabilities) {
+    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');
+        }
+    }
+    async #extendMultiremoteBrowser(capabilities) {
         const browser = this._browser;
         const browserNames = Object.keys(capabilities);
         log.info(`Adding commands to Multi Browser: ${browserNames.join(', ')}`);
         for (const browserName of browserNames) {
             const multiremoteBrowser = browser;
             const browserInstance = multiremoteBrowser.getInstance(browserName);
-            this.#addCommandsToBrowser(capabilities[browserName].capabilities, browserInstance);
+            await this.#addCommandsToBrowser(browserInstance);
         }
         /**
          * Add all the commands to the global browser object that will execute
@@ -68,32 +77,37 @@ export default class WdioImageComparisonService extends BaseClass {
             });
         }
     }
-    #addCommandsToBrowser(capabilities, currentBrowser) {
-        const instanceData = getInstanceData(capabilities, currentBrowser);
-        const folders = this.folders;
-        const defaultOptions = this.defaultOptions;
+    async #addCommandsToBrowser(currentBrowser) {
+        const instanceData = await getInstanceData(currentBrowser);
+        const self = this;
         for (const [commandName, command] of Object.entries(elementCommands)) {
             log.info(`Adding element command "${commandName}" to browser object`);
             currentBrowser.addCommand(commandName, function (element, tag, elementOptions = {}) {
                 return command({
-                    executor: this.execute.bind(currentBrowser),
+                    executor: (script, ...varArgs) => {
+                        return this.execute.bind(currentBrowser)(script, ...varArgs);
+                    },
+                    getElementRect: this.getElementRect.bind(currentBrowser),
                     screenShot: this.takeScreenshot.bind(currentBrowser),
-                }, instanceData, getFolders(elementOptions, folders), element, tag, {
-                    wic: defaultOptions,
+                }, instanceData, getFolders(elementOptions, self.folders), element, tag, {
+                    wic: self.defaultOptions,
                     method: elementOptions,
-                });
+                }, self._isNativeContext);
             });
         }
         for (const [commandName, command] of Object.entries(pageCommands)) {
             log.info(`Adding element command "${commandName}" to browser object`);
             currentBrowser.addCommand(commandName, function (tag, pageOptions = {}) {
                 return command({
-                    executor: this.execute.bind(currentBrowser),
+                    executor: (script, ...varArgs) => {
+                        return this.execute.bind(currentBrowser)(script, ...varArgs);
+                    },
+                    getElementRect: this.getElementRect.bind(currentBrowser),
                     screenShot: this.takeScreenshot.bind(currentBrowser),
-                }, instanceData, getFolders(pageOptions, folders), tag, {
-                    wic: defaultOptions,
+                }, instanceData, getFolders(pageOptions, self.folders), tag, {
+                    wic: self.defaultOptions,
                     method: pageOptions,
-                });
+                }, self._isNativeContext);
             });
         }
     }

package/dist/utils.d.ts

@@ -7,13 +7,31 @@ import type { Folders, InstanceData, CheckScreenMethodOptions, SaveScreenMethodO
  */
 type getFolderMethodOptions = CheckElementMethodOptions | CheckFullPageMethodOptions | CheckScreenMethodOptions | SaveElementMethodOptions | SaveFullPageMethodOptions | SaveScreenMethodOptions;
 export declare function getFolders(methodOptions: getFolderMethodOptions, folders: Folders): Folders;
+/**
+ * Get the size of a screenshot in pixels without the device pixel ratio
+ */
+export declare function getScreenshotSize(screenshot: string, devicePixelRation?: number): {
+    height: number;
+    width: number;
+};
+/**
+ * Get the device pixel ratio
+ */
+export declare function getDevicePixelRatio(screenshot: string, deviceScreenSize: {
+    height: number;
+    width: number;
+}): number;
 /**
  * Get the instance data
  */
-export declare function getInstanceData(capabilities: WebdriverIO.Capabilities, currentBrowser: WebdriverIO.Browser): InstanceData;
+export declare function getInstanceData(currentBrowser: WebdriverIO.Browser): Promise<InstanceData>;
 /**
- * traverse up the scope chain until browser element was reached
+ * Traverse up the scope chain until browser element was reached
  */
 export declare function getBrowserObject(elem: WebdriverIO.Element | WebdriverIO.Browser): WebdriverIO.Browser;
+/**
+ * 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 {};
 //# 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;AAOnC;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAC9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,GACjB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,WAAW,CAAC,YAAY,EACtC,cAAc,EAAE,WAAW,CAAC,OAAO,GACpC,YAAY,CAyDd;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,OAAO,EACP,YAAY,EACZ,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EAC3B,MAAM,4BAA4B,CAAA;AAOnC;;;;;GAKG;AACH,KAAK,sBAAsB,GACrB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,wBAAwB,GACxB,yBAAyB,GACzB,uBAAuB,CAAC;AAC9B,wBAAgB,UAAU,CACtB,aAAa,EAAE,sBAAsB,EACrC,OAAO,EAAE,OAAO,GACjB,OAAO,CAMT;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,SAAI,GAAG;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAKA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAAC,MAAM,EAAC,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAOhH;AAkFD;;GAEG;AACH,wBAAsB,eAAe,CAAC,cAAc,EAAE,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA+DhG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAGtG;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAClC,MAAM,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,GAC7D,OAAO,CAQT"}

package/dist/utils.js

@@ -1,4 +1,4 @@
-/// <reference types="webdriverio" />
+import { IOS_OFFSETS } from 'webdriver-image-comparison';
 export function getFolders(methodOptions, folders) {
     return {
         actualFolder: methodOptions.actualFolder ?? folders.actualFolder,
@@ -6,40 +6,135 @@ export function getFolders(methodOptions, folders) {
         diffFolder: methodOptions.diffFolder ?? folders.diffFolder,
     };
 }
+/**
+ * Get the size of a screenshot in pixels without the device pixel ratio
+ */
+export function getScreenshotSize(screenshot, devicePixelRation = 1) {
+    return {
+        height: Buffer.from(screenshot, 'base64').readUInt32BE(20) / devicePixelRation,
+        width: Buffer.from(screenshot, 'base64').readUInt32BE(16) / devicePixelRation,
+    };
+}
+/**
+ * Get the device pixel ratio
+ */
+export function getDevicePixelRatio(screenshot, deviceScreenSize) {
+    const screenshotSize = getScreenshotSize(screenshot);
+    const devicePixelRatio = Math.round(screenshotSize.width / deviceScreenSize.width) === Math.round(screenshotSize.height / deviceScreenSize.height)
+        ? Math.round(screenshotSize.width / deviceScreenSize.width)
+        : Math.round(screenshotSize.height / deviceScreenSize.width);
+    return Math.round(devicePixelRatio);
+}
+/**
+ * Get the mobile instance data
+ */
+async function getMobileInstanceData({ currentBrowser, isAndroid, isMobile }) {
+    const deviceScreenSize = {
+        height: 0,
+        width: 0,
+    };
+    const devicePlatformRect = {
+        statusBar: { height: 0, x: 0, width: 0, y: 0 },
+        homeBar: { height: 0, x: 0, width: 0, y: 0 },
+    };
+    let devicePixelRatio = 1;
+    if (isMobile) {
+        const currentDriverCapabilities = currentBrowser.capabilities;
+        const { height, width } = await currentBrowser.getWindowSize();
+        deviceScreenSize.height = height;
+        deviceScreenSize.width = width;
+        // @TODO: This is al based on PORTRAIT mode
+        if (isAndroid && currentDriverCapabilities) {
+            // We use a few `@ts-ignore` here because `pixelRatio` and `statBarHeight`
+            // are returned by the driver, and not recognized by the types because they are not requested
+            // @ts-ignore
+            if (currentDriverCapabilities?.pixelRatio !== undefined) {
+                // @ts-ignore
+                devicePixelRatio = currentDriverCapabilities?.pixelRatio;
+            }
+            // @ts-ignore
+            if (currentDriverCapabilities?.statBarHeight !== undefined) {
+                // @ts-ignore
+                devicePlatformRect.statusBar.height = currentDriverCapabilities?.statBarHeight;
+                devicePlatformRect.statusBar.width = width;
+            }
+        }
+        else {
+            // This is to already determine the device pixel ratio if it's not set in the capabilities
+            const base64Image = await currentBrowser.takeScreenshot();
+            devicePixelRatio = getDevicePixelRatio(base64Image, deviceScreenSize);
+            const isIphone = width < 1024 && height < 1024;
+            const deviceType = isIphone ? 'IPHONE' : 'IPAD';
+            const defaultPortraitHeight = isIphone ? 667 : 1024;
+            const portraitHeight = width > height ? width : height;
+            const offsetPortraitHeight = Object.keys(IOS_OFFSETS[deviceType]).indexOf(portraitHeight.toString()) > -1 ? portraitHeight : defaultPortraitHeight;
+            const currentOffsets = IOS_OFFSETS[deviceType][offsetPortraitHeight].PORTRAIT;
+            // NOTE: The values for iOS are based on CSS pixels, so we need to multiply them with the devicePixelRatio,
+            // This will NOT be done here but in a central place
+            devicePlatformRect.statusBar = {
+                y: 0,
+                x: 0,
+                width,
+                height: currentOffsets.STATUS_BAR,
+            };
+            devicePlatformRect.homeBar = currentOffsets.HOME_BAR;
+        }
+    }
+    return {
+        devicePixelRatio,
+        devicePlatformRect,
+        deviceScreenSize,
+    };
+}
 /**
  * Get the instance data
  */
-export function getInstanceData(capabilities, currentBrowser) {
-    const currentCapabilities = currentBrowser.requestedCapabilities.alwaysMatch
-        ? currentBrowser.requestedCapabilities.alwaysMatch
-        : currentBrowser.requestedCapabilities;
-    const browserName = (capabilities.browserName ||
-        currentCapabilities.browserName ||
-        'browserName-not-known').toLowerCase();
-    const browserVersion = (capabilities.browserVersion ||
-        currentCapabilities.browserVersion ||
-        'not-known').toLowerCase();
-    const logName = 'wdio-ics:options' in capabilities
-        ? capabilities['wdio-ics:options']?.logName ??
-            ''
+export async function getInstanceData(currentBrowser) {
+    const NOT_KNOWN = 'not-known';
+    const { capabilities: currentCapabilities, requestedCapabilities } = currentBrowser;
+    const { browserName: rawBrowserName = NOT_KNOWN, browserVersion: rawBrowserVersion = NOT_KNOWN, platformName: rawPlatformName = NOT_KNOWN, } = currentCapabilities;
+    // Generic data
+    const browserName = rawBrowserName === '' ? NOT_KNOWN : rawBrowserName.toLowerCase();
+    const browserVersion = rawBrowserVersion === '' ? NOT_KNOWN : rawBrowserVersion.toLowerCase();
+    let devicePixelRatio = 1;
+    const platformName = rawPlatformName === '' ? NOT_KNOWN : rawPlatformName.toLowerCase();
+    const logName = 'wdio-ics:options' in requestedCapabilities
+        ? requestedCapabilities['wdio-ics:options']?.logName ?? ''
         : '';
-    const name = 'wdio-ics:options' in capabilities
-        ? capabilities['wdio-ics:options']?.name ?? ''
+    const name = 'wdio-ics:options' in requestedCapabilities
+        ? requestedCapabilities['wdio-ics:options']?.name ?? ''
         : '';
-    // For mobile
-    const platformName = (capabilities.platformName ||
-        currentCapabilities.platformName ||
-        'not-known').toLowerCase();
-    const platformVersion = (capabilities['appium:platformVersion'] ||
-        currentCapabilities['appium:platformVersion'] ||
-        'not-known').toLowerCase();
-    const deviceName = (capabilities['appium:deviceName'] || '').toLowerCase();
-    const nativeWebScreenshot = !!(capabilities['appium:nativeWebScreenshot'] ||
-        currentCapabilities['appium:nativeWebScreenshot']);
+    // Mobile data
+    const { isAndroid, isIOS, isMobile } = currentBrowser;
+    const { 
+    // We use a few `@ts-ignore` here because this is returned by the driver
+    // and not recognized by the types because they are not requested
+    // @ts-ignore
+    app: rawApp = NOT_KNOWN, 
+    // @ts-ignore
+    deviceName: rawDeviceName = NOT_KNOWN, 
+    // @ts-ignore
+    platformVersion: rawPlatformVersion = NOT_KNOWN, } = currentCapabilities;
+    const { 'appium:deviceName': requestedDeviceName } = requestedCapabilities;
+    const appName = rawApp !== NOT_KNOWN
+        ? rawApp.replace(/\\/g, '/').split('/').pop().replace(/[^a-zA-Z0-9]/g, '_')
+        : NOT_KNOWN;
+    const deviceName = (requestedDeviceName || rawDeviceName || '').toLowerCase();
+    const nativeWebScreenshot = !!(requestedCapabilities['appium:nativeWebScreenshot']);
+    const platformVersion = (rawPlatformVersion === undefined || rawPlatformVersion === '') ? NOT_KNOWN : rawPlatformVersion.toLowerCase();
+    const { devicePixelRatio: mobileDevicePixelRatio, devicePlatformRect, deviceScreenSize, } = await getMobileInstanceData({ currentBrowser, isAndroid, isMobile });
+    devicePixelRatio = isMobile ? mobileDevicePixelRatio : devicePixelRatio;
     return {
+        appName,
         browserName,
         browserVersion,
         deviceName,
+        devicePixelRatio,
+        devicePlatformRect,
+        deviceScreenSize,
+        isAndroid,
+        isIOS,
+        isMobile,
         logName,
         name,
         nativeWebScreenshot,
@@ -48,9 +143,20 @@ export function getInstanceData(capabilities, currentBrowser) {
     };
 }
 /**
- * traverse up the scope chain until browser element was reached
+ * Traverse up the scope chain until browser element was reached
  */
 export function getBrowserObject(elem) {
     const elemObject = elem;
     return elemObject.parent ? getBrowserObject(elemObject.parent) : elem;
 }
+/**
+ * We can't say it's native context if the autoWebview is provided and set to true, for all other cases we can say it's native
+ */
+export function determineNativeContext(driver) {
+    if (driver.isMobile) {
+        return !!driver.requestedCapabilities?.browserName === false
+            && driver.requestedCapabilities?.['appium:app'] !== undefined
+            && driver.requestedCapabilities?.['appium:autoWebview'] !== true;
+    }
+    return false;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -22,7 +22,7 @@
   "dependencies": {
     "@wdio/logger": "^8.24.12",
     "@wdio/types": "^8.26.2",
-    "webdriver-image-comparison": "^3.0.0"
+    "webdriver-image-comparison": "^4.0.0"
   },
   "scripts": {
     "build": "run-s clean build:*",