@applitools/core 3.10.2 → 3.10.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.10.3](https://github.com/applitools/eyes.sdk.javascript1/compare/js/core@3.10.2...js/core@3.10.3) (2023-09-11)
+
+
+### Bug Fixes
+
+* suppport coded regions with layoutBreakpoints reload ([7903347](https://github.com/applitools/eyes.sdk.javascript1/commit/79033472b9475992a44cf3828ff334c958ae2066))
+
 ## [3.10.2](https://github.com/applitools/eyes.sdk.javascript1/compare/js/core@3.10.1...js/core@3.10.2) (2023-09-05)
 
 

package/dist/ufg/check-and-close.js

@@ -31,7 +31,6 @@ const driver_1 = require("@applitools/driver");
 const take_dom_snapshots_1 = require("./utils/take-dom-snapshots");
 const wait_for_lazy_load_1 = require("../automation/utils/wait-for-lazy-load");
 const to_base_check_settings_1 = require("../automation/utils/to-base-check-settings");
-const generate_safe_selectors_1 = require("./utils/generate-safe-selectors");
 const uniquify_renderers_1 = require("../automation/utils/uniquify-renderers");
 const extract_renderer_key_1 = require("../automation/utils/extract-renderer-key");
 const abort_error_1 = require("../errors/abort-error");
@@ -39,7 +38,7 @@ const utils = __importStar(require("@applitools/utils"));
 const chalk_1 = __importDefault(require("chalk"));
 function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRenderers = [], spec, signal, logger: mainLogger, }) {
     return async function checkAndClose({ target = defaultTarget, settings = {}, logger = mainLogger, } = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c;
         logger = logger.extend(mainLogger);
         logger.log('Command "checkAndClose" is called with settings', settings);
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
@@ -58,53 +57,20 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
             },
             logger,
         });
-        let snapshots;
+        let snapshotResults;
         let snapshotUrl;
         let snapshotTitle;
         let userAgent;
