@applitools/eyes-storybook 3.60.0 → 3.61.1

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* storybook addon ([#3104](https://github.com/Applitools-Dev/sdk/issues/3104)) ([16e09cb](https://github.com/Applitools-Dev/sdk/commit/16e09cba8928c3a24b9e0d9d41e0936fbaec2773))
+
+
+### Dependencies
+
+* @applitools/screenshoter bumped to 3.12.6
+  #### Bug Fixes
+
+  * wait after scroll | FLD-3594 ([#3252](https://github.com/Applitools-Dev/sdk/issues/3252)) ([e452422](https://github.com/Applitools-Dev/sdk/commit/e4524229b64e40d9b9596a92bfa94daf5824286a))
+* @applitools/core-base bumped to 1.28.1
+  #### Bug Fixes
+
+  * unexpected concurrency values from server | AD-11465 ([#3248](https://github.com/Applitools-Dev/sdk/issues/3248)) ([0dd28c7](https://github.com/Applitools-Dev/sdk/commit/0dd28c7b297d5ad3aabc6b87e427e3e09a993825))
+* @applitools/nml-client bumped to 1.11.7
+
+* @applitools/ec-client bumped to 1.12.9
+
+* @applitools/core bumped to 4.49.0
+  #### Features
+
+  * storybook addon ([#3104](https://github.com/Applitools-Dev/sdk/issues/3104)) ([16e09cb](https://github.com/Applitools-Dev/sdk/commit/16e09cba8928c3a24b9e0d9d41e0936fbaec2773))
+
+
+  #### Bug Fixes
+
+  * duplicate concurrency warnings ([#3255](https://github.com/Applitools-Dev/sdk/issues/3255)) ([ef2f94a](https://github.com/Applitools-Dev/sdk/commit/ef2f94ab4137c78396583f166344285beeb49be7))
+
+
+
+* @applitools/eyes bumped to 1.36.9
+
+
 ## [3.60.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.59.1...js/eyes-storybook@3.60.0) (2025-09-22)
 
 

package/dist/index.d.ts

@@ -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.60.0",
+  "version": "3.61.1",
   "description": "",
   "keywords": [
     "applitools",
@@ -19,6 +19,7 @@
     "eyes-setup": "./bin/eyes-setup.js",
     "eyes-storybook": "./bin/eyes-storybook.js"
   },
+  "main": "./src/main.js",
   "files": [
     "src",
     "bin",
@@ -58,9 +59,9 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.48.0",
+    "@applitools/core": "4.50.1",
     "@applitools/driver": "1.23.5",
-    "@applitools/eyes": "1.36.8",
+    "@applitools/eyes": "1.36.10",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.2.4",
     "@applitools/monitoring-commons": "1.0.19",

package/src/cli.js

@@ -1,22 +1,18 @@
 'use strict';
 const yargs = require('yargs');
-const {makeLogger} = require('@applitools/logger');
-const {configParams: externalConfigParams} = require('./configParams');
 const VERSION = require('../package.json').version;
-const eyesStorybook = require('./eyesStorybook');
 const processResults = require('./processResults');
-const validateAndPopulateConfig = require('./validateAndPopulateConfig');
 const yargsOptions = require('./yargsOptions');
-const {generateConfig} = require('./generateConfig');
-const defaultConfig = require('./defaultConfig');
-const configDigest = require('./configDigest');
 const {makeTiming} = require('@applitools/monitoring-commons');
 const handleJsonFile = require('./handleJsonFile');
 const handleTapFile = require('./handleTapFile');
 const handleXmlFile = require('./handleXmlFile');
+const {getConfigAndLogger} = require('./getConfigAndLogger');
 const {presult} = require('@applitools/functional-commons');
 const chalk = require('chalk');
 const utils = require('@applitools/utils');
+const {EyesError} = require('@applitools/eyes');
+const eyesStorybook = require('./eyesStorybook');
 const {performance, timeItAsync} = makeTiming();
 
 (async function () {
@@ -31,7 +27,7 @@ const {performance, timeItAsync} = makeTiming();
       .options(yargsOptions).argv;
 
     console.log(`Using @applitools/eyes-storybook version ${VERSION}.\n`);
-    const config = generateConfig({argv, defaultConfig, externalConfigParams});
+    const {config, logger} = await getConfigAndLogger(argv);
 
     if (config.shard) {
       console.log(`Running with shard: ${config.shard.current}/${config.shard.total}`);
@@ -41,13 +37,6 @@ const {performance, timeItAsync} = makeTiming();
       }
     }
 
-    const logger = makeLogger({level: config.showLogs ? 'info' : 'silent', label: 'eyes'});
-    await validateAndPopulateConfig({
-      config,
-      logger,
-      packagePath: process.cwd(),
-    });
-    logger.log(`Running with the following config:\n${configDigest(config)}`);
     const [err, results] = await presult(
       timeItAsync('eyesStorybook', () => eyesStorybook({config, logger, performance, timeItAsync})),
     );
@@ -78,7 +67,11 @@ const {performance, timeItAsync} = makeTiming();
       process.exit(exitCode);
     }
   } catch (ex) {
-    console.log(ex);
+    if (utils.types.instanceOf(ex, EyesError)) {
+      console.log(ex.message);
+    } else {
+      console.log(ex);
+    }
     process.exit(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

@@ -1,14 +1,27 @@
 'use strict';
+
 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';
 
-const missingApiKeyFailMsg = `
-${chalk.red('Environment variable APPLITOOLS_API_KEY is not set.')}
-${chalk.green(`To fix:
-1. Register for Applitools developer account at www.applitools.com/devreg
-2. Get API key from menu
-3. Set APPLITOOLS_API_KEY environment variable
-  Mac/Linux: export APPLITOOLS_API_KEY=Your_API_Key_Here
-  Windows: set APPLITOOLS_API_KEY=Your_API_Key_Here`)}`;
+  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(
@@ -47,9 +60,11 @@ function deprecationWarning({deprecatedThing, newThing, isDead}) {
 }
 
 module.exports = {
-  missingApiKeyFailMsg,
   missingAppNameAndPackageJsonFailMsg,
   missingAppNameInPackageJsonFailMsg,
   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

@@ -1,5 +1,6 @@
 'use strict';
 const puppeteer = require('puppeteer');
+const configDigest = require('./configDigest');
 const getStories = require('../dist/getStories');
 const {presult} = require('@applitools/functional-commons');
 const {executeWithRetry} = require('./utils/executeWithRetry');
@@ -31,7 +32,12 @@ async function eyesStorybook({
   performance,
   timeItAsync,
   outputStream = process.stderr,
+  eventEmitter,
+  signal = new AbortController().signal,
+  addonVersion,
 }) {
+  logger.log(`Running with the following config:\n${configDigest(config)}`);
+
   let renderIE = false;
   let transitioning = false;
   logger.log('eyesStorybook started');
@@ -51,7 +57,6 @@ async function eyesStorybook({
     logger.log(ex);
     throw new Error(`Storybook URL is not valid: ${storybookUrl}`);
   }
-  const agentId = `eyes-storybook/${require('../package.json').version}`;
   process.env.PUPPETEER_DISABLE_HEADLESS_WARNING = true;
   const browser = await puppeteer.launch(config.puppeteerOptions);
   logger.log('browser launched');
@@ -73,8 +78,8 @@ async function eyesStorybook({
     cache: config.browserCacheRequests,
   });
 
-  const environment = extractEnvironment();
-  const core = await makeCore({spec, agentId, environment, logger});
+  const environment = extractEnvironment(addonVersion);
+  const core = await makeCore({spec, agentId: config.agentId, environment, logger});
   const manager = await core.makeManager({
     type: 'ufg',
     settings: {concurrency: config.testConcurrency, useServerConcurrency: true},
@@ -85,24 +90,15 @@ async function eyesStorybook({
       settings: {
         eyesServerUrl: config.eyesServerUrl,
         apiKey: config.apiKey,
-        agentId,
+        agentId: config.agentId,
         proxy: config.proxy,
         useDnsCache: config.useDnsCache,
       },
     })
     .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});
@@ -182,6 +178,7 @@ async function eyesStorybook({
       concurrency: account.serverConcurrency.componentConcurrency,
       appName: config.appName,
       serverSettings: account.eyesServer,
+      signal,
     });
 
     const renderStories = makeRenderStories({
@@ -192,6 +189,8 @@ async function eyesStorybook({
       logger,
       stream: outputStream,
       pagePool,
+      eventEmitter,
+      signal,
     });
 
     logger.log('finished creating functions');
@@ -209,6 +208,15 @@ async function eyesStorybook({
         timeItAsync,
       }),
     );
+    if (signal.aborted) {
+      if (error) {
+        const msg = refineErrorMessage({prefix: 'Error in executeRenders:', error});
+        logger.log('Error in executeRenders:', error);
+        throw new Error(msg);
+      } else {
+        return {results}; // processResults (which is not used in the addon) doesn't support missing the summary. But it's not a real concern right now.
+      }
+    }
     const [errorInGetResults, testResultsSummary] = await presult(
       manager.getResults({throwErr: false}),
     );
@@ -219,7 +227,7 @@ async function eyesStorybook({
 
     if (error) {
       const msg = refineErrorMessage({prefix: 'Error in executeRenders:', error});
-      logger.log(error);
+      logger.log('Error in executeRenders:', error);
       throw new Error(msg);
     } else {
       return {summary: testResultsSummary, results};

package/src/eyesStorybookEventEmitter.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const eyesStorybookOrig = require('./eyesStorybook');
+const {EventEmitter} = require('node:events');
+
+function eyesStorybookEventEmitter({
+  eyesStorybook = eyesStorybookOrig,
+  config,
+  logger,
+  performance,
+  timeItAsync,
+  signal,
+  addonVersion,
+}) {
+  const eventEmitter = new EventEmitter();
+  const startedAt = Date.now();
+
+  eyesStorybook({config, logger, performance, timeItAsync, eventEmitter, signal, addonVersion})
+    .then(({results}) => {
+      eventEmitter.emit('result', {
+        startedAt,
+        duration: performance['renderStories'],
+        storyResults: results.map(({story, resultsOrErr}) => ({
+          story: {id: story.id, queryParams: story.config.queryParams},
+          [Array.isArray(resultsOrErr) ? 'results' : 'error']: resultsOrErr,
+        })),
+      });
+    })
+    .catch(err => {
+      eventEmitter.emit('error', err);
+    });
+
+  return eventEmitter;
+}
+
+module.exports = {eyesStorybookEventEmitter};

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

@@ -0,0 +1,25 @@
+'use strict';
+
+const {generateConfig} = require('./generateConfig');
+const defaultConfig = require('./defaultConfig');
+const validateAndPopulateConfig = require('./validateAndPopulateConfig');
+const {makeLogger} = require('@applitools/logger');
+const {configParams: externalConfigParams} = require('./configParams');
+
+async function getConfigAndLogger(argv = {}) {
+  const config = generateConfig({argv, defaultConfig, externalConfigParams});
+  const logger = makeLogger({
+    handler: argv.logHandler,
+    level: argv.logHandler ? 'all' : config.showLogs ? 'info' : 'silent', // if logHandler is passed, let's pass it all the logs. Otherwise, respect the config
+    label: 'eyes',
+  });
+  await validateAndPopulateConfig({
+    config,
+    logger,
+    packagePath: process.cwd(),
+    addonVersion: argv.addonVersion,
+  });
+  return {config, logger, defaultConfig};
+}
+
+module.exports = {getConfigAndLogger};

package/src/index.ts

@@ -139,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.
@@ -307,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/main.js

@@ -0,0 +1,7 @@
+const {eyesStorybookEventEmitter} = require('./eyesStorybookEventEmitter');
+const {getConfigAndLogger} = require('./getConfigAndLogger');
+
+module.exports = {
+  eyesStorybookEventEmitter,
+  getConfigAndLogger,
+};

package/src/renderStories.js

@@ -2,7 +2,9 @@
 const getStoryUrl = require('./getStoryUrl');
 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,
@@ -13,19 +15,23 @@ function makeRenderStories({
   stream,
   sanityCheckForPage,
   maxPageTTL = 60000,
+  eventEmitter = new EventEmitter(),
+  signal = new AbortController().signal,
 }) {
   let newPageIdToAdd;
 
   return async function renderStories(stories, isIE) {
     let doneStories = 0;
+    const totalStories = stories.length;
     const allTestResults = [];
     let allStoriesPromise = Promise.resolve();
     let currIndex = 0;
 
     const spinner = ora({
-      text: updateSpinnerText(0, stories.length),
+      text: updateSpinnerText(0, totalStories),
       stream,
     });
+    eventEmitter.emit('progress', {doneStories, totalStories});
     spinner.start();
     prepareNewPage();
 
@@ -35,7 +41,19 @@ function makeRenderStories({
     return allTestResults;
 
     async function processStoryLoop() {
-      if (currIndex === stories.length) return;
+      if (currIndex === totalStories) return;
+
+      if (signal.aborted) {
+        const story = stories[currIndex++];
+        const title = getStoryBaselineName(story);
+        logger.log('aborting story before processing', title);
+        onDoneStory(
+          new AbortedByUserError(`${title} aborted before processing ${signal.reason}`),
+          story,
+        );
+        return processStoryLoop();
+      }
+
       const {page, pageId, markPageAsFree, removePage, getCreatedAt} = await pagePool.getFreePage();
       const livedTime = Date.now() - getCreatedAt();
       logger.log(`[prepareNewPage] got free page: ${pageId}, lived time: ${livedTime}`);
@@ -103,6 +121,12 @@ function makeRenderStories({
             const errMsg = `[page ${pageId}] Failed to get story data for "${title}". ${error}`;
             logger.log(errMsg);
           }
+
+          if (signal.aborted) {
+            logger.log('aborting story before open', title);
+            return onDoneStory(new Error(`${title} aborted before open ${signal.reason}`), story);
+          }
+
           const testResults = await renderStory({
             snapshots: storyData,
             url: storyUrl,
@@ -132,10 +156,14 @@ function makeRenderStories({
     }
 
     function onDoneStory(resultsOrErr, story) {
-      spinner.text = updateSpinnerText(++doneStories, stories.length, story.config);
+      spinner.text = updateSpinnerText(++doneStories, totalStories, story.config);
       const title = getStoryBaselineName(story);
-      allTestResults.push({title, resultsOrErr});
-      return {title, resultsOrErr};
+      const result = {title, resultsOrErr, story};
+      allTestResults.push(result);
+
+      eventEmitter.emit('progress', {doneStories, totalStories});
+
+      return result;
     }
 
     async function prepareNewPage() {

package/src/renderStory.js

@@ -1,5 +1,7 @@
 'use strict';
+
 const throat = require('throat');
+const {AbortedByUserError} = require('./errMessages');
 const {storyToCheckSettings, storyToOpenSettings} = require('./transformSettings');
 
 function makeRenderStory({
@@ -11,6 +13,7 @@ function makeRenderStory({
   appName,
   serverSettings,
   concurrency,
+  signal = new AbortController().signal,
 }) {
   const throttle = throat(storyDataGap);
   return function renderStory({story, snapshots, url}) {
@@ -24,7 +27,12 @@ function makeRenderStory({
 
     return timeItAsync(baselineName, async () => {
       const eyes = await openEyes({settings: openParams});
-      return new Promise((resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
+        if (signal.aborted) {
+          return await abortStory();
+        } else {
+          signal.addEventListener('abort', abortStory);
+        }
         throttle(async () => {
           try {
             if (snapshots) {
@@ -44,6 +52,18 @@ function makeRenderStory({
             reject(err);
           }
         });
+
+        async function abortStory() {
+          logger.log('received abort signal for story', title);
+
+          // Inside core-base this will cause internal operations to be aborted
+          await eyes.abort({settings: {environments: checkParams.environments}});
+
+          // 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 AbortedByUserError(`${title} aborted after open ${signal.reason}`));
+        }
       });
     }).then(onDoneStory);
 

package/src/transformSettings.js

@@ -104,7 +104,6 @@ function storyToCheckSettings({story, url}) {
     useDom,
     enablePatterns,
     ignoreDisplacements,
-    fully,
     ignoreCaret,
     matchLevel,
     accessibilitySettings: accessibilityValidation

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

@@ -4,7 +4,7 @@ const fs = require('fs');
 const detect = require('detect-port');
 const {version: packageVersion} = require('../package.json');
 const {
-  missingApiKeyFailMsg,
+  MissingApiKeyError,
   missingAppNameAndPackageJsonFailMsg,
   missingAppNameInPackageJsonFailMsg,
   startStorybookFailMsg,
@@ -16,9 +16,14 @@ 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 Error(missingApiKeyFailMsg);
+    throw new MissingApiKeyError();
   }
 
   const packageJsonPath = `${packagePath}/package.json`;
@@ -62,7 +67,9 @@ async function validateAndPopulateConfig({config, packagePath = '', logger = mak
     }
   }
 
-  config.agentId = `eyes-storybook/${packageVersion}`;
+  config.agentId = `eyes-storybook/${packageVersion} ${
+    addonVersion ? `[eyes-storybook-addon/${addonVersion}]` : ''
+  }`.trim();
 
   if (config.runInDocker) {
     config.puppeteerOptions = config.puppeteerOptions || {};