flexysnap 0.2.7 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "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: '#E91E8C' },
+        extra: { fill: 'rgba(156, 39, 176, 0.4)', stroke: '#9C27B0' },
+        shift: { fill: 'rgba(121, 85, 72, 0.4)', stroke: '#795548' }
     };
 
-    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

@@ -64,9 +64,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 +111,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} = createPairings(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 +137,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 +167,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 +178,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 +201,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 +209,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;