-        let regionToTarget;
-        let scrollRootSelector;
-        let selectorsToCalculate;
         const driver = spec && (0, driver_1.isDriver)(target, spec)
             ? await (0, driver_1.makeDriver)({ spec, driver: target, reset: target === defaultTarget, logger })
             : null;
         if (driver) {
             const environment = await driver.getEnvironment();
-            let cleanupGeneratedSelectors;
-            if (environment.isWeb) {
-                userAgent = await driver.getUserAgentLegacy();
-                const generated = await (0, generate_safe_selectors_1.generateSafeSelectors)({
-                    context: driver.currentContext,
-                    elementReferences: [
-                        ...(elementReferenceToTarget ? [elementReferenceToTarget] : []),
-                        ...(settings.scrollRootElement ? [settings.scrollRootElement] : []),
-                        ...elementReferencesToCalculate,
-                    ],
-                });
-                cleanupGeneratedSelectors = generated.cleanupGeneratedSelectors;
-                selectorsToCalculate = generated.selectors;
-                if (elementReferenceToTarget) {
-                    if (!((_b = selectorsToCalculate[0]) === null || _b === void 0 ? void 0 : _b.safeSelector))
-                        throw new Error('Target element not found');
-                    regionToTarget = selectorsToCalculate[0].safeSelector;
-                    selectorsToCalculate = selectorsToCalculate.slice(1);
-                }
-                if (settings.scrollRootElement) {
-                    scrollRootSelector = (_c = selectorsToCalculate[0].safeSelector) !== null && _c !== void 0 ? _c : undefined;
-                    selectorsToCalculate = selectorsToCalculate.slice(1);
-                }
-            }
-            else {
-                regionToTarget = (0, driver_1.isSelector)(elementReferenceToTarget)
-                    ? (_e = (_d = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _d === void 0 ? void 0 : _d.call(spec, settings.scrollRootElement)) !== null && _e !== void 0 ? _e : undefined
-                    : undefined;
-                scrollRootSelector = (0, driver_1.isSelector)(settings.scrollRootElement)
-                    ? (_g = (_f = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _f === void 0 ? void 0 : _f.call(spec, settings.scrollRootElement)) !== null && _g !== void 0 ? _g : undefined
-                    : undefined;
-            }
             const currentContext = driver.currentContext;
+            await currentContext.setScrollingElement((_b = settings.scrollRootElement) !== null && _b !== void 0 ? _b : null);
             if (environment.isWeb) {
-                snapshots = await (0, take_dom_snapshots_1.takeDomSnapshots)({
+                userAgent = await driver.getUserAgentLegacy();
+                snapshotResults = await (0, take_dom_snapshots_1.takeDomSnapshots)({
                     driver,
                     settings: {
                         ...eyes.test.eyesServer,
@@ -113,6 +79,11 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
                         layoutBreakpoints: settings.layoutBreakpoints,
                         renderers: uniqueRenderers,
                         skipResources: ufgClient.getCachedResourceUrls(),
+                        calculateRegionsOptions: {
+                            elementReferencesToCalculate,
+                            elementReferenceToTarget,
+                            scrollRootElement: settings.scrollRootElement,
+                        },
                     },
                     hooks: {
                         async beforeSnapshots() {
@@ -138,7 +109,7 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
                     settings: { ...eyes.test.eyesServer, renderEnvironmentsUrl: eyes.test.renderEnvironmentsUrl },
                     logger,
                 });
-                snapshots = (await nmlClient.takeSnapshots({
+                const snapshots = (await nmlClient.takeSnapshots({
                     settings: {
                         ...eyes.test.eyesServer,
                         waitBeforeCapture: settings.waitBeforeCapture,
@@ -146,22 +117,29 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
                     },
                     logger,
                 }));
+                snapshotResults = snapshots.map(snapshot => {
+                    var _a, _b, _c, _d;
+                    return ({
+                        snapshot,
+                        regionToTarget: (0, driver_1.isSelector)(elementReferenceToTarget)
+                            ? (_b = (_a = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _a === void 0 ? void 0 : _a.call(spec, settings.scrollRootElement)) !== null && _b !== void 0 ? _b : undefined
+                            : undefined,
+                        scrollRootSelector: (0, driver_1.isSelector)(settings.scrollRootElement)
+                            ? (_d = (_c = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _c === void 0 ? void 0 : _c.call(spec, settings.scrollRootElement)) !== null && _d !== void 0 ? _d : undefined
+                            : undefined,
+                    });
+                });
             }
             await currentContext.focus();
             snapshotUrl = await driver.getUrl();
             snapshotTitle = await driver.getTitle();
-            await (cleanupGeneratedSelectors === null || cleanupGeneratedSelectors === void 0 ? void 0 : cleanupGeneratedSelectors());
         }
         else {
-            snapshots = !utils.types.isArray(target) ? Array(uniqueRenderers.length).fill(target) : target;
-            snapshotUrl = utils.types.has(snapshots[0], 'url') ? snapshots[0].url : undefined;
+            snapshotResults = !utils.types.isArray(target) ? Array(uniqueRenderers.length).fill(target) : target;
+            snapshotUrl = utils.types.has((_c = snapshotResults[0]) === null || _c === void 0 ? void 0 : _c.snapshot, 'url') ? snapshotResults[0].snapshot.url : undefined;
         }
-        regionToTarget !== null && regionToTarget !== void 0 ? regionToTarget : (regionToTarget = (_h = elementReferenceToTarget) !== null && _h !== void 0 ? _h : settings.region);
-        selectorsToCalculate !== null && selectorsToCalculate !== void 0 ? selectorsToCalculate : (selectorsToCalculate = elementReferencesToCalculate.map(selector => ({
-            originalSelector: selector,
-            safeSelector: selector,
-        })));
         const promises = uniqueRenderers.map(async (renderer, index) => {
+            var _a;
             const rendererLogger = logger.extend({ tags: [`renderer-${utils.general.shortid()}`] });
             const ufgRenderer = renderer;
             if (utils.types.has(ufgRenderer, 'name') && ufgRenderer.name === 'edge') {
@@ -173,7 +151,13 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
                     rendererLogger.warn('Command "check" was aborted before rendering');
                     throw new abort_error_1.AbortError('Command "check" was aborted before rendering');
                 }
-                const { cookies, ...snapshot } = snapshots[index];
+                const { snapshot: snapshotFromResult, selectorsToCalculate: selectorsToCalculateFromSnapshot, regionToTarget, scrollRootSelector, } = snapshotResults[index];
+                const { cookies, ...snapshot } = snapshotFromResult;
+                const region = (_a = regionToTarget !== null && regionToTarget !== void 0 ? regionToTarget : elementReferenceToTarget) !== null && _a !== void 0 ? _a : settings.region;
+                const selectorsToCalculate = selectorsToCalculateFromSnapshot !== null && selectorsToCalculateFromSnapshot !== void 0 ? selectorsToCalculateFromSnapshot : elementReferencesToCalculate.map(selector => ({
+                    originalSelector: selector,
+                    safeSelector: selector,
+                }));
                 if (utils.types.has(ufgRenderer, 'iosDeviceInfo') || utils.types.has(ufgRenderer, 'androidDeviceInfo')) {
                     ufgRenderer.type = utils.types.has(snapshot, 'cdt') ? 'web' : 'native';
                 }
@@ -215,7 +199,7 @@ function makeCheckAndClose({ eyes, target: defaultTarget, renderers: defaultRend
                         target: renderTarget,
                         settings: {
                             ...settings,
-                            region: regionToTarget,
+                            region,
                             scrollRootElement: scrollRootSelector,
                             selectorsToCalculate: selectorsToCalculate.flatMap(({ safeSelector }) => safeSelector !== null && safeSelector !== void 0 ? safeSelector : []),
                             includeFullPageSize: !!settings.pageId,

package/dist/ufg/check.js

@@ -31,7 +31,6 @@ const driver_1 = require("@applitools/driver");
 const take_dom_snapshots_1 = require("./utils/take-dom-snapshots");
 const wait_for_lazy_load_1 = require("../automation/utils/wait-for-lazy-load");
 const to_base_check_settings_1 = require("../automation/utils/to-base-check-settings");
-const generate_safe_selectors_1 = require("./utils/generate-safe-selectors");
 const uniquify_renderers_1 = require("../automation/utils/uniquify-renderers");
 const extract_renderer_key_1 = require("../automation/utils/extract-renderer-key");
 const abort_error_1 = require("../errors/abort-error");
@@ -39,7 +38,7 @@ const utils = __importStar(require("@applitools/utils"));
 const chalk_1 = __importDefault(require("chalk"));
 function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers = [], spec, signal, logger: mainLogger, }) {
     return async function check({ target = defaultTarget, settings = {}, logger = mainLogger, } = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c;
         logger = logger.extend(mainLogger);
         logger.log('Command "check" is called with settings', settings);
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
@@ -58,54 +57,20 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
             },
             logger,
         });
-        let snapshots;
+        let snapshotResults;
         let snapshotUrl;
         let snapshotTitle;
         let userAgent;
-        let regionToTarget;
-        let scrollRootSelector;
-        let selectorsToCalculate;
         const driver = spec && (0, driver_1.isDriver)(target, spec)
             ? await (0, driver_1.makeDriver)({ spec, driver: target, reset: target === defaultTarget, logger })
             : null;
         if (driver) {
             const environment = await driver.getEnvironment();
-            await driver.currentContext.setScrollingElement((_b = settings.scrollRootElement) !== null && _b !== void 0 ? _b : null);
-            let cleanupGeneratedSelectors;
-            if (environment.isWeb) {
-                userAgent = await driver.getUserAgentLegacy();
-                const generated = await (0, generate_safe_selectors_1.generateSafeSelectors)({
-                    context: driver.currentContext,
-                    elementReferences: [
-                        ...(elementReferenceToTarget ? [elementReferenceToTarget] : []),
-                        ...(settings.scrollRootElement ? [settings.scrollRootElement] : []),
-                        ...elementReferencesToCalculate,
-                    ],
-                });
-                cleanupGeneratedSelectors = generated.cleanupGeneratedSelectors;
-                selectorsToCalculate = generated.selectors;
-                if (elementReferenceToTarget) {
-                    if (!((_c = selectorsToCalculate[0]) === null || _c === void 0 ? void 0 : _c.safeSelector))
-                        throw new Error('Target element not found');
-                    regionToTarget = selectorsToCalculate[0].safeSelector;
-                    selectorsToCalculate = selectorsToCalculate.slice(1);
-                }
-                if (settings.scrollRootElement) {
-                    scrollRootSelector = (_d = selectorsToCalculate[0].safeSelector) !== null && _d !== void 0 ? _d : undefined;
-                    selectorsToCalculate = selectorsToCalculate.slice(1);
-                }
-            }
-            else {
-                regionToTarget = (0, driver_1.isSelector)(elementReferenceToTarget)
-                    ? (_f = (_e = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _e === void 0 ? void 0 : _e.call(spec, settings.scrollRootElement)) !== null && _f !== void 0 ? _f : undefined
-                    : undefined;
-                scrollRootSelector = (0, driver_1.isSelector)(settings.scrollRootElement)
-                    ? (_h = (_g = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _g === void 0 ? void 0 : _g.call(spec, settings.scrollRootElement)) !== null && _h !== void 0 ? _h : undefined
-                    : undefined;
-            }
             const currentContext = driver.currentContext;
+            await currentContext.setScrollingElement((_b = settings.scrollRootElement) !== null && _b !== void 0 ? _b : null);
             if (environment.isWeb) {
-                snapshots = await (0, take_dom_snapshots_1.takeDomSnapshots)({
+                userAgent = await driver.getUserAgentLegacy();
+                snapshotResults = await (0, take_dom_snapshots_1.takeDomSnapshots)({
                     driver,
                     settings: {
                         ...eyes.test.eyesServer,
@@ -114,6 +79,11 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
                         layoutBreakpoints: settings.layoutBreakpoints,
                         renderers: uniqueRenderers,
                         skipResources: ufgClient.getCachedResourceUrls(),
+                        calculateRegionsOptions: {
+                            elementReferencesToCalculate,
+                            elementReferenceToTarget,
+                            scrollRootElement: settings.scrollRootElement,
+                        },
                     },
                     hooks: {
                         async beforeSnapshots() {
@@ -139,7 +109,7 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
                     settings: { ...eyes.test.eyesServer, renderEnvironmentsUrl: eyes.test.renderEnvironmentsUrl },
                     logger,
                 });
-                snapshots = (await nmlClient.takeSnapshots({
+                const snapshots = (await nmlClient.takeSnapshots({
                     settings: {
                         ...eyes.test.eyesServer,
                         waitBeforeCapture: settings.waitBeforeCapture,
@@ -147,22 +117,29 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
                     },
                     logger,
                 }));
+                snapshotResults = snapshots.map(snapshot => {
+                    var _a, _b, _c, _d;
+                    return ({
+                        snapshot,
+                        regionToTarget: (0, driver_1.isSelector)(elementReferenceToTarget)
+                            ? (_b = (_a = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _a === void 0 ? void 0 : _a.call(spec, settings.scrollRootElement)) !== null && _b !== void 0 ? _b : undefined
+                            : undefined,
+                        scrollRootSelector: (0, driver_1.isSelector)(settings.scrollRootElement)
+                            ? (_d = (_c = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _c === void 0 ? void 0 : _c.call(spec, settings.scrollRootElement)) !== null && _d !== void 0 ? _d : undefined
+                            : undefined,
+                    });
+                });
             }
             await currentContext.focus();
             snapshotUrl = await driver.getUrl();
             snapshotTitle = await driver.getTitle();
-            await (cleanupGeneratedSelectors === null || cleanupGeneratedSelectors === void 0 ? void 0 : cleanupGeneratedSelectors());
         }
         else {
-            snapshots = !utils.types.isArray(target) ? Array(uniqueRenderers.length).fill(target) : target;
-            snapshotUrl = utils.types.has(snapshots[0], 'url') ? snapshots[0].url : undefined;
+            snapshotResults = !utils.types.isArray(target) ? Array(uniqueRenderers.length).fill(target) : target;
+            snapshotUrl = utils.types.has((_c = snapshotResults[0]) === null || _c === void 0 ? void 0 : _c.snapshot, 'url') ? snapshotResults[0].snapshot.url : undefined;
         }
-        regionToTarget !== null && regionToTarget !== void 0 ? regionToTarget : (regionToTarget = (_j = elementReferenceToTarget) !== null && _j !== void 0 ? _j : settings.region);
-        selectorsToCalculate !== null && selectorsToCalculate !== void 0 ? selectorsToCalculate : (selectorsToCalculate = elementReferencesToCalculate.map(selector => ({
-            originalSelector: selector,
-            safeSelector: selector,
-        })));
         const promises = uniqueRenderers.map(async (renderer, index) => {
+            var _a;
             const rendererLogger = logger.extend({ tags: [`renderer-${utils.general.shortid()}`] });
             const ufgRenderer = renderer;
             if (utils.types.has(ufgRenderer, 'name') && ufgRenderer.name === 'edge') {
@@ -174,7 +151,13 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
                     rendererLogger.warn('Command "check" was aborted before rendering');
                     throw new abort_error_1.AbortError('Command "check" was aborted before rendering');
                 }
-                const { cookies, ...snapshot } = snapshots[index];
+                const { snapshot: snapshotFromResult, selectorsToCalculate: selectorsToCalculateFromSnapshot, regionToTarget, scrollRootSelector, } = snapshotResults[index];
+                const { cookies, ...snapshot } = snapshotFromResult;
+                const region = (_a = regionToTarget !== null && regionToTarget !== void 0 ? regionToTarget : elementReferenceToTarget) !== null && _a !== void 0 ? _a : settings.region;
+                const selectorsToCalculate = selectorsToCalculateFromSnapshot !== null && selectorsToCalculateFromSnapshot !== void 0 ? selectorsToCalculateFromSnapshot : elementReferencesToCalculate.map(selector => ({
+                    originalSelector: selector,
+                    safeSelector: selector,
+                }));
                 if (utils.types.has(ufgRenderer, 'iosDeviceInfo') || utils.types.has(ufgRenderer, 'androidDeviceInfo')) {
                     ufgRenderer.type = utils.types.has(snapshot, 'cdt') ? 'web' : 'native';
                 }
@@ -216,7 +199,7 @@ function makeCheck({ eyes, target: defaultTarget, renderers: defaultRenderers =
                         target: renderTarget,
                         settings: {
                             ...settings,
-                            region: regionToTarget,
+                            region,
                             scrollRootElement: scrollRootSelector,
                             selectorsToCalculate: selectorsToCalculate.flatMap(({ safeSelector }) => safeSelector !== null && safeSelector !== void 0 ? safeSelector : []),
                             includeFullPageSize: Boolean(settings.pageId),

package/dist/ufg/utils/calculate-regions.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateRegions = void 0;
+const generate_safe_selectors_1 = require("../utils/generate-safe-selectors");
+async function calculateRegions({ driver, elementReferencesToCalculate, elementReferenceToTarget, scrollRootElement, }) {
+    var _a, _b;
+    const elementReferences = [
+        ...(elementReferenceToTarget ? [elementReferenceToTarget] : []),
+        ...(scrollRootElement ? [scrollRootElement] : []),
+        ...elementReferencesToCalculate,
+    ];
+    const { cleanupGeneratedSelectors, selectors } = await (0, generate_safe_selectors_1.generateSafeSelectors)({
+        context: driver.currentContext,
+        elementReferences,
+    });
+    let selectorsToCalculate = selectors;
+    let regionToTarget;
+    let scrollRootSelector;
+    if (elementReferenceToTarget) {
+        if (!((_a = selectorsToCalculate[0]) === null || _a === void 0 ? void 0 : _a.safeSelector))
+            throw new Error('Target element not found');
+        regionToTarget = selectorsToCalculate[0].safeSelector;
+        selectorsToCalculate = selectorsToCalculate.slice(1);
+    }
+    if (scrollRootElement) {
+        scrollRootSelector = (_b = selectorsToCalculate[0].safeSelector) !== null && _b !== void 0 ? _b : undefined;
+        selectorsToCalculate = selectorsToCalculate.slice(1);
+    }
+    return { cleanupGeneratedSelectors, selectorsToCalculate, regionToTarget, scrollRootSelector };
+}
+exports.calculateRegions = calculateRegions;

package/dist/ufg/utils/take-dom-snapshots.js

@@ -33,10 +33,12 @@ exports.takeDomSnapshots = void 0;
 const take_dom_snapshot_1 = require("./take-dom-snapshot");
 const utils = __importStar(require("@applitools/utils"));
 const chalk_1 = __importDefault(require("chalk"));
+const calculate_regions_1 = require("./calculate-regions");
 __exportStar(require("./take-dom-snapshot"), exports);
 async function takeDomSnapshots({ driver, settings, hooks, provides, logger, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const currentContext = driver.currentContext;
+    let calculateRegionsResults = {};
     const waitBeforeCapture = async () => {
         if (utils.types.isFunction(settings.waitBeforeCapture)) {
             await settings.waitBeforeCapture();
@@ -46,14 +48,21 @@ async function takeDomSnapshots({ driver, settings, hooks, provides, logger, })
         }
     };
     await ((_a = hooks === null || hooks === void 0 ? void 0 : hooks.beforeSnapshots) === null || _a === void 0 ? void 0 : _a.call(hooks));
+    if (!((_b = settings.layoutBreakpoints) === null || _b === void 0 ? void 0 : _b.reload) && settings.calculateRegionsOptions) {
+        calculateRegionsResults = await (0, calculate_regions_1.calculateRegions)({
+            ...settings.calculateRegionsOptions,
+            driver,
+        });
+    }
     if (!settings.layoutBreakpoints) {
         logger.log(`taking single dom snapshot`);
-        await ((_b = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _b === void 0 ? void 0 : _b.call(hooks));
+        await ((_c = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _c === void 0 ? void 0 : _c.call(hooks));
         await waitBeforeCapture();
         const snapshot = await (0, take_dom_snapshot_1.takeDomSnapshot)({ context: currentContext, settings, logger });
-        return Array(settings.renderers.length).fill(snapshot);
+        await ((_d = calculateRegionsResults === null || calculateRegionsResults === void 0 ? void 0 : calculateRegionsResults.cleanupGeneratedSelectors) === null || _d === void 0 ? void 0 : _d.call(calculateRegionsResults));
+        return Array(settings.renderers.length).fill({ snapshot, ...calculateRegionsResults });
     }
-    const isStrictBreakpoints = utils.types.isArray((_c = settings.layoutBreakpoints) === null || _c === void 0 ? void 0 : _c.breakpoints);
+    const isStrictBreakpoints = utils.types.isArray((_e = settings.layoutBreakpoints) === null || _e === void 0 ? void 0 : _e.breakpoints);
     const requiredWidths = await settings.renderers.reduce(async (prev, renderer, index) => {
         const { name, width } = (await extractRendererInfo({ renderer }));
         const requiredWidths = await prev;
@@ -78,13 +87,15 @@ async function takeDomSnapshots({ driver, settings, hooks, provides, logger, })
     logger.log(`taking multiple dom snapshots for breakpoints:`, settings.layoutBreakpoints.breakpoints);
     logger.log(`required widths: ${[...requiredWidths.keys()].join(', ')}`);
     const viewportSize = await driver.getViewportSize();
-    const snapshots = Array(settings.renderers.length);
+    const snapshotsResults = Array(settings.renderers.length);
     if (requiredWidths.has(viewportSize.width)) {
         logger.log(`taking dom snapshot for existing width ${viewportSize.width}`);
-        await ((_d = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _d === void 0 ? void 0 : _d.call(hooks));
+        await ((_f = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _f === void 0 ? void 0 : _f.call(hooks));
         await waitBeforeCapture();
         const snapshot = await (0, take_dom_snapshot_1.takeDomSnapshot)({ context: currentContext, settings, logger });
-        requiredWidths.get(viewportSize.width).forEach(({ index }) => (snapshots[index] = snapshot));
+        requiredWidths.get(viewportSize.width).forEach(({ index }) => {
+            snapshotsResults[index] = { snapshot, ...calculateRegionsResults };
+        });
     }
     for (const [requiredWidth, browsersInfo] of requiredWidths.entries()) {
         logger.log(`taking dom snapshot for width ${requiredWidth}`);
@@ -93,6 +104,12 @@ async function takeDomSnapshots({ driver, settings, hooks, provides, logger, })
             if (settings.layoutBreakpoints.reload) {
                 await driver.reloadPage();
                 await waitBeforeCapture();
+                if (settings.calculateRegionsOptions) {
+                    calculateRegionsResults = await (0, calculate_regions_1.calculateRegions)({
+                        ...settings.calculateRegionsOptions,
+                        driver,
+                    });
+                }
             }
         }
         catch (err) {
@@ -111,17 +128,22 @@ async function takeDomSnapshots({ driver, settings, hooks, provides, logger, })
                 logger.log(message);
             }
         }
-        await ((_e = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _e === void 0 ? void 0 : _e.call(hooks));
+        await ((_g = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _g === void 0 ? void 0 : _g.call(hooks));
         await waitBeforeCapture();
         const snapshot = await (0, take_dom_snapshot_1.takeDomSnapshot)({ context: currentContext, settings, logger });
-        browsersInfo.forEach(({ index }) => (snapshots[index] = snapshot));
+        browsersInfo.forEach(({ index }) => {
+            snapshotsResults[index] = { snapshot, ...calculateRegionsResults };
+        });
     }
     await driver.setViewportSize(viewportSize);
     if (settings.layoutBreakpoints.reload) {
         await driver.reloadPage();
         await waitBeforeCapture();
     }
-    return snapshots;
+    else {
+        (_h = calculateRegionsResults === null || calculateRegionsResults === void 0 ? void 0 : calculateRegionsResults.cleanupGeneratedSelectors) === null || _h === void 0 ? void 0 : _h.call(calculateRegionsResults);
+    }
+    return snapshotsResults;
     function calculateBreakpoint({ breakpoints, value }) {
         const nextBreakpointIndex = breakpoints
             .sort((item1, item2) => (item1 > item2 ? 1 : -1))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/core",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "homepage": "https://applitools.com",
   "bugs": {
     "url": "https://github.com/applitools/eyes.sdk.javascript1/issues"

package/types/ufg/types.d.ts

@@ -1,12 +1,21 @@
-import type { MaybeArray } from '@applitools/utils';
+import type { MaybeArray, Region } from '@applitools/utils';
 import type * as AutomationCore from '../automation/types';
-import { type SpecType } from '@applitools/driver';
+import { type Selector, type SpecType } from '@applitools/driver';
 import { type Logger } from '@applitools/logger';
 import { type Proxy } from '@applitools/req';
 import { type UFGClient, type UFGClientSettings, type DomSnapshot, type AndroidSnapshot, type IOSSnapshot } from '@applitools/ufg-client';
 export * from '../automation/types';
-export type SnapshotTarget = MaybeArray<DomSnapshot> | MaybeArray<AndroidSnapshot> | MaybeArray<IOSSnapshot>;
+export type SnapshotTarget = MaybeArray<SnapshotResult<DomSnapshot>> | MaybeArray<AndroidSnapshot> | MaybeArray<IOSSnapshot>;
 export type Target<TSpec extends SpecType> = SnapshotTarget | AutomationCore.Target<TSpec>;
+export type SnapshotResult<TSnapshotType extends DomSnapshot | AndroidSnapshot | IOSSnapshot> = {
+    snapshot: TSnapshotType;
+    selectorsToCalculate?: {
+        originalSelector: Selector | null;
+        safeSelector: Selector | null;
+    }[];
+    regionToTarget?: Selector | Region;
+    scrollRootSelector?: Selector;
+};
 export interface Core<TSpec extends SpecType> extends AutomationCore.Core<TSpec> {
     readonly type: 'ufg';
     getUFGClient(options?: {

package/types/ufg/utils/calculate-regions.d.ts

@@ -0,0 +1,22 @@
+import type { SpecType, Driver, ElementReference } from '@applitools/driver';
+export type CalculateRegionsOptions = {
+    elementReferencesToCalculate: ElementReference<SpecType>[];
+    elementReferenceToTarget?: ElementReference<SpecType>;
+    scrollRootElement?: ElementReference<SpecType>;
+};
+export declare function calculateRegions<TSpec extends SpecType>({ driver, elementReferencesToCalculate, elementReferenceToTarget, scrollRootElement, }: {
+    driver: Driver<TSpec>;
+} & CalculateRegionsOptions): Promise<{
+    cleanupGeneratedSelectors: () => Promise<void>;
+    selectorsToCalculate: ({
+        safeSelector: null;
+        originalSelector: null;
+        elementReference: ElementReference<TSpec>;
+    } | {
+        safeSelector: import("@applitools/driver").CommonSelector;
+        originalSelector: import("@applitools/driver").CommonSelector | null;
+        elementReference: ElementReference<TSpec>;
+    })[];
+    regionToTarget: import("@applitools/driver").CommonSelector | undefined;
+    scrollRootSelector: import("@applitools/driver").CommonSelector | undefined;
+}>;

package/types/ufg/utils/take-dom-snapshots.d.ts

@@ -1,8 +1,10 @@
-import type { Size } from '@applitools/utils';
+import { type Size } from '@applitools/utils';
 import { type Logger } from '@applitools/logger';
 import { type SpecType, type Driver } from '@applitools/driver';
 import { type DomSnapshot, type Renderer } from '@applitools/ufg-client';
 import { type DomSnapshotSettings } from './take-dom-snapshot';
+import { type CalculateRegionsOptions } from './calculate-regions';
+import { SnapshotResult } from '../types';
 export * from './take-dom-snapshot';
 export type DomSnapshotsSettings = DomSnapshotSettings & {
     renderers: Renderer[];
@@ -11,6 +13,7 @@ export type DomSnapshotsSettings = DomSnapshotSettings & {
         breakpoints: number[] | boolean;
         reload?: boolean;
     };
+    calculateRegionsOptions?: CalculateRegionsOptions;
 };
 export declare function takeDomSnapshots<TSpec extends SpecType>({ driver, settings, hooks, provides, logger, }: {
     driver: Driver<TSpec>;
@@ -24,4 +27,4 @@ export declare function takeDomSnapshots<TSpec extends SpecType>({ driver, setti
         getIOSDevices(): Promise<Record<string, Record<string, Size>>>;
     };
     logger: Logger;
-}): Promise<DomSnapshot[]>;
+}): Promise<SnapshotResult<DomSnapshot>[]>;