@applitools/eyes-storybook 3.53.14 → 3.54.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.53.14",
+  "version": "3.54.0",
   "description": "",
   "keywords": [
     "applitools",

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/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,
+};