feat: implement ignore for web

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

@@ -30,6 +30,7 @@ exports[`BaseClass > initializes default options correctly 1`] = `
   "formatImageName": "{tag}-{browserName}-{width}x{height}-dpr-{dpr}",
   "fullPageScrollTimeout": 1500,
   "hideScrollBars": true,
+  "ignoreRegionPadding": 1,
   "isHybridApp": false,
   "savePerInstance": false,
   "tabbableOptions": {

packages/image-comparison-core/src/base.interfaces.ts

@@ -51,6 +51,13 @@ export interface BaseWebScreenshotOptions {
      * @default true
      */
     hideScrollBars?: boolean;
+    /**
+     * Padding in device pixels added to each side of ignore regions (makes each region 2× this value wider and higher).
+     * Helps avoid 1px boundary differences on high-DPR / BiDi. Set to 0 to disable.
+     * Applies to screen, element, and full-page web methods.
+     * @default 1
+     */
+    ignoreRegionPadding?: number;
     /**
      * Elements to hide before taking screenshot
      * @default []

packages/image-comparison-core/src/clientSideScripts/injectWebviewOverlay.test.ts

@@ -67,6 +67,40 @@ describe('injectWebviewOverlay', () => {
         })
     })
 
+    it('should preserve float precision with non-integer DPR (Android)', () => {
+        Object.defineProperty(window, 'devicePixelRatio', {
+            value: 2.625,
+            configurable: true,
+        })
+        Object.defineProperty(window, 'innerWidth', {
+            value: 412,
+            configurable: true,
+        })
+        Object.defineProperty(document.documentElement, 'clientHeight', {
+            value: 363,
+            configurable: true,
+        })
+
+        injectWebviewOverlay(true)
+
+        const overlay = document.querySelector('[data-test="ics-overlay"]') as HTMLDivElement
+        const event = new window.MouseEvent('click', {
+            clientX: 206,
+            clientY: 181,
+            bubbles: true,
+        })
+        overlay.dispatchEvent(event)
+
+        const parsedData = JSON.parse(overlay.dataset.icsWebviewData!)
+
+        expect(parsedData).toEqual({
+            x: 206 * 2.625,
+            y: 181 * 2.625,
+            width: 412 * 2.625,
+            height: 363 * 2.625,
+        })
+    })
+
     it('should use DPR = 1 for iOS (isAndroid = false)', () => {
         injectWebviewOverlay(false)
 

packages/image-comparison-core/src/clientSideScripts/injectWebviewOverlay.ts

@@ -21,10 +21,10 @@ export function injectWebviewOverlay(isAndroid: boolean): void {
     overlay.onclick = (event) => {
         const { clientX: x, clientY: y } = event
         const data = {
-            x: Math.round(x * dpr),
-            y: Math.round(y * dpr),
-            width: Math.round(window.innerWidth * dpr),
-            height: Math.round(document.documentElement.clientHeight * dpr),
+            x: x * dpr,
+            y: y * dpr,
+            width: window.innerWidth * dpr,
+            height: document.documentElement.clientHeight * dpr,
         }
 
         overlay.dataset.icsWebviewData = JSON.stringify(data)

packages/image-comparison-core/src/clientSideScripts/scrollElementIntoView.test.ts

@@ -69,7 +69,8 @@ describe('scrollElementIntoView', () => {
         const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
 
         expect(result).toBe(50)
-        expect(mockHtmlNode.scrollTop).toBe(90)
+        // Document y = currentScroll(50) + BCR.top(100) - padding(10) = 140
+        expect(mockHtmlNode.scrollTop).toBe(140)
     })
 
     it('should return current scroll position when body node has scroll', () => {
@@ -80,7 +81,19 @@ describe('scrollElementIntoView', () => {
         const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
 
         expect(result).toBe(50)
-        expect(mockBodyNode.scrollTop).toBe(90)
+        // Document y = currentScroll(50) + BCR.top(100) - padding(10) = 140
+        expect(mockBodyNode.scrollTop).toBe(140)
+    })
+
+    it('should not re-scroll when element is already at the viewport top', () => {
+        mockHtmlNode.scrollTop = 600
+        ;(mockElement.getBoundingClientRect as ReturnType<typeof vi.fn>).mockReturnValue({ top: 0 })
+        const addressBarShadowPadding = 0
+        const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
+
+        expect(result).toBe(600)
+        // Document y = currentScroll(600) + BCR.top(0) - padding(0) = 600 (stays put)
+        expect(mockHtmlNode.scrollTop).toBe(600)
     })
 
     it('should not scroll when neither html nor body is scrollable', () => {

packages/image-comparison-core/src/clientSideScripts/scrollElementIntoView.ts

@@ -19,7 +19,10 @@ export default function scrollElementIntoView(element: HTMLElement, addressBarSh
     }
 
     const { top } = element.getBoundingClientRect()
-    const yPosition = top - addressBarShadowPadding
+    // BCR.top is viewport-relative, so the element's document position is
+    // currentPosition + top. Scroll there (minus padding) to place the
+    // element at the viewport top.
+    const yPosition = currentPosition + top - addressBarShadowPadding
 
     // Scroll to the position
     if (htmlNode.scrollHeight > htmlNode.clientHeight) {

packages/image-comparison-core/src/commands/__snapshots__/checkFullPageScreen.test.ts.snap

@@ -96,6 +96,8 @@ exports[`checkFullPageScreen > should execute checkFullPageScreen with basic opt
         "hideAfterFirstScroll": [],
         "hideElements": [],
         "hideScrollBars": true,
