fix: incorrect determination of ignore area

.changeset/twenty-apes-pump.md

@@ -0,0 +1,14 @@
+---
+"@wdio/image-comparison-core": patch
+"@wdio/visual-service": patch
+---
+
+# 🐛 Bugfixes
+
+## #1038 fix incorrect determination of ignore area
+Ignore regions with `left: 0` and `right:0` lead to an incorrect width which lead to an incorrect ignore area. This is now fixed
+
+
+# Committers: 1
+
+-   Wim Selles ([@wswebcreation](https://github.com/wswebcreation))

packages/image-comparison-core/src/methods/__snapshots__/rectangles.test.ts.snap

@@ -347,18 +347,6 @@ exports[`rectangles > prepareIgnoreRectangles > should include mobile web rectan
     "right": 2688,
     "top": 5842,
   },
-  {
-    "bottom": 5842,
-    "left": 0,
-    "right": 0,
-    "top": 640,
-  },
-  {
-    "bottom": 5842,
-    "left": 2688,
-    "right": 2688,
-    "top": 640,
-  },
 ]
 `;
 

packages/image-comparison-core/src/methods/rectangles.ts

@@ -335,9 +335,12 @@ export function prepareIgnoreRectangles(options: PrepareIgnoreRectanglesOptions)
 
         if (webStatusAddressToolBarOptions.length > 0) {
             // There's an issue with the resemble lib when all the rectangles are 0,0,0,0, it will see this as a full
-            // blockout of the image and the comparison will succeed with 0 % difference
+            // blockout of the image and the comparison will succeed with 0 % difference.
+            // Additionally, rectangles with either width or height equal to 0 will result in an entire axis being ignored
+            // due to how resemble handles falsy values. Filter those out up front.
             webStatusAddressToolBarOptions = webStatusAddressToolBarOptions
                 .filter((rectangle) => !(rectangle.x === 0 && rectangle.y === 0 && rectangle.width === 0 && rectangle.height === 0))
+                .filter((rectangle) => rectangle.width > 0 && rectangle.height > 0)
         }
     }
 

tests/configs/wdio.saucelabs.shared.conf.ts

@@ -49,6 +49,7 @@ export const config: WebdriverIO.Config  = {
                 createJsonReportFiles: true,
                 rawMisMatchPercentage: !!process.env.RAW_MISMATCH || false,
                 enableLayoutTesting: true,
+                ignoreAntialiasing: true,
             } satisfies VisualServiceOptions,
         ],
     ],