@chromatic-com/playwright 0.13.4 → 0.14.0-3e73276-20260512102356

package/dist/index.d.mts

@@ -1,32 +1,14 @@
+import { a } from './types-DBnTR0hb.js';
+export { a as ChromaticConfig } from './types-DBnTR0hb.js';
 import * as playwright_test from 'playwright/test';
 import { Page, TestInfo } from '@playwright/test';
 export { expect } from '@playwright/test';
 
-declare global {
-    interface Window {
-        FontFace: typeof FontFace;
-    }
-}
-
-interface ChromaticConfig {
-    delay?: number;
-    diffIncludeAntiAliasing?: boolean;
-    diffThreshold?: number;
-    disableAutoSnapshot?: boolean;
-    forcedColors?: string;
-    pauseAnimationAtEnd?: boolean;
-    prefersReducedMotion?: string;
-    resourceArchiveTimeout?: number;
-    assetDomains?: string[];
-    cropToViewport?: boolean;
-    ignoreSelectors?: string[];
-}
-
 declare function takeSnapshot(page: Page, testInfo: TestInfo): Promise<void>;
 declare function takeSnapshot(page: Page, name: string, testInfo: TestInfo): Promise<void>;
 
-declare const test: playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & ChromaticConfig & {
+declare const test: playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & a & {
     chromaticSnapshot: void;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
-export { type ChromaticConfig, takeSnapshot, test };
+export { takeSnapshot, test };

package/dist/index.d.ts

@@ -1,32 +1,14 @@
+import { a } from './types-DBnTR0hb.js';
+export { a as ChromaticConfig } from './types-DBnTR0hb.js';
 import * as playwright_test from 'playwright/test';
 import { Page, TestInfo } from '@playwright/test';
 export { expect } from '@playwright/test';
 
-declare global {
-    interface Window {
-        FontFace: typeof FontFace;
-    }
-}
-
-interface ChromaticConfig {
-    delay?: number;
-    diffIncludeAntiAliasing?: boolean;
-    diffThreshold?: number;
-    disableAutoSnapshot?: boolean;
-    forcedColors?: string;
-    pauseAnimationAtEnd?: boolean;
-    prefersReducedMotion?: string;
-    resourceArchiveTimeout?: number;
-    assetDomains?: string[];
-    cropToViewport?: boolean;
-    ignoreSelectors?: string[];
-}
-
 declare function takeSnapshot(page: Page, testInfo: TestInfo): Promise<void>;
 declare function takeSnapshot(page: Page, name: string, testInfo: TestInfo): Promise<void>;
 
-declare const test: playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & ChromaticConfig & {
+declare const test: playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & a & {
     chromaticSnapshot: void;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
-export { type ChromaticConfig, takeSnapshot, test };
+export { takeSnapshot, test };

package/dist/index.js

@@ -3451,8 +3451,13 @@ var _ResourceArchiver = (_a = class {
       });
     }, "requestPaused"));
     this.client = cdpClient;
-    this.assetDomains = (allowedDomains || []).map((domain) => `https://${domain}`);
     this.httpCredentials = httpCredentials;
+    this.assetDomains = (allowedDomains || []).map((domain) => {
+      if (domain.startsWith("http")) {
+        return domain;
+      }
+      return `https://${domain}`;
+    });
   }
   async watch() {
     this.client.on("Fetch.requestPaused", this.requestPaused);
@@ -3686,16 +3691,21 @@ var _ArchiveFile = (_a2 = class {
 }, __name(_a2, "_ArchiveFile"), _a2);
 __name2(_ArchiveFile, "ArchiveFile");
 var ArchiveFile = _ArchiveFile;
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
-  NodeType2[NodeType2["Document"] = 0] = "Document";
-  NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
-  NodeType2[NodeType2["Element"] = 2] = "Element";
-  NodeType2[NodeType2["Text"] = 3] = "Text";
-  NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
-  NodeType2[NodeType2["Comment"] = 5] = "Comment";
-  return NodeType2;
+var NodeType = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
 })(NodeType || {});
 var import_srcset = __toESM(require_srcset());
