@chromatic-com/playwright 0.13.1 → 0.13.2-0473a2c-20260422103524

package/dist/bin/archive-storybook.js

@@ -4,8 +4,9 @@
 var child_process = require('child_process');
 var path = require('path');
 var fs = require('fs');
-var promises = require('fs/promises');
+var module$1 = require('module');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var path__default = /*#__PURE__*/_interopDefault(path);
@@ -45,11 +46,6 @@ function archivesDir(defaultOutputDir) {
 }
 __name(archivesDir, "archivesDir");
 __name2(archivesDir, "archivesDir");
-function assetsDir(defaultOutputDir) {
-  return path__default.default.resolve(archivesDir(defaultOutputDir), "archive");
-}
-__name(assetsDir, "assetsDir");
-__name2(assetsDir, "assetsDir");
 function checkArchivesDirExists(defaultOutputDir) {
   const dir = archivesDir(defaultOutputDir);
   if (!fs.existsSync(dir)) {
@@ -60,203 +56,39 @@ Please make sure that you have run your E2E tests, or have set the CHROMATIC_ARC
 }
 __name(checkArchivesDirExists, "checkArchivesDirExists");
 __name2(checkArchivesDirExists, "checkArchivesDirExists");
-function ensureDir(directory) {
-  if (!fs.existsSync(directory)) {
-    fs.mkdirSync(directory, {
-      recursive: true
-    });
-  }
-}
-__name(ensureDir, "ensureDir");
-__name2(ensureDir, "ensureDir");
-async function outputFile(filePath, data) {
-  ensureDir(path__default.default.dirname(filePath));
-  return promises.writeFile(filePath, data, {
-    mode: 511
-  });
-}
-__name(outputFile, "outputFile");
-__name2(outputFile, "outputFile");
-async function outputJSONFile(filePath, data) {
-  return outputFile(filePath, JSON.stringify(data));
-}
-__name(outputJSONFile, "outputJSONFile");
-__name2(outputJSONFile, "outputJSONFile");
-async function readJSONFile(filePath) {
-  const data = await promises.readFile(filePath);
-  return JSON.parse(data.toString());
-}
-__name(readJSONFile, "readJSONFile");
-__name2(readJSONFile, "readJSONFile");
-function viewportToString(viewport) {
-  return `w${viewport.width}h${viewport.height}`;
-}
-__name(viewportToString, "viewportToString");
-__name2(viewportToString, "viewportToString");
-function parseViewport(viewportString) {
-  const matcher = viewportString.match(/w(\d+)h(\d+)/);
-  return {
-    width: Number(matcher[1]),
-    height: Number(matcher[2])
-  };
-}
-__name(parseViewport, "parseViewport");
-__name2(parseViewport, "parseViewport");
-var SNAPSHOT_FILE_EXT = "snapshot.json";
-function snapshotIdFromFileName(fileName) {
-  const fileParts = fileName.split(".");
-  return fileParts.slice(0, fileParts.length - 3).join(".");
-}
-__name(snapshotIdFromFileName, "snapshotIdFromFileName");
-__name2(snapshotIdFromFileName, "snapshotIdFromFileName");
-function viewportFromFileName(fileName) {
-  const fileParts = fileName.split(".");
-  const viewportStr = fileParts[fileParts.length - 3];
-  return parseViewport(viewportStr);
-}
-__name(viewportFromFileName, "viewportFromFileName");
-__name2(viewportFromFileName, "viewportFromFileName");
-async function listSnapshotFiles(snapshotsDir) {
-  const files = await promises.readdir(snapshotsDir);
-  return files.filter((file) => file.endsWith(`.${SNAPSHOT_FILE_EXT}`));
-}
-__name(listSnapshotFiles, "listSnapshotFiles");
-__name2(listSnapshotFiles, "listSnapshotFiles");
-var STORIES_FILE_EXT = "stories.json";
-function addViewportsToStories(storiesFileJson, viewportsStoriesLookup) {
-  const { stories } = storiesFileJson;
-  const storiesWithViewports = stories.map((story) => {
-    const storyId = story.parameters.server.id;
-    const viewports = viewportsStoriesLookup[storyId];
-    return {
-      ...story,
-      parameters: {
-        ...story.parameters,
-        chromatic: {
-          ...story.parameters.chromatic,
-          modes: buildStoryModesConfig(viewports)
-        },
-        viewport: {
-          viewports: buildStoryViewportsConfig(viewports),
-          defaultViewport: viewportToString(findDefaultViewport(viewports))
-        }
-      }
-    };
-  });
-  return {
-    ...storiesFileJson,
-    stories: storiesWithViewports
-  };
-}
-__name(addViewportsToStories, "addViewportsToStories");
-__name2(addViewportsToStories, "addViewportsToStories");
-async function listStoriesFiles(storiesDir) {
-  const files = await promises.readdir(storiesDir);
-  return files.filter((file) => file.endsWith(`.${STORIES_FILE_EXT}`));
-}
-__name(listStoriesFiles, "listStoriesFiles");
-__name2(listStoriesFiles, "listStoriesFiles");
-function buildStoryModesConfig(viewports) {
-  return viewports.reduce((modes, viewport) => {
-    const viewportName = viewportToString(viewport);
-    modes[viewportName] = {
-      viewport: viewportName
-    };
-    return modes;
-  }, {});
-}
-__name(buildStoryModesConfig, "buildStoryModesConfig");
-__name2(buildStoryModesConfig, "buildStoryModesConfig");
-function buildStoryViewportsConfig(viewports) {
-  return viewports.reduce((viewportsConfig, viewport) => {
-    const viewportName = viewportToString(viewport);
-    viewportsConfig[viewportName] = {
-      name: viewportName,
-      styles: {
-        width: `${viewport.width}px`,
-        height: `${viewport.height}px`
-      }
-    };
-    return viewportsConfig;
-  }, {});
-}
-__name(buildStoryViewportsConfig, "buildStoryViewportsConfig");
-__name2(buildStoryViewportsConfig, "buildStoryViewportsConfig");
-function findDefaultViewport(viewports) {
-  const compareFn = /* @__PURE__ */ __name2((vp1, vp2) => {
-    if (vp1.width < vp2.width) {
-      return 1;
-    }
-    if (vp1.width > vp2.width) {
-      return -1;
-    }
-    return 0;
-  }, "compareFn");
-  return viewports.sort(compareFn)[0];
-}
-__name(findDefaultViewport, "findDefaultViewport");
-__name2(findDefaultViewport, "findDefaultViewport");
-async function addViewportsToStoriesFiles(defaultOutputDir) {
-  const snapshotsDir = assetsDir(defaultOutputDir);
-  const snapshotFileNames = await listSnapshotFiles(snapshotsDir);
-  const viewportsLookup = buildSnapshotViewportsLookup(snapshotFileNames);
-  const storiesDir = archivesDir(defaultOutputDir);
-  const storiesFilePaths = (await listStoriesFiles(storiesDir)).map((storiesFileName) => path__default.default.resolve(storiesDir, storiesFileName));
-  await Promise.all(storiesFilePaths.map(async (storiesFilePath) => {
-    const storiesFileJson = await readJSONFile(storiesFilePath);
-    const storiesWithViewports = addViewportsToStories(storiesFileJson, viewportsLookup);
-    await outputJSONFile(storiesFilePath, storiesWithViewports);
-  }));
-}
-__name(addViewportsToStoriesFiles, "addViewportsToStoriesFiles");
-__name2(addViewportsToStoriesFiles, "addViewportsToStoriesFiles");
-function buildSnapshotViewportsLookup(snapshotFileNames) {
-  const lookup = {};
-  snapshotFileNames.forEach((file) => {
-    const snapshotId2 = snapshotIdFromFileName(file);
-    const viewports = lookup[snapshotId2] || [];
-    viewports.push(viewportFromFileName(file));
-    lookup[snapshotId2] = viewports;
-  });
-  return lookup;
-}
-__name(buildSnapshotViewportsLookup, "buildSnapshotViewportsLookup");
-__name2(buildSnapshotViewportsLookup, "buildSnapshotViewportsLookup");
+var req = __require2.resolve ? __require2 : module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
 function archiveStorybook(processArgs, configDir2, defaultOutputDir) {
   checkArchivesDirExists(defaultOutputDir);
-  addViewportsToStoriesFiles(defaultOutputDir).then(() => {
-    child_process.execFileSync("node", [
-      binPath(),
-      "dev",
-      ...processArgs,
-      "-c",
-      configDir2
-    ], {
-      stdio: "inherit"
-    });
+  child_process.execFileSync("node", [
+    binPath(),
+    "dev",
+    ...processArgs,
+    "-c",
+    configDir2
+  ], {
+    stdio: "inherit"
   });
 }
 __name(archiveStorybook, "archiveStorybook");
 __name2(archiveStorybook, "archiveStorybook");
 function buildArchiveStorybook(processArgs, configDir2, defaultOutputDir) {
   checkArchivesDirExists(defaultOutputDir);
-  addViewportsToStoriesFiles(defaultOutputDir).then(() => {
-    child_process.execFileSync("node", [
-      binPath(),
-      "build",
-      ...processArgs,
-      "-c",
-      configDir2
-    ], {
-      stdio: "inherit"
-    });
+  child_process.execFileSync("node", [
+    binPath(),
+    "build",
+    ...processArgs,
+    "-c",
+    configDir2
+  ], {
+    stdio: "inherit"
   });
 }
 __name(buildArchiveStorybook, "buildArchiveStorybook");
 __name2(buildArchiveStorybook, "buildArchiveStorybook");
 function binPath() {
-  const packageJson = __require2("storybook/package.json");
-  return path.resolve(path.dirname(__require2.resolve("storybook/package.json")), packageJson.bin);
+  const filename = req.resolve("storybook/package.json");
+  const packageJson = JSON.parse(fs.readFileSync(filename, "utf8"));
+  return path.resolve(path.dirname(filename), packageJson.bin);
 }
 __name(binPath, "binPath");
 __name2(binPath, "binPath");

package/dist/bin/build-archive-storybook.js

@@ -4,8 +4,9 @@
 var child_process = require('child_process');
 var path = require('path');
 var fs = require('fs');
-var promises = require('fs/promises');
+var module$1 = require('module');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var path__default = /*#__PURE__*/_interopDefault(path);
@@ -45,11 +46,6 @@ function archivesDir(defaultOutputDir) {
 }
 __name(archivesDir, "archivesDir");
 __name2(archivesDir, "archivesDir");
-function assetsDir(defaultOutputDir) {
-  return path__default.default.resolve(archivesDir(defaultOutputDir), "archive");
-}
-__name(assetsDir, "assetsDir");
-__name2(assetsDir, "assetsDir");
 function checkArchivesDirExists(defaultOutputDir) {
   const dir = archivesDir(defaultOutputDir);
   if (!fs.existsSync(dir)) {
@@ -60,203 +56,39 @@ Please make sure that you have run your E2E tests, or have set the CHROMATIC_ARC
 }
 __name(checkArchivesDirExists, "checkArchivesDirExists");
 __name2(checkArchivesDirExists, "checkArchivesDirExists");
-function ensureDir(directory) {
-  if (!fs.existsSync(directory)) {
-    fs.mkdirSync(directory, {
-      recursive: true
-    });
-  }
-}
-__name(ensureDir, "ensureDir");
-__name2(ensureDir, "ensureDir");
-async function outputFile(filePath, data) {
-  ensureDir(path__default.default.dirname(filePath));
-  return promises.writeFile(filePath, data, {
-    mode: 511
-  });
-}
-__name(outputFile, "outputFile");
-__name2(outputFile, "outputFile");
-async function outputJSONFile(filePath, data) {
-  return outputFile(filePath, JSON.stringify(data));
-}
-__name(outputJSONFile, "outputJSONFile");
-__name2(outputJSONFile, "outputJSONFile");
-async function readJSONFile(filePath) {
-  const data = await promises.readFile(filePath);
-  return JSON.parse(data.toString());
-}
-__name(readJSONFile, "readJSONFile");
-__name2(readJSONFile, "readJSONFile");
-function viewportToString(viewport) {
-  return `w${viewport.width}h${viewport.height}`;
-}
-__name(viewportToString, "viewportToString");
-__name2(viewportToString, "viewportToString");
-function parseViewport(viewportString) {
-  const matcher = viewportString.match(/w(\d+)h(\d+)/);
-  return {
-    width: Number(matcher[1]),
-    height: Number(matcher[2])
-  };
-}
-__name(parseViewport, "parseViewport");
-__name2(parseViewport, "parseViewport");
-var SNAPSHOT_FILE_EXT = "snapshot.json";
-function snapshotIdFromFileName(fileName) {
-  const fileParts = fileName.split(".");
-  return fileParts.slice(0, fileParts.length - 3).join(".");
-}
-__name(snapshotIdFromFileName, "snapshotIdFromFileName");
-__name2(snapshotIdFromFileName, "snapshotIdFromFileName");
-function viewportFromFileName(fileName) {
-  const fileParts = fileName.split(".");
-  const viewportStr = fileParts[fileParts.length - 3];
-  return parseViewport(viewportStr);
-}
-__name(viewportFromFileName, "viewportFromFileName");
-__name2(viewportFromFileName, "viewportFromFileName");
-async function listSnapshotFiles(snapshotsDir) {
-  const files = await promises.readdir(snapshotsDir);
-  return files.filter((file) => file.endsWith(`.${SNAPSHOT_FILE_EXT}`));
-}
-__name(listSnapshotFiles, "listSnapshotFiles");
-__name2(listSnapshotFiles, "listSnapshotFiles");
-var STORIES_FILE_EXT = "stories.json";
-function addViewportsToStories(storiesFileJson, viewportsStoriesLookup) {
-  const { stories } = storiesFileJson;
-  const storiesWithViewports = stories.map((story) => {
-    const storyId = story.parameters.server.id;
-    const viewports = viewportsStoriesLookup[storyId];
-    return {
-      ...story,
-      parameters: {
-        ...story.parameters,
-        chromatic: {
-          ...story.parameters.chromatic,
-          modes: buildStoryModesConfig(viewports)
-        },
-        viewport: {
-          viewports: buildStoryViewportsConfig(viewports),
-          defaultViewport: viewportToString(findDefaultViewport(viewports))
-        }
-      }
-    };
-  });
-  return {
-    ...storiesFileJson,
-    stories: storiesWithViewports
-  };
-}
-__name(addViewportsToStories, "addViewportsToStories");
-__name2(addViewportsToStories, "addViewportsToStories");
-async function listStoriesFiles(storiesDir) {
-  const files = await promises.readdir(storiesDir);
-  return files.filter((file) => file.endsWith(`.${STORIES_FILE_EXT}`));
-}
-__name(listStoriesFiles, "listStoriesFiles");
-__name2(listStoriesFiles, "listStoriesFiles");
-function buildStoryModesConfig(viewports) {
-  return viewports.reduce((modes, viewport) => {
-    const viewportName = viewportToString(viewport);
-    modes[viewportName] = {
-      viewport: viewportName
-    };
-    return modes;
-  }, {});
-}
-__name(buildStoryModesConfig, "buildStoryModesConfig");
-__name2(buildStoryModesConfig, "buildStoryModesConfig");
-function buildStoryViewportsConfig(viewports) {
-  return viewports.reduce((viewportsConfig, viewport) => {
-    const viewportName = viewportToString(viewport);
-    viewportsConfig[viewportName] = {
-      name: viewportName,
-      styles: {
-        width: `${viewport.width}px`,
-        height: `${viewport.height}px`
-      }
-    };
-    return viewportsConfig;
-  }, {});
-}
-__name(buildStoryViewportsConfig, "buildStoryViewportsConfig");
-__name2(buildStoryViewportsConfig, "buildStoryViewportsConfig");
-function findDefaultViewport(viewports) {
-  const compareFn = /* @__PURE__ */ __name2((vp1, vp2) => {
-    if (vp1.width < vp2.width) {
-      return 1;
-    }
-    if (vp1.width > vp2.width) {
-      return -1;
-    }
-    return 0;
-  }, "compareFn");
-  return viewports.sort(compareFn)[0];
-}
-__name(findDefaultViewport, "findDefaultViewport");
-__name2(findDefaultViewport, "findDefaultViewport");
-async function addViewportsToStoriesFiles(defaultOutputDir) {
-  const snapshotsDir = assetsDir(defaultOutputDir);
-  const snapshotFileNames = await listSnapshotFiles(snapshotsDir);
-  const viewportsLookup = buildSnapshotViewportsLookup(snapshotFileNames);
-  const storiesDir = archivesDir(defaultOutputDir);
-  const storiesFilePaths = (await listStoriesFiles(storiesDir)).map((storiesFileName) => path__default.default.resolve(storiesDir, storiesFileName));
-  await Promise.all(storiesFilePaths.map(async (storiesFilePath) => {
-    const storiesFileJson = await readJSONFile(storiesFilePath);
-    const storiesWithViewports = addViewportsToStories(storiesFileJson, viewportsLookup);
-    await outputJSONFile(storiesFilePath, storiesWithViewports);
-  }));
-}
-__name(addViewportsToStoriesFiles, "addViewportsToStoriesFiles");
-__name2(addViewportsToStoriesFiles, "addViewportsToStoriesFiles");
-function buildSnapshotViewportsLookup(snapshotFileNames) {
-  const lookup = {};
-  snapshotFileNames.forEach((file) => {
-    const snapshotId2 = snapshotIdFromFileName(file);
-    const viewports = lookup[snapshotId2] || [];
-    viewports.push(viewportFromFileName(file));
-    lookup[snapshotId2] = viewports;
-  });
-  return lookup;
-}
-__name(buildSnapshotViewportsLookup, "buildSnapshotViewportsLookup");
-__name2(buildSnapshotViewportsLookup, "buildSnapshotViewportsLookup");
+var req = __require2.resolve ? __require2 : module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
 function archiveStorybook(processArgs, configDir2, defaultOutputDir) {
   checkArchivesDirExists(defaultOutputDir);
-  addViewportsToStoriesFiles(defaultOutputDir).then(() => {
-    child_process.execFileSync("node", [
-      binPath(),
-      "dev",
-      ...processArgs,
-      "-c",
-      configDir2
-    ], {
-      stdio: "inherit"
-    });
+  child_process.execFileSync("node", [
+    binPath(),
+    "dev",
+    ...processArgs,
+    "-c",
+    configDir2
+  ], {
+    stdio: "inherit"
   });
 }
 __name(archiveStorybook, "archiveStorybook");
 __name2(archiveStorybook, "archiveStorybook");
 function buildArchiveStorybook(processArgs, configDir2, defaultOutputDir) {
   checkArchivesDirExists(defaultOutputDir);
-  addViewportsToStoriesFiles(defaultOutputDir).then(() => {
-    child_process.execFileSync("node", [
-      binPath(),
-      "build",
-      ...processArgs,
-      "-c",
-      configDir2
-    ], {
-      stdio: "inherit"
-    });
+  child_process.execFileSync("node", [
+    binPath(),
+    "build",
+    ...processArgs,
+    "-c",
+    configDir2
+  ], {
+    stdio: "inherit"
   });
 }
 __name(buildArchiveStorybook, "buildArchiveStorybook");
 __name2(buildArchiveStorybook, "buildArchiveStorybook");
 function binPath() {
-  const packageJson = __require2("storybook/package.json");
-  return path.resolve(path.dirname(__require2.resolve("storybook/package.json")), packageJson.bin);
+  const filename = req.resolve("storybook/package.json");
+  const packageJson = JSON.parse(fs.readFileSync(filename, "utf8"));
+  return path.resolve(path.dirname(filename), packageJson.bin);
 }
 __name(binPath, "binPath");
 __name2(binPath, "binPath");

package/dist/index.js

@@ -3399,6 +3399,7 @@ var _ResourceArchiver = (_a = class {
     __publicField(this, "assetDomains");
     __publicField(this, "firstUrl");
     __publicField(this, "httpCredentials");
+    __publicField(this, "pendingRequests", /* @__PURE__ */ new Set());
     __publicField(this, "authRequired", /* @__PURE__ */ __name2(async ({ requestId, request }) => {
       await this.clientSend(request, "Fetch.continueWithAuth", {
         requestId,
@@ -3409,6 +3410,7 @@ var _ResourceArchiver = (_a = class {
       });
     }, "authRequired"));
     __publicField(this, "requestPaused", /* @__PURE__ */ __name2(async ({ requestId, request, responseStatusCode, responseStatusText, responseErrorReason, responseHeaders }) => {
+      this.pendingRequests.delete(requestId);
       if (!request.method.match(/get/i)) {
         await this.clientSend(request, "Fetch.continueRequest", {
           requestId
@@ -3442,6 +3444,7 @@ var _ResourceArchiver = (_a = class {
         }, requestUrl, isRequestFromAllowedDomain);
         return;
       }
+      this.pendingRequests.add(requestId);
       await this.clientSend(request, "Fetch.continueRequest", {
         requestId,
         interceptResponse: true
@@ -3462,6 +3465,10 @@ var _ResourceArchiver = (_a = class {
     this.client.off?.("Fetch.requestPaused", this.requestPaused);
     this.client.off?.("Fetch.authRequired", this.authRequired);
     await this.client.send("Fetch.disable");
+    this.pendingRequests.clear();
+  }
+  getPendingRequestsCount() {
+    return this.pendingRequests.size;
   }
   async clientSend(request, method, params) {
     try {
@@ -3862,14 +3869,25 @@ __name2(storiesFileName, "storiesFileName");
 function createStories(title, domSnapshots, chromaticStorybookParams) {
   return {
     title,
-    stories: Object.keys(domSnapshots).map((name) => ({
+    stories: Object.entries(domSnapshots).map(([name, { viewport }]) => ({
       name,
       parameters: {
         server: {
           id: snapshotId(title, name)
         },
         chromatic: {
-          ...chromaticStorybookParams
+          ...chromaticStorybookParams,
+          modes: buildStoryModesConfig([
+            viewport
+          ])
+        },
+        viewport: {
+          viewports: buildStoryViewportsConfig([
+            viewport
+          ]),
+          defaultViewport: viewportToString(findDefaultViewport([
+            viewport
+          ]))
         }
       }
     }))
@@ -3877,8 +3895,48 @@ function createStories(title, domSnapshots, chromaticStorybookParams) {
 }
 __name(createStories, "createStories");
 __name2(createStories, "createStories");
+function buildStoryModesConfig(viewports) {
+  return viewports.reduce((modes, viewport) => {
+    const viewportName = viewportToString(viewport);
+    modes[viewportName] = {
+      viewport: viewportName
+    };
+    return modes;
+  }, {});
+}
+__name(buildStoryModesConfig, "buildStoryModesConfig");
+__name2(buildStoryModesConfig, "buildStoryModesConfig");
+function buildStoryViewportsConfig(viewports) {
+  return viewports.reduce((viewportsConfig, viewport) => {
+    const viewportName = viewportToString(viewport);
+    viewportsConfig[viewportName] = {
+      name: viewportName,
+      styles: {
+        width: `${viewport.width}px`,
+        height: `${viewport.height}px`
+      }
+    };
+    return viewportsConfig;
+  }, {});
+}
+__name(buildStoryViewportsConfig, "buildStoryViewportsConfig");
+__name2(buildStoryViewportsConfig, "buildStoryViewportsConfig");
+function findDefaultViewport(viewports) {
+  const compareFn = /* @__PURE__ */ __name2((vp1, vp2) => {
+    if (vp1.width < vp2.width) {
+      return 1;
+    }
+    if (vp1.width > vp2.width) {
+      return -1;
+    }
+    return 0;
+  }, "compareFn");
+  return viewports.sort(compareFn)[0];
+}
+__name(findDefaultViewport, "findDefaultViewport");
+__name2(findDefaultViewport, "findDefaultViewport");
 async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStorybookParams) {
-  const { titlePath, outputDir, pageUrl, viewport } = e2eTestInfo;
+  const { titlePath, outputDir, pageUrl } = e2eTestInfo;
   const titlePathWithoutFileExtensions = titlePath.map((pathPart) => (
     // make sure we remove file extensions, even if the file name doesn't have .spec or .test or.cy
     // possible extensions:
@@ -3903,7 +3961,7 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     }
     await outputFile(path2.join(archiveDir, fileSystemPath), response.body);
   }));
-  await Promise.all(await Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
+  await Promise.all(Object.entries(domSnapshots).map(async ([name, { snapshot: domSnapshot, viewport }]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
     const mappedSnapshot = await snapshot.mapAssetPaths(sourceMap);
     const snapshotFile = snapshotFileName(snapshotId(title, name), viewport);
@@ -4033,15 +4091,21 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
       new Promise((resolve) => {
         doPostProcessing(rrwebSnapshot, document).then((domSnapshot) => {
           resolve(domSnapshot);
-        });    
+        });
       });
-    }    
+    }
   `);
   const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));
   if (!chromaticSnapshots.has(testId)) {
     chromaticSnapshots.set(testId, /* @__PURE__ */ new Map());
   }
-  chromaticSnapshots.get(testId).set(name, bufferedSnapshot);
+  chromaticSnapshots.get(testId).set(name, {
+    snapshot: bufferedSnapshot,
+    viewport: page.viewportSize() || {
+      width: 1280,
+      height: 720
+    }
+  });
 }
 __name(takeSnapshot, "takeSnapshot");
 
@@ -4126,8 +4190,7 @@ var performChromaticSnapshot = /* @__PURE__ */ __name(async ({ page, delay, diff
     await writeTestResult({
       ...testInfo,
       outputDir,
-      pageUrl: page.url(),
-      viewport: page.viewportSize()
+      pageUrl: page.url()
     }, Object.fromEntries(snapshots), resourceArchive, chromaticStorybookParams);
     trackComplete();
   } finally {