@specific.dev/spectest 0.131.20 → 0.131.21

package/dist/browser.js

@@ -289,7 +289,8 @@ async function applySafeAreaInsets(cdp, d) {
 // ────────────────────────────────────────────────────────────────────────
 // Vendored `@rrweb/record` UMD bundle (rrweb 2.x), BUILT FROM OUR FORK by
 // `scripts/rrweb-record/build.sh` (specific-dev/rrweb, branch `spectest` =
-// the `rrweb@2.1.0` tag + upstream PR 1802). Never copy the npm dist over
+// the `rrweb@2.1.0` tag + upstream PR 1802 + non-mutating image capture).
+// Never copy the npm dist over
 // it: upstream's `@rrweb/utils` lists `querySelector` as an accessor, so its
 // pristine-prototype test always fails and `record()` appends an <iframe>
 // to every document — measured at ~1 s per navigation (see the top-frame
@@ -380,7 +381,8 @@ const RRWEB_BOOTSTRAP = `
       // CSS (what next/font emits), so it's a no-op for most apps; the
       // url()-based fonts are handled by the inliner below instead. All
       // degrade gracefully — an asset that can't be read is skipped,
-      // never fatal to recording.
+      // never fatal to recording. Our fork never changes a live image's
+      // crossorigin attribute to retry a failed canvas read.
       inlineStylesheet: true,
       collectFonts: true,
       inlineImages: true,

package/dist/harness/shadow-builder.js

@@ -19,8 +19,10 @@ export function shadowImage(c, service) {
     const id = createHash("sha256").update(service).digest("hex").slice(0, 32);
     return `${c.registry}/shadow/${c.experiment}/${id}:result`;
 }
+// Convert inherited gzip layers too; the persistent builder caches the conversion.
+// Level 1 favors export latency over a small additional size reduction.
 export function shadowOutput(reference) {
-    return `type=image,name=${reference},push=true,oci-mediatypes=true,compression=zstd`;
+    return `type=image,name=${reference},push=true,oci-mediatypes=true,compression=zstd,compression-level=1,force-compression=true`;
 }
 export function imageDigest(metadata) {
     const digest = metadata?.["containerimage.digest"];

package/dist/vendor/rrweb-record.min.js

@@ -1163,8 +1163,6 @@ function serializeElementNode(n, options) {
       canvasCtx = canvasService.getContext("2d");
     }
     const image = n;
-    const imageSrc = image.currentSrc || image.getAttribute("src") || "<unknown-src>";
-    const priorCrossOrigin = image.crossOrigin;
     const recordInlineImage = () => {
       image.removeEventListener("load", recordInlineImage);
       try {
@@ -1175,21 +1173,8 @@ function serializeElementNode(n, options) {
           dataURLOptions.type,
           dataURLOptions.quality
         );
-      } catch (err) {
-        if (image.crossOrigin !== "anonymous") {
-          image.crossOrigin = "anonymous";
-          if (image.complete && image.naturalWidth !== 0)
-            recordInlineImage();
-          else image.addEventListener("load", recordInlineImage);
-          return;
-        } else {
-          console.warn(
-            `Cannot inline img src=${imageSrc}! Error: ${err}`
-          );
-        }
-      }
-      if (image.crossOrigin === "anonymous") {
-        priorCrossOrigin ? attributes.crossOrigin = priorCrossOrigin : image.removeAttribute("crossorigin");
+      } catch (e) {
+        return;
       }
     };
     if (image.complete && image.naturalWidth !== 0) recordInlineImage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specific.dev/spectest",
-  "version": "0.131.20",
+  "version": "0.131.21",
   "description": "Spectest SDK for defining test environments in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",

package/src/browser-coverage-navigation.test.ts

@@ -14,10 +14,13 @@ test.skipIf(!existsSync(executablePath))("cross-site script ID reuse cannot attr
   const map = Buffer.from(JSON.stringify({ version: 3, sources: ["src/customer.ts"], names: [], mappings: "AAAA" })).toString("base64");
   const server = Bun.serve({ hostname: "0.0.0.0", port: 0, fetch(request) {
     const url = new URL(request.url);
+    if (url.pathname === "/padding.js") return new Response("void 0;", { headers: { "content-type": "application/javascript" } });
     if (url.pathname === emptyScript) return new Response("", { headers: { "content-type": "application/javascript" } });
     if (url.pathname === "/app.js") return new Response(`globalThis.appRan = true;\n//# sourceMappingURL=data:application/json;base64,${map}`, { headers: { "content-type": "application/javascript" } });
     return new Response(url.hostname === "127.0.0.1"
-      ? `<script src="${emptyScript}"></script><script src="/app.js"></script><p>Application</p>`
+      // Advance the application's script IDs past browser-injected scripts.
+      // Padding is served outside the covered service and has no source map.
+      ? `${Array.from({ length: 32 }, (_, i) => `<script src="http://127.0.0.2:${url.port}/padding.js?${i}"></script>`).join("")}<script src="${emptyScript}"></script><script src="/app.js"></script><p>Application</p>`
       : "<p>External login</p>", { headers: { "content-type": "text/html", "cache-control": "no-store" } });
   } });
   const browser = await chromium.launch({ executablePath, headless: true, args: ["--no-sandbox", "--site-per-process"] });
