@reshotdev/screenshot 0.0.1-beta.12 → 0.0.1-beta.14

package/src/lib/auto-update/spec.js

@@ -0,0 +1,89 @@
+// Phase 5 auto-update — local per-composition state ("the stored spec").
+//
+// A composition's source screen (URL + viewport), the accepted baseline's
+// structure signature + reference frame, and any outstanding flagged candidate
+// live on disk so a CI `reshot refresh` is reproducible and idempotent. The
+// reference frame is the prior ACCEPTED render's recapture; it advances only when
+// a refresh publishes, so a flagged redesign leaves the old baseline (and the old
+// live clip) untouched.
+
+const fs = require("fs-extra");
+const path = require("path");
+
+function baseDir() {
+  return (
+    process.env.RESHOT_AUTO_UPDATE_DIR ||
+    path.join(process.cwd(), ".reshot", "auto-update")
+  );
+}
+
+function specDir(compositionId) {
+  return path.join(baseDir(), compositionId);
+}
+
+function specPath(compositionId) {
+  return path.join(specDir(compositionId), "spec.json");
+}
+
+function referencePngPath(compositionId) {
+  return path.join(specDir(compositionId), "reference.png");
+}
+
+async function writeSpec(spec) {
+  if (!spec || !spec.compositionId) {
+    throw new Error("writeSpec requires spec.compositionId");
+  }
+  await fs.ensureDir(specDir(spec.compositionId));
+  await fs.writeJson(specPath(spec.compositionId), spec, { spaces: 2 });
+  return spec;
+}
+
+async function readSpec(compositionId) {
+  const file = specPath(compositionId);
+  if (!(await fs.pathExists(file))) {
+    throw new Error(
+      `No auto-update spec for composition ${compositionId} at ${file}. ` +
+        "Register it with `reshot refresh --register` (or seed it) first.",
+    );
+  }
+  return fs.readJson(file);
+}
+
+async function listSpecs(projectId) {
+  const dir = baseDir();
+  if (!(await fs.pathExists(dir))) return [];
+  const entries = await fs.readdir(dir);
+  const specs = [];
+  for (const entry of entries) {
+    const file = specPath(entry);
+    if (!(await fs.pathExists(file))) continue;
+    const spec = await fs.readJson(file);
+    if (projectId && spec.projectId !== projectId) continue;
+    specs.push(spec);
+  }
+  // Stable order so CI summaries and idempotence checks are deterministic.
+  return specs.sort((a, b) => String(a.slug).localeCompare(String(b.slug)));
+}
+
+async function readReferencePng(compositionId) {
+  const file = referencePngPath(compositionId);
+  if (!(await fs.pathExists(file))) return null;
+  return fs.readFile(file);
+}
+
+async function writeReferencePng(compositionId, buffer) {
+  await fs.ensureDir(specDir(compositionId));
+  await fs.writeFile(referencePngPath(compositionId), buffer);
+}
+
+module.exports = {
+  baseDir,
+  specDir,
+  specPath,
+  referencePngPath,
+  writeSpec,
+  readSpec,
+  listSpecs,
+  readReferencePng,
+  writeReferencePng,
+};

package/src/lib/capture-engine.js

@@ -6,6 +6,7 @@ const path = require("path");
 const fs = require("fs-extra");
 const chalk = require("chalk");
 const { buildLaunchOptions } = require("./ci-detect");