+        "ignore": undefined,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },
@@ -328,6 +330,8 @@ exports[`checkFullPageScreen > should handle all full page specific options 1`]
         "hideAfterFirstScroll": [],
         "hideElements": [],
         "hideScrollBars": false,
+        "ignore": undefined,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": false,
       },
@@ -479,6 +483,8 @@ exports[`checkFullPageScreen > should handle hideAfterFirstScroll correctly 1`]
         ],
         "hideElements": [],
         "hideScrollBars": true,
+        "ignore": undefined,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },
@@ -630,6 +636,8 @@ exports[`checkFullPageScreen > should handle hideElements and removeElements cor
           },
         ],
         "hideScrollBars": true,
+        "ignore": undefined,
+        "ignoreRegionPadding": undefined,
         "removeElements": [
           {
             "elementId": "remove-element",
@@ -867,6 +875,8 @@ exports[`checkFullPageScreen > should handle undefined method options with fallb
         "hideAfterFirstScroll": [],
         "hideElements": [],
         "hideScrollBars": true,
+        "ignore": undefined,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },

packages/image-comparison-core/src/commands/__snapshots__/checkWebElement.test.ts.snap

@@ -25,6 +25,7 @@ exports[`checkWebElement > should execute checkWebElement with basic options 2`]
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -97,6 +98,7 @@ exports[`checkWebElement > should execute checkWebElement with basic options 2`]
         "enableLegacyScreenshotMethod": false,
         "hideElements": [],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "resizeDimensions": undefined,
         "waitForFontsLoaded": true,
@@ -425,6 +427,7 @@ exports[`checkWebElement > should handle custom element options 1`] = `
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -505,6 +508,7 @@ exports[`checkWebElement > should handle custom element options 1`] = `
           },
         ],
         "hideScrollBars": false,
+        "ignoreRegionPadding": undefined,
         "removeElements": [
           {
             "elementId": "remove-element",
@@ -764,6 +768,7 @@ exports[`checkWebElement > should handle undefined method options with fallbacks
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -836,6 +841,7 @@ exports[`checkWebElement > should handle undefined method options with fallbacks
         "enableLegacyScreenshotMethod": false,
         "hideElements": [],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "resizeDimensions": undefined,
         "waitForFontsLoaded": true,

packages/image-comparison-core/src/commands/__snapshots__/checkWebScreen.test.ts.snap

@@ -22,6 +22,7 @@ exports[`checkWebScreen > should execute checkWebScreen with basic options 2`] =
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -95,6 +96,7 @@ exports[`checkWebScreen > should execute checkWebScreen with basic options 2`] =
         "enableLegacyScreenshotMethod": false,
         "hideElements": [],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },
@@ -333,6 +335,7 @@ exports[`checkWebScreen > should handle all method options correctly 1`] = `
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -414,6 +417,7 @@ exports[`checkWebScreen > should handle all method options correctly 1`] = `
           },
         ],
         "hideScrollBars": false,
