@applitools/eyes-storybook 3.62.3 → 3.63.2

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # Changelog
 
+## [3.63.2](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.63.1...js/eyes-storybook@3.63.2) (2025-12-07)
+
+
+### Dependencies
+
+* @applitools/dom-snapshot bumped to 4.15.3
+  #### Bug Fixes
+
+  * capture JavaScript-modified CSS selectors in nested [@layer](https://github.com/layer) rules ([#3391](https://github.com/Applitools-Dev/sdk/issues/3391)) ([b3bceb5](https://github.com/Applitools-Dev/sdk/commit/b3bceb5bfe894f3548173d23942e09d0e04b7e04))
+* @applitools/core bumped to 4.53.2
+  #### Bug Fixes
+
+  * Upgrade core version ([#3398](https://github.com/Applitools-Dev/sdk/issues/3398)) ([68858c7](https://github.com/Applitools-Dev/sdk/commit/68858c7024e0413c1cc6af68752b1c3a9a04bb0b))
+
+
+
+* @applitools/eyes bumped to 1.36.17
+  #### Bug Fixes
+
+  * capture JavaScript-modified CSS selectors in nested [@layer](https://github.com/layer) rules ([#3391](https://github.com/Applitools-Dev/sdk/issues/3391)) ([b3bceb5](https://github.com/Applitools-Dev/sdk/commit/b3bceb5bfe894f3548173d23942e09d0e04b7e04))
+
+
+
+
+## [3.63.1](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.63.0...js/eyes-storybook@3.63.1) (2025-12-01)
+
+
+### Bug Fixes
+
+* client detection ([#3390](https://github.com/Applitools-Dev/sdk/issues/3390)) ([b4c11d8](https://github.com/Applitools-Dev/sdk/commit/b4c11d822ea9d176093f539313ce54942343249c))
+* setup script compatibility with ESM | AD-11756 ([#3363](https://github.com/Applitools-Dev/sdk/issues/3363)) ([d1222f4](https://github.com/Applitools-Dev/sdk/commit/d1222f40a74ab62782bebeeb0cf899aac3f3d3b6))
+* stories detection | FLD-3856 ([#3382](https://github.com/Applitools-Dev/sdk/issues/3382)) ([5fdf25a](https://github.com/Applitools-Dev/sdk/commit/5fdf25ab738a3e852b290d2ae96614bb5c18f7c7))
+* storybook started detection | AD-12069 ([#3387](https://github.com/Applitools-Dev/sdk/issues/3387)) ([8f06ab1](https://github.com/Applitools-Dev/sdk/commit/8f06ab10e191a7f0602db07b4cb6925f4b403607))
+
+
+### Dependencies
+
+* @applitools/utils bumped to 1.14.1
+  #### Bug Fixes
+
+  * setup script compatibility with ESM | AD-11756 ([#3363](https://github.com/Applitools-Dev/sdk/issues/3363)) ([d1222f4](https://github.com/Applitools-Dev/sdk/commit/d1222f40a74ab62782bebeeb0cf899aac3f3d3b6))
+* @applitools/logger bumped to 2.2.7
+
+* @applitools/dom-snapshot bumped to 4.15.2
+  #### Bug Fixes
+
+  * handle CSS variables in Shadow DOM adopted stylesheets | FLD-3790 ([#3381](https://github.com/Applitools-Dev/sdk/issues/3381)) ([b2bfca3](https://github.com/Applitools-Dev/sdk/commit/b2bfca3cd706cd996d78d51c6242148fbb8ce741))
+
+
+
+* @applitools/socket bumped to 1.3.8
+
+* @applitools/req bumped to 1.8.7
+
+* @applitools/image bumped to 1.2.6
+
+* @applitools/driver bumped to 1.24.3
+
+* @applitools/spec-driver-webdriver bumped to 1.5.3
+
+* @applitools/spec-driver-selenium bumped to 1.7.9
+
+* @applitools/spec-driver-puppeteer bumped to 1.6.9
+
+* @applitools/screenshoter bumped to 3.12.10
+
+* @applitools/nml-client bumped to 1.11.12
+
+* @applitools/tunnel-client bumped to 1.11.5
+
+* @applitools/ufg-client bumped to 1.18.3
+
+* @applitools/core-base bumped to 1.30.1
+
+* @applitools/ec-client bumped to 1.12.14
+
+* @applitools/core bumped to 4.53.1
+  #### Bug Fixes
+
+  * handle CSS variables in Shadow DOM adopted stylesheets | FLD-3790 ([#3381](https://github.com/Applitools-Dev/sdk/issues/3381)) ([b2bfca3](https://github.com/Applitools-Dev/sdk/commit/b2bfca3cd706cd996d78d51c6242148fbb8ce741))
+
+
+
+
+## [3.63.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.62.3...js/eyes-storybook@3.63.0) (2025-11-24)
+
+
+### Features
+
+* "Story" custom property | AD-10146 ([#3372](https://github.com/Applitools-Dev/sdk/issues/3372)) ([af2e5fe](https://github.com/Applitools-Dev/sdk/commit/af2e5fe8beb7beeb6bbf13e364138894ee27a866))
+
 ## [3.62.3](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.62.2...js/eyes-storybook@3.62.3) (2025-11-19)
 
 

package/dist/getClientAPI.js

@@ -169,13 +169,19 @@ function __getClientAPI(...args) {
   }
 
   function getFrameWindow() {
-    if (/iframe.html/.test(window.location.href)) {
+    if (
+      (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+      /iframe\.html/.test(window.location.href)
+    ) {
       return window;
     }
 
     const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
       try {
-        return /\/iframe.html/.test(frame.location.href);
+        return (
+          (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+          /\/iframe\.html/.test(frame.location.href)
+        );
       } catch (e) {}
     });
 
@@ -183,7 +189,8 @@ function __getClientAPI(...args) {
       return innerFrameWindow;
     }
 
-    if (window.__STORYBOOK_CLIENT_API__) {
+    // frame.location.href might not be 'iframe' but still be the correct one
+    if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
       return window;
     }
 

package/dist/getStories.js

@@ -169,13 +169,19 @@ function __getStories(...args) {
   }
 
   function getFrameWindow() {
-    if (/iframe.html/.test(window.location.href)) {
+    if (
+      (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+      /iframe\.html/.test(window.location.href)
+    ) {
       return window;
     }
 
     const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
       try {
-        return /\/iframe.html/.test(frame.location.href);
+        return (
+          (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+          /\/iframe\.html/.test(frame.location.href)
+        );
       } catch (e) {}
     });
 
@@ -183,7 +189,8 @@ function __getStories(...args) {
       return innerFrameWindow;
     }
 
-    if (window.__STORYBOOK_CLIENT_API__) {
+    // frame.location.href might not be 'iframe' but still be the correct one
+    if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
       return window;
     }
 

package/dist/renderStoryWithClientAPI.js

@@ -169,13 +169,19 @@ function __renderStoryWithClientAPI(...args) {
   }
 
   function getFrameWindow() {
-    if (/iframe.html/.test(window.location.href)) {
+    if (
+      (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+      /iframe\.html/.test(window.location.href)
+    ) {
       return window;
     }
 
     const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
       try {
-        return /\/iframe.html/.test(frame.location.href);
+        return (
+          (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+          /\/iframe\.html/.test(frame.location.href)
+        );
       } catch (e) {}
     });
 
@@ -183,7 +189,8 @@ function __renderStoryWithClientAPI(...args) {
       return innerFrameWindow;
     }
 
-    if (window.__STORYBOOK_CLIENT_API__) {
+    // frame.location.href might not be 'iframe' but still be the correct one
+    if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
       return window;
     }
 

package/dist/runRunAfterScript.js

@@ -169,13 +169,19 @@ function __runRunAfterScript(...args) {
   }
 
   function getFrameWindow() {
-    if (/iframe.html/.test(window.location.href)) {
+    if (
+      (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+      /iframe\.html/.test(window.location.href)
+    ) {
       return window;
     }
 
     const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
       try {
-        return /\/iframe.html/.test(frame.location.href);
+        return (
+          (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+          /\/iframe\.html/.test(frame.location.href)
+        );
       } catch (e) {}
     });
 
@@ -183,7 +189,8 @@ function __runRunAfterScript(...args) {
       return innerFrameWindow;
     }
 
-    if (window.__STORYBOOK_CLIENT_API__) {
+    // frame.location.href might not be 'iframe' but still be the correct one
+    if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
       return window;
     }
 

package/dist/runRunBeforeScript.js

@@ -169,13 +169,19 @@ function __runRunBeforeScript(...args) {
   }
 
   function getFrameWindow() {
-    if (/iframe.html/.test(window.location.href)) {
+    if (
+      (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+      /iframe\.html/.test(window.location.href)
+    ) {
       return window;
     }
 
     const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
       try {
-        return /\/iframe.html/.test(frame.location.href);
+        return (
+          (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+          /\/iframe\.html/.test(frame.location.href)
+        );
       } catch (e) {}
     });
 
@@ -183,7 +189,8 @@ function __runRunBeforeScript(...args) {
       return innerFrameWindow;
     }
 
-    if (window.__STORYBOOK_CLIENT_API__) {
+    // frame.location.href might not be 'iframe' but still be the correct one
+    if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
       return window;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.62.3",
+  "version": "3.63.2",
   "description": "",
   "keywords": [
     "applitools",
@@ -59,15 +59,15 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.53.0",
-    "@applitools/driver": "1.24.2",
-    "@applitools/eyes": "1.36.16",
+    "@applitools/core": "4.53.2",
+    "@applitools/driver": "1.24.3",
+    "@applitools/eyes": "1.36.17",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "2.2.6",
+    "@applitools/logger": "2.2.7",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.6.8",
-    "@applitools/ufg-client": "1.18.2",
-    "@applitools/utils": "1.14.0",
+    "@applitools/spec-driver-puppeteer": "1.6.9",
+    "@applitools/ufg-client": "1.18.3",
+    "@applitools/utils": "1.14.1",
     "@inquirer/prompts": "7.0.1",
     "boxen": "4.2.0",
     "chalk": "3.0.0",

package/src/browser/getClientAPI.js

@@ -166,13 +166,19 @@ function getClientAPI() {
 }
 
 function getFrameWindow() {
-  if (/iframe.html/.test(window.location.href)) {
+  if (
+    (/iframe/.test(window.location.href) && window.__STORYBOOK_PREVIEW__) ||
+    /iframe\.html/.test(window.location.href)
+  ) {
     return window;
   }
 
   const innerFrameWindow = Array.prototype.find.call(window.frames, frame => {
     try {
-      return /\/iframe.html/.test(frame.location.href);
+      return (
+        (/\/iframe/.test(frame.location.href) && frame.__STORYBOOK_PREVIEW__) ||
+        /\/iframe\.html/.test(frame.location.href)
+      );
     } catch (e) {}
   });
 
@@ -180,7 +186,8 @@ function getFrameWindow() {
     return innerFrameWindow;
   }
 
-  if (window.__STORYBOOK_CLIENT_API__) {
+  // frame.location.href might not be 'iframe' but still be the correct one
+  if (window.__STORYBOOK_CLIENT_API__ || window.__STORYBOOK_PREVIEW__) {
     return window;
   }
 

package/src/eyes-setup.js

@@ -42,7 +42,7 @@ function handleError(asyncFunc) {
 async function init(args) {
   log(chalk.yellow('Setting up Eyes-Storybook for your project:'));
 
-  let {config, fileName, isCorrupted} = await loadExistingConfig();
+  let {config, fileName, isCorrupted, isESM} = await loadExistingConfig();
 
   if (isCorrupted) {
     log(chalk.yellow(`\nWarning: Your configuration file '${fileName}' appears to be corrupted.`));
@@ -118,7 +118,7 @@ async function init(args) {
       showLogs: false,
     };
 
-    const fileContent = generateConfigContent();
+    const fileContent = generateConfigContent(isESM);
     await fs.writeFile(fileName, fileContent, 'utf8');
   }
 
@@ -138,24 +138,35 @@ async function init(args) {
       try {
         const fileUrl = pathToFileURL(file).href;
         const module = await import(`${fileUrl}?t=${Date.now()}`); // Append timestamp to bypass cache
+        const isESM = file.endsWith('.mjs');
 
-        return {config: module.default || module, fileName: file, isCorrupted: false};
+        return {config: module.default || module, fileName: file, isCorrupted: false, isESM};
       } catch (err) {
         if (err.code === 'ERR_MODULE_NOT_FOUND') {
-          // This file doesn't exist, so we continue searching for the one that does.
           continue;
         }
-
         return {config: null, fileName: file, isCorrupted: true};
       }
     }
 
     // No file was found in any of the possible locations.
-    // We return a default filename for a new file to be created.
-    return {config: null, fileName: 'applitools.config.js', isCorrupted: false};
+    // Check if type: module is set in package.json in cwd
+    let fileName = 'applitools.config.js';
+    let isESM = false;
+    try {
+      const pkgRaw = await fs.readFile('./package.json', 'utf8');
+      const pkg = JSON.parse(pkgRaw);
+      if (pkg.type === 'module') {
+        isESM = true;
+        fileName = 'applitools.config.mjs';
+      }
+    } catch (e) {
+      // ignore if package.json not found or invalid
+    }
+    return {config: null, fileName, isCorrupted: false, isESM};
   }
 
-  function generateConfigContent() {
+  function generateConfigContent(isESM) {
     const envConfigMap = {
       batchName: 'APPLITOOLS_BATCH_NAME',
       batchId: 'APPLITOOLS_BATCH_ID',
@@ -169,7 +180,7 @@ async function init(args) {
 
     const configLines = [];
 
-    // Handle apiKey
+    // apiKey
     if (apiKey === 'process.env.APPLITOOLS_API_KEY') {
       configLines.push('apiKey: process.env.APPLITOOLS_API_KEY,');
     } else if (apiKey) {
@@ -177,17 +188,17 @@ async function init(args) {
         `apiKey: '${apiKey}', // Warning: 'apiKey' is not obscured, consider setting it via environment variable APPLITOOLS_API_KEY`,
       );
     } else {
-      configLines.push(`// apiKey: '',`);
+      configLines.push("// apiKey: '',");
     }
 
-    // Handle serverUrl
+    // serverUrl
     if (serverUrl && serverUrl.startsWith('process.env.')) {
       configLines.push(`serverUrl: ${serverUrl},`);
     } else if (serverUrl) {
       configLines.push(`serverUrl: '${serverUrl}',`);
     }
 
-    // Handle other config lines by prioritizing env vars over defaults
+    // other config
     const otherKeys = [
       'appName',
       'batchName',
@@ -200,35 +211,34 @@ async function init(args) {
       'navigationWaitUntil',
       'waitBeforeCapture',
     ];
-
     for (const key of otherKeys) {
       const envVar = envConfigMap[key];
-      // Check if an environment variable for this key is set
       if (envVar && utils.general.getEnvValue(envVar.replace('APPLITOOLS_', ''))) {
         configLines.push(`${key}: process.env.${envVar},`);
       } else if (Object.prototype.hasOwnProperty.call(config, key)) {
-        // Otherwise, use the default value from the config object
         const value = config[key];
         if (value !== undefined) {
-          const line = typeof value === 'string' ? `${key}: '${value}',` : `${key}: ${value},`;
-          configLines.push(line);
+          configLines.push(typeof value === 'string' ? `${key}: '${value}',` : `${key}: ${value},`);
         }
       }
     }
 
-    return `/**
- * @type {import('@applitools/eyes-storybook').ApplitoolsConfig}
- **/
-module.exports = {
-  ${configLines.join('\n  ')}
-  // browsersInfo: [
+    configLines.push(`// browsersInfo: [
   //    {width: 1024, height: 768, name: 'firefox'},
   //    {width: 1024, height: 768, name: 'chrome'},
   //    {iosDeviceInfo: {deviceName: 'iPhone 16'}},
   //    {chromeEmulationInfo: {deviceName: 'Galaxy S20'}},
-  // ]
-};
-`;
+  // ]`);
+
+    const configObject = `{
+  ${configLines.join('\n  ')}
+}`;
+
+    if (isESM) {
+      return `/**\n * @type {import('@applitools/eyes-storybook').ApplitoolsConfig}\n */\nconst config = ${configObject};\nexport default config;\n`;
+    } else {
+      return `/**\n * @type {import('@applitools/eyes-storybook').ApplitoolsConfig}\n **/\nmodule.exports = ${configObject};\n`;
+    }
   }
 
   function printPostlude() {

package/src/storybookConnector.js

@@ -77,7 +77,7 @@ class StorybookConnector extends EventEmitter {
 
       const successMessageListener = str => {
         const isReady = stripAnsi(str).match(
-          /Storybook \d{1,2}\.\d{1,2}\.\d{1,2}(.+)? started|Storybook started on =>/,
+          /Storybook \d{1,2}\.\d{1,2}\.\d{1,2}(.+)? started|Storybook started on =>|Storybook ready/,
         );
 
         if (isReady) {

package/src/transformSettings.js

@@ -21,6 +21,7 @@ function storyToOpenSettings({story, appName, serverSettings, concurrency}) {
   const storyProperties = [
     {name: 'Component name', value: kind},
     {name: 'State', value: name},
+    {name: 'Story', value: name},
     ...(properties || []),
   ];
   if (hasPlayFunction) {

package/src/utils/config-validator.js

@@ -84,10 +84,14 @@ const storybookSpecificKeys = [
   'packagePath',
 ];
 
+// Keys that are automatically added by module systems for ES modules.
+const esModuleSpecificKeys = ['__esModule', 'default'];
+
 // Combine all known keys into a single Set for efficient O(1) lookups.
 const knownKeys = new Set([
   ...storybookSpecificKeys,
   ...applitoolsBaseKeys,
+  ...esModuleSpecificKeys,
   ...Object.keys(defaultConfig),
 ]);