@applitools/eyes-storybook 3.54.0 → 3.55.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.54.0",
+  "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

@@ -21,4 +21,6 @@ module.exports = {
   navigationWaitUntil: undefined,
   networkBlockPatterns: undefined,
   browserRequestsTimeout: undefined,
+  browserHeadersOverride: undefined,
+  browserCacheRequests: undefined,
 };

package/src/eyesStorybook.js

@@ -69,6 +69,8 @@ async function eyesStorybook({
   await startInterception({
     timeout: config.browserRequestsTimeout,
     blockPatterns: config.networkBlockPatterns,
+    browserHeadersOverride: config.browserHeadersOverride,
+    cache: config.browserCacheRequests,
   });
 
   const environment = extractEnvironment();

package/src/initPage.js

@@ -14,6 +14,8 @@ function makeInitPage({iframeUrl, config, browser, logger, getTransitiongIntoIE,
     await startInterception({
       timeout: config.browserRequestsTimeout,
       blockPatterns: config.networkBlockPatterns,
+      browserHeadersOverride: config.browserHeadersOverride,
+      cache: config.browserCacheRequests,
     });
 
     if (config.viewportSize) {

package/src/utils/pageNetworkUtils.js

@@ -1,5 +1,8 @@
 /* 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]';
@@ -7,52 +10,64 @@ function makeBrowserNetworkPolicy({page, logger, pageId = null}) {
     extend(options) {
       return makeBrowserNetworkPolicy({page, logger, pageId, ...options});
     },
-    async startInterception({timeout, blockPatterns}) {
-      if (timeout || blockPatterns) {
+    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}) => {
+        await cdp.on('Fetch.requestPaused', async ({requestId, request, ...others}) => {
           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'});
+          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}`);
               }
-            });
-          } else {
-            logger.log(`${scope} Not intercepting request to ${request.url}`);
-            await cdp.send('Fetch.continueRequest', {
-              requestId,
-            });
+              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}`);
           }
         });
       }
@@ -60,14 +75,37 @@ function makeBrowserNetworkPolicy({page, logger, pageId = null}) {
   };
 }
 
-function fetchRequest(request) {
-  return fetch(request.url, {
+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',