flexysnap 0.2.6 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.2.6",
+  "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/testUtils.js

@@ -2,6 +2,10 @@ import { test } from '@playwright/test';
 
 let closePopups = async function(page) {}
 
+async function callClosePopups(page) {
+    await closePopups(page);
+}
+
 async function gotoWithRetry(page, url) {
 	try {
 		logTimestamp('Loading ' + url);
@@ -209,6 +213,7 @@ export {
     rehover,
     scrollToTopOfElement,
     setClosePopups,
+    callClosePopups,
     logTimestamp,
     setBaseUrl
 };

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

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { logTimestamp } from './testUtils.js';
+import { logTimestamp, callClosePopups } from './testUtils.js';
 import { loadImage, createCanvas } from 'canvas';
 import { areWireframesStable } from './wireframeStability.js';
 import { resolveWireframeOutputDir } from './wireframeOutput.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;
@@ -271,11 +278,11 @@ async function extractElementGroupData(page, elementGroup, groupIndex, elementId
     }
 }
 
-async function extractWireframe(page, elementGroups, closePopups) {
+async function extractWireframe(page, elementGroups) {
     const wireframeData = [];
 
     for (let groupIndex = 0; groupIndex < elementGroups.length; groupIndex++) {
-        closePopups();
+        await callClosePopups(page);
         const elementGroupData = await extractElementGroupData(page, elementGroups[groupIndex], groupIndex, FLEXYSNAP_ELEMENT_ID_ATTRIBUTE);
         wireframeData.push(elementGroupData);
     }
@@ -335,14 +342,14 @@ function cloneElementGroups(elementGroups) {
     return elementGroups.map(elementGroup => ({...elementGroup, elements: undefined}));
 }
 
-async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount, closePopups) {
+async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount) {
     let previousWireframeData = null;
     let currentWireframeData = null;
     let currentScrollPosition = null;
 
     for (let attempt = 0; attempt < maxRetryCount; attempt++) {
         const extractionStartTime = Date.now();
-        const extractionResult = await extractWireframe(page, cloneElementGroups(elementGroups), closePopups);
+        const extractionResult = await extractWireframe(page, cloneElementGroups(elementGroups));
         currentWireframeData = extractionResult.wireframeData;
         currentScrollPosition = extractionResult.scrollPosition;
         const extractionDuration = Date.now() - extractionStartTime;
@@ -368,10 +375,10 @@ async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryC
 }
 
 async function expectWireframe(page, elementGroups, outputDir, outputFile, outputName, options = {}) {
-    const { retryDelay = 1000, maxRetryCount = 10, metadata = {}, closePopups = function() {} } = options;
+    const { retryDelay = 1000, maxRetryCount = 10, metadata = {} } = options;
 
     logTimestamp(`Starting wireframe capture for: ${outputFile}`);
-    const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount, closePopups);
+    const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
 
     const screenshotScrollPosition = await page.evaluate(() => ({
         x: window.scrollX,