@rettangoli/vt 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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,36 @@ async function main(options) {
     specsPath,
     defaultTemplatePath,
     candidatePath,
-    templateConfig
+    templateConfig,
   );
 
-  // Generate overview page with all files
+  // Generate overview page
   generateOverview(
     generatedFiles,
     indexTemplatePath,
     join(siteOutputPath, "index.html"),
-    configData
+    configData,
   );
 
+  // Take screenshots
   if (!skipScreenshots) {
-    // Start web server from site output path to serve both /public and /candidate
-    const server = startWebServer(
-      siteOutputPath,
-      vtPath,
-      port
-    );
+    const server = configUrl ? null : startWebServer(siteOutputPath, vtPath, port);
     try {
-      // Take screenshots with specified concurrency
       await takeScreenshots(
         generatedFiles,
         `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/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)) {
@@ -288,10 +287,13 @@ async function takeScreenshots(
         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 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 +302,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,

package/src/createSteps.js

@@ -48,6 +48,10 @@ async function move(page, args) {
   await page.mouse.move(Number(args[0]), Number(args[1]));
 }
 
+async function scroll(page, args){
+  await page.mouse.wheel(Number(args[0]), Number(args[1]));
+}
+
 async function rclick(page, args, context, selectedElement) {
   if (selectedElement) {
     await selectedElement.click({ button: 'right' });
@@ -106,6 +110,7 @@ export function createSteps(page, context) {
     mouseUp,
     move,
     rclick,
+    scroll,
     rMouseDown,
     rMouseUp,
     screenshot,