@rettangoli/vt 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "main": "./src/index.js",
@@ -15,7 +15,6 @@
     "commander": "^13.1.0",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "looks-same": "^9.0.0",
     "playwright": "^1.52.0",
     "sharp": "^0.33.0",
     "shiki": "^3.3.0"

package/src/cli/report.js

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import looksSame from "looks-same";
+import crypto from "crypto";
 import sharp from "sharp";
 import { Liquid } from "liquidjs";
 import { cp } from "node:fs/promises";
@@ -60,25 +60,38 @@ function sortPaths(a, b) {
   return partsA.number - partsB.number;
 }
 
+async function calculateImageHash(imagePath) {
+  try {
+    const imageBuffer = fs.readFileSync(imagePath);
+    const hash = crypto.createHash('md5').update(imageBuffer).digest('hex');
+    return hash;
+  } catch (error) {
+    console.error(`Error calculating hash for ${imagePath}:`, error);
+    return null;
+  }
+}
+
 async function compareImages(artifactPath, goldPath) {
   try {
-    const {equal, diffBounds, diffClusters} = await looksSame(artifactPath, goldPath, {
-      strict: true,
-      ignoreAntialiasing: true,
-      ignoreCaret: true,
-      shouldCluster: true,
-      clustersSize: 10
-    });
+    const artifactHash = await calculateImageHash(artifactPath);
+    const goldHash = await calculateImageHash(goldPath);
+
+    if (artifactHash === null || goldHash === null) {
+      return {
+        equal: false,
+        error: true,
+      };
+    }
+
+    const equal = artifactHash === goldHash;
 
     return {
       equal,
       error: false,
-      diffBounds,
-      diffClusters
     };
   } catch (error) {
     console.error("Error comparing images:", error);
-    return { 
+    return {
       equal: false,
       error: true,
       diffBounds: null,
@@ -165,16 +178,12 @@ async function main(options = {}) {
 
       let equal = true;
       let error = false;
-      let diffBounds = null;
-      let diffClusters = null;
 
       // Compare images if both exist
       if (candidateExists && referenceExists) {
         const comparison = await compareImages(candidatePath, referencePath);
         equal = comparison.equal;
         error = comparison.error;
-        diffBounds = comparison.diffBounds;
-        diffClusters = comparison.diffClusters;
       } else {
         equal = false; // If one file is missing, they're not equal
       }
@@ -185,8 +194,6 @@ async function main(options = {}) {
           referencePath: referenceExists ? siteReferencePath : null, // Use site reference path for HTML report
           path: relativePath,
           equal: candidateExists && referenceExists ? equal : false,
-          diffBounds,
-          diffClusters,
           onlyInCandidate: candidateExists && !referenceExists,
           onlyInReference: !candidateExists && referenceExists,
         });
@@ -207,8 +214,6 @@ async function main(options = {}) {
             ? path.relative(siteOutputPath, result.referencePath)
             : null,
           equal: result.equal,
-          diffBounds: result.diffBounds,
-          diffClusters: result.diffClusters,
           onlyInCandidate: result.onlyInCandidate,
           onlyInReference: result.onlyInReference,
         };
@@ -219,8 +224,6 @@ async function main(options = {}) {
         candidatePath: item.candidatePath,
         referencePath: item.referencePath,
         equal: item.equal,
-        diffBounds: item.diffBounds,
-        diffClusters: item.diffClusters
       };
       console.log(JSON.stringify(logData, null, 2));
     });

package/src/common.js

@@ -15,6 +15,7 @@ import { chromium } from "playwright";
 import { codeToHtml } from "shiki";
 import sharp from "sharp";
 import path from "path";
+import { createSteps } from "./createSteps.js";
 
 const removeExtension = (filePath) => filePath.replace(/\.[^/.]+$/, "");
 
@@ -301,53 +302,14 @@ async function takeScreenshots(
           const initialScreenshotPath = await takeAndSaveScreenshot(page, baseName);
           console.log(`Initial screenshot saved: ${initialScreenshotPath}`);
 
+          const stepContext = {
+            baseName,
+            takeAndSaveScreenshot,
+          };
+          const stepsExecutor = createSteps(page, stepContext);
+
           for (const step of file.frontMatter?.steps || []) {
-            const [command, ...args] = step.split(" ");
-            switch (command) {
-              case "move":
-                await page.mouse.move(Number(args[0]), Number(args[1]));
-                break;
-              case "click":
-                await page.mouse.click(Number(args[0]), Number(args[1]), { button: "left" });
-                break;
-              case "rclick":
-                await page.mouse.click(Number(args[0]), Number(args[1]), { button: "right" });
-                break;
-              case "mouseDown":
-                await page.mouse.down();
-                break;
-              case "mouseUp":
-                await page.mouse.up();
-                break;
-              case "keypress":
-                await page.keyboard.press(args[0]);
-                break;
-              case "wait":
-                await page.waitForTimeout(Number(args[0]));
-                break;
-              case "screenshot":
-                screenshotIndex++;
-                const screenshotPath = await takeAndSaveScreenshot(page, `${baseName}-${screenshotIndex}`);
-                console.log(`Screenshot saved: ${screenshotPath}`);
-                break;
-              case "customEvent":
-                //Use to dispatch custom event for the test evironment to listen to
-                //customEvent <eventName> <...parameters>
-                //To listen to the event use 
-                //window.addEventListener(<eventName>,(event)=>{
-                //  console.log("The params that you pass through: ",event.detail)  
-                //})
-                const [eventName, ...params] = args;
-                const payload = {};
-                params.forEach(param => {
-                  const [key, value] = param.split('=');
-                  payload[key] = value;
-                });
-                await page.evaluate(({eventName,payload}) => {
-                  window.dispatchEvent(new CustomEvent(eventName, { detail: payload }));
-                },{eventName,payload});  
-                break;
-            }
+            await stepsExecutor.executeStep(step);
           }
           completed++;
           console.log(`Finished processing ${file.path} (${completed}/${total})`);

package/src/createSteps.js

@@ -0,0 +1,148 @@
+async function click(page, args, context, selectedElement) {
+  if (selectedElement) {
+    await selectedElement.click();
+  } else if (args.length >= 2) {
+    await page.mouse.click(Number(args[0]), Number(args[1]), { button: "left" });
+  } else {
+    console.warn('`click` command needs a `select` block or coordinates.');
+  }
+}
+
+async function customEvent(page, args) {
+  const [eventName, ...params] = args;
+  const payload = {};
+  params.forEach(param => {
+    const [key, value] = param.split('=');
+    payload[key] = value;
+  });
+  await page.evaluate(({ eventName, payload }) => {
+    window.dispatchEvent(new CustomEvent(eventName, { detail: payload }));
+  }, { eventName, payload });
+}
+
+async function goto(page, args) {
+  await page.goto(args[0], { waitUntil: "networkidle" });
+}
+
+async function keypress(page, args) {
+  await page.keyboard.press(args[0]);
+}
+
+async function mouseDown(page) {
+  await page.mouse.down();
+}
+
+async function mouseUp(page) {
+  await page.mouse.up();
+}
+
+async function rMouseDown(page){
+  await page.mouse.down({ button: 'right' });
+}
+
+async function rMouseUp(page){
+  await page.mouse.up({ button: 'right' });
+}
+
+async function move(page, args) {
+  await page.mouse.move(Number(args[0]), Number(args[1]));
+}
+
+async function rclick(page, args, context, selectedElement) {
+  if (selectedElement) {
+    await selectedElement.click({ button: 'right' });
+  } else if (args.length >= 2) {
+    await page.mouse.click(Number(args[0]), Number(args[1]), { button: "right" });
+  } else {
+    console.warn('`rclick` command needs a `select` block or coordinates.');
+  }
+}
+
+async function wait(page, args) {
+  await page.waitForTimeout(Number(args[0]));
+}
+
+async function write(page, args, context, selectedElement) {
+  if (selectedElement) {
+    const textToWrite = args.join(' ');
+    await selectedElement.fill(textToWrite);
+  } else {
+    console.warn('`write` command called without a `select` block.');
+  }
+}
+
+async function select(page, args) {
+  const testId = args[0];
+  const hostElementLocator = page.getByTestId(testId);
+  
+  const interactiveElementLocator = hostElementLocator.locator(
+    'input, textarea, button, select, a'
+  ).first();
+  
+  const count = await interactiveElementLocator.count();
+  
+  if (count > 0) {
+    return interactiveElementLocator;
+  }
+  
+  return hostElementLocator;
+}
+
+export function createSteps(page, context) {
+  let screenshotIndex = 0;
+
+  async function screenshot() {
+    screenshotIndex++;
+    const screenshotPath = await context.takeAndSaveScreenshot(page, `${context.baseName}-${screenshotIndex}`);
+    console.log(`Screenshot saved: ${screenshotPath}`);
+  }
+
+  const actionHandlers = {
+    click,
+    customEvent,
+    goto,
+    keypress,
+    mouseDown,
+    mouseUp,
+    move,
+    rclick,
+    rMouseDown,
+    rMouseUp,
+    screenshot,
+    select,
+    wait,
+    write,
+  };
+
+  async function executeSingleStep(stepString, selectedElement) {
+    const [command, ...args] = stepString.split(" ");
+    const actionFn = actionHandlers[command];
+    if (actionFn) {
+      await actionFn(page, args, context, selectedElement);
+    } else {
+      console.warn(`Unknown step command: "${command}"`);
+    }
+  }
+
+  return {
+    async executeStep(step) {
+      if (typeof step === 'string') {
+        await executeSingleStep(step, null);
+      } else if (typeof step === 'object' && step !== null) {
+        const blockCommandString = Object.keys(step)[0];
+        const nestedStepStrings = step[blockCommandString];
+        const [command, ...args] = blockCommandString.split(" ");
+
+        const blockFn = actionHandlers[command];
+        if (blockFn) {
+          const selectedElement = await blockFn(page, args, context, null);
+          for (const nestedStep of nestedStepStrings) {
+            await executeSingleStep(nestedStep, selectedElement);
+          }
+        } else {
+          console.warn(`Unsupported block command: "${command}".`);
+        }
+      }
+    }
+  };
+}