+function isIframeSerializedNode(node) {
+  return node.type === NodeType.Element && node.tagName === "iframe" && "contentDocument" in node && !!node.contentDocument;
+}
+__name(isIframeSerializedNode, "isIframeSerializedNode");
+__name2(isIframeSerializedNode, "isIframeSerializedNode");
 var CSS_URL_REGEX = /url\((?!['"]?(?:data):)['"]?([^'")]*)['"]?\)/gi;
 var _a3;
 var _DOMSnapshot = (_a3 = class {
@@ -3725,6 +3735,9 @@ var _DOMSnapshot = (_a3 = class {
         return this.mapNode(childNode, sourceMap);
       }));
     }
+    if (isIframeSerializedNode(node)) {
+      node.contentDocument = await this.mapNode(node.contentDocument, sourceMap);
+    }
     return node;
   }
   mapNodeAttributes(node, sourceMap) {
@@ -4035,6 +4048,19 @@ function trackComplete(properties = {}) {
 __name(trackComplete, "trackComplete");
 __name2(trackComplete, "trackComplete");
 var DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS = 1e4;
+
+// ../../node_modules/@rrweb/types/dist/types.js
+var NodeType2 = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
+})(NodeType2 || {});
+
+// src/takeSnapshot.ts
 var rrweb = fs.readFileSync(__require.resolve("@chromaui/rrweb-snapshot"), "utf8");
 var chromaticSnapshots = /* @__PURE__ */ new Map();
 async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
@@ -4053,7 +4079,43 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
   page.on("console", (msg) => {
     logger.log(`CONSOLE: "${msg.text()}"`);
   });
-  const { domSnapshot, pseudoClassIds } = await page.evaluate(tsDedent.dedent`
+  const { domSnapshot, pseudoClassIds } = await executeSnapshotScript(page);
+  const iframes = page.frames().slice(1);
+  if (iframes.length > 0) {
+    const iframeNodes = findIframes(domSnapshot);
+    const usedIndexes = /* @__PURE__ */ new Set();
+    for (const [index, iframe] of iframes.entries()) {
+      const node = (
+        // Prefer iframe with matching URL
+        filterIframes(iframeNodes, iframe.url(), usedIndexes) || // Fallback to pick the iframe based on order
+        iframeNodes[index]
+      );
+      if (!node) {
+        continue;
+      }
+      usedIndexes.add(iframeNodes.indexOf(node));
+      const iframeSnapshot = await executeSnapshotScript(iframe);
+      node.contentDocument = iframeSnapshot.domSnapshot;
+      node.pseudoClassIds = iframeSnapshot.pseudoClassIds;
+      iframeNodes.push(...findIframes(iframeSnapshot.domSnapshot));
+    }
+  }
+  const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
+  if (!chromaticSnapshots.has(testId)) {
+    chromaticSnapshots.set(testId, /* @__PURE__ */ new Map());
+  }
+  chromaticSnapshots.get(testId).set(name, {
+    snapshot: bufferedSnapshot,
+    viewport: page.viewportSize() || {
+      width: 1280,
+      height: 720
+    },
+    pseudoClassIds
+  });
+}
+__name(takeSnapshot, "takeSnapshot");
+async function executeSnapshotScript(context) {
+  return await context.evaluate(tsDedent.dedent`
     ${rrweb};
 
     // this code was erroring the page.evaluate() when it was passed as a function to page.evaluate(),
@@ -4128,20 +4190,31 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
       });
     }
   `);
-  const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
-  if (!chromaticSnapshots.has(testId)) {
-    chromaticSnapshots.set(testId, /* @__PURE__ */ new Map());
+}
+__name(executeSnapshotScript, "executeSnapshotScript");
+function findIframes(node) {
+  if (node.type === NodeType2.Element && node.tagName === "iframe") {
+    return [
+      node
+    ];
   }
-  chromaticSnapshots.get(testId).set(name, {
-    snapshot: bufferedSnapshot,
-    viewport: page.viewportSize() || {
-      width: 1280,
-      height: 720
-    },
-    pseudoClassIds
+  if ("childNodes" in node) {
+    return node.childNodes.flatMap((childNode) => {
+      return findIframes(childNode);
+    });
+  }
+  return [];
+}
+__name(findIframes, "findIframes");
+function filterIframes(nodes, url, usedIndexes) {
+  return nodes.find((node, index) => {
+    if (usedIndexes.has(index)) {
+      return false;
+    }
+    return node.attributes?.rr_src === url;
   });
 }
-__name(takeSnapshot, "takeSnapshot");
+__name(filterIframes, "filterIframes");
 
 // src/createResourceArchive.ts
 var idle = /* @__PURE__ */ __name(async (page, networkTimeoutMs = DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS) => {

package/dist/index.mjs

@@ -3445,8 +3445,13 @@ var _ResourceArchiver = (_a = class {
       });
     }, "requestPaused"));
     this.client = cdpClient;
-    this.assetDomains = (allowedDomains || []).map((domain) => `https://${domain}`);
     this.httpCredentials = httpCredentials;
