flexysnap 0.1.2-alpha.3 → 0.1.3-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.1.2-alpha.3",
+  "version": "0.1.3-alpha.2",
   "description": "Flexible visual snapshot testing for Playwright, built for e-commerce.",
   "keywords": [
     "playwright",
@@ -44,10 +44,9 @@
   },
   "dependencies": {
     "@playwright/test": "^1.61.1",
-    "canvas": "^3.2.3",
-    "sharp": "^0.35.3"
+    "canvas": "^3.2.3"
   },
   "devDependencies": {
     "eslint": "^9.9.0"
   }
-}
+}

package/src/annotateWireframe.js

@@ -1,7 +1,30 @@
-import sharp from 'sharp';
 import fs from 'fs';
 import path from 'path';
-import { createCanvas } from 'canvas';
+import { createCanvas, loadImage } from 'canvas';
+
+function applyGrayscale(ctx, width, height) {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+
+    for (let i = 0; i < data.length; i += 4) {
+        const gray = Math.round(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
+        data[i] = gray;
+        data[i + 1] = gray;
+        data[i + 2] = gray;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+}
+
+function getScrollOffset(wireframe) {
+    const extractionScrollPosition = wireframe.scrollPosition || { x: 0, y: 0 };
+    const screenshotScrollPosition = wireframe.screenshotScrollPosition || extractionScrollPosition;
+
+    return {
+        offsetX: extractionScrollPosition.x - screenshotScrollPosition.x,
+        offsetY: extractionScrollPosition.y - screenshotScrollPosition.y
+    };
+}
 
 async function annotateWireframeFile(wireframeFile, screenshotFile) {
     if (!fs.existsSync(wireframeFile)) {
@@ -17,13 +40,22 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
     const wireframeContent = fs.readFileSync(wireframeFile, 'utf-8');
     const wireframe = JSON.parse(wireframeContent);
 
-    const metadata = await sharp(screenshotFile).metadata();
-    const width = metadata.width;
-    const height = metadata.height;
+    const screenshot = await loadImage(screenshotFile);
+    const width = screenshot.width;
+    const height = screenshot.height;
 
     const canvas = createCanvas(width, height);
     const ctx = canvas.getContext('2d');
 
+    ctx.drawImage(screenshot, 0, 0);
+    applyGrayscale(ctx, width, height);
+
+    const { offsetX, offsetY } = getScrollOffset(wireframe);
+
+    if (offsetX !== 0 || offsetY !== 0) {
+        console.log(`Compensating for scroll drift between extraction and screenshot: offsetX=${offsetX}, offsetY=${offsetY}`);
+    }
+
     const colors = {
         box: { fill: 'rgba(220, 160, 40, 0.4)', stroke: '#E6A500' },
         image: { fill: 'rgba(70, 180, 120, 0.4)', stroke: '#2EBC6F' },
@@ -36,16 +68,23 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
     }
 
     function drawBoundingBox(rect, colorKey, dashed = false) {
-        const boxWidth = rect.right - rect.left;
-        const boxHeight = rect.bottom - rect.top;
+        const adjustedRect = {
+            left: rect.left + offsetX,
+            right: rect.right + offsetX,
+            top: rect.top + offsetY,
+            bottom: rect.bottom + offsetY
+        };
+
+        const boxWidth = adjustedRect.right - adjustedRect.left;
+        const boxHeight = adjustedRect.bottom - adjustedRect.top;
         const color = colors[colorKey];
 
         ctx.fillStyle = color.fill;
-        ctx.fillRect(rect.left, rect.top, boxWidth, boxHeight);
+        ctx.fillRect(adjustedRect.left, adjustedRect.top, boxWidth, boxHeight);
         ctx.strokeStyle = color.stroke;
         ctx.lineWidth = 2;
         ctx.setLineDash(dashed ? [6, 4] : []);
-        ctx.strokeRect(rect.left, rect.top, boxWidth, boxHeight);
+        ctx.strokeRect(adjustedRect.left, adjustedRect.top, boxWidth, boxHeight);
         ctx.setLineDash([]);
     }
 
@@ -70,19 +109,11 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
         }
     }
 
-    const overlayBuffer = canvas.toBuffer('image/png');
-
     const outputDir = path.dirname(screenshotFile);
     const basename = path.basename(screenshotFile, '.png');
     const outputPath = path.join(outputDir, `${basename}_wireframe.png`);
 
-    await sharp(screenshotFile)
-        .grayscale()
-        .composite([{
-            input: overlayBuffer,
-            blend: 'over'
-        }])
-        .toFile(outputPath);
+    fs.writeFileSync(outputPath, canvas.toBuffer('image/png'));
 
     console.log(`Annotated wireframe saved to: ${outputPath}`);
 }

package/src/wireframeUtils.js

@@ -1,18 +1,27 @@
 import fs from 'fs';
 import path from 'path';
 import { logTimestamp } from './testUtils.js';
-import sharp from 'sharp';
+import { loadImage, createCanvas } from 'canvas';
 import { areWireframesStable } from './wireframeStability.js';
 
+const FLEXYSNAP_ELEMENT_ID_ATTRIBUTE = 'data-flexysnap-id';
+
 async function getRGBHistogramFromBuffer(buffer) {
-    const {data, info} = await sharp(buffer)
-        .raw()
-        .toBuffer({resolveWithObject: true});
+    const image = await loadImage(buffer);
+    const canvas = createCanvas(image.width, image.height);
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0);
+
+    const { data } = ctx.getImageData(0, 0, image.width, image.height);
 
     const histogram = new Array(48).fill(0);
-    const pixelCount = info.width * info.height;
+    const pixelCount = image.width * image.height;
+
+    if (pixelCount === 0) {
+        return histogram;
+    }
 
-    for (let i = 0; i < data.length; i += info.channels) {
+    for (let i = 0; i < data.length; i += 4) {
         histogram[Math.floor(data[i] / 16)]++;
         histogram[Math.floor(data[i + 1] / 16) + 16]++;
         histogram[Math.floor(data[i + 2] / 16) + 32]++;
@@ -30,7 +39,7 @@ function delay(milliseconds) {
 }
 
 async function extractWireframe(page, elementGroups) {
-    const wireframeData = await page.evaluate(async ({elementGroups}) => {
+    const wireframeData = await page.evaluate(async ({elementGroups, elementIdAttribute}) => {
 
         function createBoundingRect(element) {
             const rect = element.getBoundingClientRect();
@@ -73,7 +82,8 @@ async function extractWireframe(page, elementGroups) {
         }
 
 
-        for (const elementGroup of elementGroups) {
+        for (let groupIndex = 0; groupIndex < elementGroups.length; groupIndex++) {
+            const elementGroup = elementGroups[groupIndex];
             elementGroup.strictPosition = elementGroup.strictPosition !== false;
             elementGroup.elements = [];
 
@@ -152,18 +162,26 @@ async function extractWireframe(page, elementGroups) {
                     }
                 }
 
-                elementGroup.elements.push({
+                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;
             }
         }
 
         return elementGroups;
-    }, {elementGroups});
+    }, {elementGroups, elementIdAttribute: FLEXYSNAP_ELEMENT_ID_ATTRIBUTE});
 
     const scrollPosition = await page.evaluate(() => ({
         x: window.scrollX,
@@ -172,8 +190,8 @@ async function extractWireframe(page, elementGroups) {
 
     for (const elementGroup of wireframeData) {
         for (const element of elementGroup.elements) {
-            if (element.type === 'image') {
-                const locator = page.locator(elementGroup.selector).nth(element.index);
+            if (element.type === 'image' && element.elementId) {
+                const locator = page.locator(`[${FLEXYSNAP_ELEMENT_ID_ATTRIBUTE}="${element.elementId}"]`);
                 await locator.waitFor({state: 'visible'});
 
                 try {
@@ -192,14 +210,28 @@ async function extractWireframe(page, elementGroups) {
                 } catch {
                     element.type = 'box'
                 }
+
+                delete element.elementId;
             }
         }
     }
 
-    await page.evaluate(({scrollPosition}) => {
-        window.scrollTo(scrollPosition.x, scrollPosition.y);
-    }, {scrollPosition});
-    return wireframeData;
+    await page.evaluate(({scrollPosition, elementIdAttribute}) => {
+        for (const el of document.querySelectorAll(`[${elementIdAttribute}]`)) {
+            el.removeAttribute(elementIdAttribute);
+        }
+        window.scrollTo({top: scrollPosition.y, left: scrollPosition.x, behavior: 'instant'});
+    }, {scrollPosition, elementIdAttribute: FLEXYSNAP_ELEMENT_ID_ATTRIBUTE});
+
+    try {
+        await page.waitForFunction((expectedScrollPosition) => {
+            return window.scrollX === expectedScrollPosition.x && window.scrollY === expectedScrollPosition.y;
+        }, scrollPosition, {timeout: 2000});
+    } catch {
+        logTimestamp('Scroll position did not settle back to the extraction position.');
+    }
+
+    return {wireframeData, scrollPosition};
 }
 
 function cloneElementGroups(elementGroups) {
@@ -209,17 +241,20 @@ function cloneElementGroups(elementGroups) {
 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();
-        currentWireframeData = await extractWireframe(page, cloneElementGroups(elementGroups));
+        const extractionResult = await extractWireframe(page, cloneElementGroups(elementGroups));
+        currentWireframeData = extractionResult.wireframeData;
+        currentScrollPosition = extractionResult.scrollPosition;
         const extractionDuration = Date.now() - extractionStartTime;
         logTimestamp(`Wireframe candidate captured after ${extractionDuration/1000} seconds.`)
 
         if (previousWireframeData !== null &&
             areWireframesStable(previousWireframeData, currentWireframeData)) {
             logTimestamp(`Wireframe stabilized after ${attempt + 1} extraction(s)`);
-            return currentWireframeData;
+            return {wireframeData: currentWireframeData, scrollPosition: currentScrollPosition};
         }
 
         previousWireframeData = currentWireframeData;
@@ -232,22 +267,29 @@ async function extractStableWireframe(page, elementGroups, retryDelay, maxRetryC
     }
 
     logTimestamp(`Wireframe did not stabilize within ${maxRetryCount} extraction(s)`);
-    return currentWireframeData;
+    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 = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
+    const { wireframeData, scrollPosition } = await extractStableWireframe(page, elementGroups, retryDelay, maxRetryCount);
 
     const userType = process.env.USER_TYPE;
     const deviceType = process.env.DEVICE_TYPE;
     const testType = process.env.TEST_TYPE;
 
+    const screenshotScrollPosition = await page.evaluate(() => ({
+        x: window.scrollX,
+        y: window.scrollY
+    }));
+
     const wireframeOutput = {
         name: outputName,
         timestamp: new Date().toISOString(),
         deviceType: process.env.DEVICE_TYPE,
         userType: process.env.USER_TYPE,
+        scrollPosition,
+        screenshotScrollPosition,
         elementGroups: wireframeData
     };