fix: previous fix for iOS reduced multiple ignore selectors to one

- add new tests
- add new images

Author: wswebcreation

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

@@ -32,7 +32,9 @@ describe('rectangles', () => {
 
         mockBrowserInstance = {
             execute: mockExecute,
-            getElementRect: mockGetElementRect
+            getElementRect: mockGetElementRect,
+            $: vi.fn(),
+            $$: vi.fn(),
         } as unknown as WebdriverIO.Browser
     })
 
@@ -772,19 +774,20 @@ describe('rectangles', () => {
             desktopOptions.browserInstance = mockBrowserInstance
         })
 
-        it('should resolve elements via raw BCR on desktop and apply DPR', async () => {
+        it('should resolve elements via raw BCR on desktop and apply DPR without re-querying', async () => {
             const mockElement = { elementId: 'el1', selector: '.nav' } as WebdriverIO.Element
             mockExecute.mockResolvedValueOnce({ x: 10, y: 20, width: 200, height: 50 })
 
             const result = await determineWebScreenIgnoreRegions(desktopOptions, [mockElement])
 
             expect(mockExecute).toHaveBeenCalledOnce()
+            expect(mockBrowserInstance.$).not.toHaveBeenCalled()
             expect(result).toEqual([
                 { x: 20, y: 40, width: 400, height: 100 },
             ])
         })
 
-        it('should add DPR-scaled viewport offset on iOS', async () => {
+        it('should add DPR-scaled viewport offset on iOS and re-query elements via $$', async () => {
             const iosDeviceRectangles = {
                 ...baseDeviceRectangles,
                 viewport: { y: 94, x: 0, width: 390, height: 650 },
@@ -796,18 +799,59 @@ describe('rectangles', () => {
                 isIOS: true,
             }
             const mockElement = { elementId: 'el1', selector: '.hero' } as WebdriverIO.Element
+            const freshElement = { elementId: 'el1-fresh', selector: '.hero' } as unknown as WebdriverIO.Element
+            vi.mocked(mockBrowserInstance.$$).mockResolvedValueOnce([freshElement] as any)
             mockExecute.mockResolvedValueOnce({ x: 0, y: 100, width: 390, height: 200 })
 
             const result = await determineWebScreenIgnoreRegions(iosOptions, [mockElement])
 
-            // iOS viewport offset added in CSS space, then floor/ceil for DPR:
-            // x: floor((0+0)*3)=0, y: floor((100+94)*3)=582
-            // right: ceil((0+390)*3)=1170, bottom: ceil((100+200+94)*3)=1182
+            expect(mockBrowserInstance.$$).toHaveBeenCalledWith('.hero')
+            expect(mockBrowserInstance.$).not.toHaveBeenCalled()
             expect(result).toEqual([
                 { x: 0, y: 582, width: 1170, height: 600 },
             ])
         })
 
+        it('should correctly resolve multiple elements sharing the same selector on iOS', async () => {
+            const iosDeviceRectangles = {
+                ...baseDeviceRectangles,
+                viewport: { y: 94, x: 0, width: 390, height: 650 },
+            }
+            const iosOptions = {
+                ...desktopOptions,
+                devicePixelRatio: 1,
+                deviceRectangles: iosDeviceRectangles,
+                isIOS: true,
+            }
+            const el1 = { elementId: 'a', selector: '.card' } as WebdriverIO.Element
+            const el2 = { elementId: 'b', selector: '.card' } as WebdriverIO.Element
+            const el3 = { elementId: 'c', selector: '.card' } as WebdriverIO.Element
+
+            const fresh1 = { elementId: 'f1', selector: '.card' } as unknown as WebdriverIO.Element
+            const fresh2 = { elementId: 'f2', selector: '.card' } as unknown as WebdriverIO.Element
+            const fresh3 = { elementId: 'f3', selector: '.card' } as unknown as WebdriverIO.Element
+            vi.mocked(mockBrowserInstance.$$).mockResolvedValueOnce([fresh1, fresh2, fresh3] as any)
+
+            mockExecute
+                .mockResolvedValueOnce({ x: 0, y: 100, width: 390, height: 50 })
+                .mockResolvedValueOnce({ x: 0, y: 200, width: 390, height: 50 })
+                .mockResolvedValueOnce({ x: 0, y: 300, width: 390, height: 50 })
+
+            const result = await determineWebScreenIgnoreRegions(iosOptions, [[el1, el2, el3]])
+
+            // $$ called once for the shared selector, not $ three times
+            expect(mockBrowserInstance.$$).toHaveBeenCalledTimes(1)
+            expect(mockBrowserInstance.$$).toHaveBeenCalledWith('.card')
+            // execute called with each fresh element
+            expect(mockExecute).toHaveBeenCalledTimes(3)
+            // Each region has different y (viewport offset 94 added)
+            expect(result).toEqual([
+                { x: 0, y: 194, width: 390, height: 50 },
+                { x: 0, y: 294, width: 390, height: 50 },
+                { x: 0, y: 394, width: 390, height: 50 },
+            ])
+        })
+
         it('should add device-pixel viewport offset on Android native web screenshot', async () => {
             const androidDeviceRectangles = {
                 ...baseDeviceRectangles,

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

@@ -297,9 +297,36 @@ export async function determineWebScreenIgnoreRegions(
         return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
     }
     const regionsFromElements: RectanglesOutput[] = []
-    for (const element of elements) {
-        const bcr = await browserInstance.execute(rawBcr, element as any) as RectanglesOutput
-        regionsFromElements.push(bcr)
+    if (isIOS && elements.length > 0) {
+        // iOS Safari invalidates element references when the DOM is mutated
+        // (e.g. by beforeScreenshot CSS injection). Re-query to get fresh refs.
+        // Use $$ per unique selector so multiple elements sharing the same
+        // selector (e.g. from a $$ call) each resolve to the correct match.
+        const selectorCache = new Map<string, WebdriverIO.Element[]>()
+        const selectorIndex = new Map<string, number>()
+
+        for (const element of elements) {
+            const selector = element.selector as string
+
+            if (!selectorCache.has(selector)) {
+                const fresh = await browserInstance.$$(selector)
+                selectorCache.set(selector, fresh as unknown as WebdriverIO.Element[])
+                selectorIndex.set(selector, 0)
+            }
+
+            const idx = selectorIndex.get(selector)!
+            const cached = selectorCache.get(selector)!
+            const el = idx < cached.length ? cached[idx] : element
+            selectorIndex.set(selector, idx + 1)
+
+            const bcr = await browserInstance.execute(rawBcr, el as any) as RectanglesOutput
+            regionsFromElements.push(bcr)
+        }
+    } else {
+        for (const element of elements) {
+            const bcr = await browserInstance.execute(rawBcr, element as any) as RectanglesOutput
+            regionsFromElements.push(bcr)
+        }
     }
 
     return [...regions, ...regionsFromElements]

tests/configs/wdio.local.appium.shared.conf.ts

@@ -7,22 +7,23 @@ export const config: Omit<WebdriverIO.Config, 'capabilities'>  = {
     // ===================
     // Image compare setup
     // ===================
+    port: 4723,
     services: [
         ...sharedConfig.services || [],
-        [
-            'appium',
-            {
-                // This will use the globally installed version of Appium
-                command: 'appium',
-                args: {
-                    // This is needed to tell Appium that we can execute local ADB commands
-                    // and to automatically download the latest version of ChromeDriver
-                    relaxedSecurity: true,
-                    // Write the Appium logs to a file in the root of the directory
-                    log: './logs/appium.log',
-                },
-            },
-        ],
+        // [
+        //     'appium',
+        //     {
+        //         // This will use the globally installed version of Appium
+        //         command: 'appium',
+        //         args: {
+        //             // This is needed to tell Appium that we can execute local ADB commands
+        //             // and to automatically download the latest version of ChromeDriver
+        //             relaxedSecurity: true,
+        //             // Write the Appium logs to a file in the root of the directory
+        //             log: './logs/appium.log',
+        //         },
+        //     },
+        // ],
         [
             'visual',
             {

tests/lambdaTestBaseline/iphone_13_mini/ignoredElementsScreenshot-Iphone13MiniPortrait17-375x812.png

@@ -60,6 +60,10 @@ describe('@wdio/visual-service mobile web', () => {
         it(`should compare a screen with ignore elements successful for '${deviceName}' with ${platformName}:${platformVersion} in ${orientation}-mode`, async function () {
             skipTest({ test: this, deviceName, platformName, platformVersion, orientation })
 
+            // When running a new set of images then first comment out block 1 and 2. Then run the test.
+            // Then uncomment block 1, check if they fail with `--store-diffs` as an extra argument.
+            // If so, then uncomment block 2 and check if pass with the same arguments.
+            // Block 1
             await browser.execute(() => {
                 document.querySelectorAll('.getStarted_Sjon').forEach(link => {
                     (link as HTMLElement).style.backgroundColor = 'var(--ifm-font-color-base)'
@@ -70,6 +74,7 @@ describe('@wdio/visual-service mobile web', () => {
             // We're accepting 0.05%, which is 500 pixels, to be a max difference
             const result = await browser.checkScreen(
                 'ignoredElementsScreenshot', {
+                    // Block 2
                     ignore: [
                         await $$('.getStarted_Sjon'),
                     ],
@@ -211,6 +216,38 @@ const skipRules: SkipRule[] = [
         orientations: ['landscape', 'portrait'],
         reason: 'Elements not visible in the screenshot, no value in testing',
     },
+    {
+        titleIncludes: 'ignore elements',
+        deviceName: 'iPhone 13 mini',
+        platformName: 'iOS',
+        platformVersions: ['17.5'],
+        orientations: ['landscape'],
+        reason: 'Elements not visible in the screenshot, no value in testing',
+    },
+    {
+        titleIncludes: 'ignore elements',
+        deviceName: 'iPhone 13 Pro',
+        platformName: 'iOS',
+        platformVersions: ['16.0'],
+        orientations: ['landscape'],
+        reason: 'Elements not visible in the screenshot, no value in testing',
+    },
+    {
+        titleIncludes: 'ignore elements',
+        deviceName: 'iPhone 14 Pro',
+        platformName: 'iOS',
+        platformVersions: ['17.5'],
+        orientations: ['landscape'],
+        reason: 'Elements not visible in the screenshot, no value in testing',
+    },
+    {
+        titleIncludes: 'ignore elements',
+        deviceName: 'iPhone 15 Pro Max',
+        platformName: 'iOS',
+        platformVersions: ['18.0'],
+        orientations: ['landscape'],
+        reason: 'Elements not visible in the screenshot, no value in testing',
+    },
 ]
 function skipTest({ test, deviceName, platformName, platformVersion, orientation }: {
     test: Mocha.Context