flexysnap 0.3.0 → 0.4.0

package/package.json

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

package/src/annotateWireframe.js

@@ -60,10 +60,7 @@ 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' },
-        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' }
+        error: { fill: 'rgba(211, 47, 47, 0.4)', stroke: '#D32F2F' }
     };
 
     function determineColorKey(obj, defaultKey) {
@@ -71,24 +68,90 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
             return defaultKey;
         }
 
-        const differenceTypes = obj.differences.map(difference => difference.type);
+        const hasError = obj.differences.some(difference => difference.kind === 'error');
 
-        if (differenceTypes.includes('missing_text') || differenceTypes.includes('missing_element')) {
-            return 'missing';
+        return hasError ? 'error' : defaultKey;
+    }
+
+    function hasDifferenceType(differences, types) {
+        if (!differences || !Array.isArray(differences) || differences.length === 0) {
+            return false;
         }
 
-        if (differenceTypes.includes('extra_text') || differenceTypes.includes('extra_element')) {
-            return 'extra';
+        return differences.some(difference => types.includes(difference.type));
+    }
+
+    function getLineDash(differences) {
+        const hasLayoutShift = hasDifferenceType(differences, ['layout_shift']);
+        const hasSizeMismatch = hasDifferenceType(differences, ['size_mismatch']);
+
+        if (hasLayoutShift && hasSizeMismatch) {
+            return [6, 2, 1, 2];
         }
 
-        if (differenceTypes.includes('layout_shift') || differenceTypes.includes('size_mismatch')) {
-            return 'shift';
+        if (hasLayoutShift) {
+            return [6, 4];
         }
 
-        return 'error';
+        if (hasSizeMismatch) {
+            return [2, 2];
+        }
+
+        return [];
     }
 
-    function drawBoundingBox(rect, colorKey, dashed = false) {
+    function drawHatchedFill(rect, width, height, fillColor) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(rect.left, rect.top, width, height);
+        ctx.clip();
+
+        ctx.strokeStyle = fillColor;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+
+        const spacing = 6;
+        const diagonalReach = width + height;
+
+        for (let offset = -height; offset < diagonalReach; offset += spacing) {
+            ctx.beginPath();
+            ctx.moveTo(rect.left + offset, rect.top);
+            ctx.lineTo(rect.left + offset + height, rect.top + height);
+            ctx.stroke();
+        }
+
+        ctx.restore();
+    }
+
+    function drawDiagonalCross(rect, strokeColor) {
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.beginPath();
+        ctx.moveTo(rect.left, rect.top);
+        ctx.lineTo(rect.right, rect.bottom);
+        ctx.moveTo(rect.right, rect.top);
+        ctx.lineTo(rect.left, rect.bottom);
+        ctx.stroke();
+    }
+
+    function drawUprightCross(rect, strokeColor) {
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+
+        const midX = (rect.left + rect.right) / 2;
+        const midY = (rect.top + rect.bottom) / 2;
+
+        ctx.beginPath();
+        ctx.moveTo(midX, rect.top);
+        ctx.lineTo(midX, rect.bottom);
+        ctx.moveTo(rect.left, midY);
+        ctx.lineTo(rect.right, midY);
+        ctx.stroke();
+    }
+
+    function drawBoundingBox(rect, colorKey, differences) {
         const adjustedRect = {
             left: rect.left + offsetX,
             right: rect.right + offsetX,
@@ -100,31 +163,42 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
         const boxHeight = adjustedRect.bottom - adjustedRect.top;
         const color = colors[colorKey];
 
-        ctx.fillStyle = color.fill;
-        ctx.fillRect(adjustedRect.left, adjustedRect.top, boxWidth, boxHeight);
+        if (hasDifferenceType(differences, ['text_mismatch', 'histogram_difference'])) {
+            drawHatchedFill(adjustedRect, boxWidth, boxHeight, color.fill);
+        } else {
+            ctx.fillStyle = color.fill;
+            ctx.fillRect(adjustedRect.left, adjustedRect.top, boxWidth, boxHeight);
+        }
+
         ctx.strokeStyle = color.stroke;
         ctx.lineWidth = 2;
-        ctx.setLineDash(dashed ? [6, 4] : []);
+        ctx.setLineDash(getLineDash(differences));
         ctx.strokeRect(adjustedRect.left, adjustedRect.top, boxWidth, boxHeight);
         ctx.setLineDash([]);
+
+        if (hasDifferenceType(differences, ['missing_element', 'missing_text'])) {
+            drawDiagonalCross(adjustedRect, color.stroke);
+        }
+
+        if (hasDifferenceType(differences, ['extra_element', 'extra_text'])) {
+            drawUprightCross(adjustedRect, color.stroke);
+        }
     }
 
     for (const elementGroup of wireframe.elementGroups) {
-        const dashed = elementGroup.options?.strictPosition === false;
-
         for (const element of elementGroup.elements) {
             const rect = element.boundingRect;
 
             if (element.type === 'box') {
                 const colorKey = determineColorKey(element, 'box');
-                drawBoundingBox(rect, colorKey, dashed);
+                drawBoundingBox(rect, colorKey, element.differences);
             } else if (element.type === 'image') {
                 const colorKey = determineColorKey(element, 'image');
-                drawBoundingBox(rect, colorKey, dashed);
+                drawBoundingBox(rect, colorKey, element.differences);
             } else if (element.type === 'text' && element.texts && element.texts.length > 0) {
                 for (const text of element.texts) {
                     const colorKey = determineColorKey(text, 'text');
-                    drawBoundingBox(text.boundingRect, colorKey, dashed);
+                    drawBoundingBox(text.boundingRect, colorKey, text.differences);
                 }
             }
         }

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,
@@ -73,6 +186,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
         if (boundingBoxDifference > 10) {
             differences.push({
                 type: "layout_shift",
+                kind: 'error',
                 difference: boundingBoxDifference
             });
         }
@@ -89,6 +203,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
             if (sizeDiff > 10) {
                 differences.push({
                     type: "size_mismatch",
+                    kind: 'error',
                     difference: sizeDiff
                 });
             }
@@ -97,6 +212,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
             if (diffRatio > 1.1 || diffRatio < 0.9) {
                 differences.push({
                     type: "size_mismatch",
+                    kind: 'note',
                     difference: diffRatio
                 });
             }
@@ -112,7 +228,7 @@ function replaceDigitsWithPlaceholder(text) {
 }
 
 function compareTexts(baselineTexts, currentTexts, options) {
-    const {matchedPairs, unmatchedCurrent, unmatchedBaseline} = createPairings(currentTexts, baselineTexts);
+    const {matchedPairs, unmatchedCurrent, unmatchedBaseline} = createTextPairings(currentTexts, baselineTexts);
 
     for (const pairing of matchedPairs) {
         const baselineText = baselineTexts[pairing.baselineIndex];
@@ -130,6 +246,7 @@ function compareTexts(baselineTexts, currentTexts, options) {
         if (textsEqual) {
             currentText.differences.push({
                 type: 'text_mismatch',
+                kind: 'error',
                 baseline: baselineText.text,
                 current: currentText.text,
             });
@@ -143,22 +260,24 @@ function compareTexts(baselineTexts, currentTexts, options) {
         }
     }
 
-    if (options?.extraAllowed !== true)
-        for (const currentIndex of unmatchedCurrent) {
-            const currentText = currentTexts[currentIndex];
-            currentText.differences = [{
-                type: 'extra_text',
-            }];
-        }
+    const allowExtraText = options?.allowExtra === true;
+    for (const currentIndex of unmatchedCurrent) {
+        const currentText = currentTexts[currentIndex];
+        currentText.differences = [{
+            type: 'extra_text',
+            kind: allowExtraText ? 'note' : 'error',
+        }];
+    }
 
-    if (options.missingAllowed !== true)
-        for (const baselineIndex of unmatchedBaseline) {
-            const baselineText = baselineTexts[baselineIndex];
-            currentTexts.push(baselineText);
-            baselineText.differences = [{
-                type: 'missing_text',
-            }];
-        }
+    const allowMissingText = options?.allowMissing === true;
+    for (const baselineIndex of unmatchedBaseline) {
+        const baselineText = baselineTexts[baselineIndex];
+        currentTexts.push(baselineText);
+        baselineText.differences = [{
+            type: 'missing_text',
+            kind: allowMissingText ? 'note' : 'error',
+        }];
+    }
 
     for (const currentText of currentTexts) {
         if (currentText.differences?.length === 0) {
@@ -173,6 +292,7 @@ function compareElements(baselineElement, currentElement, options) {
         if (dh > 15) {
             currentElement.differences.push({
                 type: 'histogram_difference',
+                kind: 'error',
             });
         }
     }
@@ -215,22 +335,24 @@ function compareWireframes(baselineWireframe, currentWireframe) {
             }
         }
 
-        if (currentElementGroup.options?.extraAllowed !== true)
-            for (const currentIndex of unmatchedCurrent) {
-                const currentElement = currentElementGroup.elements[currentIndex];
-                currentElement.differences = [{
-                    type: 'extra_element',
-                }];
-            }
+        const allowExtraElements = currentElementGroup.options?.allowExtra === true;
+        for (const currentIndex of unmatchedCurrent) {
+            const currentElement = currentElementGroup.elements[currentIndex];
+            currentElement.differences = [{
+                type: 'extra_element',
+                kind: allowExtraElements ? 'note' : 'error',
+            }];
+        }
 
-        if (currentElementGroup.options?.missingAllowed !== true)
-            for (const baselineIndex of unmatchedBaseline) {
-                const baselineElement = baselineElementGroup.elements[baselineIndex];
-                currentElementGroup.elements.push(baselineElement);
-                baselineElement.differences = [{
-                    type: 'missing_element',
-                }];
-            }
+        const allowMissingElements = currentElementGroup.options?.allowMissing === true;
+        for (const baselineIndex of unmatchedBaseline) {
+            const baselineElement = baselineElementGroup.elements[baselineIndex];
+            currentElementGroup.elements.push(baselineElement);
+            baselineElement.differences = [{
+                type: 'missing_element',
+                kind: allowMissingElements ? 'note' : 'error',
+            }];
+        }
     }
 
     return currentWireframe;

package/src/wireframeUtils.js

@@ -109,8 +109,8 @@ function createEmptyElementGroupResult(elementGroup) {
             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
+            allowExtra: elementGroup.options?.allowExtra === true,
+            allowMissing: elementGroup.options?.allowMissing === true
         },
         elements: []
     };
@@ -205,8 +205,8 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
                 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.options.allowExtra = elementGroup.options.allowExtra === true;
+                elementGroup.options.allowMissing = elementGroup.options.allowMissing === true;
                 elementGroup.elements = [];
 
                 let index = 0;