+    this.assetDomains = (allowedDomains || []).map((domain) => {
+      if (domain.startsWith("http")) {
+        return domain;
+      }
+      return `https://${domain}`;
+    });
   }
   async watch() {
     this.client.on("Fetch.requestPaused", this.requestPaused);
@@ -3680,16 +3685,21 @@ var _ArchiveFile = (_a2 = class {
 }, __name(_a2, "_ArchiveFile"), _a2);
 __name2(_ArchiveFile, "ArchiveFile");
 var ArchiveFile = _ArchiveFile;
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
-  NodeType2[NodeType2["Document"] = 0] = "Document";
-  NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
-  NodeType2[NodeType2["Element"] = 2] = "Element";
-  NodeType2[NodeType2["Text"] = 3] = "Text";
-  NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
-  NodeType2[NodeType2["Comment"] = 5] = "Comment";
-  return NodeType2;
+var NodeType = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
 })(NodeType || {});
 var import_srcset = __toESM(require_srcset());
+function isIframeSerializedNode(node) {
+  return node.type === NodeType.Element && node.tagName === "iframe" && "contentDocument" in node && !!node.contentDocument;
+}
+__name(isIframeSerializedNode, "isIframeSerializedNode");
+__name2(isIframeSerializedNode, "isIframeSerializedNode");
 var CSS_URL_REGEX = /url\((?!['"]?(?:data):)['"]?([^'")]*)['"]?\)/gi;
 var _a3;
 var _DOMSnapshot = (_a3 = class {
@@ -3719,6 +3729,9 @@ var _DOMSnapshot = (_a3 = class {
         return this.mapNode(childNode, sourceMap);
       }));
     }
+    if (isIframeSerializedNode(node)) {
+      node.contentDocument = await this.mapNode(node.contentDocument, sourceMap);
+    }
     return node;
   }
   mapNodeAttributes(node, sourceMap) {
@@ -4029,6 +4042,19 @@ function trackComplete(properties = {}) {
 __name(trackComplete, "trackComplete");
 __name2(trackComplete, "trackComplete");
 var DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS = 1e4;
+
+// ../../node_modules/@rrweb/types/dist/types.js
+var NodeType2 = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
+})(NodeType2 || {});
+
+// src/takeSnapshot.ts
 var rrweb = readFileSync(__require.resolve("@chromaui/rrweb-snapshot"), "utf8");
 var chromaticSnapshots = /* @__PURE__ */ new Map();
 async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
@@ -4047,7 +4073,43 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
   page.on("console", (msg) => {
     logger.log(`CONSOLE: "${msg.text()}"`);
   });
