flexysnap 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "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: '#D32F2F' },
-        extra: { fill: 'rgba(156, 39, 176, 0.4)', stroke: '#D32F2F' },
-        shift: { fill: 'rgba(121, 85, 72, 0.4)', stroke: '#D32F2F' }
+        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

@@ -186,6 +186,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
         if (boundingBoxDifference > 10) {
             differences.push({
                 type: "layout_shift",
+                kind: 'error',
                 difference: boundingBoxDifference
             });
         }
@@ -202,6 +203,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
             if (sizeDiff > 10) {
                 differences.push({
                     type: "size_mismatch",
+                    kind: 'error',
                     difference: sizeDiff
                 });
             }
@@ -210,6 +212,7 @@ function compareBoundingBoxes(baselineRect, currentRect, options) {
             if (diffRatio > 1.1 || diffRatio < 0.9) {
                 differences.push({
                     type: "size_mismatch",
+                    kind: 'note',
                     difference: diffRatio
                 });
             }
@@ -243,6 +246,7 @@ function compareTexts(baselineTexts, currentTexts, options) {
         if (textsEqual) {
             currentText.differences.push({
                 type: 'text_mismatch',
+                kind: 'error',
                 baseline: baselineText.text,
                 current: currentText.text,
             });
@@ -256,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) {
@@ -286,6 +292,7 @@ function compareElements(baselineElement, currentElement, options) {
         if (dh > 15) {
             currentElement.differences.push({
                 type: 'histogram_difference',
+                kind: 'error',
             });
         }
     }
@@ -328,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: []
     };
@@ -145,6 +145,13 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
                     };
                 }
 
+                function isRectWithinViewport(rect) {
+                    return rect.right >= 0 &&
+                        rect.left < window.innerWidth &&
+                        rect.bottom >= 0 &&
+                        rect.top < window.innerHeight;
+                }
+
                 function isElementVisible(element) {
                     const style = window.getComputedStyle(element);
                     if (style.display === 'none' ||
@@ -155,12 +162,9 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
                         return false;
                     }
 
-                    const rect = element.getBoundingClientRect()
+                    const rect = element.getBoundingClientRect();
 
-                    return rect.right >= 0 &&
-                        rect.left < window.innerWidth &&
-                        rect.bottom >= 0 &&
-                        rect.top < window.innerHeight;
+                    return isRectWithinViewport(rect);
                 }
 
                 function getElementsWithDirectText(root, textIgnoreClasses) {
@@ -205,8 +209,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;
@@ -237,9 +241,14 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
                             if (isNested)
                                 continue;
 
+                            const boundingRect = getTextNodeBoundingBox(descendant);
+
+                            if (!isRectWithinViewport(boundingRect))
+                                continue;
+
                             texts.push({
                                 text: text,
-                                boundingRect: getTextNodeBoundingBox(descendant)
+                                boundingRect: boundingRect
                             });
                         }
                     }