+        "ignoreRegionPadding": undefined,
         "removeElements": [
           {
             "elementId": "remove-element",
@@ -577,6 +581,7 @@ exports[`checkWebScreen > should handle hideElements and removeElements correctl
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -658,6 +663,7 @@ exports[`checkWebScreen > should handle hideElements and removeElements correctl
           },
         ],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [
           {
             "elementId": "test-element",
@@ -821,6 +827,7 @@ exports[`checkWebScreen > should handle native context correctly 1`] = `
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -894,6 +901,7 @@ exports[`checkWebScreen > should handle native context correctly 1`] = `
         "enableLegacyScreenshotMethod": false,
         "hideElements": [],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },
@@ -1049,6 +1057,7 @@ exports[`checkWebScreen > should merge compare options correctly 1`] = `
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",
@@ -1122,6 +1131,7 @@ exports[`checkWebScreen > should merge compare options correctly 1`] = `
         "enableLegacyScreenshotMethod": false,
         "hideElements": [],
         "hideScrollBars": true,
+        "ignoreRegionPadding": undefined,
         "removeElements": [],
         "waitForFontsLoaded": true,
       },

packages/image-comparison-core/src/commands/__snapshots__/saveElement.test.ts.snap

@@ -185,6 +185,7 @@ exports[`saveElement > should execute saveWebElement when isNativeContext is fal
       "baselineFolder": "/test/baseline",
       "diffFolder": "/test/diff",
     },
+    "ignore": undefined,
     "instanceData": {
       "appName": "TestApp",
       "browserName": "Chrome",

packages/image-comparison-core/src/commands/check.interfaces.ts

@@ -15,7 +15,7 @@ export interface CheckMethodOptions extends BaseImageCompareOptions, BaseMobileB
     /**
      * Ignore elements and or areas
      */
-    ignore?: ElementIgnore[];
+    ignore?: (ElementIgnore | ElementIgnore[])[];
 }
 
 export interface InternalCheckMethodOptions extends InternalSaveMethodOptions {

packages/image-comparison-core/src/commands/checkFullPageScreen.ts

@@ -31,6 +31,7 @@ export default async function checkFullPageScreen(
         hideAfterFirstScroll = [],
         hideScrollBars,
         hideElements = [],
+        ignoreRegionPadding,
         removeElements = [],
         waitForFontsLoaded,
     } = checkFullPageOptions.method
@@ -52,11 +53,13 @@ export default async function checkFullPageScreen(
             hideAfterFirstScroll,
             hideScrollBars,
             hideElements,
+            ignore: checkFullPageOptions.method.ignore,
+            ignoreRegionPadding,
             removeElements,
             waitForFontsLoaded,
         },
     }
-    const { devicePixelRatio, fileName, base64Image } = await saveFullPageScreen({
+    const { devicePixelRatio, fileName, base64Image, ignoreRegions } = await saveFullPageScreen({
         browserInstance,
         folders,
         instanceData,
@@ -73,6 +76,9 @@ export default async function checkFullPageScreen(
         methodCompareOptions: compareOptions,
         devicePixelRatio,
         fileName,
+        additionalProperties: {
+            ignoreRegions: ignoreRegions || [],
+        },
     })
 
     // 5. Now execute the compare and return the data

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

@@ -30,6 +30,7 @@ export default async function checkWebElement(
         enableLegacyScreenshotMethod,
         hideScrollBars,
         resizeDimensions,
+        ignoreRegionPadding,
         hideElements = [],
         removeElements = [],
         waitForFontsLoaded = false,
@@ -45,17 +46,19 @@ export default async function checkWebElement(
             enableLegacyScreenshotMethod,
             hideScrollBars,
             resizeDimensions,
+            ignoreRegionPadding,
             hideElements,
             removeElements,
             waitForFontsLoaded,
         },
     }
-    const { devicePixelRatio, fileName, base64Image } = await saveWebElement({
+    const { devicePixelRatio, fileName, base64Image, ignoreRegions } = await saveWebElement({
         browserInstance,
         instanceData,
         folders,
         element,
         tag,
+        ignore: checkElementOptions.method.ignore,
         saveElementOptions,
     })
 
@@ -68,6 +71,9 @@ export default async function checkWebElement(
         devicePixelRatio,
         fileName,
         isElementScreenshot: true,
+        additionalProperties: {
+            ignoreRegions: ignoreRegions || [],
+        },
     })
 
     // 4. Now execute the compare and return the data