-  const { domSnapshot, pseudoClassIds } = await page.evaluate(dedent`
+  const { domSnapshot, pseudoClassIds } = await executeSnapshotScript(page);
+  const iframes = page.frames().slice(1);
+  if (iframes.length > 0) {
+    const iframeNodes = findIframes(domSnapshot);
+    const usedIndexes = /* @__PURE__ */ new Set();
+    for (const [index, iframe] of iframes.entries()) {
+      const node = (
+        // Prefer iframe with matching URL
+        filterIframes(iframeNodes, iframe.url(), usedIndexes) || // Fallback to pick the iframe based on order
+        iframeNodes[index]
+      );
+      if (!node) {
+        continue;
+      }
+      usedIndexes.add(iframeNodes.indexOf(node));
+      const iframeSnapshot = await executeSnapshotScript(iframe);
+      node.contentDocument = iframeSnapshot.domSnapshot;
+      node.pseudoClassIds = iframeSnapshot.pseudoClassIds;
+      iframeNodes.push(...findIframes(iframeSnapshot.domSnapshot));
+    }
+  }
+  const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
+  if (!chromaticSnapshots.has(testId)) {
+    chromaticSnapshots.set(testId, /* @__PURE__ */ new Map());
+  }
+  chromaticSnapshots.get(testId).set(name, {
+    snapshot: bufferedSnapshot,
+    viewport: page.viewportSize() || {
+      width: 1280,
+      height: 720
+    },
+    pseudoClassIds
+  });
+}
+__name(takeSnapshot, "takeSnapshot");
+async function executeSnapshotScript(context) {
+  return await context.evaluate(dedent`
     ${rrweb};
 
     // this code was erroring the page.evaluate() when it was passed as a function to page.evaluate(),
@@ -4122,20 +4184,31 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
       });
     }
   `);
-  const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
-  if (!chromaticSnapshots.has(testId)) {
-    chromaticSnapshots.set(testId, /* @__PURE__ */ new Map());
+}
+__name(executeSnapshotScript, "executeSnapshotScript");
+function findIframes(node) {
+  if (node.type === NodeType2.Element && node.tagName === "iframe") {
+    return [
+      node
+    ];
   }
-  chromaticSnapshots.get(testId).set(name, {
-    snapshot: bufferedSnapshot,
-    viewport: page.viewportSize() || {
-      width: 1280,
-      height: 720
-    },
-    pseudoClassIds
+  if ("childNodes" in node) {
+    return node.childNodes.flatMap((childNode) => {
+      return findIframes(childNode);
+    });
+  }
+  return [];
+}
+__name(findIframes, "findIframes");
+function filterIframes(nodes, url, usedIndexes) {
+  return nodes.find((node, index) => {
+    if (usedIndexes.has(index)) {
+      return false;
+    }
+    return node.attributes?.rr_src === url;
   });
 }
-__name(takeSnapshot, "takeSnapshot");
+__name(filterIframes, "filterIframes");
 
 // src/createResourceArchive.ts
 var idle = /* @__PURE__ */ __name(async (page, networkTimeoutMs = DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS) => {

package/dist/storybook-config/preview.mjs

@@ -4,15 +4,45 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // ../../node_modules/@rrweb/types/dist/types.js
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
-  NodeType2[NodeType2["Document"] = 0] = "Document";
-  NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType";
-  NodeType2[NodeType2["Element"] = 2] = "Element";
-  NodeType2[NodeType2["Text"] = 3] = "Text";
-  NodeType2[NodeType2["CDATA"] = 4] = "CDATA";
-  NodeType2[NodeType2["Comment"] = 5] = "Comment";
-  return NodeType2;
+var NodeType = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
 })(NodeType || {});
+
+// ../shared/dist/utils/nodes.mjs
+var __defProp2 = Object.defineProperty;
+var __name2 = /* @__PURE__ */ __name((target, value) => __defProp2(target, "name", { value, configurable: true }), "__name");
+var NodeType2 = /* @__PURE__ */ ((NodeType22) => {
+  NodeType22[NodeType22["Document"] = 0] = "Document";
+  NodeType22[NodeType22["DocumentType"] = 1] = "DocumentType";
+  NodeType22[NodeType22["Element"] = 2] = "Element";
+  NodeType22[NodeType22["Text"] = 3] = "Text";
+  NodeType22[NodeType22["CDATA"] = 4] = "CDATA";
+  NodeType22[NodeType22["Comment"] = 5] = "Comment";
+  return NodeType22;
+})(NodeType2 || {});
+function isIframeSerializedNode(node) {
+  return node.type === NodeType2.Element && node.tagName === "iframe" && "contentDocument" in node && !!node.contentDocument;
+}
+__name(isIframeSerializedNode, "isIframeSerializedNode");
+__name2(isIframeSerializedNode, "isIframeSerializedNode");
+function isElement(node) {
+  return node?.nodeType === Node.ELEMENT_NODE;
+}
+__name(isElement, "isElement");
+__name2(isElement, "isElement");
+function isIframeElement(node) {
+  return isElement(node) && node.tagName.toLowerCase() === "iframe";
+}
+__name(isIframeElement, "isIframeElement");
+__name2(isIframeElement, "isIframeElement");
+
+// ../shared/storybook-config/preview.ts
 var pageUrl = new URL(window.location.href);
 pageUrl.pathname = "";
 pageUrl.search = "";
@@ -28,6 +58,20 @@ var findHtmlNode = /* @__PURE__ */ __name((node) => {
   }
   return void 0;
 }, "findHtmlNode");
+var findNodeById = /* @__PURE__ */ __name((node, id) => {
+  if (node.id === id) {
+    return node;
+  }
+  if ("childNodes" in node) {
+    for (const childNode of node.childNodes) {
+      const match = findNodeById(childNode, id);
+      if (match) {
+        return match;
+      }
+    }
+  }
+  return void 0;
+}, "findNodeById");
 function snapshotFileName(snapshotId, viewport) {
   const fileNameParts = [
     snapshotId,
@@ -61,12 +105,13 @@ var renderToCanvas = /* @__PURE__ */ __name(async (context) => {
   const html = rebuild(htmlNode, {
     doc: document,
     mirror,
-    cache: createCache()
+    cache: createCache(),
+    afterAppend: afterAppendIframes(snapshot)
   });
   for (const [className, ids] of Object.entries(pseudoClassIds)) {
     for (const id of ids) {
       const el = mirror.getNode(id);
-      if (el?.classList) {
+      if (isElement(el)) {
         el.classList.add(className);
       }
     }
@@ -77,6 +122,36 @@ var renderToCanvas = /* @__PURE__ */ __name(async (context) => {
   return () => {
   };
 }, "renderToCanvas");
+function afterAppendIframes(snapshot) {
+  return /* @__PURE__ */ __name(function afterAppend(node, id) {
+    if (!isIframeElement(node)) {
+      return;
+    }
+    const serializedNode = findNodeById(snapshot, id);
+    if (!isIframeSerializedNode(serializedNode)) {
+      return;
+    }
+    node.onload = () => {
+      const mirror = createMirror();
+      rebuild(serializedNode.contentDocument, {
+        doc: node.contentDocument,
+        mirror,
+        cache: createCache(),
+        // Recursively build iframes within iframes
+        afterAppend: afterAppendIframes(serializedNode.contentDocument)
+      });
+      for (const [className, ids] of Object.entries(serializedNode.pseudoClassIds)) {
+        for (const id2 of ids) {
+          const el = mirror.getNode(id2);
+          if (isElement(el)) {
+            el.classList.add(className);
+          }
+        }
+      }
+    };
+  }, "afterAppend");
+}
+__name(afterAppendIframes, "afterAppendIframes");
 var preview_default = {
   renderToCanvas,
   parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-com/playwright",
-  "version": "0.13.4",
+  "version": "0.14.0-3e73276-20260512102356",
   "description": "Chromatic Visual Regression Testing for Playwright",
   "repository": {
     "type": "git",