@wdio/visual-service 7.0.0 → 8.0.1

package/CHANGELOG.md

@@ -1,5 +1,106 @@
 # @wdio/visual-service
 
+## 8.0.1
+
+### Patch Changes
+
+- 5c6c6e2: Fix capturing element screenshots with BiDi
+
+  This release fixes #919 where an element screenshot, that was for example from an overlay, dropdown, popover, tooltip, modal, was returning an incorrect screenshot
+
+  ## Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+- Updated dependencies [5c6c6e2]
+  - webdriver-image-comparison@9.0.1
+
+## 8.0.0
+
+### Major Changes
+
+- bfe6aca: ## 💥 BREAKING CHANGES
+
+  ### 🧪 Web Screenshot Strategy Now Uses BiDi by Default
+
+  #### What was the problem?
+
+  Screenshots taken via WebDriver's traditional protocol often lacked precision:
+
+  - Emulated devices didn't reflect true resolutions
+  - Device Pixel Ratio (DPR) was often lost
+  - Images were cropped or downscaled
+
+  #### What changed?
+
+  All screenshot-related methods now use the **WebDriver BiDi protocol** by default (if supported by the browser), enabling:
+
+  ✅ Native support for emulated and high-DPR devices
+  ✅ Better fidelity in screenshot size and clarity
+  ✅ Faster, browser-native screenshots via [`browsingContext.captureScreenshot`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-captureScreenshot)
+
+  The following methods now use BiDi:
+
+  - `saveScreen` / `checkScreen`
+  - `saveElement` / `checkElement`
+  - `saveFullPageScreen` / `checkFullPageScreen`
+
+  #### What’s the impact?
+
+  ⚠️ **Existing baselines may no longer match.**
+  Because BiDi screenshots are **sharper** and **match device settings more accurately**, even a small difference in resolution or DPR can cause mismatches.
+
+  > If you rely on existing baseline images, you'll need to regenerate them to avoid false positives.
+
+  #### Want to keep using the legacy method?
+
+  You can disable BiDi screenshots globally or per test using the `enableLegacyScreenshotMethod` flag:
+
+  **Globally in `wdio.conf.ts`:**
+
+  ```ts
+  import { join } from "node:path";
+
+  export const config = {
+    services: [
+      [
+        "visual",
+        {
+          baselineFolder: join(process.cwd(), "./localBaseline/"),
+          debug: true,
+          formatImageName: "{tag}-{logName}-{width}x{height}",
+          screenshotPath: join(process.cwd(), ".tmp/"),
+          enableLegacyScreenshotMethod: true, // 👈 fallback to W3C-based screenshots
+        },
+      ],
+    ],
+  };
+  ```
+
+  **Or per test:**
+
+  ```ts
+  it("should compare an element successfully using legacy screenshots", async function () {
+    await expect($(".hero__title-logo")).toMatchElementSnapshot(
+      "legacyScreenshotLogo",
+      { enableLegacyScreenshotMethod: true } // 👈 fallback to W3C-based screenshots
+    );
+  });
+  ```
+
+  ## 🐛 Bug Fixes
+
+  - ✅ [#916](https://github.com/webdriverio/visual-testing/issues/916): Visual Testing Screenshot Behavior Changed in Emulated Devices
+
+  ## Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+### Patch Changes
+
+- Updated dependencies [bfe6aca]
+  - webdriver-image-comparison@9.0.0
+
 ## 7.0.0
 
 ### Major 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;IAictC,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;IA2B3D,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI;IAOtC,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK;IAqctC,IAAI,cAAc,IAAI,cAAc,CAKnC;CACJ"}

package/dist/service.js

@@ -159,10 +159,12 @@ export default class WdioImageComparisonService extends BaseClass {
                     const isCurrentContextNative = self.contextManager.isNativeContext;
                     return [{
                             methods: {
+                                bidiScreenshot: isBiDiScreenshotSupported(browser) ? this.browsingContextCaptureScreenshot.bind(browser) : undefined,
                                 executor: (fn, ...args) => {
                                     return this.execute(fn, ...args);
                                 },
                                 getElementRect: this.getElementRect.bind(this),
+                                getWindowHandle: this.getWindowHandle.bind(browser),
                                 screenShot: this.takeScreenshot.bind(this),
                                 takeElementScreenshot: this.takeElementScreenshot.bind(this),
                             },
@@ -337,10 +339,12 @@ export default class WdioImageComparisonService extends BaseClass {
                         const isCurrentContextNative = contextManager.isNativeContext;
                         return [{
                                 methods: {
+                                    bidiScreenshot: isBiDiScreenshotSupported(browserInstance) ? browserInstance.browsingContextCaptureScreenshot.bind(browserInstance) : undefined,
                                     executor: (fn, ...args) => {
                                         return browserInstance.execute(fn, ...args);
                                     },
                                     getElementRect: browserInstance.getElementRect.bind(browserInstance),
+                                    getWindowHandle: browserInstance.getWindowHandle.bind(browserInstance),
                                     screenShot: browserInstance.takeScreenshot.bind(browserInstance),
                                 },
                                 instanceData: updatedInstanceData,

package/package.json

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