@wdio/visual-service 8.0.1 → 8.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @wdio/visual-service
 
+## 8.0.2
+
+### Patch Changes
+
+- 9363467: ## 🐛 Bug-fixes
+
+  - #946: Visual Regression Changes in WDIO v9
+    - Fixed screen size detection in emulated mode for filenames. Previously used incorrect browser window size.
+    - Fixed screenshot behavior when `enableLegacyScreenshotMethod: true`, now correctly captures emulated screen instead of complete screen.
+    - Fixed emulated device handling for Chrome and Edge browsers, now properly sets device metrics based on `deviceMetrics` or `deviceName` capabilities.
+
+  ## Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+- Updated dependencies [9363467]
+  - webdriver-image-comparison@9.0.2
+
 ## 8.0.1
 
 ### Patch Changes

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,EACH,SAAS,EAWZ,MAAM,4BAA4B,CAAA;AAkBnC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAepD,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAM7D,OAAO,CAAC,eAAe,CAAC,CAAgB;IACxC,OAAO,CAAC,gBAAgB,CAAC,CAAyC;gBAEtD,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAMlG;;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;IA2B3D,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAOtC,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK;IAqctC,IAAI,cAAc,IAAI,cAAc,CAKnC;CACJ"}
+{"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;AAkBnC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAepD,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,SAAS;;IAM7D,OAAO,CAAC,eAAe,CAAC,CAAgB;IACxC,OAAO,CAAC,gBAAgB,CAAC,CAAyC;gBAEtD,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM;IAMlG;;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;IAqctC,IAAI,cAAc,IAAI,cAAc,CAKnC;CAyCJ"}

package/dist/service.js

@@ -48,6 +48,11 @@ export default class WdioImageComparisonService extends BaseClass {
         else {
             await this.#extendMultiremoteBrowser(capabilities);
         }
+        // There is an issue with the emulation mode for Chrome or Edge with WebdriverIO v9
+        // It doesn't set the correct emulation mode for the browser based on the capabilities
+        // So we need to set the emulation mode manually
+        // this is a temporary fix until the issue is fixed in WebdriverIO v9 and enough users have upgraded to the latest version
+        await this.#setEmulation(this.#browser, capabilities);
         /**
          * add custom matcher for visual comparison when expect has been added.
          * this is not the case in standalone mode
@@ -424,4 +429,36 @@ export default class WdioImageComparisonService extends BaseClass {
         }
         return this._contextManager;
     }
+    async #setEmulationForBrowser(browserInstance, capabilities) {
+        if (!browserInstance.isBidi) {
+            return;
+        }
+        const chromeMobileEmulation = capabilities['goog:chromeOptions']?.mobileEmulation;
+        const edgeMobileEmulation = capabilities['ms:edgeOptions']?.mobileEmulation;
+        const mobileEmulation = chromeMobileEmulation || edgeMobileEmulation;
+        if (!mobileEmulation) {
+            return;
+        }
+        const { deviceName, deviceMetrics } = mobileEmulation;
+        if (deviceName) {
+            await browserInstance.emulate('device', deviceName);
+            return;
+        }
+        const { pixelRatio: devicePixelRatio = 1, width = 320, height = 658 } = deviceMetrics || {};
+        await browserInstance.browsingContextSetViewport({
+            context: await browserInstance.getWindowHandle(),
+            devicePixelRatio,
+            viewport: { width, height }
+        });
+    }
+    async #setEmulation(browser, capabilities) {
+        if (browser.isMultiremote) {
+            const multiremoteBrowser = browser;
+            for (const browserInstance of Object.values(multiremoteBrowser)) {
+                await this.#setEmulationForBrowser(browserInstance, browserInstance.capabilities);
+            }
+            return;
+        }
+        await this.#setEmulationForBrowser(browser, capabilities);
+    }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/visual-service",
   "author": "Wim Selles - wswebcreation",
   "description": "Image comparison / visual regression testing for WebdriverIO",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -22,9 +22,9 @@
   "dependencies": {
     "@wdio/globals": "^9.13.0",
     "@wdio/logger": "^9.4.4",
-    "@wdio/types": "^9.12.6",
+    "@wdio/types": "^9.13.0",
     "expect-webdriverio": "^5.1.0",
-    "webdriver-image-comparison": "9.0.1"
+    "webdriver-image-comparison": "9.0.2"
   },
   "scripts": {
     "build": "run-s clean build:*",