@wdio/visual-service 6.3.3 → 7.0.0

package/dist/storybook/utils.js

@@ -80,8 +80,13 @@ export async function getStoriesJson(url) {
         ]);
         for (const response of [storiesRes, indexRes]) {
             if (response.ok) {
-                const data = await response.json();
-                return data.stories || data.entries;
+                try {
+                    const data = await response.json();
+                    return data.stories || data.entries;
+                }
+                catch (_ign) {
+                    // Ignore the json parse error
+                }
             }
         }
     }
@@ -107,11 +112,15 @@ export function getArgvValue(argName, parseFunc) {
     }
     return undefined;
 }
+/**
+ * Get the story baseline path for the given category and component
+ */
+const getStoriesBaselinePathFn = ((category, component) => `./${category}/${component}/`);
 /**
  * Creates a it function for the test file
  * @TODO: improve this
  */
-export function itFunction({ clip, clipSelector, folders: { baselineFolder }, framework, skipStories, storyData, storybookUrl }) {
+export function itFunction({ additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, skipStories, storyData, storybookUrl, getStoriesBaselinePath = getStoriesBaselinePathFn }) {
     const { id } = storyData;
     const screenshotType = clip ? 'n element' : ' viewport';
     const DEFAULT_IT_TEXT = 'it';
@@ -130,8 +139,12 @@ export function itFunction({ clip, clipSelector, folders: { baselineFolder }, fr
     }
     // Setup the folder structure
     const { category, component } = extractCategoryAndComponent(id);
-    const methodOptions = {
-        baselineFolder: join(baselineFolder, `./${category}/${component}/`),
+    const storiesBaselinePath = getStoriesBaselinePath(category, component);
+    const checkMethodOptions = {
+        ...compareOptions,
+        actualFolder: join(folders.actualFolder, storiesBaselinePath),
+        baselineFolder: join(folders.baselineFolder, storiesBaselinePath),
+        diffFolder: join(folders.diffFolder, storiesBaselinePath),
     };
     const it = `
     ${itText}(\`should take a${screenshotType} screenshot of ${id}\`, async () => {
@@ -139,10 +152,11 @@ export function itFunction({ clip, clipSelector, folders: { baselineFolder }, fr
             clipSelector: '${clipSelector}',
             id: '${id}',
             storybookUrl: '${storybookUrl}',
+            additionalSearchParams: new URLSearchParams('${additionalSearchParams.toString()}'),
         });
         ${clip
-        ? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(methodOptions)})`
-        : `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(methodOptions)})`}
+        ? `await expect($('${clipSelector}')).toMatchElementSnapshot('${id}-element', ${JSON.stringify(checkMethodOptions)})`
+        : `await expect(browser).toMatchScreenSnapshot('${id}', ${JSON.stringify(checkMethodOptions)})`}
     });
     `;
     return it;
@@ -164,10 +178,10 @@ export function writeTestFile(directoryPath, fileID, testContent) {
 /**
  * Create the test content
  */
-export function createTestContent({ clip, clipSelector, folders, framework, skipStories, stories, storybookUrl }, 
+export function createTestContent({ additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, getStoriesBaselinePath, skipStories, stories, storybookUrl }, 
 // For testing purposes only
 itFunc = itFunction) {
-    const itFunctionOptions = { clip, clipSelector, folders, framework, skipStories, storybookUrl };
+    const itFunctionOptions = { additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, getStoriesBaselinePath, skipStories, storybookUrl };
     return stories.reduce((acc, storyData) => acc + itFunc({ ...itFunctionOptions, storyData }), '');
 }
 /**
@@ -178,8 +192,16 @@ export async function waitForStorybookComponentToBeLoaded(options,
 isStorybookModeFunc = isStorybookMode) {
     const isStorybook = isStorybookModeFunc();
     if (isStorybook) {
-        const { clipSelector = process.env.VISUAL_STORYBOOK_CLIP_SELECTOR, id, url = process.env.VISUAL_STORYBOOK_URL, timeout = 11000, } = options;
-        await browser.url(`${url}iframe.html?id=${id}`);
+        const { additionalSearchParams, clipSelector = process.env.VISUAL_STORYBOOK_CLIP_SELECTOR, id, url = process.env.VISUAL_STORYBOOK_URL, timeout = 11000, } = options;
+        const baseUrl = new URL('iframe.html', url);
+        const searchParams = new URLSearchParams({ id });
+        if (additionalSearchParams) {
+            for (const [key, value] of additionalSearchParams) {
+                searchParams.append(key, value);
+            }
+        }
+        baseUrl.search = searchParams.toString();
+        await browser.url(baseUrl.toString());
         await $(clipSelector).waitForDisplayed();
         await browser.executeAsync(async (timeout, done) => {
             let timedOut = false;
@@ -253,11 +275,11 @@ function filterStories(storiesJson) {
 /**
  * Create the test files
  */
-export function createTestFiles({ clip, clipSelector, directoryPath, folders, framework, numShards, skipStories, storiesJson, storybookUrl }, 
+export function createTestFiles({ additionalSearchParams, clip, clipSelector, compareOptions, directoryPath, folders, framework, getStoriesBaselinePath, numShards, skipStories, storiesJson, storybookUrl }, 
 // For testing purposes only
 createTestCont = createTestContent, createFileD = createFileData, writeTestF = writeTestFile) {
     const fileNamePrefix = 'visual-storybook';
-    const createTestContentData = { clip, clipSelector, folders, framework, skipStories, stories: storiesJson, storybookUrl };
+    const createTestContentData = { additionalSearchParams, clip, clipSelector, compareOptions, folders, framework, getStoriesBaselinePath, skipStories, stories: storiesJson, storybookUrl };
     if (numShards === 1) {
         const testContent = createTestCont(createTestContentData);
         const fileData = createFileD('All stories', testContent);

package/dist/types.d.ts

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

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,gBAAgB,EAChB,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,EAC1B,yBAAyB,EACzB,YAAY,EACf,MAAM,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAE1D,KAAK,WAAW,GAAG;IACf,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAC3C,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,gBAAgB,CAAC;AACpD,KAAK,WAAW,GAAG;IACf,CAAC,WAAW,EAAE,MAAM,GAAG,kBAAkB,GAAG,MAAM,CAAC;CACtD,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC,kBAAkB,GAAG,MAAM,CAAC,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACjE,MAAM,MAAM,wBAAwB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACpB,CAAA;AAED,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;IACjE,cAAc,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CACtE;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAC9D,oBAAoB,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,GAAG,uBAAuB,CAAC,EAAE,CAAC;CAC5E;AAED,MAAM,WAAW,8BACb,SAAQ,IAAI,CAAC,0BAA0B,EAAE,MAAM,oBAAoB,CAAC,EAChE,oBAAoB;CAAG;AAC/B,MAAM,WAAW,6BACb,SAAQ,IAAI,CAAC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC,EAC/D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,4BACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,oBAAoB,CAAC,EAC9D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,2BACb,SAAQ,IAAI,CAAC,uBAAuB,EAAE,MAAM,oBAAoB,CAAC,EAC7D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,6BACb,SAAQ,IAAI,CAAC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC,EAC/D,oBAAoB;CAAG;AAC/B,MAAM,WAAW,4BACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,oBAAoB,CAAC,EAC9D,oBAAoB;CAAG;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,YAAY;CAAG"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/utils.d.ts

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

package/dist/utils.d.ts.map

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

package/dist/utils.js

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

package/dist/wrapWithContext.d.ts

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

package/dist/wrapWithContext.d.ts.map

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

package/dist/wrapWithContext.js

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "6.3.3",
+  "version": "7.0.0",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -20,12 +20,12 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@wdio/globals": "^9.9.1",
+    "@wdio/globals": "^9.12.6",
     "@wdio/logger": "^9.4.4",
-    "@wdio/types": "^9.9.0",
-    "webdriver-image-comparison": "^7.3.2"
+    "@wdio/types": "^9.12.6",
+    "expect-webdriverio": "^5.1.0",
+    "webdriver-image-comparison": "8.0.0"
   },
-  "devDependencies": {},
   "scripts": {
     "build": "run-s clean build:*",
     "build:tsc": "tsc --project ./tsconfig.json",