@rettangoli/vt 1.0.2 → 1.0.4

package/README.md

@@ -21,6 +21,7 @@ Behavior split:
 - `--concurrency <number>`
 - `--timeout <ms>`
 - `--wait-event <name>`
+- `--isolation <fast|strict>`
 - `--folder <path>` (repeatable)
 - `--group <section-key>` (repeatable)
 - `--item <spec-path>` (repeatable)
@@ -69,7 +70,7 @@ rtgl vt report --group components-basic
 rtgl vt report --item components/forms/login
 ```
 
-Everything else in capture is internal and intentionally not user-configurable.
+Other capture tuning remains internal and intentionally not user-configurable.
 
 ## Config
 
@@ -85,6 +86,7 @@ vt:
   concurrency: 4
   timeout: 30000
   waitEvent: vt:ready
+  isolationMode: strict
   viewport:
     id: desktop
     width: 1280
@@ -99,6 +101,8 @@ Notes:
 - `vt.sections` is required.
 - `vt.service` is optional. When set, VT starts the command before capture, waits for `vt.url`, then stops it after capture.
 - when `vt.service` is omitted and `vt.url` is set, VT expects that URL to already be running.
+- `vt.isolationMode` is optional: `fast` or `strict`. Default is `fast`.
+- `strict` uses a fresh browser context per captured spec and is recommended for real app routes or IndexedDB-backed state.
 - Section page keys are derived as `kebab-case(title)` for flat sections and group `items[].title`.
 - Derived section page keys must be unique case-insensitively.
 - `vt.viewport` supports object or array; each viewport requires `id`, `width`, `height`.
@@ -142,15 +146,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-rc27
+docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.12
 ```
 
 Run commands against a local project:
 
 ```bash
-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
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.12 rtgl vt screenshot
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.12 rtgl vt report
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.12 rtgl vt accept
 ```
 
 Note:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "repository": {

package/src/cli/generate-options.js

@@ -11,6 +11,7 @@ export function resolveGenerateOptions(options = {}, configData = {}) {
     concurrency: cliConcurrency,
     timeout: cliTimeout,
     waitEvent: cliWaitEvent,
+    isolation: cliIsolation,
     folder: cliFolder,
     group: cliGroup,
     item: cliItem,
@@ -20,6 +21,7 @@ export function resolveGenerateOptions(options = {}, configData = {}) {
 
   const waitEvent = cliWaitEvent ?? configData.waitEvent;
   const timeout = cliTimeout ?? configData.timeout ?? 30000;
+  const isolationMode = cliIsolation ?? configData.isolationMode ?? "fast";
   const selectors = normalizeSelectors({
     folder: cliFolder,
     group: cliGroup,
@@ -52,7 +54,7 @@ export function resolveGenerateOptions(options = {}, configData = {}) {
     screenshotWaitTime: 0,
     waitStrategy: waitEvent ? "event" : "load",
     workerCount: cliConcurrency ?? configData.concurrency ?? undefined, // adaptive worker planning
-    isolationMode: "fast",
+    isolationMode,
     navigationTimeout: timeout,
     readyTimeout: timeout,
     screenshotTimeout: timeout,
@@ -84,6 +86,11 @@ export function resolveGenerateOptions(options = {}, configData = {}) {
       throw new Error(`Invalid waitEvent: expected a non-empty string, got ${typeof resolvedOptions.waitEvent}.`);
     }
   }
+  if (!["fast", "strict"].includes(resolvedOptions.isolationMode)) {
+    throw new Error(
+      `Invalid isolation: expected "fast" or "strict", got "${resolvedOptions.isolationMode}".`,
+    );
+  }
   if (resolvedOptions.configUrl !== undefined && resolvedOptions.configUrl !== null) {
     if (typeof resolvedOptions.configUrl !== "string" || resolvedOptions.configUrl.trim().length === 0) {
       throw new Error(`Invalid url: expected a non-empty string, got ${typeof resolvedOptions.configUrl}.`);

package/src/cli/templates/index.html

@@ -60,8 +60,8 @@
         {% for file in files %}
         <rtgl-view w="f">
           <a style="display: contents; text-decoration: none; color: inherit;"
-            href="#{{ file.frontMatter.title | slug }}">
-            <rtgl-text id="{{ file.frontMatter.title | slug }}" s="h3">{{ file.frontMatter.title | default: file.path
+            href="#{{ file.anchorId }}">
+            <rtgl-text id="{{ file.anchorId }}" s="h3">{{ file.frontMatter.title | default: file.path
               }}</rtgl-text>
           </a>
 

package/src/common.js

@@ -15,7 +15,7 @@ import path from "path";
 import { validateFiniteNumber, validateFrontMatter } from "./validation.js";
 import { createCaptureTasks } from "./capture/spec-loader.js";
 import { runCaptureScheduler } from "./capture/capture-scheduler.js";
-import { deriveSectionPageKey } from "./section-page-key.js";
+import { deriveAnchorId, deriveSectionPageKey } from "./section-page-key.js";
 
 const removeExtension = (filePath) => filePath.replace(/\.[^/.]+$/, "");
 
@@ -44,10 +44,9 @@ async function readYaml(filePath) {
   }
 }
 
-// Add custom filter to convert string to lowercase and replace spaces with hyphens
-engine.registerFilter("slug", (value) => {
-  if (typeof value !== "string") return "";
-  return value.toLowerCase().replace(/\s+/g, "-");
+// Add custom filter to derive slug-safe ids for URLs and anchors.
+engine.registerFilter("slug", (value, fallbackValue) => {
+  return deriveAnchorId(value, fallbackValue);
 });
 
 // Add custom filter to remove file extension
@@ -416,13 +415,18 @@ function generateOverview(data, templatePath, outputPath, configData) {
       try {
         renderedContent = engine.parseAndRenderSync(templateContent, {
           ...configData,
-          files: data.filter((file) => {
-            const filePath = path.normalize(file.path);
-            const sectionPath = path.normalize(section.files);
-            // Check if file is in the folder or any subfolder
-            const fileDir = path.dirname(filePath);
-            return fileDir === sectionPath || fileDir.startsWith(sectionPath + path.sep);
-          }),
+          files: data
+            .filter((file) => {
+              const filePath = path.normalize(file.path);
+              const sectionPath = path.normalize(section.files);
+              // Check if file is in the folder or any subfolder
+              const fileDir = path.dirname(filePath);
+              return fileDir === sectionPath || fileDir.startsWith(sectionPath + path.sep);
+            })
+            .map((file) => ({
+              ...file,
+              anchorId: deriveAnchorId(file.frontMatter?.title, removeExtension(file.path)),
+            })),
           currentSection: section,
           sidebarItems: encodeURIComponent(JSON.stringify(sidebarItems)),
         });

package/src/report/report-render.js

@@ -1,11 +1,11 @@
 import fs from "fs";
 import { Liquid } from "liquidjs";
+import { deriveAnchorId } from "../section-page-key.js";
 
 const engine = new Liquid();
 
-engine.registerFilter("slug", (value) => {
-  if (typeof value !== "string") return "";
-  return value.toLowerCase().replace(/\s+/g, "-");
+engine.registerFilter("slug", (value, fallbackValue) => {
+  return deriveAnchorId(value, fallbackValue);
 });
 
 export async function renderHtmlReport({ results, templatePath, outputPath }) {

package/src/section-page-key.js

@@ -5,10 +5,18 @@ function normalizeString(value) {
   return value.trim();
 }
 
-export function deriveSectionPageKey(sectionLike) {
-  return normalizeString(sectionLike?.title)
+export function derivePageKey(value) {
+  return normalizeString(value)
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/-+/g, "-")
     .replace(/^-+|-+$/g, "");
 }
+
+export function deriveSectionPageKey(sectionLike) {
+  return derivePageKey(sectionLike?.title) || derivePageKey(sectionLike?.files);
+}
+
+export function deriveAnchorId(value, fallbackValue = "") {
+  return derivePageKey(value) || derivePageKey(fallbackValue);
+}

package/src/validation.js

@@ -112,7 +112,6 @@ const LEGACY_CAPTURE_FIELDS = {
   waitSelector: true,
   waitStrategy: true,
   workerCount: true,
-  isolationMode: true,
   navigationTimeout: true,
   readyTimeout: true,
   screenshotTimeout: true,
@@ -136,7 +135,7 @@ function assertDerivableSectionPageKey(sectionLike, path) {
   const pageKey = deriveSectionPageKey(sectionLike);
   assert(
     pageKey.length > 0,
-    `"${path}" must contain at least one letter or number.`,
+    `"${path}" must produce a page key from title or files.`,
   );
 }
 
@@ -169,14 +168,14 @@ function validateSection(section, index) {
 
       assert(typeof item.title === "string" && item.title.trim().length > 0, `"${itemPath}.title" is required.`);
       assert(typeof item.files === "string" && item.files.trim().length > 0, `"${itemPath}.files" is required.`);
-      assertDerivableSectionPageKey(item, `${itemPath}.title`);
+      assertDerivableSectionPageKey(item, itemPath);
     });
     return;
   }
 
   validateOptionalString(section.files, `${sectionPath}.files`);
   assert(typeof section.files === "string" && section.files.trim().length > 0, `"${sectionPath}.files" is required.`);
-  assertDerivableSectionPageKey(section, `${sectionPath}.title`);
+  assertDerivableSectionPageKey(section, sectionPath);
 }
 
 function collectSectionPageKeys(vtConfig) {
@@ -557,6 +556,7 @@ export function validateVtConfig(vtConfig, sourcePath = "rettangoli.config.yaml"
   validateOptionalNumber(vtConfig.concurrency, "vt.concurrency", { integer: true, min: 1 });
   validateOptionalNumber(vtConfig.timeout, "vt.timeout", { integer: true, min: 1 });
   validateOptionalString(vtConfig.waitEvent, "vt.waitEvent");
+  validateOptionalEnum(vtConfig.isolationMode, "vt.isolationMode", ["fast", "strict"]);
   normalizeViewportField(vtConfig.viewport, "vt.viewport");
   validateOptionalNumber(vtConfig.colorThreshold, "vt.colorThreshold", { min: 0, max: 1 });
   validateOptionalNumber(vtConfig.diffThreshold, "vt.diffThreshold", { min: 0, max: 100 });