@chromatic-com/playwright 0.14.3 → 0.14.5

package/dist/index.js

@@ -6,6 +6,7 @@ var path2 = require('path');
 var fs = require('fs');
 var promises = require('fs/promises');
 var crypto = require('crypto');
+var csf = require('storybook/internal/csf');
 var analyticsNode = require('@segment/analytics-node');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -3803,8 +3804,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") {
@@ -3829,6 +3829,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);
       }
     }
   }
@@ -3863,6 +3864,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3877,6 +3882,7 @@ __name(viewportToString, "viewportToString");
 var sanitize = /* @__PURE__ */ __name((string) => {
   return string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/[\r\n]/g, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
 }, "sanitize");
+var collapseNewlines = /* @__PURE__ */ __name((title) => title.replace(/[\r\n]+/g, " ").trim(), "collapseNewlines");
 
 // ../shared/src/write-archive/snapshot-files.ts
 var SNAPSHOT_FILE_EXT = "snapshot.json";
@@ -3895,49 +3901,57 @@ function snapshotFileName(snapshotId2, viewport) {
   return fileNameParts.join(".");
 }
 __name(snapshotFileName, "snapshotFileName");
-
-// ../shared/src/write-archive/stories-files.ts
 var STORIES_FILE_EXT = "stories.json";
+var uniqueId = {
+  value: 1
+};
 function storiesFileName(testTitle) {
   const fileName = [
-    sanitize(testTitle),
+    sanitize(testTitle) + "-" + uniqueId.value++,
     STORIES_FILE_EXT
   ].join(".");
   const maxByteLength = MAX_FILE_NAME_BYTE_LENGTH - 25;
   return truncateFileName(fileName, maxByteLength);
 }
 __name(storiesFileName, "storiesFileName");
-function createStories(title, domSnapshots, chromaticStorybookParams) {
+function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
+  const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([name, { viewport }]) => ({
-      name,
-      // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
-      // selects the active one. See https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story
-      // `defaultViewport` is not read by SB 10's types but our archive preview uses it as a fetch fallback.
-      globals: {
-        viewport: viewportToString(viewport)
-      },
-      parameters: {
-        server: {
-          id: snapshotId(title, name)
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+      const name = collapseNewlines(snapshotName);
+      return {
+        name,
+        // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
+        // selects the active one. See https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story
+        // `defaultViewport` is not read by SB 10's types but our archive preview uses it as a fetch fallback.
+        globals: {
+          viewport: viewportToString(viewport)
         },
-        chromatic: {
-          ...chromaticStorybookParams,
-          modes: buildStoryModesConfig([
-            viewport
-          ])
-        },
-        viewport: {
-          options: buildStoryViewportsConfig([
-            viewport
-          ]),
-          defaultViewport: viewportToString(findDefaultViewport([
-            viewport
-          ]))
+        parameters: {
+          // Work-around for cases where "あ" in story name would cause Storybook to fail to load the story due to an invalid story ID.
+          // See https://github.com/chromaui/chromatic-e2e/issues/365
+          __id: csf.toId(title, csf.storyNameFromExport(name)),
+          server: {
+            id: snapshotId(title, name)
+          },
+          chromatic: {
+            ...chromaticStorybookParams,
+            modes: buildStoryModesConfig([
+              viewport
+            ])
+          },
+          viewport: {
+            options: buildStoryViewportsConfig([
+              viewport
+            ]),
+            defaultViewport: viewportToString(findDefaultViewport([
+              viewport
+            ]))
+          }
         }
-      }
-    }))
+      };
+    })
   };
 }
 __name(createStories, "createStories");
@@ -4206,38 +4220,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

@@ -5,6 +5,7 @@ import path2, { join } from 'path';
 import { existsSync, mkdirSync } from 'fs';
 import { writeFile } from 'fs/promises';
 import { createHash } from 'crypto';
+import { toId, storyNameFromExport } from 'storybook/internal/csf';
 import { Analytics } from '@segment/analytics-node';
 
 const require$1 = createRequire(import.meta.url);
@@ -3797,8 +3798,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") {
@@ -3823,6 +3823,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);
       }
     }
   }
@@ -3857,6 +3858,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3871,6 +3876,7 @@ __name(viewportToString, "viewportToString");
 var sanitize = /* @__PURE__ */ __name((string) => {
   return string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/[\r\n]/g, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
 }, "sanitize");
+var collapseNewlines = /* @__PURE__ */ __name((title) => title.replace(/[\r\n]+/g, " ").trim(), "collapseNewlines");
 
 // ../shared/src/write-archive/snapshot-files.ts
 var SNAPSHOT_FILE_EXT = "snapshot.json";
@@ -3889,49 +3895,57 @@ function snapshotFileName(snapshotId2, viewport) {
   return fileNameParts.join(".");
 }
 __name(snapshotFileName, "snapshotFileName");
-
-// ../shared/src/write-archive/stories-files.ts
 var STORIES_FILE_EXT = "stories.json";
+var uniqueId = {
+  value: 1
+};
 function storiesFileName(testTitle) {
   const fileName = [
-    sanitize(testTitle),
+    sanitize(testTitle) + "-" + uniqueId.value++,
     STORIES_FILE_EXT
   ].join(".");
   const maxByteLength = MAX_FILE_NAME_BYTE_LENGTH - 25;
   return truncateFileName(fileName, maxByteLength);
 }
 __name(storiesFileName, "storiesFileName");
-function createStories(title, domSnapshots, chromaticStorybookParams) {
+function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
+  const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([name, { viewport }]) => ({
-      name,
-      // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
-      // selects the active one. See https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story
-      // `defaultViewport` is not read by SB 10's types but our archive preview uses it as a fetch fallback.
-      globals: {
-        viewport: viewportToString(viewport)
-      },
-      parameters: {
-        server: {
-          id: snapshotId(title, name)
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+      const name = collapseNewlines(snapshotName);
+      return {
+        name,
+        // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
+        // selects the active one. See https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story
+        // `defaultViewport` is not read by SB 10's types but our archive preview uses it as a fetch fallback.
+        globals: {
+          viewport: viewportToString(viewport)
         },
-        chromatic: {
-          ...chromaticStorybookParams,
-          modes: buildStoryModesConfig([
-            viewport
-          ])
-        },
-        viewport: {
-          options: buildStoryViewportsConfig([
-            viewport
-          ]),
-          defaultViewport: viewportToString(findDefaultViewport([
-            viewport
-          ]))
+        parameters: {
+          // Work-around for cases where "あ" in story name would cause Storybook to fail to load the story due to an invalid story ID.
+          // See https://github.com/chromaui/chromatic-e2e/issues/365
+          __id: toId(title, storyNameFromExport(name)),
+          server: {
+            id: snapshotId(title, name)
+          },
+          chromatic: {
+            ...chromaticStorybookParams,
+            modes: buildStoryModesConfig([
+              viewport
+            ])
+          },
+          viewport: {
+            options: buildStoryViewportsConfig([
+              viewport
+            ]),
+            defaultViewport: viewportToString(findDefaultViewport([
+              viewport
+            ]))
+          }
         }
-      }
-    }))
+      };
+    })
   };
 }
 __name(createStories, "createStories");
@@ -4200,38 +4214,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.3",
+  "version": "0.14.5",
   "description": "Chromatic Visual Regression Testing for Playwright",
   "repository": {
     "type": "git",