flexysnap 0.1.3-alpha.2 → 0.1.5-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.1.3-alpha.2",
+  "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,4 +24,10 @@ export {
 
 export { areWireframesStable } from './wireframeStability.js';
 
-export { expectWireframe, getRGBHistogramFromBuffer } from './wireframeUtils.js';
+export { expectWireframe, getRGBHistogramFromBuffer, getDeviceScaleFactor } from './wireframeUtils.js';
+
+export {
+    setWireframeOutputRoot,
+    getWireframeOutputRoot,
+    resolveWireframeOutputDir
+} from './wireframeOutput.js';

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/wireframeOutput.js

@@ -0,0 +1,29 @@
+import path from 'path';
+
+let outputRoot = process.cwd();
+
+function setWireframeOutputRoot(rootPath) {
+    outputRoot = rootPath || process.cwd();
+}
+
+function getWireframeOutputRoot() {
+    return outputRoot;
+}
+
+function resolveWireframeOutputDir(outputDir) {
+    if (!outputDir || typeof outputDir !== 'string') {
+        throw new Error('resolveWireframeOutputDir requires a non-empty string outputDir.');
+    }
+
+    if (path.isAbsolute(outputDir)) {
+        return outputDir;
+    }
+
+    return path.join(outputRoot, outputDir);
+}
+
+export {
+    setWireframeOutputRoot,
+    getWireframeOutputRoot,
+    resolveWireframeOutputDir
+};

package/src/wireframeUtils.js

@@ -3,6 +3,7 @@ import path from 'path';
 import { logTimestamp } from './testUtils.js';
 import { loadImage, createCanvas } from 'canvas';
 import { areWireframesStable } from './wireframeStability.js';
+import { resolveWireframeOutputDir } from './wireframeOutput.js';
 
 const FLEXYSNAP_ELEMENT_ID_ATTRIBUTE = 'data-flexysnap-id';
 
@@ -38,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}) => {
 
@@ -270,41 +323,50 @@ async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryC
     return {wireframeData: currentWireframeData, scrollPosition: currentScrollPosition};
 }
 
-async function expectWireframe(page, elementGroups, configName, outputFile, outputName, retryDelay = 1000, maxRetryCount = 10) {
-        logTimestamp(`Starting wireframe capture for: ${outputFile}`);
-    const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
+async function expectWireframe(page, elementGroups, outputDir, outputFile, outputName, options = {}) {
+    const { retryDelay = 1000, maxRetryCount = 10, metadata = {}, deviceScaleFactor } = options;
 
-    const userType = process.env.USER_TYPE;
-    const deviceType = process.env.DEVICE_TYPE;
-    const testType = process.env.TEST_TYPE;
+    logTimestamp(`Starting wireframe capture for: ${outputFile}`);
+    const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
 
     const screenshotScrollPosition = await page.evaluate(() => ({
         x: window.scrollX,
         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(),
-        deviceType: process.env.DEVICE_TYPE,
-        userType: process.env.USER_TYPE,
-        scrollPosition,
-        screenshotScrollPosition,
-        elementGroups: wireframeData
+        scrollPosition: scaledScrollPosition,
+        screenshotScrollPosition: scaledScreenshotScrollPosition,
+        elementGroups: scaledWireframeData,
+        deviceScaleFactor: resolvedDeviceScaleFactor,
+        ...metadata
     };
 
+    const resolvedDir = resolveWireframeOutputDir(outputDir);
+    fs.mkdirSync(resolvedDir, {recursive: true});
+
     const fileName = `${outputFile}.json`;
-    const filePath = path.join(process.cwd(), 'wireframes', 'test', testType, configName, deviceType, userType, fileName);
-    const fileDir = path.dirname(filePath);
-    fs.mkdirSync(fileDir, {recursive: true});
+    const filePath = path.join(resolvedDir, fileName);
     fs.writeFileSync(filePath, JSON.stringify(wireframeOutput, null, 2));
     logTimestamp(`Wireframe captured and saved to: ${fileName}`);
 
-    const screenshotPath = path.join(fileDir, `${outputFile}.png`);
+    const screenshotPath = path.join(resolvedDir, `${outputFile}.png`);
     await page.screenshot({ path: screenshotPath });
     logTimestamp(`Wireframe screenshot saved to: ${screenshotPath}`);
 
-    return {wireframeOutput, screenshotPath};
+    return {wireframeOutput, screenshotPath, outputDir: resolvedDir};
 }
 
-export { expectWireframe, getRGBHistogramFromBuffer };
+export { expectWireframe, getRGBHistogramFromBuffer, getDeviceScaleFactor };