@rettangoli/vt 0.0.10 → 0.0.12

package/package.json

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

package/src/cli/generate.js

@@ -9,9 +9,8 @@ import {
   readYaml,
 } from "../common.js";
 
-const libraryTemplatesPath = new URL('./templates', import.meta.url).pathname;
-const libraryStaticPath = new URL('./static', import.meta.url).pathname;
-
+const libraryTemplatesPath = new URL("./templates", import.meta.url).pathname;
+const libraryStaticPath = new URL("./static", import.meta.url).pathname;
 
 /**
  * Main function that orchestrates the entire process
@@ -21,14 +20,14 @@ async function main(options) {
     skipScreenshots = false,
     vtPath = "./vt",
     screenshotWaitTime = 0,
-    port = 3001
+    port = 3001,
   } = options;
 
   const specsPath = join(vtPath, "specs");
   const mainConfigPath = "rettangoli.config.yaml";
   const siteOutputPath = join(".rettangoli", "vt", "_site");
   const candidatePath = join(siteOutputPath, "candidate");
-  
+
   // Read VT config from main rettangoli.config.yaml
   let configData = {};
   try {
@@ -38,32 +37,30 @@ async function main(options) {
     console.log("Main config file not found, using defaults");
   }
 
+  const configUrl = configData.url;
+
   // Clear candidate directory
   await rm(candidatePath, { recursive: true, force: true });
   await new Promise((resolve) => setTimeout(resolve, 100));
 
   // Copy static files from library to site directory
   await cp(libraryStaticPath, siteOutputPath, { recursive: true });
-  
+
   // Copy user's static files if they exist
   const userStaticPath = join(vtPath, "static");
   if (existsSync(userStaticPath)) {
     await cp(userStaticPath, siteOutputPath, { recursive: true });
   }
 
-  // Check for local templates first, fallback to library templates
+  // Resolve template paths
   const localTemplatesPath = join(vtPath, "templates");
-
   const defaultTemplatePath = existsSync(join(localTemplatesPath, "default.html"))
-      ? join(localTemplatesPath, "default.html")
-      : join(libraryTemplatesPath, "default.html");
-
-  // Resolve index template path
+    ? join(localTemplatesPath, "default.html")
+    : join(libraryTemplatesPath, "default.html");
   const indexTemplatePath = existsSync(join(localTemplatesPath, "index.html"))
-      ? join(localTemplatesPath, "index.html")
-      : join(libraryTemplatesPath, "index.html");
+    ? join(localTemplatesPath, "index.html")
+    : join(libraryTemplatesPath, "index.html");
 
-  // Build template configuration for per-file/section templates
   const templateConfig = {
     defaultTemplate: defaultTemplatePath,
     vtPath: vtPath,
@@ -74,40 +71,46 @@ async function main(options) {
     specsPath,
     defaultTemplatePath,
     candidatePath,
-    templateConfig
+    templateConfig,
   );
 
-  // Generate overview page with all files
+  // Generate overview page (includes all files, skipped or not)
   generateOverview(
     generatedFiles,
     indexTemplatePath,
     join(siteOutputPath, "index.html"),
-    configData
+    configData,
   );
 
+  // Take screenshots (only for non-skipped files)
   if (!skipScreenshots) {
-    // Start web server from site output path to serve both /public and /candidate
-    const server = startWebServer(
-      siteOutputPath,
-      vtPath,
-      port
+    // 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 {
-      // Take screenshots with specified concurrency
       await takeScreenshots(
-        generatedFiles,
+        filesToScreenshot,
         `http://localhost:${port}`,
         candidatePath,
         24,
-        screenshotWaitTime
+        screenshotWaitTime,
+        configUrl,
       );
     } finally {
-      // Stop server
-      server.close();
-      console.log("Server stopped");
+      if (server) {
+        server.close();
+        console.log("Server stopped");
+      }
     }
   }
-
 }
 
 export default main;

package/src/cli/report.js

@@ -1,7 +1,6 @@
 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";
 
@@ -227,19 +226,19 @@ async function main(options = {}) {
       };
       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

@@ -83,9 +83,8 @@ function getAllFiles(dirPath, arrayOfFiles = []) {
  * Extract frontmatter from content
  */
 function extractFrontMatter(content) {
-  const frontMatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n/;
+  const frontMatterRegex = /^---\s*\n([\s\S]*?)\n---\s*(\r?\n|$)/;
   const match = content.match(frontMatterRegex);
-
   if (!match) {
     return {
       content: content,
@@ -180,7 +179,6 @@ function startWebServer(artifactsDir, staticDir, port) {
   const server = http.createServer((req, res) => {
     const url = new URL(req.url, `http://localhost:${port}`);
     let path = url.pathname;
-
     // Default to index.html for root path
     if (path === "/") {
       path = "/index.html";
@@ -249,7 +247,8 @@ async function takeScreenshots(
   serverUrl,
   screenshotsDir,
   concurrency = 8,
-  waitTime = 0
+  waitTime = 0,
+  configUrl = undefined,
 ) {
   // Ensure screenshots directory exists
   ensureDirectoryExists(screenshotsDir);
@@ -258,13 +257,13 @@ async function takeScreenshots(
   console.log("Launching browser to take screenshots...");
   const browser = await chromium.launch();
 
-  const takeAndSaveScreenshot = async (page, basePath, suffix = '') => {
+  const takeAndSaveScreenshot = async (page, basePath, suffix = "") => {
     const finalPath = suffix ? `${basePath}-${suffix}` : basePath;
     const tempPngPath = join(screenshotsDir, `${finalPath}.png`);
     const screenshotPath = join(screenshotsDir, `${finalPath}.webp`);
     ensureDirectoryExists(dirname(screenshotPath));
 
-    await page.screenshot({ path: tempPngPath, fullPage: true});
+    await page.screenshot({ path: tempPngPath, fullPage: true });
     await sharp(tempPngPath).webp({ quality: 85 }).toFile(screenshotPath);
 
     if (existsSync(tempPngPath)) {
@@ -285,13 +284,26 @@ 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 {
-          // Construct URL from file path (add /candidate prefix since server serves from parent)
-          const fileUrl = convertToHtmlExtension(
-            `${serverUrl}/candidate/${file.path.replace(/\\/g, '/')}`
-          );
+          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 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" });
           if (waitTime > 0) {
@@ -300,7 +312,7 @@ async function takeScreenshots(
           const baseName = removeExtension(file.path);
 
           const initialScreenshotPath = await takeAndSaveScreenshot(page, baseName);
-          console.log(`Initial screenshot saved: ${initialScreenshotPath}`);
+          console.log(`Screenshot saved: ${initialScreenshotPath}`);
 
           const stepContext = {
             baseName,