flexysnap 0.1.4-alpha.1 → 0.1.5-alpha.1

package/package.json

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

package/src/index.js

@@ -1,5 +1,6 @@
 export {
     waitForCompleteLoad,
+    gotoWithRetry,
     highlightedClick,
     click,
     hover,
@@ -23,7 +24,7 @@ export {
 
 export { areWireframesStable } from './wireframeStability.js';
 
-export { expectWireframe, getRGBHistogramFromBuffer } from './wireframeUtils.js';
+export { expectWireframe, getRGBHistogramFromBuffer, getDeviceScaleFactor } from './wireframeUtils.js';
 
 export {
     setWireframeOutputRoot,

package/src/testUtils.js

@@ -2,6 +2,18 @@ import { test } from '@playwright/test';
 
 let closePopups = async function(page) {}
 
+async function gotoWithRetry(page, url) {
+	try {
+		logTimestamp('Loading ' + url);
+		await page.goto(url, { timeout: 30_000, waitUntil: "domcontentloaded" });
+	} catch (firstError) {
+		logTimestamp('Retry loading ' + url);
+		await page.goto(url, { timeout: 30_000, waitUntil: "domcontentloaded" });
+	}
+	await waitForCompleteLoad(page)
+}
+
+
 function setClosePopups(f) {
     closePopups = f;
 }
@@ -188,6 +200,7 @@ async function selectOption(page, field, value) {
 
 export {
     waitForCompleteLoad,
+    gotoWithRetry,
     highlightedClick,
     click,
     hover,

package/src/wireframeUtils.js

@@ -39,6 +39,58 @@ function delay(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
+async function getDeviceScaleFactor(page) {
+    const rawScaleFactor = await page.evaluate(() => window.devicePixelRatio);
+
+    if (typeof rawScaleFactor !== 'number' || !Number.isFinite(rawScaleFactor) || rawScaleFactor <= 0) {
+        return 1;
+    }
+
+    return rawScaleFactor;
+}
+
+function scaleBoundingRect(boundingRect, scaleFactor) {
+    if (!boundingRect) {
+        return boundingRect;
+    }
+
+    return {
+        top: Math.round(boundingRect.top * scaleFactor),
+        left: Math.round(boundingRect.left * scaleFactor),
+        bottom: Math.round(boundingRect.bottom * scaleFactor),
+        right: Math.round(boundingRect.right * scaleFactor)
+    };
+}
+
+function scalePoint(point, scaleFactor) {
+    if (!point) {
+        return point;
+    }
+
+    return {
+        x: Math.round(point.x * scaleFactor),
+        y: Math.round(point.y * scaleFactor)
+    };
+}
+
+function scaleWireframeData(wireframeData, scaleFactor) {
+    if (scaleFactor === 1) {
+        return wireframeData;
+    }
+
+    for (const elementGroup of wireframeData) {
+        for (const element of elementGroup.elements || []) {
+            element.boundingRect = scaleBoundingRect(element.boundingRect, scaleFactor);
+
+            for (const textEntry of element.texts || []) {
+                textEntry.boundingRect = scaleBoundingRect(textEntry.boundingRect, scaleFactor);
+            }
+        }
+    }
+
+    return wireframeData;
+}
+
 async function extractWireframe(page, elementGroups) {
     const wireframeData = await page.evaluate(async ({elementGroups, elementIdAttribute}) => {
 
@@ -272,7 +324,7 @@ async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryC
 }
 
 async function expectWireframe(page, elementGroups, outputDir, outputFile, outputName, options = {}) {
-    const { retryDelay = 1000, maxRetryCount = 10, metadata = {} } = options;
+    const { retryDelay = 1000, maxRetryCount = 10, metadata = {}, deviceScaleFactor } = options;
 
     logTimestamp(`Starting wireframe capture for: ${outputFile}`);
     const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
@@ -282,12 +334,23 @@ async function expectWireframe(page, elementGroups, outputDir, outputFile, outpu
         y: window.scrollY
     }));
 
+    const resolvedDeviceScaleFactor = deviceScaleFactor !== undefined
+        ? deviceScaleFactor
+        : await getDeviceScaleFactor(page);
+
+    logTimestamp(`Applying device scale factor: ${resolvedDeviceScaleFactor}`);
+
+    const scaledWireframeData = scaleWireframeData(wireframeData, resolvedDeviceScaleFactor);
+    const scaledScrollPosition = scalePoint(scrollPosition, resolvedDeviceScaleFactor);
+    const scaledScreenshotScrollPosition = scalePoint(screenshotScrollPosition, resolvedDeviceScaleFactor);
+
     const wireframeOutput = {
         name: outputName,
         timestamp: new Date().toISOString(),
-        scrollPosition,
-        screenshotScrollPosition,
-        elementGroups: wireframeData,
+        scrollPosition: scaledScrollPosition,
+        screenshotScrollPosition: scaledScreenshotScrollPosition,
+        elementGroups: scaledWireframeData,
+        deviceScaleFactor: resolvedDeviceScaleFactor,
         ...metadata
     };
 
@@ -306,4 +369,4 @@ async function expectWireframe(page, elementGroups, outputDir, outputFile, outpu
     return {wireframeOutput, screenshotPath, outputDir: resolvedDir};
 }
 
-export { expectWireframe, getRGBHistogramFromBuffer };
+export { expectWireframe, getRGBHistogramFromBuffer, getDeviceScaleFactor };