@rettangoli/vt 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "main": "./src/index.js",
@@ -15,8 +15,9 @@
     "commander": "^13.1.0",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "playwright": "^1.52.0",
-    "sharp": "^0.33.0",
+    "pixelmatch": "^7.1.0",
+    "playwright": "1.57.0",
+    "sharp": "^0.34.5",
     "shiki": "^3.3.0"
   }
-}
+}

package/src/cli/generate.js

@@ -74,7 +74,7 @@ async function main(options) {
     templateConfig,
   );
 
-  // Generate overview page
+  // Generate overview page (includes all files, skipped or not)
   generateOverview(
     generatedFiles,
     indexTemplatePath,
@@ -82,12 +82,22 @@ async function main(options) {
     configData,
   );
 
-  // Take screenshots
+  // Take screenshots (only for non-skipped files)
   if (!skipScreenshots) {
+    // Filter out files with skipScreenshot: true in frontmatter
+    const filesToScreenshot = generatedFiles.filter(
+      (file) => !file.frontMatter?.skipScreenshot
+    );
+
+    const skippedCount = generatedFiles.length - filesToScreenshot.length;
+    if (skippedCount > 0) {
+      console.log(`Skipping screenshots for ${skippedCount} files`);
+    }
+
     const server = configUrl ? null : startWebServer(siteOutputPath, vtPath, port);
     try {
       await takeScreenshots(
-        generatedFiles,
+        filesToScreenshot,
         `http://localhost:${port}`,
         candidatePath,
         24,

package/src/cli/report.js

@@ -1,9 +1,10 @@
 import fs from "fs";
 import path from "path";
 import crypto from "crypto";
-import sharp from "sharp";
 import { Liquid } from "liquidjs";
 import { cp } from "node:fs/promises";
+import pixelmatch from "pixelmatch";
+import sharp from "sharp";
 
 const libraryTemplatesPath = new URL('./templates', import.meta.url).pathname;
 
@@ -71,35 +72,80 @@ async function calculateImageHash(imagePath) {
   }
 }
 
-async function compareImages(artifactPath, goldPath) {
+async function compareImagesMd5(artifactPath, goldPath) {
   try {
     const artifactHash = await calculateImageHash(artifactPath);
     const goldHash = await calculateImageHash(goldPath);
 
     if (artifactHash === null || goldHash === null) {
-      return {
-        equal: false,
-        error: true,
-      };
+      return { equal: false, error: true };
     }
 
-    const equal = artifactHash === goldHash;
-
-    return {
-      equal,
-      error: false,
-    };
+    return { equal: artifactHash === goldHash, error: false };
   } catch (error) {
     console.error("Error comparing images:", error);
-    return {
-      equal: false,
-      error: true,
-      diffBounds: null,
-      diffClusters: null
-    };
+    return { equal: false, error: true };
   }
 }
 
+async function compareImagesPixelmatch(artifactPath, goldPath, diffPath, options = {}) {
+  const { colorThreshold = 0.1, diffThreshold = 0.3 } = options;
+
+  try {
+    // Load images and convert to raw RGBA using sharp
+    const [artifactData, goldData] = await Promise.all([
+      sharp(artifactPath).ensureAlpha().raw().toBuffer({ resolveWithObject: true }),
+      sharp(goldPath).ensureAlpha().raw().toBuffer({ resolveWithObject: true }),
+    ]);
+
+    const { width, height } = artifactData.info;
+    const goldWidth = goldData.info.width;
+    const goldHeight = goldData.info.height;
+    const totalPixels = width * height;
+
+    // If dimensions don't match, images are different
+    if (width !== goldWidth || height !== goldHeight) {
+      return { equal: false, error: false, diffPixels: -1, totalPixels, similarity: 0 };
+    }
+
+    // Create diff image buffer
+    const diffBuffer = Buffer.alloc(totalPixels * 4);
+
+    const diffPixels = pixelmatch(
+      artifactData.data,
+      goldData.data,
+      diffBuffer,
+      width,
+      height,
+      { threshold: colorThreshold }
+    );
+
+    const diffPercent = (diffPixels / totalPixels) * 100;
+    const similarity = (100 - diffPercent).toFixed(2);
+    const equal = diffPercent < diffThreshold;
+
+    // Save diff image if not equal
+    if (!equal && diffPath) {
+      fs.mkdirSync(path.dirname(diffPath), { recursive: true });
+      await sharp(diffBuffer, { raw: { width, height, channels: 4 } })
+        .png()
+        .toFile(diffPath);
+    }
+
+    return { equal, error: false, diffPixels, totalPixels, similarity };
+  } catch (error) {
+    console.error("Error comparing images with pixelmatch:", error);
+    return { equal: false, error: true };
+  }
+}
+
+async function compareImages(artifactPath, goldPath, method = 'pixelmatch', diffPath = null, options = {}) {
+  if (method === 'md5') {
+    return compareImagesMd5(artifactPath, goldPath);
+  }
+  return compareImagesPixelmatch(artifactPath, goldPath, diffPath, options);
+}
+
 async function generateReport({ results, templatePath, outputPath }) {
   try {
     // Read the template file
@@ -120,20 +166,36 @@ async function generateReport({ results, templatePath, outputPath }) {
 }
 
 async function main(options = {}) {
-  const { vtPath = "./vt" } = options;
+  const {
+    vtPath = "./vt",
+    compareMethod = 'pixelmatch',
+    colorThreshold = 0.1,
+    diffThreshold = 0.3,
+  } = options;
 
   const siteOutputPath = path.join(".rettangoli", "vt", "_site");
   const candidateDir = path.join(siteOutputPath, "candidate");
+  const diffDir = path.join(siteOutputPath, "diff");
   const originalReferenceDir = path.join(vtPath, "reference");
   const siteReferenceDir = path.join(siteOutputPath, "reference");
   const templatePath = path.join(libraryTemplatesPath, "report.html");
   const outputPath = path.join(siteOutputPath, "report.html");
 
+  console.log(`Comparison method: ${compareMethod}`);
+  if (compareMethod === 'pixelmatch') {
+    console.log(`  color threshold: ${colorThreshold}, diff threshold: ${diffThreshold}%`);
+  }
+
   if (!fs.existsSync(originalReferenceDir)) {
     console.log("Reference directory does not exist, creating it...");
     fs.mkdirSync(originalReferenceDir, { recursive: true });
   }
 
+  // Create diff directory for diffs
+  if (compareMethod === 'pixelmatch' && !fs.existsSync(diffDir)) {
+    fs.mkdirSync(diffDir, { recursive: true });
+  }
+
   // Copy reference directory to _site for web access
   if (fs.existsSync(originalReferenceDir)) {
     console.log("Copying reference directory to _site...");
@@ -169,6 +231,7 @@ async function main(options = {}) {
       const candidatePath = path.join(candidateDir, relativePath);
       const referencePath = path.join(originalReferenceDir, relativePath);
       const siteReferencePath = path.join(siteReferenceDir, relativePath);
+      const diffPath = path.join(diffDir, relativePath.replace('.webp', '-diff.png'));
 
       const candidateExists = fs.existsSync(candidatePath);
       const referenceExists = fs.existsSync(referencePath);
@@ -178,12 +241,28 @@ async function main(options = {}) {
 
       let equal = true;
       let error = false;
+      let similarity = null;
+      let diffPixels = null;
 
       // Compare images if both exist
       if (candidateExists && referenceExists) {
-        const comparison = await compareImages(candidatePath, referencePath);
+        // Ensure diff directory exists
+        const diffDirPath = path.dirname(diffPath);
+        if (!fs.existsSync(diffDirPath)) {
+          fs.mkdirSync(diffDirPath, { recursive: true });
+        }
+
+        const comparison = await compareImages(
+          candidatePath,
+          referencePath,
+          compareMethod,
+          diffPath,
+          { colorThreshold, diffThreshold }
+        );
         equal = comparison.equal;
         error = comparison.error;
+        similarity = comparison.similarity;
+        diffPixels = comparison.diffPixels;
       } else {
         equal = false; // If one file is missing, they're not equal
       }
@@ -194,6 +273,8 @@ async function main(options = {}) {
           referencePath: referenceExists ? siteReferencePath : null, // Use site reference path for HTML report
           path: relativePath,
           equal: candidateExists && referenceExists ? equal : false,
+          similarity,
+          diffPixels,
           onlyInCandidate: candidateExists && !referenceExists,
           onlyInReference: !candidateExists && referenceExists,
         });
@@ -214,6 +295,8 @@ async function main(options = {}) {
             ? path.relative(siteOutputPath, result.referencePath)
             : null,
           equal: result.equal,
+          similarity: result.similarity,
+          diffPixels: result.diffPixels,
           onlyInCandidate: result.onlyInCandidate,
           onlyInReference: result.onlyInReference,
         };
@@ -224,22 +307,24 @@ async function main(options = {}) {
         candidatePath: item.candidatePath,
         referencePath: item.referencePath,
         equal: item.equal,
+        similarity: item.similarity ? `${item.similarity}%` : null,
+        diffPixels: item.diffPixels,
       };
       console.log(JSON.stringify(logData, null, 2));
     });
-    
+
     // Summary at the end
     console.log(`\nSummary:`);
     console.log(`Total images: ${results.length}`);
     console.log(`Mismatched images: ${mismatchingItems.length}`);
-    
+
     // Generate HTML report
     await generateReport({
       results: mismatchingItems,
       templatePath,
       outputPath,
     });
-    if(mismatchingItems.length > 0){ 
+    if(mismatchingItems.length > 0){
       console.error("Error: there are more than 0 mismatching item.")
       process.exit(1);
     }

package/src/common.js

@@ -284,18 +284,40 @@ async function takeScreenshots(
         // Create a new context and page for each file (for parallelism)
         const context = await browser.newContext();
         const page = await context.newPage();
-        let screenshotIndex = 0;
 
         try {
+          const envVars = {};
+          for (const [key, value] of Object.entries(process.env)) {
+            if (key.startsWith('RTGL_VT_')) {
+              envVars[key] = value;
+            }
+          }
+
+          if (Object.keys(envVars).length > 0) {
+            await page.addInitScript((vars) => {
+              Object.assign(window, vars);
+            }, envVars);
+          }
+
           const frontMatterUrl = file.frontMatter?.url;
-          const constructedUrl = convertToHtmlExtension(
-            `${serverUrl}/candidate/${file.path.replace(/\\/g, "/")}`,
-          );
+          const constructedUrl = convertToHtmlExtension(`${serverUrl}/candidate/${file.path.replace(/\\/g, "/")}`);
           const url = frontMatterUrl ?? configUrl ?? constructedUrl;
           const fileUrl = url.startsWith("http") ? url : new URL(url, serverUrl).href;
 
           console.log(`Navigating to ${fileUrl}`);
           await page.goto(fileUrl, { waitUntil: "networkidle" });
+
+          // Normalize font rendering for consistent screenshots
+          await page.addStyleTag({
+            content: `
+              * {
+                -webkit-font-smoothing: antialiased !important;
+                -moz-osx-font-smoothing: grayscale !important;
+                text-rendering: geometricPrecision !important;
+              }
+            `
+          });
+
           if (waitTime > 0) {
             await page.waitForTimeout(waitTime);
           }

package/src/createSteps.js

@@ -22,6 +22,16 @@ async function customEvent(page, args) {
 
 async function goto(page, args) {
   await page.goto(args[0], { waitUntil: "networkidle" });
+  // Normalize font rendering for consistent screenshots
+  await page.addStyleTag({
+    content: `
+      * {
+        -webkit-font-smoothing: antialiased !important;
+        -moz-osx-font-smoothing: grayscale !important;
+        text-rendering: geometricPrecision !important;
+      }
+    `
+  });
 }
 
 async function keypress(page, args) {