@chromatic-com/cypress 0.12.2 → 0.12.3-33fdb89-20260504080255

package/dist/index.js

@@ -3689,18 +3689,23 @@ var import_srcset = __toESM(require_srcset());
 var CSS_URL_REGEX = /url\((?!['"]?(?:data):)['"]?([^'")]*)['"]?\)/gi;
 var _a3;
 var _DOMSnapshot = (_a3 = class {
-  constructor(snapshot) {
+  constructor({ snapshot, pseudoClassIds }) {
     __publicField(this, "snapshot");
+    __publicField(this, "pseudoClassIds");
     if (Buffer.isBuffer(snapshot)) {
       const bufferAsString = snapshot.toString("utf-8");
       this.snapshot = JSON.parse(bufferAsString);
     } else {
       this.snapshot = JSON.parse(snapshot);
     }
+    this.pseudoClassIds = pseudoClassIds;
   }
   async mapAssetPaths(sourceMap) {
-    const transformedSnapshot = await this.mapNode(this.snapshot, sourceMap);
-    return JSON.stringify(transformedSnapshot);
+    const savedSnapshot = {
+      snapshot: await this.mapNode(this.snapshot, sourceMap),
+      pseudoClassIds: this.pseudoClassIds
+    };
+    return JSON.stringify(savedSnapshot);
   }
   async mapNode(node, sourceMap) {
     node = this.mapNodeAttributes(node, sourceMap);
@@ -3934,7 +3939,7 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     // cypress: https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Spec-files
     pathPart.replace(/\.(ts|js|mjs|cjs|tsx|jsx|cjsx|coffee)$/, "").replace(/\.(spec|test|cy)$/, "")
   ));
-  const title = titlePathWithoutFileExtensions.join("/");
+  const title = titlePathWithoutFileExtensions.join("/").replace(/\/([ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\]+)\//gi, "$1/");
   const finalOutputDir = path2.join(outputDir, "chromatic-archives");
   const archiveDir = path2.join(finalOutputDir, "archive");
   await ensureDir(archiveDir);
@@ -3951,10 +3956,10 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     }
     await outputFile(path2.join(archiveDir, fileSystemPath), response.body);
   }));
-  await Promise.all(Object.entries(domSnapshots).map(async ([name, { snapshot: domSnapshot, viewport }]) => {
+  await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
     const mappedSnapshot = await snapshot.mapAssetPaths(sourceMap);
-    const snapshotFile = snapshotFileName(snapshotId(title, name), viewport);
+    const snapshotFile = snapshotFileName(snapshotId(title, name), domSnapshot.viewport);
     await outputFile(path2.join(archiveDir, snapshotFile), mappedSnapshot);
   }));
   const storiesFile = storiesFileName(title);
