Improve iPhone support

.changeset/light-pants-applaud.md

@@ -0,0 +1,15 @@
+---
+"webdriver-image-comparison": patch
+"@wdio/visual-service": patch
+---
+
+# 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

packages/webdriver-image-comparison/src/commands/checkAppElement.ts

@@ -42,7 +42,13 @@ export default async function checkAppElement(
     const executeCompareOptions = {
         devicePixelRatio,
         compareOptions: {
-            wic: checkElementOptions.wic.compareOptions,
+            wic: {
+                ...checkElementOptions.wic.compareOptions,
+                // No need to block out anything on the app for element screenshots
+                blockOutSideBar: false,
+                blockOutStatusBar: false,
+                blockOutToolBar: false,
+            },
             method: compareOptions,
         },
         fileName,

packages/webdriver-image-comparison/src/commands/checkWebElement.ts

@@ -48,7 +48,13 @@ export default async function checkWebElement(
     const executeCompareOptions = {
         devicePixelRatio,
         compareOptions: {
-            wic: checkElementOptions.wic.compareOptions,
+            wic: {
+                ...checkElementOptions.wic.compareOptions,
+                // No need to block out anything on the app for element screenshots
+                blockOutSideBar: false,
+                blockOutStatusBar: false,
+                blockOutToolBar: false,
+            },
             method: compareOptions,
         },
         fileName,

packages/webdriver-image-comparison/src/helpers/constants.ts

@@ -166,7 +166,7 @@ export const IOS_OFFSETS: IosOffsets = {
                 HOME_BAR: { x: 124, y: 829, height: 9, width: 143 },
             },
         },
-        // 14Pro|15 (dynamic island)
+        // 14Pro|15|16 (dynamic island)
         852: {
             LANDSCAPE: {
                 SAFE_AREA: 59,
@@ -181,6 +181,21 @@ export const IOS_OFFSETS: IosOffsets = {
                 HOME_BAR: { x: 125, y: 837, height: 9, width: 143 },
             },
         },
+        // 16 Pro (dynamic island)
+        874: {
+            LANDSCAPE: {
+                SAFE_AREA: 50,
+                STATUS_BAR: 0,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 324, y: 389, height: 9, width: 226 },
+            },
+            PORTRAIT: {
+                SAFE_AREA: 62,
+                STATUS_BAR: 62,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 129, y: 861, height: 9, width: 152 },
+            },
+        },
         // XSMax|XR|11|11ProMax (notch)
         896: {
             LANDSCAPE: {
@@ -211,7 +226,7 @@ export const IOS_OFFSETS: IosOffsets = {
                 HOME_BAR: { x: 136, y: 911, height: 9, width: 156 },
             },
         },
-        // 14ProMax (notch)
+        // 14ProMax|16 Plus (notch)
         932: {
             LANDSCAPE: {
                 SAFE_AREA: 59,
@@ -226,6 +241,21 @@ export const IOS_OFFSETS: IosOffsets = {
                 HOME_BAR: { x: 137, y: 917, height: 9, width: 158 },
             },
         },
+        // 16 Pro Max (dynamic island)
+        956: {
+            LANDSCAPE: {
+                SAFE_AREA: 50,
+                STATUS_BAR: 0,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 355, y: 427, height: 9, width: 246 },
+            },
+            PORTRAIT: {
+                SAFE_AREA: 62,
+                STATUS_BAR: 62,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 142, y: 943, height: 9, width: 158 },
+            },
+        },
     },
     IPAD: {
         // 9.7|Air 1/2|Mini 1/2/3/4/2019|Pro 9.7

packages/webdriver-image-comparison/src/methods/images.ts

@@ -25,6 +25,7 @@ import type {
 } from './images.interfaces.js'
 import type { FullPageScreenshotsData } from './screenshots.interfaces.js'
 import type { GetElementRect, TakeScreenShot } from './methods.interfaces.js'
+import type { RectanglesOutput } from './rectangles.interfaces.js'
 import type { CompareData, ComparisonIgnoreOption, ComparisonOptions } from '../resemble/compare.interfaces.js'
 import type { WicElement } from '../commands/element.interfaces.js'
 import { processDiffPixels } from './processDiffPixels.js'
@@ -368,7 +369,7 @@ export async function executeImageCompare(
 
     // 4b. Determine the ignore rectangles for the block outs
     const blockOut = 'blockOut' in imageCompareOptions ? imageCompareOptions.blockOut || [] : []
-    const webStatusAddressToolBarOptions = []
+    let webStatusAddressToolBarOptions: RectanglesOutput[] = []
 
     if (isMobile && !isNativeContext){
         const statusAddressToolBarOptions = {
@@ -383,6 +384,11 @@ export async function executeImageCompare(
             platformName,
         }
         webStatusAddressToolBarOptions.push(...(await determineStatusAddressToolBarRectangles(executor, statusAddressToolBarOptions)) || [])
+        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
+            webStatusAddressToolBarOptions = webStatusAddressToolBarOptions.filter((rectangle) => !(rectangle.x === 0 && rectangle.y === 0 && rectangle.width === 0 && rectangle.height === 0))
+        }
     }
     const ignoredBoxes = [
         // These come from the method