flexysnap 0.2.7 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.2.7",
+  "version": "0.3.1",
   "description": "Flexible visual snapshot testing for Playwright, built for e-commerce.",
   "keywords": [
     "playwright",

package/src/annotateWireframe.js

@@ -60,11 +60,32 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
         box: { fill: 'rgba(220, 160, 40, 0.4)', stroke: '#E6A500' },
         image: { fill: 'rgba(70, 180, 120, 0.4)', stroke: '#2EBC6F' },
         text: { fill: 'rgba(50, 130, 190, 0.4)', stroke: '#0066CC' },
-        error: { fill: 'rgba(211, 47, 47, 0.4)', stroke: '#D32F2F' }
+        error: { fill: 'rgba(211, 47, 47, 0.4)', stroke: '#D32F2F' },
+        missing: { fill: 'rgba(233, 30, 140, 0.4)', stroke: '#D32F2F' },
+        extra: { fill: 'rgba(156, 39, 176, 0.4)', stroke: '#D32F2F' },
+        shift: { fill: 'rgba(121, 85, 72, 0.4)', stroke: '#D32F2F' }
     };
 
-    function hasErrors(obj) {
-        return obj.differences && Array.isArray(obj.differences) && obj.differences.length > 0;
+    function determineColorKey(obj, defaultKey) {
+        if (!obj.differences || !Array.isArray(obj.differences) || obj.differences.length === 0) {
+            return defaultKey;
+        }
+
+        const differenceTypes = obj.differences.map(difference => difference.type);
+
+        if (differenceTypes.includes('missing_text') || differenceTypes.includes('missing_element')) {
+            return 'missing';
+        }
+
+        if (differenceTypes.includes('extra_text') || differenceTypes.includes('extra_element')) {
+            return 'extra';
+        }
+
+        if (differenceTypes.includes('layout_shift') || differenceTypes.includes('size_mismatch')) {
+            return 'shift';
+        }
+
+        return 'error';
     }
 
     function drawBoundingBox(rect, colorKey, dashed = false) {
@@ -89,20 +110,20 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
     }
 
     for (const elementGroup of wireframe.elementGroups) {
-        const dashed = elementGroup.strictPosition === false;
+        const dashed = elementGroup.options?.strictPosition === false;
 
         for (const element of elementGroup.elements) {
             const rect = element.boundingRect;
 
             if (element.type === 'box') {
-                const colorKey = hasErrors(element) ? 'error' : 'box';
+                const colorKey = determineColorKey(element, 'box');
                 drawBoundingBox(rect, colorKey, dashed);
             } else if (element.type === 'image') {
-                const colorKey = hasErrors(element) ? 'error' : 'image';
+                const colorKey = determineColorKey(element, 'image');
                 drawBoundingBox(rect, colorKey, dashed);
             } else if (element.type === 'text' && element.texts && element.texts.length > 0) {
                 for (const text of element.texts) {
-                    const colorKey = hasErrors(text) ? 'error' : 'text';
+                    const colorKey = determineColorKey(text, 'text');
                     drawBoundingBox(text.boundingRect, colorKey, dashed);
                 }
             }

package/src/wireframeComparison.js

@@ -11,16 +11,16 @@ function calculateBoundingBoxDistance(rect1, rect2) {
         Math.abs(rect1.bottom - rect2.bottom));
 }
 
-function createPairings(currentElements, baselineElements) {
+function pairByBoundingBox(currentIndices, baselineIndices, currentElements, baselineElements) {
     const pairings = [];
-    
-    for (let currentIndex = 0; currentIndex < currentElements.length; currentIndex++) {
-        for (let baselineIndex = 0; baselineIndex < baselineElements.length; baselineIndex++) {
+
+    for (const currentIndex of currentIndices) {
+        for (const baselineIndex of baselineIndices) {
             const distance = calculateBoundingBoxDistance(
                 currentElements[currentIndex].boundingRect,
                 baselineElements[baselineIndex].boundingRect
             );
-            
+
             pairings.push({
                 currentIndex,
                 baselineIndex,
@@ -34,7 +34,7 @@ function createPairings(currentElements, baselineElements) {
     const usedCurrentIndices = new Set();
     const usedBaselineIndices = new Set();
     const matchedPairs = [];
-    
+
     for (const pairing of pairings) {
         if (!usedCurrentIndices.has(pairing.currentIndex) && !usedBaselineIndices.has(pairing.baselineIndex)) {
             usedCurrentIndices.add(pairing.currentIndex);
@@ -42,21 +42,134 @@ function createPairings(currentElements, baselineElements) {
             matchedPairs.push(pairing);
         }
     }
-    
+
+    const unmatchedCurrent = [];
+    for (const currentIndex of currentIndices) {
+        if (!usedCurrentIndices.has(currentIndex)) {
+            unmatchedCurrent.push(currentIndex);
+        }
+    }
+
+    const unmatchedBaseline = [];
+    for (const baselineIndex of baselineIndices) {
+        if (!usedBaselineIndices.has(baselineIndex)) {
+            unmatchedBaseline.push(baselineIndex);
+        }
+    }
+
+    return {
+        matchedPairs,
+        unmatchedCurrent,
+        unmatchedBaseline
+    };
+}
+
+function createPairings(currentElements, baselineElements) {
+    const currentIndices = currentElements.map((_, index) => index);
+    const baselineIndices = baselineElements.map((_, index) => index);
+
+    return pairByBoundingBox(currentIndices, baselineIndices, currentElements, baselineElements);
+}
+
+function buildTextIndexMap(texts) {
+    const map = new Map();
+    texts.forEach((textElement, index) => {
+        const key = textElement.text;
+        if (!map.has(key)) {
+            map.set(key, []);
+        }
+        map.get(key).push(index);
+    });
+    return map;
+}
+
+function createTextPairings(currentTexts, baselineTexts) {
+    const currentTextMap = buildTextIndexMap(currentTexts);
+    const baselineTextMap = buildTextIndexMap(baselineTexts);
+
+    const usedCurrentIndices = new Set();
+    const usedBaselineIndices = new Set();
+    const matchedPairs = [];
+
+    for (const [text, currentIndices] of currentTextMap) {
+        const baselineIndices = baselineTextMap.get(text);
+        if (currentIndices.length === 1 && baselineIndices && baselineIndices.length === 1) {
+            const currentIndex = currentIndices[0];
+            const baselineIndex = baselineIndices[0];
+            matchedPairs.push({
+                currentIndex,
+                baselineIndex,
+                distance: 0
+            });
+            usedCurrentIndices.add(currentIndex);
+            usedBaselineIndices.add(baselineIndex);
+        }
+    }
+
+    for (const [text, currentIndices] of currentTextMap) {
+        const baselineIndices = baselineTextMap.get(text) || [];
+        const remainingCurrentIndices = currentIndices.filter(index => !usedCurrentIndices.has(index));
+        const remainingBaselineIndices = baselineIndices.filter(index => !usedBaselineIndices.has(index));
+
+        if (remainingCurrentIndices.length > 0 && remainingBaselineIndices.length > 0) {
+            const result = pairByBoundingBox(
+                remainingCurrentIndices,
+                remainingBaselineIndices,
+                currentTexts,
+                baselineTexts
+            );
+
+            for (const pairing of result.matchedPairs) {
+                matchedPairs.push(pairing);
+                usedCurrentIndices.add(pairing.currentIndex);
+                usedBaselineIndices.add(pairing.baselineIndex);
+            }
+        }
+    }
+
+    const remainingCurrentIndices = [];
+    for (let i = 0; i < currentTexts.length; i++) {
+        if (!usedCurrentIndices.has(i)) {
+            remainingCurrentIndices.push(i);
+        }
+    }
+
+    const remainingBaselineIndices = [];
+    for (let i = 0; i < baselineTexts.length; i++) {
+        if (!usedBaselineIndices.has(i)) {
+            remainingBaselineIndices.push(i);
+        }
+    }
+
+    if (remainingCurrentIndices.length > 0 && remainingBaselineIndices.length > 0) {
+        const result = pairByBoundingBox(
+            remainingCurrentIndices,
+            remainingBaselineIndices,
+            currentTexts,
+            baselineTexts
+        );
+
+        for (const pairing of result.matchedPairs) {
+            matchedPairs.push(pairing);
+            usedCurrentIndices.add(pairing.currentIndex);
+            usedBaselineIndices.add(pairing.baselineIndex);
+        }
+    }
+
     const unmatchedCurrent = [];
-    for (let i = 0; i < currentElements.length; i++) {
+    for (let i = 0; i < currentTexts.length; i++) {
         if (!usedCurrentIndices.has(i)) {
             unmatchedCurrent.push(i);
         }
     }
-    
+
     const unmatchedBaseline = [];
-    for (let i = 0; i < baselineElements.length; i++) {
+    for (let i = 0; i < baselineTexts.length; i++) {
         if (!usedBaselineIndices.has(i)) {
             unmatchedBaseline.push(i);
         }
     }
-    
+
     return {
         matchedPairs,
         unmatchedCurrent,
@@ -64,9 +177,10 @@ function createPairings(currentElements, baselineElements) {
     };
 }
 
-function compareBoundingBoxes(baselineRect, currentRect, strictPosition = true, strictSize = true) {
+function compareBoundingBoxes(baselineRect, currentRect, options) {
     const differences = [];
-
+    const strictPosition = options?.strictPosition !== false;
+    const strictSize = options?.strictSize !== false;
     if (strictPosition) {
         const boundingBoxDifference = calculateBoundingBoxDistance(baselineRect, currentRect)
         if (boundingBoxDifference > 10) {
@@ -110,15 +224,15 @@ function replaceDigitsWithPlaceholder(text) {
     return text.replace(/\d+/g, '[digits]');
 }
 
-function compareTexts(baselineTexts, currentTexts, strictPosition = true, strictSize = true, maskDigits = false) {
-    const { matchedPairs, unmatchedCurrent, unmatchedBaseline } = createPairings(currentTexts, baselineTexts);
-    
+function compareTexts(baselineTexts, currentTexts, options) {
+    const {matchedPairs, unmatchedCurrent, unmatchedBaseline} = createTextPairings(currentTexts, baselineTexts);
+
     for (const pairing of matchedPairs) {
         const baselineText = baselineTexts[pairing.baselineIndex];
         const currentText = currentTexts[pairing.currentIndex];
         currentText.differences = [];
 
-
+        const maskDigits = options?.maskDigits === true;
         let textsEqual = false
         if (maskDigits) {
             textsEqual = replaceDigitsWithPlaceholder(baselineText.text) !== replaceDigitsWithPlaceholder(currentText.text);
@@ -136,27 +250,28 @@ function compareTexts(baselineTexts, currentTexts, strictPosition = true, strict
             const boundingBoxDifferences = compareBoundingBoxes(
                 baselineText.boundingRect,
                 currentText.boundingRect,
-                strictPosition,
-                strictSize
+                options
             );
             currentText.differences = currentText.differences.concat(boundingBoxDifferences);
         }
     }
 
-    for (const currentIndex of unmatchedCurrent) {
-        const currentText = currentTexts[currentIndex];
-        currentText.differences = [{
-            type: 'extra_text',
-        }];
-    }
+    if (options?.extraAllowed !== true)
+        for (const currentIndex of unmatchedCurrent) {
+            const currentText = currentTexts[currentIndex];
+            currentText.differences = [{
+                type: 'extra_text',
+            }];
+        }
 
-    for (const baselineIndex of unmatchedBaseline) {
-        const baselineText = baselineTexts[baselineIndex];
-        currentTexts.push(baselineText);
-        baselineText.differences = [{
-            type: 'missing_text',
-        }];
-    }
+    if (options.missingAllowed !== true)
+        for (const baselineIndex of unmatchedBaseline) {
+            const baselineText = baselineTexts[baselineIndex];
+            currentTexts.push(baselineText);
+            baselineText.differences = [{
+                type: 'missing_text',
+            }];
+        }
 
     for (const currentText of currentTexts) {
         if (currentText.differences?.length === 0) {
@@ -165,7 +280,7 @@ function compareTexts(baselineTexts, currentTexts, strictPosition = true, strict
     }
 }
 
-function compareElements(baselineElement, currentElement, strictPosition = true, strictSize = true, maskDigits = false) {
+function compareElements(baselineElement, currentElement, options) {
     if (baselineElement.histogram && currentElement.histogram) {
         const dh = histogramDiff(baselineElement.histogram, currentElement.histogram);
         if (dh > 15) {
@@ -176,13 +291,12 @@ function compareElements(baselineElement, currentElement, strictPosition = true,
     }
     
     if (baselineElement.texts.length > 0 || currentElement.texts.length > 0) {
-        compareTexts(baselineElement.texts, currentElement.texts, strictPosition, strictSize, maskDigits);
+        compareTexts(baselineElement.texts, currentElement.texts, options);
     } else {
         currentElement.differences = compareBoundingBoxes(
             baselineElement.boundingRect,
             currentElement.boundingRect,
-            strictPosition,
-            strictSize
+            options
         );
     }
 }
@@ -200,11 +314,7 @@ function compareWireframes(baselineWireframe, currentWireframe) {
 
         expect(baselineElementGroup.selector).toEqual(currentElementGroup.selector);
 
-        const strictPosition = currentElementGroup.strictPosition !== false;
-        const strictSize = currentElementGroup.strictSize !== false;
-        const maskDigits = currentElementGroup.maskDigits === true;
-        
-        const { matchedPairs, unmatchedCurrent, unmatchedBaseline } = createPairings(
+        const {matchedPairs, unmatchedCurrent, unmatchedBaseline} = createPairings(
             currentElementGroup.elements,
             baselineElementGroup.elements
         );
@@ -212,29 +322,31 @@ function compareWireframes(baselineWireframe, currentWireframe) {
         for (const pairing of matchedPairs) {
             const baselineElement = baselineElementGroup.elements[pairing.baselineIndex];
             const currentElement = currentElementGroup.elements[pairing.currentIndex];
-            compareElements(baselineElement, currentElement, strictPosition, strictSize, maskDigits);
+            compareElements(baselineElement, currentElement, currentElementGroup.options);
             if (currentElement.differences?.length === 0) {
                 currentElement.differences = undefined
             }
         }
-        
-        for (const currentIndex of unmatchedCurrent) {
-            const currentElement = currentElementGroup.elements[currentIndex];
-            currentElement.differences = [{
-                type: 'extra_element',
-            }];
-        }
-        
-        for (const baselineIndex of unmatchedBaseline) {
-            const baselineElement = baselineElementGroup.elements[baselineIndex];
-            currentElementGroup.elements.push(baselineElement);
-            baselineElement.differences = [{
-                type: 'missing_element',
-            }];
-        }
+
+        if (currentElementGroup.options?.extraAllowed !== true)
+            for (const currentIndex of unmatchedCurrent) {
+                const currentElement = currentElementGroup.elements[currentIndex];
+                currentElement.differences = [{
+                    type: 'extra_element',
+                }];
+            }
+
+        if (currentElementGroup.options?.missingAllowed !== true)
+            for (const baselineIndex of unmatchedBaseline) {
+                const baselineElement = baselineElementGroup.elements[baselineIndex];
+                currentElementGroup.elements.push(baselineElement);
+                baselineElement.differences = [{
+                    type: 'missing_element',
+                }];
+            }
     }
 
     return currentWireframe;
 }
 
-export { compareWireframes };
+export { compareWireframes };

package/src/wireframeUtils.js

@@ -105,9 +105,13 @@ function scaleWireframeData(wireframeData, scaleFactor) {
 function createEmptyElementGroupResult(elementGroup) {
     return {
         ...elementGroup,
-        strictPosition: elementGroup.strictPosition !== false,
-        strictSize: elementGroup.strictSize !== false,
-        maskDigits: elementGroup.maskDigits !== false,
+        options: {
+            strictPosition: elementGroup.options?.strictPosition !== false,
+            strictSize: elementGroup.options?.strictSize !== false,
+            maskDigits: elementGroup.options?.maskDigits !== false,
+            extraAllowed: elementGroup.options?.extraAllowed === true,
+            missingAllowed: elementGroup.options?.missingAllowed === true
+        },
         elements: []
     };
 }
@@ -197,9 +201,12 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
                     return results;
                 }
 
-                elementGroup.strictPosition = elementGroup.strictPosition !== false;
-                elementGroup.strictSize = elementGroup.strictSize !== false;
-                elementGroup.maskDigits = elementGroup.maskDigits !== false;
+                elementGroup.options = elementGroup.options || {};
+                elementGroup.options.strictPosition = elementGroup.options.strictPosition !== false;
+                elementGroup.options.strictSize = elementGroup.options.strictSize !== false;
+                elementGroup.options.maskDigits = elementGroup.options.maskDigits !== false;
+                elementGroup.options.extraAllowed = elementGroup.options.extraAllowed === true;
+                elementGroup.options.missingAllowed = elementGroup.options.missingAllowed === true;
                 elementGroup.elements = [];
 
                 let index = 0;