[email protected]

Patch Changes

• d88d8dd: Optimize Mobile and Emulated device support

  🐛 Bugfixes

  #969 Fix layer injection on mobile devices

  On some devices the layer injection, to determine the exact position of the webview, was failing. It exceeded the appium timeout and returned an error like

  [1] [0-0] 2025-05-23T08:04:11.788Z INFO webdriver: COMMAND getUrl()
  [1] [0-0] 2025-05-23T08:04:11.789Z INFO webdriver: [GET] https://hub-cloud.browserstack.com/wd/hub/session/xxxxx/url
  [1] [0-0] 2025-05-23T08:04:12.036Z INFO webdriver: RESULT about:blank
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: COMMAND navigateTo("data:text/html;base64,CiAgICAgICAgPG .... LONG LIST OF CHARACTERS=")
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: [POST] https://hub-cloud.browserstack.com/wd/hub/session/xxxx/url
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: DATA {
  [1] [0-0]   url: 'data:text/html;base64,CiAgICAgICAgPGh0bWw.... LONG LIST OF CHARACTERS='
  [1] [0-0] }
  [1] [0-0] 2025-05-23T08:05:42.132Z ERROR @wdio/utils:shim: Error: WebDriverError: The operation was aborted due to timeout when running "url" with method "POST" and args "{"url":"data:text/html;base64,CiAgICAgICAgPGh0b.... LONG LIST OF CHARACTERS="}"
  [1] [0-0]     at FetchRequest._libRequest (file:///xxxxxxx/node_modules/webdriver/build/node.js:1836:13)
  [1] [0-0] 2025-05-23T08:05:42.132Z DEBUG @wdio/utils:shim: Finished to run "before" hook in 91147ms
  [1] [0-0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  [1] [0-0]     at async FetchRequest._request (file:///C:/xxxxxx/node_modules/webdriver/build/node.js:1846:20)
  [1] [0-0]     at Browser.wrapCommandFn (c:/Projects/xxxxxx/node_modules/@wdio/utils/build/index.js:907:23)
  [1] [0-0]     at Browser.url (c:/Projects/xxxxxxx/node_modules/webdriverio/build/node.js:5682:3)
  [1] [0-0]     at Browser.wrapCommandFn (c:/Projects/xxxxxx/node_modules/@wdio/utils/build/index.js:907:23)
  [1] [0-0]     at async loadBase64Html (file:///C:/Projects/xxxxxx/node_modules/webdriver-image-comparison/dist/helpers/utils.js:377:5)
  [1] [0-0]     at async getMobileViewPortPosition (file:///C:/Projects/xxxxxx/node_modules/webdriver-image-comparison/dist/helpers/utils.js:417:9)
  [1] [0-0]     at async getMobileInstanceData (file:///C:/Projects/xxxxxx/node_modules/@wdio/visual-service/dist/utils.js:58:28)
  [1] [0-0]     at async getInstanceData (file:///C:/Projects/xxxxxxx/node_modules/@wdio/visual-service/dist/utils.js:189:77)
  [1] [0-0] 2025-05-23T08:05:42.144Z INFO @wdio/browserstack-service: Update job with sessionId xxxxx
  

  This was caused by the await url(data:text/html;base64,${base64Html}) that injected the layer. Some browsers couldn't handle the data:text/html;base64.

  We now fixed that with a different injection. It was tested on Android/iOS and on Sims/Emus/Real Devices and it worked

  Improve determining if a device is emulated

  In a previous release we added a function to determine if a device was emulated. This resulted in incorrect screen sizes that were used for the files names for devices. This caused or failing baselines, or new files to be created because the screen sizes were not available
  We now improved the check and the correct screen sizes are added again to the file names and made sure that the previous generated base line could be used again.

  Committers: 1

  • Wim Selles (@wswebcreation)

@wdio/[email protected]

Patch Changes

• d88d8dd: Optimize Mobile and Emulated device support

  🐛 Bugfixes

  #969 Fix layer injection on mobile devices

  On some devices the layer injection, to determine the exact position of the webview, was failing. It exceeded the appium timeout and returned an error like

  [1] [0-0] 2025-05-23T08:04:11.788Z INFO webdriver: COMMAND getUrl()
  [1] [0-0] 2025-05-23T08:04:11.789Z INFO webdriver: [GET] https://hub-cloud.browserstack.com/wd/hub/session/xxxxx/url
  [1] [0-0] 2025-05-23T08:04:12.036Z INFO webdriver: RESULT about:blank
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: COMMAND navigateTo("data:text/html;base64,CiAgICAgICAgPG .... LONG LIST OF CHARACTERS=")
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: [POST] https://hub-cloud.browserstack.com/wd/hub/session/xxxx/url
  [1] [0-0] 2025-05-23T08:04:12.038Z INFO webdriver: DATA {
  [1] [0-0]   url: 'data:text/html;base64,CiAgICAgICAgPGh0bWw.... LONG LIST OF CHARACTERS='
  [1] [0-0] }
  [1] [0-0] 2025-05-23T08:05:42.132Z ERROR @wdio/utils:shim: Error: WebDriverError: The operation was aborted due to timeout when running "url" with method "POST" and args "{"url":"data:text/html;base64,CiAgICAgICAgPGh0b.... LONG LIST OF CHARACTERS="}"
  [1] [0-0]     at FetchRequest._libRequest (file:///xxxxxxx/node_modules/webdriver/build/node.js:1836:13)
  [1] [0-0] 2025-05-23T08:05:42.132Z DEBUG @wdio/utils:shim: Finished to run "before" hook in 91147ms
  [1] [0-0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  [1] [0-0]     at async FetchRequest._request (file:///C:/xxxxxx/node_modules/webdriver/build/node.js:1846:20)
  [1] [0-0]     at Browser.wrapCommandFn (c:/Projects/xxxxxx/node_modules/@wdio/utils/build/index.js:907:23)
  [1] [0-0]     at Browser.url (c:/Projects/xxxxxxx/node_modules/webdriverio/build/node.js:5682:3)
  [1] [0-0]     at Browser.wrapCommandFn (c:/Projects/xxxxxx/node_modules/@wdio/utils/build/index.js:907:23)
  [1] [0-0]     at async loadBase64Html (file:///C:/Projects/xxxxxx/node_modules/webdriver-image-comparison/dist/helpers/utils.js:377:5)
  [1] [0-0]     at async getMobileViewPortPosition (file:///C:/Projects/xxxxxx/node_modules/webdriver-image-comparison/dist/helpers/utils.js:417:9)
  [1] [0-0]     at async getMobileInstanceData (file:///C:/Projects/xxxxxx/node_modules/@wdio/visual-service/dist/utils.js:58:28)
  [1] [0-0]     at async getInstanceData (file:///C:/Projects/xxxxxxx/node_modules/@wdio/visual-service/dist/utils.js:189:77)
  [1] [0-0] 2025-05-23T08:05:42.144Z INFO @wdio/browserstack-service: Update job with sessionId xxxxx
  

  This was caused by the await url(data:text/html;base64,${base64Html}) that injected the layer. Some browsers couldn't handle the data:text/html;base64.

  We now fixed that with a different injection. It was tested on Android/iOS and on Sims/Emus/Real Devices and it worked

  Improve determining if a device is emulated

  In a previous release we added a function to determine if a device was emulated. This resulted in incorrect screen sizes that were used for the files names for devices. This caused or failing baselines, or new files to be created because the screen sizes were not available
  We now improved the check and the correct screen sizes are added again to the file names and made sure that the previous generated base line could be used again.

  Committers: 1

  • Wim Selles (@wswebcreation)

• Updated dependencies [d88d8dd]

  • [email protected]

[email protected]

Patch Changes

• 2f9ec42: ## 🐛 Bug-fixes

  #967: Emulated device crops with enableLegacyScreenshotMethod set to true are not correct

  When a screenshot of an emulated device is taken, but the browser was initially started as a "desktop" session, so not with emulated caps, and the enableLegacyScreenshotMethod property is set to true, the DPR of the emulated device is taken. This resulted in incorrect crop. We now store the original dpr and use that for the crop when it's an emulated device and started as a desktop browser session.

  BiDi Fullpage screenshots for emulated device are broken

  The BiDi fullpage screenshot for an emulated device is broken in the driver. We now fallback to the legacy screenshot method for BiDi and emulated devices

  💅 Polish

  • Updated the multiple interfaces to use JS-Doc for better docs
  • When createJsonReportFiles is set to true and there are a lot of differences we kept waiting. We now limited that to check a max of 5M diff-pixels or a diff threshold of 20%. If it's bigger the report will show a full coverage and extra logs are shown in the WDIO logs, something like this

  [0-0] 2025-05-24T06:02:18.887Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Processing diff pixels started
  [0-0] 2025-05-24T06:02:18.888Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Processing 20143900 diff pixels
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Total pixels in image: 52,184,160
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Number of diff pixels: 20,143,900
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Diff percentage: 38.60%
  [0-0] 2025-05-24T06:02:19.770Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Too many differences detected! Diff percentage: 38.60%, Diff pixels: 20,143,900
  [0-0] 2025-05-24T06:02:19.771Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: This likely indicates a major visual difference or an issue with the comparison.
  [0-0] 2025-05-24T06:02:19.771Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Consider checking if the baseline image is correct or if there are major UI changes.
  

  Committers: 1

  • Wim Selles (@wswebcreation)

@wdio/[email protected]

Patch Changes

• 2f9ec42: ## 🐛 Bug-fixes

  #967: Emulated device crops with enableLegacyScreenshotMethod set to true are not correct

  When a screenshot of an emulated device is taken, but the browser was initially started as a "desktop" session, so not with emulated caps, and the enableLegacyScreenshotMethod property is set to true, the DPR of the emulated device is taken. This resulted in incorrect crop. We now store the original dpr and use that for the crop when it's an emulated device and started as a desktop browser session.

  BiDi Fullpage screenshots for emulated device are broken

  The BiDi fullpage screenshot for an emulated device is broken in the driver. We now fallback to the legacy screenshot method for BiDi and emulated devices

  💅 Polish

  • Updated the multiple interfaces to use JS-Doc for better docs
  • When createJsonReportFiles is set to true and there are a lot of differences we kept waiting. We now limited that to check a max of 5M diff-pixels or a diff threshold of 20%. If it's bigger the report will show a full coverage and extra logs are shown in the WDIO logs, something like this

  [0-0] 2025-05-24T06:02:18.887Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Processing diff pixels started
  [0-0] 2025-05-24T06:02:18.888Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Processing 20143900 diff pixels
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Total pixels in image: 52,184,160
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Number of diff pixels: 20,143,900
  [0-0] 2025-05-24T06:02:19.770Z INFO @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Diff percentage: 38.60%
  [0-0] 2025-05-24T06:02:19.770Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Too many differences detected! Diff percentage: 38.60%, Diff pixels: 20,143,900
  [0-0] 2025-05-24T06:02:19.771Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: This likely indicates a major visual difference or an issue with the comparison.
  [0-0] 2025-05-24T06:02:19.771Z ERROR @wdio/visual-service:webdriver-image-comparison:pixelDiffProcessing: Consider checking if the baseline image is correct or if there are major UI changes.
  

  Committers: 1

  • Wim Selles (@wswebcreation)

• Updated dependencies [2f9ec42]

  • [email protected]

[email protected]

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)

@wdio/[email protected]

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)

• Updated dependencies [9363467]

  • [email protected]

[email protected]

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)

@wdio/[email protected]

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)

• Updated dependencies [5c6c6e2]

  • [email protected]

[email protected]

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

  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:

  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:

  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: Visual Testing Screenshot Behavior Changed in Emulated Devices

  Committers: 1

  • Wim Selles (@wswebcreation)

@wdio/[email protected]

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

  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:

  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:

  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: Visual Testing Screenshot Behavior Changed in Emulated Devices

  Committers: 1

  • Wim Selles (@wswebcreation)

Patch Changes

• Updated dependencies [bfe6aca]
  • [email protected]