@applitools/eyes-storybook 3.61.0 → 3.61.2

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # Changelog
 
+## [3.61.2](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.61.1...js/eyes-storybook@3.61.2) (2025-10-16)
+
+
+### Bug Fixes
+
+* missed verifying environments | AD-11225 ([#3256](https://github.com/Applitools-Dev/sdk/issues/3256)) ([e8a5d78](https://github.com/Applitools-Dev/sdk/commit/e8a5d78426422614fc776b3d32ff2c375b95be18))
+
+
+### Dependencies
+
+* @applitools/dom-snapshot bumped to 4.13.10
+  #### Bug Fixes
+
+  * sandboxing | FLD-3482 ([#3274](https://github.com/Applitools-Dev/sdk/issues/3274)) ([b452cbf](https://github.com/Applitools-Dev/sdk/commit/b452cbf831907b04cd70624c0af655246ce580f1))
+
+
+
+* @applitools/driver bumped to 1.24.0
+  #### Features
+
+  * use performActions (W3C) instead of touchPerform (MJSONWP) ([#3223](https://github.com/Applitools-Dev/sdk/issues/3223)) ([d4e5da8](https://github.com/Applitools-Dev/sdk/commit/d4e5da8dc19ad3c3f76de8e762be867970df3dd2))
+* @applitools/spec-driver-webdriver bumped to 1.5.0
+  #### Features
+
+  * use performActions (W3C) instead of touchPerform (MJSONWP) ([#3223](https://github.com/Applitools-Dev/sdk/issues/3223)) ([d4e5da8](https://github.com/Applitools-Dev/sdk/commit/d4e5da8dc19ad3c3f76de8e762be867970df3dd2))
+
+
+
+* @applitools/spec-driver-selenium bumped to 1.7.6
+
+* @applitools/spec-driver-puppeteer bumped to 1.6.6
+
+* @applitools/screenshoter bumped to 3.12.7
+
+* @applitools/nml-client bumped to 1.11.9
+
+* @applitools/ec-client bumped to 1.12.11
+
+* @applitools/core bumped to 4.50.2
+  #### Bug Fixes
+
+  * missed verifying environments | AD-11225 ([#3256](https://github.com/Applitools-Dev/sdk/issues/3256)) ([e8a5d78](https://github.com/Applitools-Dev/sdk/commit/e8a5d78426422614fc776b3d32ff2c375b95be18))
+
+
+
+* @applitools/eyes bumped to 1.36.11
+
+
+## [3.61.1](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.61.0...js/eyes-storybook@3.61.1) (2025-10-09)
+
+
+### Bug Fixes
+
+* various config fixes for storybook-addon ([#3257](https://github.com/Applitools-Dev/sdk/issues/3257)) ([86fd4d1](https://github.com/Applitools-Dev/sdk/commit/86fd4d114122bbaf675b5fa361b0e967595ca296))
+
+
+### Dependencies
+
+* @applitools/dom-snapshot bumped to 4.13.9
+  #### Bug Fixes
+
+  * verbose Unknown CSS object model logging | AD-11542 | FLD-3687 ([#3261](https://github.com/Applitools-Dev/sdk/issues/3261)) ([ba85d32](https://github.com/Applitools-Dev/sdk/commit/ba85d3287a81af109db1a7b407e5ead20f395d9f))
+* @applitools/core-base bumped to 1.28.2
+  #### Bug Fixes
+
+  * various config fixes for storybook-addon ([#3257](https://github.com/Applitools-Dev/sdk/issues/3257)) ([86fd4d1](https://github.com/Applitools-Dev/sdk/commit/86fd4d114122bbaf675b5fa361b0e967595ca296))
+* @applitools/eyes bumped to 1.36.10
+  #### Bug Fixes
+
+  * various config fixes for storybook-addon ([#3257](https://github.com/Applitools-Dev/sdk/issues/3257)) ([86fd4d1](https://github.com/Applitools-Dev/sdk/commit/86fd4d114122bbaf675b5fa361b0e967595ca296))
+
+
+
+* @applitools/nml-client bumped to 1.11.8
+
+* @applitools/ec-client bumped to 1.12.10
+
+* @applitools/core bumped to 4.50.1
+  #### Bug Fixes
+
+  * various config fixes for storybook-addon ([#3257](https://github.com/Applitools-Dev/sdk/issues/3257)) ([86fd4d1](https://github.com/Applitools-Dev/sdk/commit/86fd4d114122bbaf675b5fa361b0e967595ca296))
+
+
+
+
 ## [3.61.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.60.0...js/eyes-storybook@3.61.0) (2025-10-01)
 
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { ConfigurationPlain, DesktopBrowserInfo, ChromeEmulationInfo, IOSDeviceInfo, IOSMultiDeviceInfo } from '@applitools/eyes';
-type irrelevantToStorybook = 'waitBeforeScreenshots' | 'agentId' | 'captureStatusBar' | 'concurrentSessions' | 'connectionTimeout' | 'debugScreenshots' | 'defaultMatchSettings' | 'disableNMLUrlCache' | 'forceFullPageScreenshot' | 'hideCaret' | 'hideScrollbars' | 'hostApp' | 'hostAppInfo' | 'hostOS' | 'hostOSInfo' | 'ignoreBaseline' | 'ignoreCaret' | 'latestCommitInfo' | 'isDisabled' | 'matchTimeout' | 'mobileOptions' | 'removeSession' | 'rotation' | 'scaleRatio' | 'scrollRootElement' | 'sessionType' | 'stitchMode' | 'stitchOverlap' | 'viewportSize' | 'isAddon';
+type irrelevantToStorybook = 'waitBeforeScreenshots' | 'agentId' | 'captureStatusBar' | 'concurrentSessions' | 'connectionTimeout' | 'debugScreenshots' | 'defaultMatchSettings' | 'disableNMLUrlCache' | 'forceFullPageScreenshot' | 'hideCaret' | 'hideScrollbars' | 'hostApp' | 'hostAppInfo' | 'hostOS' | 'hostOSInfo' | 'ignoreBaseline' | 'ignoreCaret' | 'latestCommitInfo' | 'isDisabled' | 'matchTimeout' | 'mobileOptions' | 'removeSession' | 'rotation' | 'scaleRatio' | 'scrollRootElement' | 'sessionType' | 'stitchMode' | 'stitchOverlap' | 'viewportSize';
 /**
  * Configuration options for Applitools Eyes Storybook integration.
  *
@@ -98,6 +98,21 @@ export type ApplitoolsConfig = Omit<ConfigurationPlain, irrelevantToStorybook |
      * @default false
      */
     browserCacheRequests?: boolean;
+    /**
+     * Headers to override in all browser requests.
+     * @default undefined
+     */
+    browserHeadersOverride?: Record<string, string>;
+    /**
+     * Timeout in milliseconds for all browser requests.
+     * @default undefined
+     */
+    browserRequestsTimeout?: number;
+    /**
+     * Array of URL patterns to block requests to.
+     * @default undefined
+     */
+    networkBlockPatterns?: string[];
     /**
      * Array of browser configurations for screenshot generation.
      * Defines size and browser type for generated screenshots.
@@ -241,6 +256,13 @@ export type ApplitoolsConfig = Omit<ConfigurationPlain, irrelevantToStorybook |
      * @default undefined
      */
     shard?: string;
+    /**
+     * The size of the Puppeteer browser's window.
+     * This is the browser window which renders the stories originally (and opens at the size provided in the `viewportSize` parameter), and then a DOM snapshot is uploaded to the server, which renders this snapshot on all the browsers and sizes provided in the browser parameter.
+     *
+     * Note: Stories will **not** be rendered and tested on this viewport size, unless you also include it in the `browser` parameter.
+     */
+    viewportSize?: ConfigurationPlain['viewportSize'];
 };
 export type configKeys = keyof ApplitoolsConfig;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.61.0",
+  "version": "3.61.2",
   "description": "",
   "keywords": [
     "applitools",
@@ -59,13 +59,13 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.49.0",
-    "@applitools/driver": "1.23.5",
-    "@applitools/eyes": "1.36.9",
+    "@applitools/core": "4.50.2",
+    "@applitools/driver": "1.24.0",
+    "@applitools/eyes": "1.36.11",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.2.4",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.6.5",
+    "@applitools/spec-driver-puppeteer": "1.6.6",
     "@applitools/ufg-client": "1.17.4",
     "@applitools/utils": "1.12.0",
     "@inquirer/prompts": "7.0.1",

package/src/configParams.js

@@ -30,10 +30,8 @@ const configParams = [
   'autProxy',
   'saveDiffs',
   'saveFailedTests',
-  'saveNewTests',
   'compareWithParentBranch',
   'ignoreBaseline',
-  'serverUrl',
   'concurrency',
   'testConcurrency',
   'useDom',
@@ -44,6 +42,16 @@ const configParams = [
   'dontCloseBatches',
   'showBrowserLogs',
   'shard',
+  'storybookUrl',
+  'browserCacheRequests',
+  'browserHeadersOverride',
+  'browserRequestsTimeout',
+  'networkBlockPatterns',
+  'navigationWaitUntil',
+  'include',
+  'xmlFilePath',
+  'tapFilePath',
+  'storybookStaticDir',
 ];
 
 module.exports = {configParams};

package/src/defaultConfig.js

@@ -5,25 +5,16 @@ module.exports = {
   storybookPort: 9000,
   storybookHost: 'localhost',
   storybookConfigDir: '.storybook',
-  storybookUrl: undefined,
-  storybookStaticDir: undefined,
   showStorybookOutput: false,
   waitBeforeScreenshot: 50, // backward compatibility
   waitBeforeScreenshots: 50, // backward compatibility
   waitBeforeCapture: 50,
   viewportSize: {width: 1024, height: 768},
-  tapFilePath: undefined,
-  xmlFilePath: undefined,
   exitcode: true,
   readStoriesTimeout: 60000,
   reloadPagePerStory: false,
-  include: undefined,
   startStorybookServerTimeout: 300,
-  navigationWaitUntil: undefined,
-  networkBlockPatterns: undefined,
-  browserRequestsTimeout: undefined,
-  browserHeadersOverride: undefined,
-  browserCacheRequests: undefined,
-  showBrowserLogs: undefined,
-  shard: undefined,
+  serverUrl: 'https://eyes.applitools.com',
+  saveNewTests: true,
+  fully: true,
 };

package/src/errMessages.js

@@ -2,6 +2,26 @@
 
 const chalk = require('chalk');
 const {MissingApiKeyError} = require('@applitools/core');
+const {EyesError} = require('@applitools/eyes');
+
+class AbortedByUserError extends EyesError {
+  reason = 'abortedByUser';
+}
+
+class InvalidConfigFileError extends EyesError {
+  reason = 'invalidConfigFile';
+
+  constructor(error) {
+    super();
+
+    const documentationUrl = 'https://applitools.com/tutorials/sdks/storybook/config#properties';
+
+    this.message =
+      `Your configuration file is invalid. Please review our documentation for valid configuration settings: ${documentationUrl}. 
+Additionally, you can generate a new configuration by running 'npx eyes-setup'.
+\n\nError details: ${error.message}`.trim();
+  }
+}
 
 const missingAppNameAndPackageJsonFailMsg = `
   ${chalk.red(
@@ -45,4 +65,6 @@ module.exports = {
   refineErrorMessage,
   deprecationWarning,
   MissingApiKeyError,
+  AbortedByUserError,
+  InvalidConfigFileError,
 };

package/src/extractEnvironment.js

@@ -1,6 +1,6 @@
 const {getStorybookFrameworks} = require('./utils/frameworks');
 
-function extractEnvironment() {
+function extractEnvironment(addonVersion) {
   const versions = {};
   try {
     const {name, version} = require('storybook/package.json');
@@ -23,6 +23,9 @@ function extractEnvironment() {
       peerDependencies,
     );
     sdk = {lang: 'js', name, currentVersion: version, framework, dependencyFrameworks};
+    if (addonVersion) {
+      sdk.addonVersion = addonVersion;
+    }
   } catch {
     // NOTE: ignore error
   }

package/src/eyesStorybook.js

@@ -34,6 +34,7 @@ async function eyesStorybook({
   outputStream = process.stderr,
   eventEmitter,
   signal = new AbortController().signal,
+  addonVersion,
 }) {
   logger.log(`Running with the following config:\n${configDigest(config)}`);
 
@@ -77,7 +78,7 @@ async function eyesStorybook({
     cache: config.browserCacheRequests,
   });
 
-  const environment = extractEnvironment();
+  const environment = extractEnvironment(addonVersion);
   const core = await makeCore({spec, agentId: config.agentId, environment, logger});
   const manager = await core.makeManager({
     type: 'ufg',
@@ -95,18 +96,9 @@ async function eyesStorybook({
       },
     })
     .catch(async error => {
-      if (
-        error &&
-        error.message &&
-        error.message.includes('Please check your API key and try again.')
-      ) {
-        const failMsg = 'Incorrect API Key';
-        logger.log(failMsg);
-        await browser.close();
-        throw new Error(failMsg);
-      } else {
-        throw error;
-      }
+      logger.error(error?.message);
+      await browser.close();
+      throw error;
     });
 
   const getStoriesWithConfig = makeGetStoriesWithConfig({config});

package/src/eyesStorybookEventEmitter.js

@@ -10,11 +10,12 @@ function eyesStorybookEventEmitter({
   performance,
   timeItAsync,
   signal,
+  addonVersion,
 }) {
   const eventEmitter = new EventEmitter();
   const startedAt = Date.now();
 
-  eyesStorybook({config, logger, performance, timeItAsync, eventEmitter, signal})
+  eyesStorybook({config, logger, performance, timeItAsync, eventEmitter, signal, addonVersion})
     .then(({results}) => {
       eventEmitter.emit('result', {
         startedAt,

package/src/generateConfig.js

@@ -2,7 +2,7 @@
 const lodash = require('lodash');
 const utils = require('@applitools/utils');
 const {resolve} = require('path');
-const {deprecationWarning} = require('./errMessages');
+const {deprecationWarning, InvalidConfigFileError} = require('./errMessages');
 const uniq = require('./uniq');
 const {DEFAULT_CONCURRENCY} = require('@applitools/core');
 const MAX_DATA_GAP = DEFAULT_CONCURRENCY * 2;
@@ -53,10 +53,6 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
 
   result.eyesServerUrl = result.serverUrl;
 
-  result.viewportSize = result.viewportSize ? result.viewportSize : {width: 1024, height: 600};
-
-  result.saveNewTests = result.saveNewTests === undefined ? true : result.saveNewTests;
-
   // Auto-enable dontCloseBatches when sharding is used (unless explicitly set by user)
   if (result.shard && result.dontCloseBatches === undefined) {
     result.dontCloseBatches = true;
@@ -66,7 +62,6 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
   }
 
   result.keepBatchOpen = result.dontCloseBatches;
-  result.fully = result.fully === undefined ? true : false;
 
   if (result.batchName) {
     result.batch = {name: result.batchName, ...result.batch};
@@ -103,12 +98,7 @@ function getAndParseConfig({configPaths, configParams}) {
     if (error.message.includes('Could not find configuration file')) {
       return utils.config.populateConfigParams({config: {}, params: configParams});
     }
-    const documentationUrl = 'https://applitools.com/tutorials/sdks/storybook/config#properties';
-    throw new Error(
-      `Your configuration file is invalid. Please review our documentation for valid configuration settings: ${documentationUrl}. 
-      Additionally, you can generate a new configuration by running 'npx eyes-setup'.
-      \n\nError details: ${error.message}`.trim(),
-    );
+    throw new InvalidConfigFileError(error);
   }
 }
 

package/src/getConfigAndLogger.js

@@ -17,8 +17,9 @@ async function getConfigAndLogger(argv = {}) {
     config,
     logger,
     packagePath: process.cwd(),
+    addonVersion: argv.addonVersion,
   });
-  return {config, logger};
+  return {config, logger, defaultConfig};
 }
 
 module.exports = {getConfigAndLogger};

package/src/index.ts

@@ -29,7 +29,6 @@ type irrelevantToStorybook = 'waitBeforeScreenshots'
     | 'stitchMode'
     | 'stitchOverlap'
     | 'viewportSize'
-    | 'isAddon'
 ;
 
 
@@ -140,6 +139,24 @@ export type ApplitoolsConfig = Omit<ConfigurationPlain, irrelevantToStorybook |
      */
     browserCacheRequests?: boolean;
 
+    /**
+     * Headers to override in all browser requests.
+     * @default undefined
+     */
+    browserHeadersOverride?: Record<string, string>;
+
+    /**
+     * Timeout in milliseconds for all browser requests.
+     * @default undefined
+     */
+    browserRequestsTimeout?: number;
+
+    /**
+     * Array of URL patterns to block requests to.
+     * @default undefined
+     */
+    networkBlockPatterns?: string[];
+
     /** 
      * Array of browser configurations for screenshot generation.
      * Defines size and browser type for generated screenshots.
@@ -308,6 +325,14 @@ export type ApplitoolsConfig = Omit<ConfigurationPlain, irrelevantToStorybook |
      * @default undefined
      */
     shard?: string;
+
+    /** 
+     * The size of the Puppeteer browser's window.
+     * This is the browser window which renders the stories originally (and opens at the size provided in the `viewportSize` parameter), and then a DOM snapshot is uploaded to the server, which renders this snapshot on all the browsers and sizes provided in the browser parameter.
+     * 
+     * Note: Stories will **not** be rendered and tested on this viewport size, unless you also include it in the `browser` parameter.
+     */
+    viewportSize?: ConfigurationPlain['viewportSize'];
 }
 
 export type configKeys = keyof ApplitoolsConfig;

package/src/renderStories.js

@@ -4,6 +4,7 @@ const getStoryBaselineName = require('./getStoryBaselineName');
 const ora = require('ora');
 const {EventEmitter} = require('node:events');
 const {presult} = require('@applitools/functional-commons');
+const {AbortedByUserError} = require('./errMessages');
 
 function makeRenderStories({
   getStoryData,
@@ -46,7 +47,10 @@ function makeRenderStories({
         const story = stories[currIndex++];
         const title = getStoryBaselineName(story);
         logger.log('aborting story before processing', title);
-        onDoneStory(new Error(`${title} aborted before processing ${signal.reason}`), story);
+        onDoneStory(
+          new AbortedByUserError(`${title} aborted before processing ${signal.reason}`),
+          story,
+        );
         return processStoryLoop();
       }
 

package/src/renderStory.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const throat = require('throat');
-const {EyesError} = require('@applitools/eyes');
+const {AbortedByUserError} = require('./errMessages');
 const {storyToCheckSettings, storyToOpenSettings} = require('./transformSettings');
 
 function makeRenderStory({
@@ -62,7 +62,7 @@ function makeRenderStory({
           // This will intentionally cause not to wait for results.
           // Therefore there will be a "hanging" promise.
           // But for the purpose of the addon, which is a long living process, it doesn't matter that we didn't stop the operation inside core.
-          reject(new EyesError(`${title} aborted after open ${signal.reason}`));
+          reject(new AbortedByUserError(`${title} aborted after open ${signal.reason}`));
         }
       });
     }).then(onDoneStory);

package/src/transformSettings.js

@@ -15,6 +15,7 @@ function storyToOpenSettings({story, appName, serverSettings, concurrency}) {
     envName,
     ignoreBaseline,
     properties,
+    environments,
   } = config;
 
   const storyProperties = [
@@ -42,6 +43,7 @@ function storyToOpenSettings({story, appName, serverSettings, concurrency}) {
     baselineEnvName,
     environmentName: envName,
     ignoreBaseline,
+    environments,
     ...serverSettings,
   };
 }

package/src/utils/config-validator.js

@@ -36,9 +36,6 @@ const applitoolsBaseKeys = [...dynamicBaseKeys, ...knownAliases];
  * @type {Array<keyof (import('../index').ApplitoolsConfig) |
  *  'reloadPagePerStory' |
  *  'startStorybookServerTimeout' |
- *  'networkBlockPatterns' |
- *  'browserRequestsTimeout' |
- *  'browserHeadersOverride' |
  *  'waitBeforeScreenshot' |
  *  'waitBeforeScreenshots' |
  *  'fakeIE' |
@@ -51,11 +48,19 @@ const storybookSpecificKeys = [
   'variations', // TODO - are we sure it should be supported from the applitools config file? https://applitools.com/tutorials/sdks/storybook/component-config#variations
   'runInDocker',
   'showLogs',
+  'storybookUrl',
+  'storybookStaticDir',
+  'include',
 
   // Browser & Puppeteer Control
   'browser',
   'puppeteerOptions',
   'puppeteerExtraHTTPHeaders', // created for a specific user, TODO - consider removing
+  'browserCacheRequests',
+  'browserHeadersOverride',
+  'browserRequestsTimeout',
+  'networkBlockPatterns',
+  'navigationWaitUntil',
 
   // Region Matching
   'ignoreRegions',

package/src/validateAndPopulateConfig.js

@@ -16,7 +16,12 @@ const determineStorybookVersion = require('./utils/determineStorybookVersion');
 const {logUnrecognizedKeys} = require('./utils/config-validator');
 const utils = require('@applitools/utils');
 
-async function validateAndPopulateConfig({config, packagePath = '', logger = makeLogger()}) {
+async function validateAndPopulateConfig({
+  config,
+  packagePath = '',
+  logger = makeLogger(),
+  addonVersion,
+}) {
   if (!config.apiKey && !utils.general.getEnvValue('API_KEY')) {
     throw new MissingApiKeyError();
   }
@@ -62,8 +67,9 @@ async function validateAndPopulateConfig({config, packagePath = '', logger = mak
     }
   }
 
-  const agentName = config.isAddon ? 'eyes-storybook-addon' : 'eyes-storybook';
-  config.agentId = `${agentName}/${packageVersion}`;
+  config.agentId = `eyes-storybook/${packageVersion} ${
+    addonVersion ? `[eyes-storybook-addon/${addonVersion}]` : ''
+  }`.trim();
 
   if (config.runInDocker) {
     config.puppeteerOptions = config.puppeteerOptions || {};