@rettangoli/vt 1.0.0-rc13 → 1.0.0-rc15

package/README.md

@@ -141,15 +141,15 @@ Screenshot naming:
 A pre-built Docker image with `rtgl` and Playwright browsers is available:
 
 ```bash
-docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13
+docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27
 ```
 
 Run commands against a local project:
 
 ```bash
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt screenshot
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt report
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt accept
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt screenshot
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt report
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt accept
 ```
 
 Note:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "1.0.0-rc13",
+  "version": "1.0.0-rc15",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "main": "./src/index.js",

package/src/cli/report.js

@@ -2,10 +2,11 @@ import fs from "fs";
 import path from "path";
 import crypto from "crypto";
 import { cp } from "node:fs/promises";
+import { load as loadYaml } from "js-yaml";
 import pixelmatch from "pixelmatch";
 import sharp from "sharp";
-import { readYaml } from "../common.js";
-import { validateVtConfig } from "../validation.js";
+import { extractFrontMatter, readYaml } from "../common.js";
+import { validateFiniteNumber, validateVtConfig } from "../validation.js";
 import { resolveReportOptions } from "./report-options.js";
 import {
   buildAllRelativePaths,
@@ -17,6 +18,7 @@ import {
   filterRelativeScreenshotPathsBySelectors,
   hasSelectors,
 } from "../selector-filter.js";
+import { stripViewportSuffix } from "../viewport.js";
 
 const libraryTemplatesPath = new URL("./templates", import.meta.url).pathname;
 
@@ -35,6 +37,64 @@ function getAllFiles(dir, fileList = []) {
   return fileList;
 }
 
+function normalizePathForLookup(filePath) {
+  return String(filePath)
+    .replace(/\\/g, "/")
+    .replace(/^\.?\//, "");
+}
+
+function toSpecItemKey(relativeSpecPath) {
+  const normalized = normalizePathForLookup(relativeSpecPath);
+  const ext = path.extname(normalized);
+  return normalized.slice(0, normalized.length - ext.length);
+}
+
+function toScreenshotItemKey(relativeScreenshotPath) {
+  const normalized = normalizePathForLookup(relativeScreenshotPath).replace(/\.webp$/i, "");
+  const withoutOrdinal = normalized.replace(/-\d{1,3}$/i, "");
+  return stripViewportSuffix(withoutOrdinal);
+}
+
+function loadFrontMatterDiffThresholdOverrides(specsDir) {
+  const overrides = new Map();
+  if (!fs.existsSync(specsDir)) {
+    return overrides;
+  }
+
+  const specFiles = getAllFiles(specsDir);
+  for (const specFilePath of specFiles) {
+    const fileContent = fs.readFileSync(specFilePath, "utf8");
+    const { frontMatter } = extractFrontMatter(fileContent);
+    if (!frontMatter) {
+      continue;
+    }
+
+    const relativePath = path.relative(specsDir, specFilePath);
+    const frontMatterData = loadYaml(frontMatter);
+    if (
+      frontMatterData === null
+      || frontMatterData === undefined
+      || typeof frontMatterData !== "object"
+      || Array.isArray(frontMatterData)
+    ) {
+      continue;
+    }
+
+    if (frontMatterData.diffThreshold === undefined || frontMatterData.diffThreshold === null) {
+      continue;
+    }
+
+    validateFiniteNumber(
+      frontMatterData.diffThreshold,
+      `${relativePath}: frontMatter.diffThreshold`,
+      { min: 0, max: 100 },
+    );
+    overrides.set(toSpecItemKey(relativePath), frontMatterData.diffThreshold);
+  }
+
+  return overrides;
+}
+
 async function calculateImageHash(imagePath) {
   const imageBuffer = fs.readFileSync(imagePath);
   const hash = crypto.createHash("md5").update(imageBuffer).digest("hex");
@@ -137,10 +197,19 @@ async function main(options = {}) {
   const templatePath = path.join(libraryTemplatesPath, "report.html");
   const outputPath = path.join(siteOutputPath, "report.html");
   const jsonReportPath = path.join(".rettangoli", "vt", "report.json");
+  const specsDir = path.join(vtPath, "specs");
+
+  let diffThresholdOverridesBySpec = new Map();
+  if (compareMethod === "pixelmatch") {
+    diffThresholdOverridesBySpec = loadFrontMatterDiffThresholdOverrides(specsDir);
+  }
 
   console.log(`Comparison method: ${compareMethod}`);
   if (compareMethod === "pixelmatch") {
     console.log(`  color threshold: ${colorThreshold}, diff threshold: ${diffThreshold}%`);
+    if (diffThresholdOverridesBySpec.size > 0) {
+      console.log(`  frontmatter diff threshold overrides: ${diffThresholdOverridesBySpec.size}`);
+    }
   }
 
   if (!fs.existsSync(originalReferenceDir)) {
@@ -204,6 +273,9 @@ async function main(options = {}) {
       let error = false;
       let similarity = null;
       let diffPixels = null;
+      const itemKey = toScreenshotItemKey(relativePath);
+      const itemDiffThreshold = diffThresholdOverridesBySpec.get(itemKey);
+      const effectiveDiffThreshold = itemDiffThreshold ?? diffThreshold;
 
       if (candidateExists && referenceExists) {
         const diffDirPath = path.dirname(diffPath);
@@ -216,7 +288,7 @@ async function main(options = {}) {
           referencePath,
           compareMethod,
           diffPath,
-          { colorThreshold, diffThreshold },
+          { colorThreshold, diffThreshold: effectiveDiffThreshold },
         );
         if (comparison.error) {
           comparisonErrors.push(

package/src/cli/templates/default.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/base.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/theme-rtgl-slate.css">
     <script>
       window.rtglIcons = {
         text: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 12H20M4 8H20M4 16H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
@@ -40,7 +40,7 @@
       }
     </script>
     <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/rettangoli-iife-ui.min.js"></script>
     <script src="/public/main.js"></script>
   </head>
   <body class="dark">

package/src/cli/templates/index.html

@@ -4,8 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/base.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/theme-rtgl-slate.css">
   <script>
     window.addEventListener('DOMContentLoaded', () => {
       if (location.hash) {
@@ -17,7 +17,7 @@
     });
   </script>
   <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/rettangoli-iife-ui.min.js"></script>
 
   <style>
     pre {

package/src/cli/templates/report.html

@@ -4,10 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/base.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/themes/theme-rtgl-slate.css">
   <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc15/dist/rettangoli-iife-ui.min.js"></script>
   <style>
     code {
       white-space: pre-wrap;