@@ -36,7 +39,12 @@ test.skipIf(!existsSync(executablePath))("cross-site script ID reuse cannot attr
     // Keep collected application counts across navigation until service capture.
     for (const host of ["127.0.0.1", "127.0.0.2", "127.0.0.1", "127.0.0.2"]) {
       await page.goto(`http://${host}:${server.port}/`);
-      await page.evaluate("(() => { const value = 1; return value + 1; })()");
+      // V8's first evaluation ID varies across browser versions and runners.
+      // Generate distinct anonymous scripts until the old named ID is reused.
+      for (let i = 0; i < 128; i++) {
+        await cdp.send("Runtime.evaluate", { expression: `(() => { const value = ${i}; return value + 1; })()` });
+        if (host === "127.0.0.1" || anonymousReuse) break;
+      }
       await harvestBrowserCoverage(cdp);
     }
     expect(anonymousReuse).toBe(true); // Prove the regression's trigger happened.

package/src/browser-image-loading.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test";
+import { readRaw } from "./inspect.js";
+import { openBrowser } from "./browser.js";
+
+const available = !!(Bun.which("chromium-headless-shell") ?? Bun.which("chrome-headless-shell"));
+const png = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII=", "base64");
+
+for (const late of [false, true]) {
+  test.skipIf(!available)(`SDK recording preserves cookie-protected cross-origin images (${late ? "late" : "initial"})`, async () => {
+    const imageRequests: string[] = [];
+    const images = Bun.serve({ port: 0, hostname: "127.0.0.1", fetch(request) {
+      // The SDK also fetches assets for replay. Count actual <img> requests
+      // separately so the regression catches recorder-induced image reloads.
+      if (request.headers.get("sec-fetch-dest") === "image") imageRequests.push(request.headers.get("cookie") ?? "");
+      if (!request.headers.get("cookie")?.includes("image_session=allowed")) return new Response("", { status: 401 });
+      return new Response(png, { headers: { "content-type": "image/png", "cache-control": "no-store" } });
+    } });
+    const page = Bun.serve({ port: 0, hostname: "127.0.0.1", fetch() {
+      return new Response(`<!doctype html><body><script>
+        document.cookie = 'image_session=allowed; path=/';
+        window.loads = 0; window.errors = 0; window.changes = [];
+        window.addImage = () => {
+          const img = document.createElement('img'); img.id = 'subject';
+          new MutationObserver(records => window.changes.push(...records.map(r => r.attributeName)))
+            .observe(img, {attributes:true, attributeFilter:['crossorigin']});
+          img.onload = () => window.loads++; img.onerror = () => window.errors++;
+          img.src = ${JSON.stringify(images.url.href)}; document.body.append(img);
+        };
+        ${late ? "" : "window.addImage();"}
+      </script>`, { headers: { "content-type": "text/html" } });
+    } });
+    const browser = await openBrowser({ recorder: { sessionId: `image-${late}`, recordStep() {} } });
+    try {
+      await browser.goto(page.url.href);
+      if (late) await browser.evaluate("Insert image after recording starts", "window.addImage()");
+      // Wait through load and recorder callbacks, including asynchronous retries.
+      await browser.evaluate("Allow image capture to finish", "new Promise(resolve => setTimeout(resolve, 500))");
+      const state = await browser.evaluate("Inspect live image", `({
+        attr: document.querySelector('#subject').getAttribute('crossorigin'),
+        width: document.querySelector('#subject').naturalWidth,
+        loads: window.loads, errors: window.errors, changes: window.changes,
+        recording: !!window.__spectestRrwebInit
+      })`);
+      expect(readRaw(state)).toEqual({ attr: null, width: 1, loads: 1, errors: 0, changes: [], recording: true });
+      expect(imageRequests).toEqual(["image_session=allowed"]);
+    } finally {
+      await browser.close();
+      page.stop(true); images.stop(true);
+    }
+  }, 15000);
+}

package/src/browser.ts

@@ -672,7 +672,8 @@ async function applySafeAreaInsets(
 
 // Vendored `@rrweb/record` UMD bundle (rrweb 2.x), BUILT FROM OUR FORK by
 // `scripts/rrweb-record/build.sh` (specific-dev/rrweb, branch `spectest` =
-// the `rrweb@2.1.0` tag + upstream PR 1802). Never copy the npm dist over
+// the `rrweb@2.1.0` tag + upstream PR 1802 + non-mutating image capture).
+// Never copy the npm dist over
 // it: upstream's `@rrweb/utils` lists `querySelector` as an accessor, so its
 // pristine-prototype test always fails and `record()` appends an <iframe>
 // to every document — measured at ~1 s per navigation (see the top-frame
@@ -766,7 +767,8 @@ const RRWEB_BOOTSTRAP = `
       // CSS (what next/font emits), so it's a no-op for most apps; the
       // url()-based fonts are handled by the inliner below instead. All
       // degrade gracefully — an asset that can't be read is skipped,
-      // never fatal to recording.
+      // never fatal to recording. Our fork never changes a live image's
+      // crossorigin attribute to retry a failed canvas read.
       inlineStylesheet: true,
       collectFonts: true,
       inlineImages: true,

package/src/harness/shadow-builder.test.ts

@@ -5,7 +5,10 @@ test("shadow image namespaces isolate experiments and hash untrusted service nam
   const a = shadowImage(config, "../../other,compression=gzip");
   expect(a).toMatch(/^registry.example.com\/shadow\/experiment-1\/[a-f0-9]{32}:result$/);
   expect(shadowImage({ ...config, experiment: "experiment-2" }, "api")).not.toBe(shadowImage(config, "api"));
-  expect(shadowOutput(a)).toContain("compression=zstd");
+  expect(shadowOutput(a).split(",")).toEqual([
+    "type=image", `name=${a}`, "push=true", "oci-mediatypes=true",
+    "compression=zstd", "compression-level=1", "force-compression=true",
+  ]);
 });
 test("configuration rejects exporter and endpoint injection", () => {
   expect(validateShadowBuilder(config)).toEqual(config);

package/src/harness/shadow-builder.ts

@@ -24,8 +24,10 @@ export function shadowImage(c: ShadowBuilder, service: string): string {
   const id = createHash("sha256").update(service).digest("hex").slice(0, 32);
   return `${c.registry}/shadow/${c.experiment}/${id}:result`;
 }
+// Convert inherited gzip layers too; the persistent builder caches the conversion.
+// Level 1 favors export latency over a small additional size reduction.
 export function shadowOutput(reference: string): string {
-  return `type=image,name=${reference},push=true,oci-mediatypes=true,compression=zstd`;
+  return `type=image,name=${reference},push=true,oci-mediatypes=true,compression=zstd,compression-level=1,force-compression=true`;
 }
 export function imageDigest(metadata: unknown): string {
   const digest = (metadata as Record<string, unknown>)?.["containerimage.digest"];

package/src/vendor/rrweb-record.min.js

@@ -1163,8 +1163,6 @@ function serializeElementNode(n, options) {
       canvasCtx = canvasService.getContext("2d");
     }
     const image = n;
-    const imageSrc = image.currentSrc || image.getAttribute("src") || "<unknown-src>";
-    const priorCrossOrigin = image.crossOrigin;
     const recordInlineImage = () => {
       image.removeEventListener("load", recordInlineImage);
       try {
@@ -1175,21 +1173,8 @@ function serializeElementNode(n, options) {
           dataURLOptions.type,
           dataURLOptions.quality
         );
-      } catch (err) {
-        if (image.crossOrigin !== "anonymous") {
-          image.crossOrigin = "anonymous";
-          if (image.complete && image.naturalWidth !== 0)
-            recordInlineImage();
-          else image.addEventListener("load", recordInlineImage);
-          return;
-        } else {
-          console.warn(
-            `Cannot inline img src=${imageSrc}! Error: ${err}`
-          );
-        }
-      }
-      if (image.crossOrigin === "anonymous") {
-        priorCrossOrigin ? attributes.crossOrigin = priorCrossOrigin : image.removeAttribute("crossorigin");
+      } catch (e) {
+        return;
       }
     };
     if (image.complete && image.naturalWidth !== 0) recordInlineImage();