changes for passing coordinates in ignore select region

Author: Nick-1234531

src/lib/processSnapshot.ts

@@ -1,5 +1,5 @@
 import { Snapshot, Context, DiscoveryErrors } from "../types.js";
-import { scrollToBottomAndBackToTop, getRenderViewports, getRenderViewportsForOptions } from "./utils.js"
+import { scrollToBottomAndBackToTop, getRenderViewports, getRenderViewportsForOptions, validateCoordinates } from "./utils.js"
 import { chromium, Locator } from "@playwright/test"
 import constants from "./constants.js";
 import { updateLogContext } from '../lib/logger.js'
@@ -126,6 +126,9 @@ export async function prepareSnapshot(snapshot: Snapshot, ctx: Context): Promise
                     case 'cssSelector':
                         selectors.push(...value);
                         break;
+                    case 'coordinates':
+                        selectors.push(...value.map(e => `coordinates=${e}`));
+                        break;
                 }
             }
         }
@@ -500,6 +503,9 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
                     case 'cssSelector':
                         selectors.push(...value);
                         break;
+                    case 'coordinates':
+                        selectors.push(...value.map(e => `coordinates=${e}`));
+                        break;
                 }
             }
         }
@@ -663,14 +669,56 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
             if (!Array.isArray(processedOptions[ignoreOrSelectBoxes][viewportString])) processedOptions[ignoreOrSelectBoxes][viewportString] = []
 
             for (const selector of selectors) {
+                // Handle coordinates validation
+                if (selector.startsWith('coordinates=')) {
+                    const coordString = selector.replace('coordinates=', '');
+                    const viewportSize = await page.viewportSize();
+                    
+                    if (!viewportSize) {
+                        optionWarnings.add(`for snapshot ${snapshot.name} viewport ${viewportString}, unable to get viewport size for coordinate validation`);
+                        continue;
+                    }
+                    
+                    const validation = validateCoordinates(coordString, viewportSize, snapshot.name, viewportString);
+
+                    
+                    if (!validation.valid) {
+                        optionWarnings.add(validation.error!);
+                        continue;
+                    }
+                    
+                    // Coordinates are valid - create a coordinate element
+                    const coordinateElement = { 
+                        type: 'coordinates', 
+                        ...validation.coords
+                    };
+                    locators.push(coordinateElement as any);
+                    continue;
+                }
+                
                 let l = await page.locator(selector).all()
                 if (l.length === 0) {
                     optionWarnings.add(`for snapshot ${snapshot.name} viewport ${viewportString}, no element found for selector ${selector}`);
                     continue;
                 }
                 locators.push(...l);
             }
+
             for (const locator of locators) {
+                if (locator && typeof locator === 'object' && locator.hasOwnProperty('type') && (locator as any).type === 'coordinates') {
+                    const coordLocator = locator as any;
+                    const { top, bottom, left, right } = coordLocator;
+                    console.log(`locator: ${JSON.stringify(locator)}`);
+                    // Coordinates already validated, push directly
+                    processedOptions[ignoreOrSelectBoxes][viewportString].push({
+                        left: left,
+                        top: top,
+                        right: right,
+                        bottom: bottom
+                    });
+                    continue;
+                }
+                
                 let bb = await locator.boundingBox();
                 if (bb) {
                     // Calculate top and bottom from the bounding box properties
@@ -738,3 +786,5 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
         discoveryErrors: discoveryErrors
     }
 }
+
+

src/lib/utils.ts

@@ -509,4 +509,76 @@ export function calculateVariantCountFromSnapshot(snapshot: any, globalConfig?:
     }
 
     return variantCount;
-} 
+} 
+
+export function validateCoordinates(
+    coordString: string, 
+    viewportSize: { width: number, height: number },
+    snapshotName: string,
+    viewportString: string
+): { valid: boolean, error?: string, coords?: { top: number, bottom: number, left: number, right: number } } {
+    
+    // Parse coordinates
+    const coords = coordString.split(',').map(Number);
+    
+    // Check format
+    if (coords.length !== 4) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, invalid coordinates format: ${coordString}. Expected: top,bottom,left,right` 
+        };
+    }
+    
+    const [top, bottom, left, right] = coords;
+    
+    // Check if all values are numbers
+    if (coords.some(isNaN)) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, invalid coordinate values: ${coordString}. All values must be numbers` 
+        };
+    }
+    
+    // Check coordinate bounds
+    if (top < 0 || left < 0 || bottom < 0 || right < 0) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, invalid coordinate bounds: ${coordString}. top,left,bottom,right must be >= 0` 
+        };
+    }
+    
+    if (top >= bottom) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, invalid coordinate bounds: ${coordString}. top must be < bottom` 
+        };
+    }
+    
+    if (left >= right) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, invalid coordinate bounds: ${coordString}. left must be < right` 
+        };
+    }
+    
+    // Check viewport bounds
+    if (bottom > viewportSize.height) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, coordinates exceed viewport bounds: ${coordString}. bottom (${bottom}) exceeds viewport height (${viewportSize.height})` 
+        };
+    }
+    
+    if (right > viewportSize.width) {
+        return { 
+            valid: false, 
+            error: `for snapshot ${snapshotName} viewport ${viewportString}, coordinates exceed viewport bounds: ${coordString}. right (${right}) exceeds viewport width (${viewportSize.width})` 
+        };
+    }
+    
+    // All validations passed
+    return { 
+        valid: true, 
+        coords: { top, bottom, left, right } 
+    };
+}

src/types.ts

@@ -122,13 +122,15 @@ export interface Snapshot {
             id?: Array<string>,
             class?: Array<string>,
             cssSelector?: Array<string>,
-            xpath?: Array<string>
+            xpath?: Array<string>,
+            coordinates?: Array<string>
         },
         selectDOM?: {
             id?: Array<string>,
             class?: Array<string>,
             cssSelector?: Array<string>,
-            xpath?: Array<string>
+            xpath?: Array<string>,
+            coordinates?: Array<string>
         },
         element?: {
             id?: string,