+const { launchChromium } = require("./ensure-browser");
 const {
   applyVariantToPage,
   applyStorageAndReload,
@@ -145,6 +146,13 @@ class CaptureEngine {
     // Style configuration (image beautification post-capture)
     this.styleConfig = options.styleConfig || null;
 
+    // DOM scene (MHTML) capture toggle — emits a self-contained Chromium
+    // MHTML bundle alongside each PNG so variations can be rendered from
+    // the captured DOM without re-running the live app. Defaults to ON;
+    // opt out via reshot.config.json -> { domScene: false } or per-scenario
+    // -> { domScene: false }.
+    this.domSceneEnabled = options.domScene !== false;
+
     // Legacy support for old variant format
     if (!this.variantConfig && options.variant) {
       this.variantConfig = this._convertLegacyVariant(options.variant);
@@ -292,9 +300,9 @@ class CaptureEngine {
 
     const contextOptions = this._buildContextOptions();
 
-    this.browser = await chromium.launch(buildLaunchOptions({
+    this.browser = await launchChromium(chromium, buildLaunchOptions({
       headless: this.headless,
-    }));
+    }), this.logger);
     this.context = await this.browser.newContext(contextOptions);
     this.page = await this.context.newPage();
 
@@ -623,6 +631,32 @@ class CaptureEngine {
     // Wait for network to settle
     await this._waitForStability();
 
+    // Post-stability auth redirect check: catches SPA redirects that happen
+    // after client-side JS has executed (the pre-stability check at domcontentloaded
+    // may miss these since JS hasn't finished routing yet)
+    if (!isIntentionalTarget) {
+      const postStabilityUrl = this.page.url();
+      const postStabilityRedirect =
+        isAuthRedirectUrl(postStabilityUrl, this._customAuthPatterns) ||
+        this._authResponseDetected;
+      if (postStabilityRedirect) {
+        const errorMsg = `Auth redirect detected after page load: navigated to ${postStabilityUrl}. Session may be expired. Re-run \`reshot record\` to refresh session.`;
+        this.logger(chalk.red(`  ✖ ${errorMsg}`));
+        throw new Error(errorMsg);
+      }
+      // Also check DOM for login forms (SPA may render login UI without changing URL)
+      const hasLoginForm = await this.page.evaluate(() => {
+        const h = document.querySelector("h1, h2");
+        return h && /sign\s*in|log\s*in/i.test(h.textContent);
+      }).catch(() => false);
+      if (hasLoginForm) {
+        const errorMsg = `Login form detected after page load at ${postStabilityUrl}. Session may be expired. Re-run \`reshot record\` to refresh session.`;
+        this.logger(chalk.red(`  ✖ ${errorMsg}`));
+        throw new Error(errorMsg);
+      }
+      this._authResponseDetected = false;
+    }
+
     // Additional wait for theme/variants to fully apply
     // This handles CSS transitions and async re-renders
     if (this.variantConfig && this.variantConfig.injections?.length > 0) {
@@ -1107,10 +1141,50 @@ class CaptureEngine {
     // Write the final buffer to file
     await fs.writeFile(outputPath, finalBuffer);
 
+    // ── DOM scene capture (sidecar MHTML) ──────────────────────────────
+    // Capture a self-contained MHTML bundle of the page at the same moment
+    // as the PNG. The bundle re-renders in any Chromium browser without
+    // network access and is the source of truth for variations: marketing
+    // can mutate the captured DOM (swap copy, hide chrome, recrop, rebrand
+    // tenant names) and render new outputs without re-running Playwright
+    // against the live app. Opt out per-scenario or globally via
+    // reshot.config.json -> { domScene: false }.
+    //
+    // The MHTML capture is best-effort — failures are logged but do not
+    // fail the scenario, since the primary PNG already succeeded.
+    let domScenePath = null;
+    let domSceneBytes = null;
+    if (this.domSceneEnabled) {
+      try {
+        const cdp = await this.page.context().newCDPSession(this.page);
+        const { data: mhtml } = await cdp.send("Page.captureSnapshot", {
+          format: "mhtml",
+        });
+        domScenePath = outputPath.replace(/\.png$/i, ".mhtml");
+        await fs.writeFile(domScenePath, mhtml);
+        domSceneBytes = Buffer.byteLength(mhtml, "utf8");
+        this.logger(
+          chalk.gray(
+            `  ✓ DOM scene: ${path.basename(domScenePath)} (${(domSceneBytes / 1024).toFixed(0)} KB)`,
+          ),
+        );
+      } catch (err) {
+        this.logger(
+          chalk.yellow(
+            `  ⚠ DOM scene capture skipped: ${err.message || err}`,
+          ),
+        );
+        domScenePath = null;
+        domSceneBytes = null;
+      }
+    }
+
     // Record asset metadata
     this.capturedAssets.push({
       name,
       path: outputPath,
+      domScenePath,
+      domSceneBytes,
       description,
       capturedAt: new Date().toISOString(),
       viewport: this.viewport,