flexysnap 0.4.3 → 0.5.0

package/package.json

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

package/src/testUtils.js

@@ -6,15 +6,29 @@ async function callClosePopups(page) {
     await closePopups(page);
 }
 
+function logIfErrorResponse(response, url) {
+    if (response && response.status() >= 400) {
+        logTimestamp(`HTTP error ${response.status()} ${response.statusText()} while loading ${url}`);
+    }
+}
+
 async function gotoWithRetry(page, url) {
+    let response;
 	try {
 		logTimestamp('Loading ' + url);
-		await page.goto(url, { timeout: 30_000, waitUntil: "commit" });
+		response = await page.goto(url, { timeout: 5000, waitUntil: "commit" });
 	} catch (firstError) {
+        logTimestamp(firstError);
 		logTimestamp('Retry loading ' + url);
-		await page.goto(url, { timeout: 30_000, waitUntil: "commit" });
+		response = await page.goto(url, { timeout: 5000, waitUntil: "commit" });
 	}
-	await waitForCompleteLoad(page)
+    logIfErrorResponse(response, url);
+    try {
+        await waitForCompleteLoad(page);
+    } catch(e) {
+        logTimestamp(await page.pageErrors());
+        throw e;
+    }
 }
 
 
@@ -34,7 +48,7 @@ test.beforeEach(async ({ context }) => {
         const req = route.request();
         const url = new URL(req.url());
         const path = url.pathname.toLowerCase();
-        if (req.method() !== 'GET' || path.includes('/wp-content/') || !path.includes(baseUrl)) {
+        if (req.method() !== 'GET' || path.includes('/wp-content/') || !url.href.includes(baseUrl)) {
             return route.continue();
         }
         url.searchParams.set('_cb', Date.now().toString());
@@ -69,9 +83,20 @@ function logTimestamp(eventName) {
 }
 
 async function waitForCompleteLoad(page) {
-    await page.waitForLoadState('domcontentloaded');
-    await page.waitForLoadState('load');
-    await page.waitForTimeout(500);
+    try {
+        await page.waitForLoadState('domcontentloaded', { timeout: 5000 });
+    } catch (e) {
+        logTimestamp(e);
+        logTimestamp('Retry waiting for DOMContentLoaded event after 5 seconds');
+        await page.waitForLoadState('domcontentloaded', { timeout: 5000 });
+    }
+    try {
+        await page.waitForLoadState('load', { timeout: 5000 });
+    } catch (e) {
+        logTimestamp(e);
+        logTimestamp('Retry waiting for load event after 5 seconds');
+        await page.waitForLoadState('load', { timeout: 5000 });
+    }
 }
 
 

package/src/wireframeComparison.js

@@ -287,6 +287,8 @@ function compareTexts(baselineTexts, currentTexts, options) {
 }
 
 function compareElements(baselineElement, currentElement, options) {
+    currentElement.differences = currentElement.differences || [];
+
     if (baselineElement.histogram && currentElement.histogram) {
         const dh = histogramDiff(baselineElement.histogram, currentElement.histogram);
         if (dh > 15) {
@@ -300,11 +302,11 @@ function compareElements(baselineElement, currentElement, options) {
     if (baselineElement.texts.length > 0 || currentElement.texts.length > 0) {
         compareTexts(baselineElement.texts, currentElement.texts, options);
     } else {
-        currentElement.differences = compareBoundingBoxes(
+        currentElement.differences = currentElement.differences.concat(compareBoundingBoxes(
             baselineElement.boundingRect,
             currentElement.boundingRect,
             options
-        );
+        ));
     }
 }