webdriver-image-comparison

7.3.1

Patch Changes

69d25fe: Multiple fixes:
- update deps
- fix #728: Missing Type Information in Service Configuration
- fix #745: The image comparison process stalls when utilizing the checkElement method to compare screenshots of two different elements

7.3.0

Minor Changes

2d033e8: #691 Add option to ignore blinking cursors / carets

Patch Changes

Updated dependencies [2d033e8]

7.2.2

Patch Changes

4a4adf1: Fix resize dimensions for mobile
4a4adf1: update deps

7.2.1

Patch Changes

1df5350: # Improve iPhone support

💅 Polish @wdio/visual-reporter
- Mobile: support iOS 18 and the iPhone 16 series for the blockouts
🐛 Bugs fixed @wdio/visual-reporter
- Mobile: don't use the device blockouts for element screenshot
- Mobile: when the blockouts had the value {x: 0, y: 0, width: 0, height: 0} then Resemble picked this up as a full blockout. This caused false positives for iOS

7.2.0

Minor Changes

786248e: Upgrade Jimp to the latest major

7.1.0

Minor Changes

💅 New Feature: Remove diff image before comparing

This solves the issue 425 of removing a diff image from the diff folder for success. We now remove the "previous" diff image before we execute the compare so we also have the latest, or we now have a diff image after a retry where the first run failed and produced an image and a new successful run.

💅 Update dependencies

We've update all dependencies.

Committers: 1

Wim Selles (@wswebcreation)

7.0.0

Major Changes

9fdb2d2: feat: work with V9

6.1.1

Patch Changes

85a1d82: # 🐛 Bug Fixes

Fix issues:
- 438: resizeDimensions not working
- 448: hideElements and removeElements` don't work for native apps
💅 Polish
- update dependencies
Committers: 1
- Wim Selles (@wswebcreation)

6.1.0

Minor Changes

0b01b64: ### @wdio/visual-service

🚀 New Features

Added Reporting output You now have the option to export the compare results into a JSON report file. By enabling the module option createJsonReportFiles: true, each image that is compared will create a report stored in the actual folder, next to each actual image result.

The output will look like this:

{
  "parent": "check methods",
  "test": "should fail comparing with a baseline",
  "tag": "examplePageFail",
  "instanceData": {
    "browser": {
      "name": "chrome-headless-shell",
      "version": "126.0.6478.183"
    },
    "platform": {
      "name": "mac",
      "version": "not-known"
    }
  },
  "commandName": "checkScreen",
  "boundingBoxes": {
    "diffBoundingBoxes": [
      {
        "left": 1088,
        "top": 717,
        "right": 1186,
        "bottom": 730
      }
      //....
    ],
    "ignoredBoxes": [
      {
        "left": 159,
        "top": 652,
        "right": 356,
        "bottom": 703
      }
      //...
    ]
  },
  "fileData": {
    "actualFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
    "baselineFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
    "diffFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
    "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
    "size": {
      "actual": {
        "height": 768,
        "width": 1366
      },
      "baseline": {
        "height": 768,
        "width": 1366
      },
      "diff": {
        "height": 768,
        "width": 1366
      }
    }
  },
  "misMatchPercentage": "12.90",
  "rawMisMatchPercentage": 12.900729014153246
}

When all tests are executed, a new JSON file with the collection of the comparisons will be generated and can be found in the root of your actual folder. The data is grouped by:

describe for Jasmine/Mocha or Feature for CucumberJS
it for Jasmine/Mocha or Scenario for CucumberJS

and then sorted by:

commandName, which are the compare method names used to compare the images
instanceData, browser first, then device, then platform

it will look like this

[
  {
    "description": "check methods",
    "data": [
      {
        "test": "should fail comparing with a baseline",
        "data": [
          {
            "tag": "examplePageFail",
            "instanceData": {},
            "commandName": "checkScreen",
            "framework": "mocha",
            "boundingBoxes": {
              "diffBoundingBoxes": [],
              "ignoredBoxes": []
            },
            "fileData": {},
            "misMatchPercentage": "14.34",
            "rawMisMatchPercentage": 14.335403703025868
          },
          {
            "tag": "exampleElementFail",
            "instanceData": {},
            "commandName": "checkElement",
            "framework": "mocha",
            "boundingBoxes": {
              "diffBoundingBoxes": [],
              "ignoredBoxes": []
            },
            "fileData": {},
            "misMatchPercentage": "1.34",
            "rawMisMatchPercentage": 1.335403703025868
          }
        ]
      }
    ]
  }
]

The report data will give you the opportunity to build your own visual report without doing all the magic and data collection yourself.