@@ -4006,11 +4011,12 @@ __name2(trackComplete, "trackComplete");
 var writeArchives = /* @__PURE__ */ __name(async ({ testTitlePath, domSnapshots, resourceArchive, chromaticStorybookParams, pageUrl, outputDir }) => {
   const allSnapshots = Object.fromEntries(
     // manual snapshots can be given a name; otherwise, just use the snapshot's place in line as the name
-    domSnapshots.map(({ name, snapshot, viewport }, index) => [
+    domSnapshots.map(({ name, snapshot, viewport, pseudoClassIds }, index) => [
       name ?? `Snapshot #${index + 1}`,
       {
         snapshot: Buffer.from(JSON.stringify(snapshot)),
-        viewport
+        viewport,
+        pseudoClassIds
       }
     ])
   );

package/dist/index.mjs

@@ -3682,18 +3682,23 @@ var import_srcset = __toESM(require_srcset());
 var CSS_URL_REGEX = /url\((?!['"]?(?:data):)['"]?([^'")]*)['"]?\)/gi;
 var _a3;
 var _DOMSnapshot = (_a3 = class {
-  constructor(snapshot) {
+  constructor({ snapshot, pseudoClassIds }) {
     __publicField(this, "snapshot");
+    __publicField(this, "pseudoClassIds");
     if (Buffer.isBuffer(snapshot)) {
       const bufferAsString = snapshot.toString("utf-8");
       this.snapshot = JSON.parse(bufferAsString);
     } else {
       this.snapshot = JSON.parse(snapshot);
     }
+    this.pseudoClassIds = pseudoClassIds;
   }
   async mapAssetPaths(sourceMap) {
-    const transformedSnapshot = await this.mapNode(this.snapshot, sourceMap);
-    return JSON.stringify(transformedSnapshot);
+    const savedSnapshot = {
+      snapshot: await this.mapNode(this.snapshot, sourceMap),
+      pseudoClassIds: this.pseudoClassIds
+    };
+    return JSON.stringify(savedSnapshot);
   }
   async mapNode(node, sourceMap) {
     node = this.mapNodeAttributes(node, sourceMap);
@@ -3927,7 +3932,7 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     // cypress: https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Spec-files
     pathPart.replace(/\.(ts|js|mjs|cjs|tsx|jsx|cjsx|coffee)$/, "").replace(/\.(spec|test|cy)$/, "")
   ));
-  const title = titlePathWithoutFileExtensions.join("/");
+  const title = titlePathWithoutFileExtensions.join("/").replace(/\/([ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\]+)\//gi, "$1/");
   const finalOutputDir = join(outputDir, "chromatic-archives");
   const archiveDir = join(finalOutputDir, "archive");
   await ensureDir(archiveDir);
@@ -3944,10 +3949,10 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     }
     await outputFile(join(archiveDir, fileSystemPath), response.body);
   }));
-  await Promise.all(Object.entries(domSnapshots).map(async ([name, { snapshot: domSnapshot, viewport }]) => {
+  await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
     const mappedSnapshot = await snapshot.mapAssetPaths(sourceMap);
-    const snapshotFile = snapshotFileName(snapshotId(title, name), viewport);
+    const snapshotFile = snapshotFileName(snapshotId(title, name), domSnapshot.viewport);
     await outputFile(join(archiveDir, snapshotFile), mappedSnapshot);
   }));
   const storiesFile = storiesFileName(title);
@@ -3999,11 +4004,12 @@ __name2(trackComplete, "trackComplete");
 var writeArchives = /* @__PURE__ */ __name(async ({ testTitlePath, domSnapshots, resourceArchive, chromaticStorybookParams, pageUrl, outputDir }) => {
   const allSnapshots = Object.fromEntries(
     // manual snapshots can be given a name; otherwise, just use the snapshot's place in line as the name
-    domSnapshots.map(({ name, snapshot, viewport }, index) => [
+    domSnapshots.map(({ name, snapshot, viewport, pseudoClassIds }, index) => [
       name ?? `Snapshot #${index + 1}`,
       {
         snapshot: Buffer.from(JSON.stringify(snapshot)),
-        viewport
+        viewport,
+        pseudoClassIds
       }
     ])
   );

package/dist/storybook-config/preview.mjs

@@ -1,4 +1,4 @@
-import { rebuild } from '@chromaui/rrweb-snapshot';
+import { createMirror, rebuild, createCache } from '@chromaui/rrweb-snapshot';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -55,11 +55,22 @@ async function fetchSnapshot(context) {
 }
 __name(fetchSnapshot, "fetchSnapshot");
 var renderToCanvas = /* @__PURE__ */ __name(async (context) => {
-  const snapshot = await fetchSnapshot(context);
+  const { snapshot, pseudoClassIds } = await fetchSnapshot(context);
   const htmlNode = findHtmlNode(snapshot);
-  const html = await rebuild(htmlNode, {
-    doc: document
+  const mirror = createMirror();
+  const html = rebuild(htmlNode, {
+    doc: document,
+    mirror,
+    cache: createCache()
   });
+  for (const [className, ids] of Object.entries(pseudoClassIds)) {
+    for (const id of ids) {
+      const el = mirror.getNode(id);
+      if (el?.classList) {
+        el.classList.add(className);
+      }
+    }
+  }
   document.replaceChild(html, document.children[0]);
   document.head.innerHTML += '<script id="storybook-root"><\/script><script id="storybook-docs"><\/script>';
   context.showMain();

package/dist/support.js

@@ -9,9 +9,22 @@ var takeSnapshot = /* @__PURE__ */ __name((doc, viewport, isManualSnapshot) => {
     if (!isManualSnapshot && Cypress.env("disableAutoSnapshot")) {
       resolve(null);
     }
+    const mirror = rrwebSnapshot.createMirror();
     const domSnapshot = rrwebSnapshot.snapshot(doc, {
-      recordCanvas: true
+      recordCanvas: true,
+      mirror
     });
+    const pseudoClassIds = {};
+    for (const className of [
+      ":hover",
+      ":focus",
+      ":focus-visible",
+      ":active"
+    ]) {
+      const elements = doc.querySelectorAll(className);
+      const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1);
+      pseudoClassIds[className] = ids;
+    }
     const toDataURL = /* @__PURE__ */ __name(async (url) => {
       const response = await fetch(url);
       const blob = await response.blob();
@@ -39,7 +52,8 @@ var takeSnapshot = /* @__PURE__ */ __name((doc, viewport, isManualSnapshot) => {
     replaceBlobUrls(domSnapshot).then(() => {
       resolve({
         snapshot: domSnapshot,
-        viewport
+        viewport,
+        pseudoClassIds
       });
     });
   });

package/dist/support.mjs

@@ -1,4 +1,4 @@
-import { snapshot } from '@chromaui/rrweb-snapshot';
+import { createMirror, snapshot } from '@chromaui/rrweb-snapshot';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -7,9 +7,22 @@ var takeSnapshot = /* @__PURE__ */ __name((doc, viewport, isManualSnapshot) => {
     if (!isManualSnapshot && Cypress.env("disableAutoSnapshot")) {
       resolve(null);
     }
+    const mirror = createMirror();
     const domSnapshot = snapshot(doc, {
-      recordCanvas: true
+      recordCanvas: true,
+      mirror
     });
+    const pseudoClassIds = {};
+    for (const className of [
+      ":hover",
+      ":focus",
+      ":focus-visible",
+      ":active"
+    ]) {
+      const elements = doc.querySelectorAll(className);
+      const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1);
+      pseudoClassIds[className] = ids;
+    }
     const toDataURL = /* @__PURE__ */ __name(async (url) => {
       const response = await fetch(url);
       const blob = await response.blob();
@@ -37,7 +50,8 @@ var takeSnapshot = /* @__PURE__ */ __name((doc, viewport, isManualSnapshot) => {
     replaceBlobUrls(domSnapshot).then(() => {
       resolve({
         snapshot: domSnapshot,
-        viewport
+        viewport,
+        pseudoClassIds
       });
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-com/cypress",
-  "version": "0.12.2",
+  "version": "0.12.3-33fdb89-20260504080255",
   "description": "Chromatic Visual Regression Testing for Cypress",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "test:unit": "yarn workspace @chromaui/chromatic-e2e test:unit --project Cypress"
   },
   "dependencies": {
-    "@chromaui/rrweb-snapshot": "2.0.0-alpha.18-noAbsolute",
+    "@chromaui/rrweb-snapshot": "2.0.0-alpha.19-noAbsolute",
     "@segment/analytics-node": "2.1.3",
     "chrome-remote-interface": "^0.33.0",
     "storybook": "10.2.13"