@applitools/eyes-storybook 3.61.3 → 3.62.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [3.62.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.61.4...js/eyes-storybook@3.62.0) (2025-10-27)
+
+
+### Features
+
+* add a retry mechanism for inconsistent timeouts | AD-11191 ([#3305](https://github.com/Applitools-Dev/sdk/issues/3305)) ([2871d59](https://github.com/Applitools-Dev/sdk/commit/2871d59e41eeb4f078a6ec2e3e717b82b3f064bd))
+
+## [3.61.4](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.61.3...js/eyes-storybook@3.61.4) (2025-10-22)
+
+
+### Dependencies
+
+* @applitools/dom-snapshot bumped to 4.13.12
+  #### Bug Fixes
+
+  * upgrade from @applitools/css-tree fork to official css-tree v3.1.0 | AD-11642 ([#3286](https://github.com/Applitools-Dev/sdk/issues/3286)) ([187ac4b](https://github.com/Applitools-Dev/sdk/commit/187ac4bbca0921ed692b2a676200c6a967c0fb33))
+* @applitools/ufg-client bumped to 1.17.5
+  #### Bug Fixes
+
+  * upgrade from @applitools/css-tree fork to official css-tree v3.1.0 | AD-11642 ([#3286](https://github.com/Applitools-Dev/sdk/issues/3286)) ([187ac4b](https://github.com/Applitools-Dev/sdk/commit/187ac4bbca0921ed692b2a676200c6a967c0fb33))
+* @applitools/core bumped to 4.50.4
+  #### Bug Fixes
+
+  * upgrade from @applitools/css-tree fork to official css-tree v3.1.0 | AD-11642 ([#3286](https://github.com/Applitools-Dev/sdk/issues/3286)) ([187ac4b](https://github.com/Applitools-Dev/sdk/commit/187ac4bbca0921ed692b2a676200c6a967c0fb33))
+
+
+
+* @applitools/eyes bumped to 1.36.13
+
+
 ## [3.61.3](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.61.2...js/eyes-storybook@3.61.3) (2025-10-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.61.3",
+  "version": "3.62.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -59,14 +59,14 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.50.3",
+    "@applitools/core": "4.50.4",
     "@applitools/driver": "1.24.0",
-    "@applitools/eyes": "1.36.12",
+    "@applitools/eyes": "1.36.13",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.2.4",
     "@applitools/monitoring-commons": "1.0.19",
     "@applitools/spec-driver-puppeteer": "1.6.6",
-    "@applitools/ufg-client": "1.17.4",
+    "@applitools/ufg-client": "1.17.5",
     "@applitools/utils": "1.12.0",
     "@inquirer/prompts": "7.0.1",
     "boxen": "4.2.0",

package/src/eyesStorybook.js

@@ -25,6 +25,7 @@ const {extractEnvironment} = require('./extractEnvironment');
 const {makeCore} = require('@applitools/core');
 const makeGetStoriesWithConfig = require('./getStoriesWithConfig');
 const {makeNetworkUtils} = require('./utils/pageNetworkUtils');
+const {readStoriesTimeout: defaultReadStoriesTimeout} = require('./defaultConfig');
 
 async function eyesStorybook({
   config,
@@ -48,6 +49,8 @@ async function eyesStorybook({
   logger.log(`Running with ${CONCURRENT_TABS} concurrent tabs`);
 
   const {storybookUrl, readStoriesTimeout, reloadPagePerStory, navigationWaitUntil} = config;
+  const enableTimeoutRetryMechanism = readStoriesTimeout === defaultReadStoriesTimeout;
+  const timeoutRetry = 30_000;
 
   let iframeUrl;
   try {
@@ -60,23 +63,6 @@ async function eyesStorybook({
   process.env.PUPPETEER_DISABLE_HEADLESS_WARNING = true;
   const browser = await puppeteer.launch(config.puppeteerOptions);
   logger.log('browser launched');
-  const page = await browser.newPage();
-
-  const {startInterception} = makeNetworkUtils({
-    page,
-    logger,
-  });
-  // we send http headers here and in init page
-  if (config.puppeteerExtraHTTPHeaders) {
-    await page.setExtraHTTPHeaders(config.puppeteerExtraHTTPHeaders);
-  }
-
-  await startInterception({
-    timeout: config.browserRequestsTimeout,
-    blockPatterns: config.networkBlockPatterns,
-    browserHeadersOverride: config.browserHeadersOverride,
-    cache: config.browserCacheRequests,
-  });
 
   const environment = extractEnvironment(addonVersion);
   const core = await makeCore({spec, agentId: config.agentId, environment, logger});
@@ -113,6 +99,8 @@ async function eyesStorybook({
   });
   const pagePool = createPagePool({initPage, logger});
 
+  const {stories, page} = await getStoriesWithSpinner();
+
   const doTakeDomSnapshots = async ({page, ...settings}) => {
     const driver = await new Driver({spec, driver: page, logger});
     return await core.takeSnapshots({
@@ -131,8 +119,6 @@ async function eyesStorybook({
     },
   });
   try {
-    const stories = await getStoriesWithSpinner();
-
     const filteredStories = filterStories({stories, config});
 
     // Log filtering and sharding results
@@ -239,63 +225,146 @@ async function eyesStorybook({
     await browser.close();
   }
 
-  async function getStoriesWithSpinner() {
-    let hasConsoleErr;
-    page.on('console', msg => {
-      hasConsoleErr =
-        msg.args()[0] &&
-        msg.args()[0]._remoteObject &&
-        msg.args()[0]._remoteObject.subtype === 'error';
-    });
+  async function createContext({browser, config, logger}) {
+    const context = await browser.createBrowserContext();
+    const page = await context.newPage();
 
-    logger.log('Getting stories from storybook');
-    const spinner = ora({text: 'Reading stories', stream: outputStream});
-    spinner.start();
-    logger.log('navigating to storybook url:', storybookUrl);
-    const [navigateErr] = await presult(
-      page.goto(storybookUrl, {timeout: readStoriesTimeout, waitUntil: navigationWaitUntil}),
-    );
-    if (navigateErr) {
-      logger.log('Error when loading storybook', navigateErr);
-      const failMsg = refineErrorMessage({
-        prefix: 'Error when loading storybook.',
-        error: navigateErr,
-      });
-      spinner.fail(failMsg);
-      throw new Error();
+    logger.log('A new context and page created');
+
+    // Set up interception and headers, but do not navigate
+    const {startInterception} = makeNetworkUtils({page, logger});
+    if (config.puppeteerExtraHTTPHeaders) {
+      await page.setExtraHTTPHeaders(config.puppeteerExtraHTTPHeaders);
     }
+    await startInterception({
+      timeout: config.browserRequestsTimeout,
+      blockPatterns: config.networkBlockPatterns,
+      browserHeadersOverride: config.browserHeadersOverride,
+      cache: config.browserCacheRequests,
+    });
 
-    const [getStoriesErr, stories] = await presult(readStoriesWithRetry());
+    return {context, page};
+  }
 
-    if (getStoriesErr) {
-      logger.log('Error when reading stories:', getStoriesErr);
-      const failMsg = refineErrorMessage({
-        prefix: 'Error when reading stories:',
-        error: getStoriesErr,
-      });
-      spinner.fail(failMsg);
-      throw new Error();
+  async function getStoriesWithSpinner() {
+    let firstAttemptContext;
+    let secondAttemptContext;
+    async function attemptNavigate(timeout, waitUntil, isSecondAttempt = false) {
+      const contextObj = await createContext({browser, config, logger});
+      if (isSecondAttempt) secondAttemptContext = contextObj;
+      else firstAttemptContext = contextObj;
+      const page = contextObj.page;
+      logger.log(
+        'Attempting navigation to storybook url:',
+        storybookUrl,
+        'timeout:',
+        timeout,
+        'waitUntil:',
+        waitUntil,
+      );
+      const [navigateErr] = await presult(page.goto(storybookUrl, {timeout, waitUntil}));
+      if (navigateErr) {
+        logger.log('Error when loading storybook', navigateErr);
+        return {ok: false, error: navigateErr, page};
+      }
+      return {ok: true, page};
     }
-
-    if (!stories.length && hasConsoleErr) {
-      return [
-        new Error(
+    const spinner = ora({text: 'Reading stories', stream: outputStream});
+    spinner.start();
+    // Start first attempt immediately with original timeout/waitUntil
+    const firstAttempt = attemptNavigate(readStoriesTimeout, navigationWaitUntil);
+    logger.log('Started first navigation attempt');
+    // Start second attempt after 30 seconds with 2x timeout
+    const secondAttempt = enableTimeoutRetryMechanism
+      ? new Promise(resolve => {
+          setTimeout(() => {
+            attemptNavigate(readStoriesTimeout * 2, navigationWaitUntil, true).then(resolve);
+          }, timeoutRetry);
+        })
+      : Promise.resolve({ok: false});
+
+    // Helper for reading stories after successful navigation
+    async function handleReadStories(page) {
+      let hasConsoleErr;
+      page.on('console', msg => {
+        hasConsoleErr =
+          msg.args()[0] &&
+          msg.args()[0]._remoteObject &&
+          msg.args()[0]._remoteObject.subtype === 'error';
+      });
+      logger.log('Getting stories from storybook');
+
+      const [getStoriesErr, stories] = await presult(readStoriesWithRetry(page));
+      if (getStoriesErr) {
+        logger.log('Error when reading stories:', getStoriesErr);
+        const failMsg = refineErrorMessage({
+          prefix: 'Error when reading stories:',
+          error: getStoriesErr,
+        });
+        spinner.fail(failMsg);
+        throw new Error();
+      }
+      if (!stories.length && hasConsoleErr) {
+        throw new Error(
           'Could not load stories, make sure your storybook renders correctly. Perhaps no stories were rendered?',
-        ),
-      ];
+        );
+      }
+      const badParamsError = stories
+        .map(s => s.error)
+        .filter(Boolean)
+        .join('\n');
+      if (badParamsError) {
+        console.log(chalk.red(`\n${badParamsError}`));
+      }
+      spinner.succeed();
+      logger.log(`got ${stories.length} stories:`, JSON.stringify(stories));
+      return {stories, page};
     }
 
-    const badParamsError = stories
-      .map(s => s.error)
-      .filter(Boolean)
-      .join('\n');
-    if (badParamsError) {
-      console.log(chalk.red(`\n${badParamsError}`));
+    async function cleanupContext(winnerPage) {
+      if (winnerPage === firstAttemptContext?.page && secondAttemptContext) {
+        try {
+          await secondAttemptContext.page.close();
+          await secondAttemptContext.context.close();
+          logger.log('Closed second attempt context/page after first attempt succeeded');
+        } catch (err) {
+          logger.log('Error closing second attempt context/page:', err);
+        }
+      } else if (winnerPage === secondAttemptContext?.page && firstAttemptContext) {
+        try {
+          await firstAttemptContext.page.close();
+          await firstAttemptContext.context.close();
+          logger.log('Closed first attempt context/page after second attempt succeeded');
+        } catch (err) {
+          logger.log('Error closing first attempt context/page:', err);
+        }
+      }
     }
 
-    spinner.succeed();
-    logger.log(`got ${stories.length} stories:`, JSON.stringify(stories));
-    return stories;
+    // Wait for the first successful navigation
+    return Promise.race([firstAttempt, secondAttempt]).then(async result => {
+      if (result.ok) {
+        await cleanupContext(result.page);
+        return handleReadStories(result.page);
+      }
+      // If first finished with error, wait for the other
+      return Promise.all([firstAttempt, secondAttempt]).then(async results => {
+        const success = results.find(r => r.ok);
+        if (success) {
+          await cleanupContext(success.page);
+          return handleReadStories(success.page);
+        }
+
+        const lastError = results[1].error || results[0].error;
+        logger.log('Error when loading storybook', lastError);
+        const failMsg = refineErrorMessage({
+          prefix: 'Error when loading storybook.',
+          error: lastError,
+        });
+        spinner.fail(failMsg);
+        throw new Error();
+      });
+    });
   }
 
   function getRenderIE() {
@@ -314,7 +383,7 @@ async function eyesStorybook({
     return transitioning;
   }
 
-  async function readStoriesWithRetry() {
+  async function readStoriesWithRetry(page) {
     return executeWithRetry(
       _readStoriesWithRetry,
       {