@chromatic-com/playwright 0.14.4 → 0.14.6

package/dist/index.js

@@ -3403,7 +3403,7 @@ var logger = process.env.LOG ? console : {
 
 // ../shared/src/resource-archiver/index.ts
 var _ResourceArchiver = class _ResourceArchiver {
-  constructor(cdpClient, allowedDomains, httpCredentials) {
+  constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
     __publicField(this, "archive", {});
     __publicField(this, "client");
     /**
@@ -3477,6 +3477,7 @@ var _ResourceArchiver = class _ResourceArchiver {
     }, "requestPaused"));
     this.client = cdpClient;
     this.httpCredentials = httpCredentials;
+    this.firstUrl = firstUrl;
     this.assetDomains = (allowedDomains || []).map((domain) => {
       if (domain.startsWith("http")) {
         return domain;
@@ -3536,12 +3537,25 @@ var _ResourceArchiver = class _ResourceArchiver {
     const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
     const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
     if (isRequestFromAllowedDomain && !isFirstRequest) {
+      logger.log("Archiving request", {
+        url: request.url,
+        statusCode: responseStatusCode,
+        statusText: responseStatusText,
+        contentType: contentTypeHeader?.value
+      });
       this.archive[request.url] = {
         statusCode: responseStatusCode,
         statusText: responseStatusText,
         body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
         contentType: contentTypeHeader?.value
       };
+    } else {
+      logger.log("Skipping archiving of request", {
+        url: request.url,
+        firstUrl: this.firstUrl.toString(),
+        isFirstRequest,
+        isRequestFromAllowedDomain
+      });
     }
     await this.clientSend(request, "Fetch.continueRequest", {
       requestId
@@ -3804,8 +3818,7 @@ var _DOMSnapshot = class _DOMSnapshot {
         const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
         if (currentSrc) {
           node.attributes.src = currentSrc;
-          delete node.attributes.srcset;
-          delete node.attributes.sizes;
+          this.removeResponsiveImageAttributes(node.attributes);
         }
       }
       if (node.tagName === "picture") {
@@ -3830,6 +3843,7 @@ var _DOMSnapshot = class _DOMSnapshot {
       const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
       if (imageElement && imageElement.attributes) {
         imageElement.attributes.src = sourceMap.get(matchingUrl);
+        this.removeResponsiveImageAttributes(imageElement.attributes);
       }
     }
   }
@@ -3864,6 +3878,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3914,8 +3932,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
   const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
       const name = collapseNewlines(snapshotName);
+      const { chromatic: chromaticParams, ...restParameters } = parameters || {};
       return {
         name,
         // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
@@ -3933,6 +3952,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
           },
           chromatic: {
             ...chromaticStorybookParams,
+            ...chromaticParams,
             modes: buildStoryModesConfig([
               viewport
             ])
@@ -3944,7 +3964,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
             defaultViewport: viewportToString(findDefaultViewport([
               viewport
             ]))
-          }
+          },
+          ...restParameters
         }
       };
     })
@@ -4022,10 +4043,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const archiveFile = new ArchiveFile(url, response, pageUrl);
     const origSrcPath = archiveFile.originalSrc();
     const fileSystemPath = archiveFile.toFileSystemPath();
+    const responsePath = path2.join(archiveDir, fileSystemPath);
     if (origSrcPath !== fileSystemPath) {
       sourceMap.set(origSrcPath, fileSystemPath);
     }
-    await outputFile(path2.join(archiveDir, fileSystemPath), response.body);
+    if (!fs.existsSync(responsePath)) {
+      await outputFile(responsePath, response.body);
+    }
   }));
   await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
@@ -4135,6 +4159,7 @@ async function executeSnapshotScript(context) {
     type: "module",
     path: __require.resolve("@chromatic-com/playwright/browser")
   });
+  await context.waitForFunction(() => typeof window.__chromatic_takeSnapshot === "function");
   const snapshot = await context.evaluate(async () => {
     return JSON.stringify(await window.__chromatic_takeSnapshot());
   });
@@ -4216,38 +4241,21 @@ var performChromaticSnapshot = /* @__PURE__ */ __name(async ({ page, delay, diff
     }
     const resourceArchive = await completeArchive();
     const snapshots = chromaticSnapshots.get(testId) || /* @__PURE__ */ new Map();
-    const chromaticStorybookParams = {
-      ...delay && {
-        delay
-      },
-      ...diffIncludeAntiAliasing && {
-        diffIncludeAntiAliasing
-      },
-      ...diffThreshold && {
-        diffThreshold
-      },
-      ...forcedColors && {
-        forcedColors
-      },
-      ...pauseAnimationAtEnd && {
-        pauseAnimationAtEnd
-      },
-      ...prefersReducedMotion && {
-        prefersReducedMotion
-      },
-      ...cropToViewport && {
-        cropToViewport
-      },
-      ...ignoreSelectors && {
-        ignoreSelectors
-      }
-    };
     const outputDir = path2.join(testInfo.outputDir, "..");
     await writeTestResult({
       ...testInfo,
       outputDir,
       pageUrl: page.url()
-    }, Object.fromEntries(snapshots), resourceArchive, chromaticStorybookParams);
+    }, Object.fromEntries(snapshots), resourceArchive, {
+      delay,
+      diffIncludeAntiAliasing,
+      diffThreshold,
+      forcedColors,
+      pauseAnimationAtEnd,
+      prefersReducedMotion,
+      cropToViewport,
+      ignoreSelectors
+    });
     trackComplete();
   } finally {
     chromaticSnapshots.delete(testId);

package/dist/index.mjs

@@ -3397,7 +3397,7 @@ var logger = process.env.LOG ? console : {
 
 // ../shared/src/resource-archiver/index.ts
 var _ResourceArchiver = class _ResourceArchiver {
-  constructor(cdpClient, allowedDomains, httpCredentials) {
+  constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
     __publicField(this, "archive", {});
     __publicField(this, "client");
     /**
@@ -3471,6 +3471,7 @@ var _ResourceArchiver = class _ResourceArchiver {
     }, "requestPaused"));
     this.client = cdpClient;
     this.httpCredentials = httpCredentials;
+    this.firstUrl = firstUrl;
     this.assetDomains = (allowedDomains || []).map((domain) => {
       if (domain.startsWith("http")) {
         return domain;
@@ -3530,12 +3531,25 @@ var _ResourceArchiver = class _ResourceArchiver {
     const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
     const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
     if (isRequestFromAllowedDomain && !isFirstRequest) {
+      logger.log("Archiving request", {
+        url: request.url,
+        statusCode: responseStatusCode,
+        statusText: responseStatusText,
+        contentType: contentTypeHeader?.value
+      });
       this.archive[request.url] = {
         statusCode: responseStatusCode,
         statusText: responseStatusText,
         body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
         contentType: contentTypeHeader?.value
       };
+    } else {
+      logger.log("Skipping archiving of request", {
+        url: request.url,
+        firstUrl: this.firstUrl.toString(),
+        isFirstRequest,
+        isRequestFromAllowedDomain
+      });
     }
     await this.clientSend(request, "Fetch.continueRequest", {
       requestId
@@ -3798,8 +3812,7 @@ var _DOMSnapshot = class _DOMSnapshot {
         const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
         if (currentSrc) {
           node.attributes.src = currentSrc;
-          delete node.attributes.srcset;
-          delete node.attributes.sizes;
+          this.removeResponsiveImageAttributes(node.attributes);
         }
       }
       if (node.tagName === "picture") {
@@ -3824,6 +3837,7 @@ var _DOMSnapshot = class _DOMSnapshot {
       const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
       if (imageElement && imageElement.attributes) {
         imageElement.attributes.src = sourceMap.get(matchingUrl);
+        this.removeResponsiveImageAttributes(imageElement.attributes);
       }
     }
   }
@@ -3858,6 +3872,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3908,8 +3926,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
   const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
       const name = collapseNewlines(snapshotName);
+      const { chromatic: chromaticParams, ...restParameters } = parameters || {};
       return {
         name,
         // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
@@ -3927,6 +3946,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
           },
           chromatic: {
             ...chromaticStorybookParams,
+            ...chromaticParams,
             modes: buildStoryModesConfig([
               viewport
             ])
@@ -3938,7 +3958,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
             defaultViewport: viewportToString(findDefaultViewport([
               viewport
             ]))
-          }
+          },
+          ...restParameters
         }
       };
     })
@@ -4016,10 +4037,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const archiveFile = new ArchiveFile(url, response, pageUrl);
     const origSrcPath = archiveFile.originalSrc();
     const fileSystemPath = archiveFile.toFileSystemPath();
+    const responsePath = join(archiveDir, fileSystemPath);
     if (origSrcPath !== fileSystemPath) {
       sourceMap.set(origSrcPath, fileSystemPath);
     }
-    await outputFile(join(archiveDir, fileSystemPath), response.body);
+    if (!existsSync(responsePath)) {
+      await outputFile(responsePath, response.body);
+    }
   }));
   await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
@@ -4129,6 +4153,7 @@ async function executeSnapshotScript(context) {
     type: "module",
     path: __require.resolve("@chromatic-com/playwright/browser")
   });
+  await context.waitForFunction(() => typeof window.__chromatic_takeSnapshot === "function");
   const snapshot = await context.evaluate(async () => {
     return JSON.stringify(await window.__chromatic_takeSnapshot());
   });
@@ -4210,38 +4235,21 @@ var performChromaticSnapshot = /* @__PURE__ */ __name(async ({ page, delay, diff
     }
     const resourceArchive = await completeArchive();
     const snapshots = chromaticSnapshots.get(testId) || /* @__PURE__ */ new Map();
-    const chromaticStorybookParams = {
-      ...delay && {
-        delay
-      },
-      ...diffIncludeAntiAliasing && {
-        diffIncludeAntiAliasing
-      },
-      ...diffThreshold && {
-        diffThreshold
-      },
-      ...forcedColors && {
-        forcedColors
-      },
-      ...pauseAnimationAtEnd && {
-        pauseAnimationAtEnd
-      },
-      ...prefersReducedMotion && {
-        prefersReducedMotion
-      },
-      ...cropToViewport && {
-        cropToViewport
-      },
-      ...ignoreSelectors && {
-        ignoreSelectors
-      }
-    };
     const outputDir = join(testInfo.outputDir, "..");
     await writeTestResult({
       ...testInfo,
       outputDir,
       pageUrl: page.url()
-    }, Object.fromEntries(snapshots), resourceArchive, chromaticStorybookParams);
+    }, Object.fromEntries(snapshots), resourceArchive, {
+      delay,
+      diffIncludeAntiAliasing,
+      diffThreshold,
+      forcedColors,
+      pauseAnimationAtEnd,
+      prefersReducedMotion,
+      cropToViewport,
+      ignoreSelectors
+    });
     trackComplete();
   } finally {
     chromaticSnapshots.delete(testId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-com/playwright",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "description": "Chromatic Visual Regression Testing for Playwright",
   "repository": {
     "type": "git",