flexysnap 0.2.3-alpha.1 → 0.2.5

package/package.json

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

package/src/wireframeComparison.js

@@ -126,8 +126,7 @@ function compareTexts(baselineTexts, currentTexts, strictPosition = true, strict
             textsEqual = baselineText.text !== currentText.text;
         }
 
-        if (baselineText.text !== currentText.text) {
-            //expect.soft(currentText.text).toEqual(baselineText.text);
+        if (textsEqual) {
             currentText.differences.push({
                 type: 'text_mismatch',
                 baseline: baselineText.text,
@@ -167,16 +166,8 @@ function compareTexts(baselineTexts, currentTexts, strictPosition = true, strict
 }
 
 function compareElements(baselineElement, currentElement, strictPosition = true, strictSize = true, maskDigits = false) {
-    currentElement.differences = compareBoundingBoxes(
-        baselineElement.boundingRect,
-        currentElement.boundingRect,
-        strictPosition,
-        strictSize
-    );
-
     if (baselineElement.histogram && currentElement.histogram) {
         const dh = histogramDiff(baselineElement.histogram, currentElement.histogram);
-        //expect.soft(dh, 'Histogram difference').toBeLessThanOrEqual(10);
         if (dh > 15) {
             currentElement.differences.push({
                 type: 'histogram_difference',
@@ -186,6 +177,13 @@ function compareElements(baselineElement, currentElement, strictPosition = true,
     
     if (baselineElement.texts.length > 0 || currentElement.texts.length > 0) {
         compareTexts(baselineElement.texts, currentElement.texts, strictPosition, strictSize, maskDigits);
+    } else {
+        currentElement.differences = compareBoundingBoxes(
+            baselineElement.boundingRect,
+            currentElement.boundingRect,
+            strictPosition,
+            strictSize
+        );
     }
 }
 
@@ -205,11 +203,6 @@ function compareWireframes(baselineWireframe, currentWireframe) {
         const strictPosition = currentElementGroup.strictPosition !== false;
         const strictSize = currentElementGroup.strictSize !== false;
         const maskDigits = currentElementGroup.maskDigits === true;
-
-        //TODO: REMOVE later
-        if (currentElementGroup.differences?.length === 0) {
-            currentElementGroup.differences = undefined
-        }
         
         const { matchedPairs, unmatchedCurrent, unmatchedBaseline } = createPairings(
             currentElementGroup.elements,
@@ -244,4 +237,4 @@ function compareWireframes(baselineWireframe, currentWireframe) {
     return currentWireframe;
 }
 
-export { compareWireframes };
+export { compareWireframes };

package/src/wireframeUtils.js

@@ -6,6 +6,7 @@ import { areWireframesStable } from './wireframeStability.js';
 import { resolveWireframeOutputDir } from './wireframeOutput.js';
 
 const FLEXYSNAP_ELEMENT_ID_ATTRIBUTE = 'data-flexysnap-id';
+const ELEMENT_GROUP_EXTRACTION_TIMEOUT_MS = 5000;
 
 async function getRGBHistogramFromBuffer(buffer) {
     const image = await loadImage(buffer);
@@ -39,6 +40,15 @@ function delay(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
+function withTimeout(promise, milliseconds, timeoutMessage) {
+    let timeoutHandle;
+    const timeoutPromise = new Promise((_, reject) => {
+        timeoutHandle = setTimeout(() => reject(new Error(timeoutMessage)), milliseconds);
+    });
+
+    return Promise.race([promise, timeoutPromise]).finally(() => clearTimeout(timeoutHandle));
+}
+
 async function getDeviceScaleFactor(page) {
     try {
         const scaleFactor = await page.evaluate(() => window.devicePixelRatio);
@@ -92,66 +102,62 @@ function scaleWireframeData(wireframeData, scaleFactor) {
     return wireframeData;
 }
 
-async function extractWireframe(page, elementGroups) {
-    const wireframeData = await page.evaluate(async ({elementGroups, elementIdAttribute}) => {
-
-        function createBoundingRect(element) {
-            const rect = element.getBoundingClientRect();
-            return {
-                top: Math.round(rect.top),
-                left: Math.round(rect.left),
-                bottom: Math.round(rect.bottom),
-                right: Math.round(rect.right)
-            };
-        }
-
-        function getTextNodeBoundingBox(textNode) {
-            const range = document.createRange();
-            range.selectNodeContents(textNode);
-            const rect = range.getBoundingClientRect();
-            return {
-                top: Math.round(rect.top),
-                left: Math.round(rect.left),
-                bottom: Math.round(rect.bottom),
-                right: Math.round(rect.right)
-            };
-        }
-
-        function isElementVisible(element) {
-            const style = window.getComputedStyle(element);
-            if (style.display === 'none' ||
-                style.visibility === 'hidden' ||
-                style.opacity === '0' ||
-                element.offsetWidth <= 0 ||
-                element.offsetHeight <= 0) {
-                return false;
-            }
-
-            const rect = element.getBoundingClientRect()
-
-            return rect.right >= 0 &&
-                rect.left < window.innerWidth &&
-                rect.bottom >= 0 &&
-                rect.top < window.innerHeight;
-        }
+function createEmptyElementGroupResult(elementGroup) {
+    return {
+        ...elementGroup,
+        strictPosition: elementGroup.strictPosition !== false,
+        strictSize: elementGroup.strictSize !== false,
+        maskDigits: elementGroup.maskDigits !== false,
+        elements: []
+    };
+}
 
+async function extractElementGroupData(page, elementGroup, groupIndex, elementIdAttribute) {
+    const extractionStartTime = Date.now();
 
-        for (let groupIndex = 0; groupIndex < elementGroups.length; groupIndex++) {
-            const elementGroup = elementGroups[groupIndex];
-            elementGroup.strictPosition = elementGroup.strictPosition !== false;
-            elementGroup.strictSize = elementGroup.strictSize !== false;
-            elementGroup.maskDigits = elementGroup.maskDigits !== false;
-            elementGroup.elements = [];
+    try {
+        const result = await withTimeout(
+            page.evaluate(({elementGroup, groupIndex, elementIdAttribute}) => {
+
+                function createBoundingRect(element) {
+                    const rect = element.getBoundingClientRect();
+                    return {
+                        top: Math.round(rect.top),
+                        left: Math.round(rect.left),
+                        bottom: Math.round(rect.bottom),
+                        right: Math.round(rect.right)
+                    };
+                }
 
-            let index = 0;
-            const matchedElements = document.querySelectorAll(elementGroup.selector);
+                function getTextNodeBoundingBox(textNode) {
+                    const range = document.createRange();
+                    range.selectNodeContents(textNode);
+                    const rect = range.getBoundingClientRect();
+                    return {
+                        top: Math.round(rect.top),
+                        left: Math.round(rect.left),
+                        bottom: Math.round(rect.bottom),
+                        right: Math.round(rect.right)
+                    };
+                }
 
-            for (const element of matchedElements) {
-                if (!isElementVisible(element))
-                    continue;
+                function isElementVisible(element) {
+                    const style = window.getComputedStyle(element);
+                    if (style.display === 'none' ||
+                        style.visibility === 'hidden' ||
+                        style.opacity === '0' ||
+                        element.offsetWidth <= 0 ||
+                        element.offsetHeight <= 0) {
+                        return false;
+                    }
 
+                    const rect = element.getBoundingClientRect()
 
-                const texts = [];
+                    return rect.right >= 0 &&
+                        rect.left < window.innerWidth &&
+                        rect.bottom >= 0 &&
+                        rect.top < window.innerHeight;
+                }
 
                 function getElementsWithDirectText(root, textIgnoreClasses) {
                     const results = [];
@@ -168,7 +174,6 @@ async function extractWireframe(page, elementGroups) {
 
                         if (textIgnoreClasses) {
                             let ignored = false;
-                            console.log(textIgnoreClasses);
                             let parent = walker.currentNode.parentElement;
                             while (parent != null && !ignored) {
                                 for (const className of parent.classList) {
@@ -192,52 +197,87 @@ async function extractWireframe(page, elementGroups) {
                     return results;
                 }
 
-                if (elementGroup.type === 'text') {
+                elementGroup.strictPosition = elementGroup.strictPosition !== false;
+                elementGroup.strictSize = elementGroup.strictSize !== false;
+                elementGroup.maskDigits = elementGroup.maskDigits !== false;
+                elementGroup.elements = [];
 
-                    const descendantArray = getElementsWithDirectText(element, elementGroup.textIgnoreClasses)
+                let index = 0;
+                const matchedElements = document.querySelectorAll(elementGroup.selector);
 
-                    for (const descendant of descendantArray) {
-                        if (!isElementVisible(descendant.parentElement))
-                            continue;
+                for (const element of matchedElements) {
+                    if (!isElementVisible(element))
+                        continue;
 
-                        const text = descendant.textContent.trim().replaceAll(/\s+/g, ' ')
-                        if (text.length === 0)
-                            continue;
+                    const texts = [];
 
-                        const isNested = descendantArray.some(other =>
-                            other !== descendant && other.contains(descendant)
-                        );
+                    if (elementGroup.type === 'text') {
 
-                        if (isNested)
-                            continue;
+                        const descendantArray = getElementsWithDirectText(element, elementGroup.textIgnoreClasses)
 
-                        texts.push({
-                            text: text,
-                            boundingRect: getTextNodeBoundingBox(descendant)
-                        });
+                        for (const descendant of descendantArray) {
+                            if (!isElementVisible(descendant.parentElement))
+                                continue;
+
+                            const text = descendant.textContent.trim().replaceAll(/\s+/g, ' ')
+                            if (text.length === 0)
+                                continue;
+
+                            const isNested = descendantArray.some(other =>
+                                other !== descendant && other.contains(descendant)
+                            );
+
+                            if (isNested)
+                                continue;
+
+                            texts.push({
+                                text: text,
+                                boundingRect: getTextNodeBoundingBox(descendant)
+                            });
+                        }
+                    }
+
+                    const elementData = {
+                        index: index,
+                        boundingRect: createBoundingRect(element),
+                        texts: texts,
+                        type: elementGroup.type
+                    };
+
+                    if (elementGroup.type === 'image') {
+                        const elementId = `fsnap-g${groupIndex}-e${index}`;
+                        element.setAttribute(elementIdAttribute, elementId);
+                        elementData.elementId = elementId;
                     }
-                }
 
-                const elementData = {
-                    index: index,
-                    boundingRect: createBoundingRect(element),
-                    texts: texts,
-                    type: elementGroup.type
-                };
-
-                if (elementGroup.type === 'image') {
-                    const elementId = `fsnap-g${groupIndex}-e${index}`;
-                    element.setAttribute(elementIdAttribute, elementId);
-                    elementData.elementId = elementId;
+                    elementGroup.elements.push(elementData);
+                    index += 1;
                 }
 
-                elementGroup.elements.push(elementData);
-                index += 1;
-            }
-        }
+                return elementGroup;
+            }, {elementGroup, groupIndex, elementIdAttribute}),
+            ELEMENT_GROUP_EXTRACTION_TIMEOUT_MS,
+            `Timed out extracting element group with selector "${elementGroup.selector}"`
+        );
+
+        const extractionDuration = Date.now() - extractionStartTime;
+        logTimestamp(`Extracted element group "${elementGroup.selector}" in ${extractionDuration/1000} seconds.`);
 
-        return elementGroups;
-    }, {elementGroups, elementIdAttribute: FLEXYSNAP_ELEMENT_ID_ATTRIBUTE});
+        return result;
+    } catch (error) {
+        const extractionDuration = Date.now() - extractionStartTime;
+        logTimestamp(`Failed to extract element group "${elementGroup.selector}" after ${extractionDuration/1000} seconds: ${error.message}`);
+        return createEmptyElementGroupResult(elementGroup);
+    }
+}
+
+async function extractWireframe(page, elementGroups) {
+    const wireframeData = [];
+
+    for (let groupIndex = 0; groupIndex < elementGroups.length; groupIndex++) {
+        const elementGroupData = await extractElementGroupData(page, elementGroups[groupIndex], groupIndex, FLEXYSNAP_ELEMENT_ID_ATTRIBUTE);
+        wireframeData.push(elementGroupData);
+    }
 
     const scrollPosition = await page.evaluate(() => ({
         x: window.scrollX,