@applitools/eyes-storybook 3.53.13 → 3.54.0

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # Changelog
 
+## [3.54.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.53.14...js/eyes-storybook@3.54.0) (2025-03-30)
+
+
+### Features
+
+* implement browser-side timeout for eyes storybook ([#2877](https://github.com/Applitools-Dev/sdk/issues/2877)) ([591d950](https://github.com/Applitools-Dev/sdk/commit/591d950154368cc64f93835586da1eef296e2d33))
+
+## [3.53.14](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.53.13...js/eyes-storybook@3.53.14) (2025-03-30)
+
+
+### Dependencies
+
+* @applitools/utils bumped to 1.8.0
+  #### Features
+
+  * allow sending callback functions to waitBeforeCapture ([#2780](https://github.com/Applitools-Dev/sdk/issues/2780)) ([4caa2e8](https://github.com/Applitools-Dev/sdk/commit/4caa2e8ae055d3dd48164eeceaa4c691eeadcdd4))
+* @applitools/logger bumped to 2.1.2
+
+* @applitools/dom-snapshot bumped to 4.11.17
+  #### Bug Fixes
+
+  * input range value render issue - add input range to need map list ([#2866](https://github.com/Applitools-Dev/sdk/issues/2866)) ([6b3c113](https://github.com/Applitools-Dev/sdk/commit/6b3c113ab3068fc89b3d3917a12fc51bad66ca97))
+
+
+
+* @applitools/core-base bumped to 1.22.3
+  #### Bug Fixes
+
+  * reject openCheckAndClose on request failures ([#2870](https://github.com/Applitools-Dev/sdk/issues/2870)) ([1d12d60](https://github.com/Applitools-Dev/sdk/commit/1d12d60991e8f222002273d5447702158f1cba84))
+
+
+
+* @applitools/eyes bumped to 1.33.0
+  #### Features
+
+  * allow fully to be sent from the configuration object ([#2867](https://github.com/Applitools-Dev/sdk/issues/2867)) ([e8e7fbc](https://github.com/Applitools-Dev/sdk/commit/e8e7fbcb545e9bab899691d8d136b69f4a67e0d8))
+  * allow sending callback functions to waitBeforeCapture ([#2780](https://github.com/Applitools-Dev/sdk/issues/2780)) ([4caa2e8](https://github.com/Applitools-Dev/sdk/commit/4caa2e8ae055d3dd48164eeceaa4c691eeadcdd4))
+  * offline results state granularity ([#2872](https://github.com/Applitools-Dev/sdk/issues/2872)) ([c5f6e4e](https://github.com/Applitools-Dev/sdk/commit/c5f6e4ed87c4855704ce1a6c568393a35b677c1d))
+
+
+
+* @applitools/req bumped to 1.7.9
+
+* @applitools/image bumped to 1.1.18
+
+* @applitools/driver bumped to 1.21.0
+  #### Features
+
+  * allow sending callback functions to waitBeforeCapture ([#2780](https://github.com/Applitools-Dev/sdk/issues/2780)) ([4caa2e8](https://github.com/Applitools-Dev/sdk/commit/4caa2e8ae055d3dd48164eeceaa4c691eeadcdd4))
+
+
+
+* @applitools/spec-driver-puppeteer bumped to 1.4.26
+
+* @applitools/screenshoter bumped to 3.11.0
+  #### Features
+
+  * allow sending callback functions to waitBeforeCapture ([#2780](https://github.com/Applitools-Dev/sdk/issues/2780)) ([4caa2e8](https://github.com/Applitools-Dev/sdk/commit/4caa2e8ae055d3dd48164eeceaa4c691eeadcdd4))
+
+
+
+* @applitools/socket bumped to 1.2.3
+
+* @applitools/dom-capture bumped to 11.5.5
+
+* @applitools/spec-driver-webdriver bumped to 1.2.1
+
+* @applitools/spec-driver-selenium bumped to 1.5.97
+
+* @applitools/nml-client bumped to 1.8.27
+
+* @applitools/tunnel-client bumped to 1.6.4
+
+* @applitools/ufg-client bumped to 1.16.8
+
+* @applitools/ec-client bumped to 1.10.7
+
+* @applitools/core bumped to 4.34.0
+  #### Features
+
+  * allow sending callback functions to waitBeforeCapture ([#2780](https://github.com/Applitools-Dev/sdk/issues/2780)) ([4caa2e8](https://github.com/Applitools-Dev/sdk/commit/4caa2e8ae055d3dd48164eeceaa4c691eeadcdd4))
+  * offline results state granularity ([#2872](https://github.com/Applitools-Dev/sdk/issues/2872)) ([c5f6e4e](https://github.com/Applitools-Dev/sdk/commit/c5f6e4ed87c4855704ce1a6c568393a35b677c1d))
+
+
+  #### Bug Fixes
+
+  * reject openCheckAndClose on request failures ([#2870](https://github.com/Applitools-Dev/sdk/issues/2870)) ([1d12d60](https://github.com/Applitools-Dev/sdk/commit/1d12d60991e8f222002273d5447702158f1cba84))
+
+
+
+
 ## [3.53.13](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.53.12...js/eyes-storybook@3.53.13) (2025-03-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.53.13",
+  "version": "3.54.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -53,15 +53,15 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.32.2",
-    "@applitools/driver": "1.20.5",
-    "@applitools/eyes": "1.32.6",
+    "@applitools/core": "4.34.0",
+    "@applitools/driver": "1.21.0",
+    "@applitools/eyes": "1.33.0",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "2.1.1",
+    "@applitools/logger": "2.1.2",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.4.25",
-    "@applitools/ufg-client": "1.16.7",
-    "@applitools/utils": "1.7.8",
+    "@applitools/spec-driver-puppeteer": "1.4.26",
+    "@applitools/ufg-client": "1.16.8",
+    "@applitools/utils": "1.8.0",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -79,13 +79,13 @@
     "@applitools/test-server": "^1.2.2",
     "@applitools/test-utils": "^1.5.17",
     "@storybook/addon-interactions": "^6.4.18",
-    "@storybook/react": "^6.4.18",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.9",
     "@testing-library/dom": "^5.6.1",
     "bitmap-manipulation": "^2.0.0",
     "chai": "^4.2.0",
     "core-js": "^3.6.1",
-    "express": "^4.17.1",
+    "express": "^4.21.2",
     "filenamify": "^4.1.0",
     "node-fetch": "^2.6.0",
     "react": "^16.12.0",

package/src/defaultConfig.js

@@ -20,4 +20,5 @@ module.exports = {
   startStorybookServerTimeout: 300,
   navigationWaitUntil: undefined,
   networkBlockPatterns: undefined,
+  browserRequestsTimeout: undefined,
 };

package/src/eyesStorybook.js

@@ -23,6 +23,7 @@ const executeRenders = require('./executeRenders');
 const {extractEnvironment} = require('./extractEnvironment');
 const {makeCore} = require('@applitools/core');
 const makeGetStoriesWithConfig = require('./getStoriesWithConfig');
+const {makeNetworkUtils} = require('./utils/pageNetworkUtils');
 
 async function eyesStorybook({
   config,
@@ -55,22 +56,21 @@ async function eyesStorybook({
   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);
   }
-  if (config.networkBlockPatterns) {
-    await page.setRequestInterception(true);
-    page.on('request', request => {
-      logger.log(`[master page] Request to ${request.url()}`);
-      if (config.networkBlockPatterns.some(pattern => request.url().includes(pattern))) {
-        logger.log(`[master page] Blocking request to ${request.url()}`);
-        request.abort();
-      } else {
-        request.continue();
-      }
-    });
-  }
+
+  await startInterception({
+    timeout: config.browserRequestsTimeout,
+    blockPatterns: config.networkBlockPatterns,
+  });
+
   const environment = extractEnvironment();
   const core = await makeCore({spec, agentId, environment, logger});
   const manager = await core.makeManager({

package/src/initPage.js

@@ -1,24 +1,20 @@
 const {presult} = require('@applitools/functional-commons');
 const browserLog = require('./browserLog');
 const fakeIE = require('./fakeIE');
+const {makeNetworkUtils} = require('./utils/pageNetworkUtils');
 
 function makeInitPage({iframeUrl, config, browser, logger, getTransitiongIntoIE, getRenderIE}) {
+  const networkUtils = makeNetworkUtils({logger});
   return async function initPage({pageId, pagePool}) {
     logger.log('initializing puppeteer page number ', pageId);
     const browserContext = await browser.createBrowserContext();
     const page = await browserContext.newPage();
-    if (config.networkBlockPatterns) {
-      await page.setRequestInterception(true);
-      page.on('request', request => {
-        logger.log(`[page ${pageId}] Request to ${request.url()}`);
-        if (config.networkBlockPatterns.some(pattern => request.url().includes(pattern))) {
-          logger.log(`[page ${pageId}] Blocking request to ${request.url()}`);
-          request.abort();
-        } else {
-          request.continue();
-        }
-      });
-    }
+    const {startInterception} = networkUtils.extend({page, pageId});
+
+    await startInterception({
+      timeout: config.browserRequestsTimeout,
+      blockPatterns: config.networkBlockPatterns,
+    });
 
     if (config.viewportSize) {
       await page.setViewport(config.viewportSize);

package/src/utils/determineStorybookVersion.js

@@ -26,8 +26,7 @@ async function determineStorybookVersion({packagePath, isWindows}) {
     }
   }
 
-  const sbVersion = execSync(`${storybookPath} ${sbArg ?? ''} --version`).toString();
-
+  const sbVersion = execSync(`"${storybookPath}" ${sbArg ?? ''} --version`).toString();
   return {storybookPath, sbVersion, sbArg};
 }
 module.exports = determineStorybookVersion;

package/src/utils/pageNetworkUtils.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-restricted-globals */
+const {setTimeout} = require('timers/promises');
+
+function makeBrowserNetworkPolicy({page, logger, pageId = null}) {
+  const scope = pageId ? `[page ${pageId}]` : '[master page]';
+  return {
+    extend(options) {
+      return makeBrowserNetworkPolicy({page, logger, pageId, ...options});
+    },
+    async startInterception({timeout, blockPatterns}) {
+      if (timeout || blockPatterns) {
+        const cdp = await page.target().createCDPSession();
+
+        await cdp.send('Fetch.enable');
+        await cdp.on('Fetch.requestPaused', async ({requestId, request}) => {
+          logger.log(`${scope} Request to ${request.url}`);
+          if (blockPatterns && blockPatterns.some(pattern => request.url.includes(pattern))) {
+            logger.log(`${scope} Blocking request to ${request.url}`);
+            await cdp.send('Fetch.failRequest', {requestId, errorReason: 'Blocked'});
+            return;
+          }
+          if (timeout) {
+            await Promise.race([
+              setTimeout(timeout, {action: 'abort'}),
+              fetchRequest(request)
+                .then(response => ({action: 'fulfill', response}))
+                .catch(() => ({action: 'fail'})),
+            ]).then(async ({action, response}) => {
+              if (action === 'abort') {
+                logger.log(`${scope} Timeout for request to ${request.url}`);
+                await cdp.send('Fetch.failRequest', {requestId, errorReason: 'Aborted'});
+              } else if (action === 'fulfill') {
+                logger.log(`${scope} Fulfilled request to ${request.url}`);
+                const bodyBytes = await response.arrayBuffer();
+                const body = Buffer.from(bodyBytes).toString('base64');
+                const cdpResponse = {
+                  requestId,
+                  responseCode: response.status,
+                  responseHeaders: [...response.headers.entries()].map(([name, value]) => ({
+                    name,
+                    value,
+                  })),
+                  body,
+                };
+                await cdp.send('Fetch.fulfillRequest', cdpResponse);
+              } else {
+                logger.log(`${scope} Failed request to ${request.url}`);
+                await cdp.send('Fetch.failRequest', {requestId, errorReason: 'Failed'});
+              }
+            });
+          } else {
+            logger.log(`${scope} Not intercepting request to ${request.url}`);
+            await cdp.send('Fetch.continueRequest', {
+              requestId,
+            });
+          }
+        });
+      }
+    },
+  };
+}
+
+function fetchRequest(request) {
+  return fetch(request.url, {
+    method: request.method,
+    headers: request.headers,
+    body: request.postData,
+  });
+}
+
+module.exports = {
+  makeNetworkUtils: makeBrowserNetworkPolicy,
+};