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

package/package.json

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

package/src/annotateWireframe.js

@@ -1,7 +1,20 @@
-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);
+}
 
 async function annotateWireframeFile(wireframeFile, screenshotFile) {
     if (!fs.existsSync(wireframeFile)) {
@@ -17,13 +30,16 @@ 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 colors = {
         box: { fill: 'rgba(220, 160, 40, 0.4)', stroke: '#E6A500' },
         image: { fill: 'rgba(70, 180, 120, 0.4)', stroke: '#2EBC6F' },
@@ -70,19 +86,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/index.js

@@ -4,7 +4,9 @@ export {
     click,
     hover,
     fill,
+    selectOption,
     rehover,
+    scrollToTopOfElement,
     setClosePopups,
     logTimestamp,
     setBaseUrl

package/src/testUtils.js

@@ -140,6 +140,25 @@ async function rehover(page) {
     }
 }
 
+async function scrollToTopOfElement(page, target, offset = 0) {
+    const locator = typeof target === 'string' ? page.locator(target) : target;
+    await locator.waitFor({ state: 'attached' });
+
+    const targetScrollY = await locator.evaluate((element, scrollOffset) => {
+        const rect = element.getBoundingClientRect();
+        return rect.top + window.scrollY - scrollOffset;
+    }, offset);
+
+    const maxScrollY = await page.evaluate(() => document.body.scrollHeight - window.innerHeight);
+    const finalScrollY = Math.max(0, Math.min(targetScrollY, maxScrollY));
+
+    await page.evaluate((scrollY) => window.scrollTo(0, scrollY), finalScrollY);
+    await page.waitForTimeout(500);
+    logTimestamp(`Scrolled to position: ${finalScrollY}`);
+
+    return finalScrollY;
+}
+
 async function fill(page, field, value) {
     let locator;
     if (typeof field === 'string') {
@@ -153,13 +172,29 @@ async function fill(page, field, value) {
     
 }
 
+async function selectOption(page, field, value) {
+    let locator;
+    if (typeof field === 'string') {
+        const selector = `select[name="${field}"]`;
+        locator = page.locator(selector);
+    } else {
+        locator = field;
+    }
+    await click(page, locator);
+    await locator.selectOption({ label: value });
+    logTimestamp('selecting ' + value + ' on ' + locator);
+    await page.waitForTimeout(500);
+}
+
 export {
     waitForCompleteLoad,
     highlightedClick,
     click,
     hover,
     fill,
+    selectOption,
     rehover,
+    scrollToTopOfElement,
     setClosePopups,
     logTimestamp,
     setBaseUrl

package/src/wireframeUtils.js

@@ -1,18 +1,25 @@
 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';
 
 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]++;