@applitools/eyes-storybook 3.53.14 → 3.55.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [3.55.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.54.0...js/eyes-storybook@3.55.0) (2025-04-03)
+
+
+### Features
+
+* browser headers override and requests caching ([#2885](https://github.com/Applitools-Dev/sdk/issues/2885)) ([7a83578](https://github.com/Applitools-Dev/sdk/commit/7a8357835dc41ab16ba3b392885b732045fe8022))
+
+
+### Dependencies
+
+* @applitools/core bumped to 4.35.1
+  #### Bug Fixes
+
+  * dummy ([9b8ffef](https://github.com/Applitools-Dev/sdk/commit/9b8ffef6277015a9073caf50f5dc5741986fbf07))
+* @applitools/eyes bumped to 1.33.2
+
+
+## [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.55.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -53,9 +53,9 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.34.0",
+    "@applitools/core": "4.35.1",
     "@applitools/driver": "1.21.0",
-    "@applitools/eyes": "1.33.0",
+    "@applitools/eyes": "1.33.2",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.1.2",
     "@applitools/monitoring-commons": "1.0.19",

package/src/defaultConfig.js

@@ -20,4 +20,7 @@ module.exports = {
   startStorybookServerTimeout: 300,
   navigationWaitUntil: undefined,
   networkBlockPatterns: undefined,
+  browserRequestsTimeout: undefined,
+  browserHeadersOverride: undefined,
+  browserCacheRequests: 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,23 @@ 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,
+    browserHeadersOverride: config.browserHeadersOverride,
+    cache: config.browserCacheRequests,
+  });
+
   const environment = extractEnvironment();
   const core = await makeCore({spec, agentId, environment, logger});
   const manager = await core.makeManager({

package/src/initPage.js

@@ -1,24 +1,22 @@
 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,
+      browserHeadersOverride: config.browserHeadersOverride,
+      cache: config.browserCacheRequests,
+    });
 
     if (config.viewportSize) {
       await page.setViewport(config.viewportSize);

package/src/utils/pageNetworkUtils.js

@@ -0,0 +1,111 @@
+/* eslint-disable no-restricted-globals */
+const {setTimeout} = require('timers/promises');
+const utils = require('@applitools/utils');
+
+const cachedFetch = utils.general.cachify(fetchRequest);
+
+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, browserHeadersOverride, cache}) {
+      const fetch = cache ? cachedFetch : fetchRequest;
+      if (timeout || blockPatterns || browserHeadersOverride || cache) {
+        const cdp = await page.target().createCDPSession();
+
+        await cdp.send('Fetch.enable');
+        await cdp.on('Fetch.requestPaused', async ({requestId, request, ...others}) => {
+          logger.log(`${scope} Request to ${request.url}`);
+          try {
+            if (blockPatterns && blockPatterns.some(pattern => request.url.includes(pattern))) {
+              logger.log(`${scope} Blocking request to ${request.url}`);
+              logger.log(others);
+              try {
+                await cdp.send('Fetch.failRequest', {requestId, errorReason: 'BlockedByClient'});
+              } catch (err) {
+                logger.log(`${scope} Failed to block request to ${request.url}. Error: ${err}`);
+              }
+              return;
+            }
+            if (browserHeadersOverride) {
+              logger.log(`${scope} Overriding headers for request to ${request.url}`);
+              request.headers = applyHeaderOverrides(request.headers, browserHeadersOverride);
+            }
+            if (timeout) {
+              return await Promise.race([
+                setTimeout(timeout, {action: 'abort'}),
+                fetch(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}`);
+                  await cdp.send('Fetch.fulfillRequest', {...response, requestId});
+                } else {
+                  logger.log(`${scope} Failed request to ${request.url}`);
+                  await cdp.send('Fetch.failRequest', {requestId, errorReason: 'Failed'});
+                }
+                return;
+              });
+            }
+            if (browserHeadersOverride || cache) {
+              logger.log(`${scope} Fetching request to ${request.url}`);
+              const response = await fetch(request);
+              logger.log(`${scope} Fulfilled request to ${request.url}`);
+              await cdp.send('Fetch.fulfillRequest', {...response, requestId});
+              return;
+            } else {
+              logger.log(`${scope} Not intercepting request to ${request.url}`);
+              await cdp.send('Fetch.continueRequest', {
+                requestId,
+              });
+            }
+          } catch (err) {
+            // I beliebe it doens't necessarily indicate an error - if we get here, the request was cancled (e.g. by navigating away). Logging it for now.
+            logger.log(`${scope} Failed to intercept request to ${request.url}. Error: ${err}`);
+          }
+        });
+      }
+    },
+  };
+}
+
+async function fetchRequest(request) {
+  const response = await fetch(request.url, {
+    method: request.method,
+    headers: request.headers,
+    body: request.postData,
+  });
+  return {
+    responseCode: response.status,
+    responseHeaders: [...response.headers.entries()].map(([name, value]) => ({
+      name,
+      value,
+    })),
+    body: Buffer.from(await response.arrayBuffer()).toString('base64'),
+  };
+}
+
+function applyHeaderOverrides(headers, overrides) {
+  const result = {...headers};
+  for (const [name, value] of Object.entries(overrides)) {
+    if (typeof value === 'function') {
+      result[name] = value(result[name], headers);
+    } else if (value === null || value === undefined) {
+      result[name] = null;
+    } else {
+      result[name] = value;
+    }
+  }
+  return result;
+}
+
+module.exports = {
+  makeNetworkUtils: makeBrowserNetworkPolicy,
+  clearNetworkCache: cachedFetch.clearCache, // for testing purposes
+};

package/src/yargsOptions.js

@@ -69,6 +69,13 @@ module.exports = {
     array: true,
   },
 
+  browserCacheRequests: {
+    alias: ['browser-cache-requests'],
+    description: 'Intercept and cache requests coming from the browser',
+    requiresArg: false,
+    boolean: true,
+  },
+
   navigationWaitUntil: {
     alias: ['navigation-wait-until'],
     description: 'When to consider navigation to be finished',