@chromatic-com/playwright 0.13.2 → 0.13.3-8256a68-20260428060550

package/dist/index.d.mts

@@ -2,6 +2,12 @@ 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;

package/dist/index.d.ts

@@ -2,6 +2,12 @@ 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;

package/dist/index.js

@@ -3699,18 +3699,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);
@@ -3961,10 +3966,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);
@@ -4030,14 +4035,24 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
   page.on("console", (msg) => {
     logger.log(`CONSOLE: "${msg.text()}"`);
   });
-  const domSnapshot = await page.evaluate(tsDedent.dedent`
+  const { domSnapshot, pseudoClassIds } = await page.evaluate(tsDedent.dedent`
     ${rrweb};
 
     // this code was erroring the page.evaluate() when it was passed as a function to page.evaluate(),
     // so for now it is being passed as a string until that can be resolved.
     const doPostProcessing = (rrwebSnapshotInstance, documentToSnapshot) => {
       return new Promise((resolve) => {
-        const domSnapshot = rrwebSnapshotInstance.snapshot(documentToSnapshot, { recordCanvas: true });
+        const mirror = rrwebSnapshotInstance.createMirror();
+        const domSnapshot = rrwebSnapshotInstance.snapshot(documentToSnapshot, { recordCanvas: true, mirror });
+
+        const pseudoClassIds = {};
+
+        for (const className of [':hover', ':focus', ':focus-visible', ':active']) {
+          const elements = documentToSnapshot.querySelectorAll(className);
+          const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1);
+          pseudoClassIds[className] = ids;
+        }
+
         // do some post-processing on the snapshot
         const toDataURL = async (url) => {
           // read contents of the blob URL
@@ -4069,7 +4084,7 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
         };
 
         replaceBlobUrls(domSnapshot).then(() => {
-          resolve(domSnapshot);
+          resolve({ domSnapshot, pseudoClassIds });
         });
       });
     };
@@ -4104,7 +4119,8 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
     viewport: page.viewportSize() || {
       width: 1280,
       height: 720
-    }
+    },
+    pseudoClassIds
   });
 }
 __name(takeSnapshot, "takeSnapshot");

package/dist/index.mjs

@@ -3693,18 +3693,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);
@@ -3955,10 +3960,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);
@@ -4024,14 +4029,24 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
   page.on("console", (msg) => {
     logger.log(`CONSOLE: "${msg.text()}"`);
   });
-  const domSnapshot = await page.evaluate(dedent`
+  const { domSnapshot, pseudoClassIds } = await page.evaluate(dedent`
     ${rrweb};
 
     // this code was erroring the page.evaluate() when it was passed as a function to page.evaluate(),
     // so for now it is being passed as a string until that can be resolved.
     const doPostProcessing = (rrwebSnapshotInstance, documentToSnapshot) => {
       return new Promise((resolve) => {
-        const domSnapshot = rrwebSnapshotInstance.snapshot(documentToSnapshot, { recordCanvas: true });
+        const mirror = rrwebSnapshotInstance.createMirror();
+        const domSnapshot = rrwebSnapshotInstance.snapshot(documentToSnapshot, { recordCanvas: true, mirror });
+
+        const pseudoClassIds = {};
+
+        for (const className of [':hover', ':focus', ':focus-visible', ':active']) {
+          const elements = documentToSnapshot.querySelectorAll(className);
+          const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1);
+          pseudoClassIds[className] = ids;
+        }
+
         // do some post-processing on the snapshot
         const toDataURL = async (url) => {
           // read contents of the blob URL
@@ -4063,7 +4078,7 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
         };
 
         replaceBlobUrls(domSnapshot).then(() => {
-          resolve(domSnapshot);
+          resolve({ domSnapshot, pseudoClassIds });
         });
       });
     };
@@ -4098,7 +4113,8 @@ async function takeSnapshot(page, nameOrTestInfo, maybeTestInfo) {
     viewport: page.viewportSize() || {
       width: 1280,
       height: 720
-    }
+    },
+    pseudoClassIds
   });
 }
 __name(takeSnapshot, "takeSnapshot");

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-com/playwright",
-  "version": "0.13.2",
+  "version": "0.13.3-8256a68-20260428060550",
   "description": "Chromatic Visual Regression Testing for Playwright",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "test:unit": "yarn workspace @chromaui/chromatic-e2e test:unit --project Playwright"
   },
   "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",
     "storybook": "10.2.13",
     "ts-dedent": "^2.2.0"