@applitools/core 2.5.2 → 2.5.3-legacy

package/dist/ufg/open-eyes.js

@@ -28,81 +28,57 @@ const driver_1 = require("@applitools/driver");
 const get_base_eyes_1 = require("./get-base-eyes");
 const check_1 = require("./check");
 const check_and_close_1 = require("./check-and-close");
-const close_1 = require("./close");
-const abort_1 = require("./abort");
-const get_results_1 = require("./get-results");
+const close_1 = require("../automation/close");
+const abort_1 = require("../automation/abort");
+const get_results_1 = require("../automation/get-results");
+const extract_default_environment_1 = require("./utils/extract-default-environment");
 const abort_controller_1 = require("abort-controller");
 const utils = __importStar(require("@applitools/utils"));
-function makeOpenEyes({ core, spec, logger: defaultLogger }) {
-    return async function openEyes({ target, settings, base, logger = defaultLogger, }) {
-        var _a, _b;
-        logger.log(`Command "openEyes" is called with ${target ? 'default driver and' : ''}`, ...(settings ? ['settings', settings] : []), base ? 'predefined eyes' : '');
+function makeOpenEyes({ core, spec, logger: mainLogger }) {
+    return async function openEyes({ target, settings, storage = new Map(), logger = mainLogger, }) {
+        var _a, _b, _c;
+        logger = logger.extend(mainLogger);
+        logger.log(`Command "openEyes" is called with ${target ? 'default driver' : ''}`, ...(settings ? ['and settings', settings] : []), storage.size > 0 ? 'and default eyes storage' : '');
         const driver = target && (await (0, driver_1.makeDriver)({ spec, driver: target, logger }));
-        if (driver && !base) {
-            const environment = await (driver === null || driver === void 0 ? void 0 : driver.getEnvironment());
-            const currentContext = driver.currentContext;
-            (_a = settings.environment) !== null && _a !== void 0 ? _a : (settings.environment = {});
-            if (environment.isEC) {
-                settings.environment.ecSessionId = (_b = (await driver.getSessionId())) !== null && _b !== void 0 ? _b : undefined;
-            }
-            if (settings.environment.viewportSize) {
+        if (driver && storage.size === 0) {
+            const environment = await driver.getEnvironment();
+            if (((_a = settings.environment) === null || _a === void 0 ? void 0 : _a.viewportSize) && !environment.isMobile) {
                 await driver.setViewportSize(settings.environment.viewportSize);
             }
-            await currentContext.focus();
+            (_b = settings.environment) !== null && _b !== void 0 ? _b : (settings.environment = {});
+            if (environment.isEC) {
+                settings.environment.ecSessionId = (_c = (await driver.getSessionId())) !== null && _c !== void 0 ? _c : undefined;
+            }
         }
+        const environments = await (0, extract_default_environment_1.extractDefaultEnvironments)({ driver });
         const controller = new abort_controller_1.AbortController();
+        const { signal } = controller;
         const account = await core.getAccountInfo({ settings, logger });
         return utils.general.extend({}, eyes => {
-            var _a;
-            const storage = new Map();
-            let running = true;
+            var _a, _b, _c, _d;
             return {
                 type: 'ufg',
                 core,
                 test: {
                     userTestId: settings.userTestId,
                     batchId: (_a = settings.batch) === null || _a === void 0 ? void 0 : _a.id,
+                    batchBuildId: (_b = settings.batch) === null || _b === void 0 ? void 0 : _b.buildId,
                     keepBatchOpen: settings.keepBatchOpen,
-                    server: account.server,
-                    ufgServer: account.ufgServer,
+                    eyesServer: account.eyesServer,
+                    ufgServer: { ...account.ufgServer, ufgServerUrl: (_c = settings.ufgServerUrl) !== null && _c !== void 0 ? _c : (_d = account.ufgServer) === null || _d === void 0 ? void 0 : _d.ufgServerUrl },
+                    uploadUrl: account.uploadUrl,
+                    stitchingServiceUrl: account.stitchingServiceUrl,
+                    supportedEnvironmentsUrl: account.supportedEnvironmentsUrl,
                     account,
                 },
-                get running() {
-                    return running;
-                },
-                getBaseEyes: (0, get_base_eyes_1.makeGetBaseEyes)({ settings, eyes, base, logger }),
-                // check with indexing and storage
-                check: utils.general.wrap((0, check_1.makeCheck)({ eyes, target: driver, spec, signal: controller.signal, logger }), async (check, options = {}) => {
-                    const results = await check(options);
-                    results.forEach(result => {
-                        var _a;
-                        const key = JSON.stringify(result.renderer);
-                        storage.set(key, [...((_a = storage.get(key)) !== null && _a !== void 0 ? _a : []), result.promise]);
-                    });
-                    return results;
-                }),
-                checkAndClose: utils.general.wrap((0, check_and_close_1.makeCheckAndClose)({ eyes, target: driver, spec, signal: controller.signal, logger }), async (checkAndClose, options = {}) => {
-                    const results = await checkAndClose(options);
-                    results.forEach(result => {
-                        var _a;
-                        const key = JSON.stringify(result.renderer);
-                        storage.set(key, [...((_a = storage.get(key)) !== null && _a !== void 0 ? _a : []), { eyes: result.eyes, renderer: result.renderer }]);
-                    });
-                    return results;
-                }),
-                close: utils.general.wrap((0, close_1.makeClose)({ storage, target: driver, logger }), async (close, options) => {
-                    if (!running)
-                        return;
-                    running = false;
-                    return close(options);
-                }),
-                abort: utils.general.wrap((0, abort_1.makeAbort)({ storage, target: driver, spec, controller, logger }), async (abort, options) => {
-                    if (!running)
-                        return;
-                    running = false;
-                    return abort(options);
-                }),
-                getResults: (0, get_results_1.makeGetResults)({ storage, logger }),
+                running: true,
+                storage,
+                getBaseEyes: (0, get_base_eyes_1.makeGetBaseEyes)({ settings, eyes, logger }),
+                check: (0, check_1.makeCheck)({ eyes, target: driver, environments, spec, signal, logger }),
+                checkAndClose: (0, check_and_close_1.makeCheckAndClose)({ eyes, target: driver, environments, spec, signal, logger }),
+                close: (0, close_1.makeClose)({ eyes, driver, logger }),
+                abort: (0, abort_1.makeAbort)({ eyes, driver, controller, logger }),
+                getResults: (0, get_results_1.makeGetResults)({ eyes, logger }),
             };
         });
     };

package/dist/ufg/take-snapshots.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTakeSnapshots = void 0;
+const driver_1 = require("@applitools/driver");
+const take_dom_snapshots_1 = require("./utils/take-dom-snapshots");
+const to_safe_check_settings_1 = require("./utils/to-safe-check-settings");
+const to_generated_selectors_1 = require("./utils/to-generated-selectors");
+const abort_error_1 = require("../errors/abort-error");
+function makeTakeSnapshots({ core, spec, signal, logger: mainLogger }) {
+    return async function takeSnapshots({ driver, settings = {}, account, logger = mainLogger, }) {
+        var _a;
+        logger = logger.extend(mainLogger);
+        logger.log('Command "takeSnapshots" is called with settings', settings);
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            logger.warn('Command "takeSnapshots" was called after test was already aborted');
+            throw new abort_error_1.AbortError('Command "takeSnapshots" was called after test was already aborted');
+        }
+        const uniqueEnvironments = settings.environments;
+        if (!driver)
+            throw new Error('Cannot create check snapshot without a driver');
+        const environment = await driver.getEnvironment();
+        const currentContext = driver.currentContext;
+        await currentContext.setScrollingElement((_a = settings.scrollRootElement) !== null && _a !== void 0 ? _a : null);
+        const { elementReferences, getSafeCheckSettings } = (0, to_safe_check_settings_1.toSafeCheckSettings)({ settings });
+        const { elementReferencesToMark, getGeneratedSelectors } = (0, to_generated_selectors_1.toGeneratedSelectors)({
+            elementReferences,
+            logger,
+            // dead code - `transformElementReference` was used for NMG but it's not longer used anywhere
+            transformElementReference: elementReference => { var _a; return ((0, driver_1.isSelector)(elementReference) && ((_a = spec === null || spec === void 0 ? void 0 : spec.toSimpleCommonSelector) === null || _a === void 0 ? void 0 : _a.call(spec, elementReference))) || undefined; },
+        });
+        let snapshots;
+        if (environment.isWeb) {
+            const ufgClient = await core.getUFGClient({
+                settings: {
+                    ...account.ufgServer,
+                    eyesServerUrl: account.eyesServer.eyesServerUrl,
+                    apiKey: account.eyesServer.apiKey,
+                },
+                logger,
+            });
+            snapshots = await (0, take_dom_snapshots_1.takeDomSnapshots)({
+                driver,
+                settings: {
+                    waitBeforeCapture: settings.waitBeforeCapture,
+                    disableBrowserFetching: settings.disableBrowserFetching,
+                    layoutBreakpoints: settings.layoutBreakpoints,
+                    environments: uniqueEnvironments,
+                    skipResources: ufgClient.getCachedResourceUrls(),
+                    lazyLoad: settings.lazyLoad,
+                    elementReferences: elementReferencesToMark,
+                },
+                provides: {
+                    getChromeEmulationDevices: ufgClient.getChromeEmulationDevices,
+                    getIOSDevices: ufgClient.getIOSDevices,
+                },
+                logger,
+            });
+        }
+        else {
+            // dead code - used for NMG
+            const nmlClient = await core.getNMLClient({
+                driver,
+                settings: { ...account.eyesServer, supportedEnvironmentsUrl: account.supportedEnvironmentsUrl },
+                logger,
+            });
+            snapshots = await nmlClient.takeSnapshots({
+                settings: {
+                    ...account.eyesServer,
+                    waitBeforeCapture: settings.waitBeforeCapture,
+                    environments: uniqueEnvironments,
+                },
+                logger,
+            });
+        }
+        await currentContext.focus();
+        const url = await driver.getUrl();
+        const title = await driver.getTitle();
+        const userAgent = environment.isWeb ? await driver.getUserAgentLegacy() : undefined;
+        return snapshots.map((snapshot, index) => ({
+            target: snapshot,
+            settings: getSafeCheckSettings({
+                selectors: getGeneratedSelectors(snapshot.generatedSelectors),
+            }),
+            environment: uniqueEnvironments[index],
+            account,
+            url,
+            title,
+            userAgent,
+        }));
+    };
+}
+exports.makeTakeSnapshots = makeTakeSnapshots;

package/dist/ufg/utils/extract-default-environment.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractDefaultEnvironments = void 0;
+async function extractDefaultEnvironments({ driver, }) {
+    if (!driver)
+        return [];
+    const currentContext = driver.currentContext;
+    try {
+        const environment = await driver.getEnvironment();
+        if (environment.isWeb) {
+            const viewportSize = await driver.getViewportSize();
+            return [{ name: 'chrome', ...viewportSize }];
+        }
+        else {
+            return [];
+        }
+    }
+    finally {
+        await currentContext.focus();
+    }
+}
+exports.extractDefaultEnvironments = extractDefaultEnvironments;

package/dist/ufg/utils/generate-safe-selectors.js

@@ -25,39 +25,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSafeSelectors = void 0;
 const utils = __importStar(require("@applitools/utils"));
-const { addElementIds, cleanupElementIds } = require('@applitools/snippets');
+const { addElementIds } = require('@applitools/snippets');
 async function generateSafeSelectors({ context, elementReferences, }) {
-    const mapping = {
-        elements: [],
-        ids: [],
-    };
-    for (const elementReference of elementReferences) {
-        const elements = await context.elements(elementReference);
-        mapping.elements.push(elements);
-        mapping.ids.push(Array(elements.length).fill(utils.general.guid()));
-    }
-    const generatedSelectors = await context.execute(addElementIds, [
-        mapping.elements.flat(),
-        mapping.ids.flat(),
-    ]);
-    let offset = 0;
-    const selectors = mapping.elements.map((elements, index) => {
-        if (elements.length === 0)
-            return { safeSelector: null, originalSelector: null, elementReference: elementReferences[index] };
-        const safeSelector = generatedSelectors[offset].reduceRight((selector, value) => {
-            return selector ? { type: 'css', selector: value, shadow: selector } : { type: 'css', selector: value };
-        }, undefined);
-        offset += elements.length;
-        return { safeSelector, originalSelector: elements[0].commonSelector, elementReference: elementReferences[index] };
-    });
-    return {
-        selectors,
-        cleanupGeneratedSelectors,
-    };
-    async function cleanupGeneratedSelectors() {
-        if (!mapping.elements.length)
-            return;
-        await context.execute(cleanupElementIds, [mapping.elements.flat()]);
+    if (!(elementReferences === null || elementReferences === void 0 ? void 0 : elementReferences.length))
+        return { generatedSelectors: [] };
+    // we can't structure elementsWithIds as object because it's not supported in safari webdriver (https://stackoverflow.com/questions/78953951/ios-safari-webdriver-executescript-fails-to-serialize-objects-with-elements)
+    const elementsWithIds = [];
+    for (const ref of elementReferences) {
+        const elements = await context.elements(ref);
+        elementsWithIds.push([elements, utils.general.guid()]); // same id for all elements that match the same ref
     }
+    return { generatedSelectors: await context.execute(addElementIds, elementsWithIds) };
 }
 exports.generateSafeSelectors = generateSafeSelectors;

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

@@ -23,24 +23,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractCrossFrames = exports.deserializeDomSnapshot = exports.takeDomSnapshot = void 0;
+exports.takeDomSnapshot = void 0;
 const utils = __importStar(require("@applitools/utils"));
-const { getProcessPagePoll, getPollResult, getProcessPagePollForIE, getPollResultForIE, } = require('@applitools/dom-snapshot');
+const { getProcessPagePoll, getPollResult } = require('@applitools/dom-snapshot');
 async function takeDomSnapshot({ context, settings, logger, }) {
+    var _a, _b;
     const driver = context.driver;
     const environment = await driver.getEnvironment();
     const features = await driver.getFeatures();
-    const cookies = features.allCookies ? await driver.getCookies().catch(() => []) : [];
-    const snapshot = deserializeDomSnapshot({ snapshot: await takeContextDomSnapshot({ context }) });
-    snapshot.cookies = cookies;
+    const cookies = (_a = settings === null || settings === void 0 ? void 0 : settings.cookies) !== null && _a !== void 0 ? _a : [];
+    // assumption is that elementReferences are all in the frame which is `context`
+    // otherwise, the elements would still be found inside other frames, but `takeContextDomSnapshot` should be passed only the specific element references that it needs
+    const elements = [];
+    for (const elementReference of (_b = settings === null || settings === void 0 ? void 0 : settings.elementReferences) !== null && _b !== void 0 ? _b : []) {
+        elements.push(await context.elements(elementReference));
+    }
+    const snapshot = transformRawDomSnapshot(await takeContextDomSnapshot({ context }), elements);
+    snapshot.cookies = features.allCookies ? await driver.getCookies().catch(() => []) : cookies; // intentionally fetching cookies after the dom snapshot runs
     return snapshot;
     async function takeContextDomSnapshot({ context }) {
         // logger.log(`taking dom snapshot. ${context._reference ? `context referece: ${JSON.stringify(context._reference)}` : ''}`)
         var _a, _b, _c;
-        if (!features.allCookies) {
-            cookies.push(...(await context.getCookies()));
-        }
-        const isLegacyBrowser = environment.isIE || environment.isEdgeLegacy;
         const arg = {
             dontFetchResources: settings === null || settings === void 0 ? void 0 : settings.disableBrowserFetching,
             skipResources: settings === null || settings === void 0 ? void 0 : settings.skipResources,
@@ -50,14 +53,15 @@ async function takeDomSnapshot({ context, settings, logger, }) {
             serializeResources: true,
             compressResources: false,
             showLogs: settings === null || settings === void 0 ? void 0 : settings.showLogs,
+            elements,
         };
         const scripts = {
             main: features.canExecuteOnlyFunctionScripts
                 ? require('@applitools/dom-snapshot').processPagePoll
-                : `return (${isLegacyBrowser ? await getProcessPagePollForIE() : await getProcessPagePoll()}).apply(null, arguments);`,
+                : `return (${await getProcessPagePoll()}).apply(null, arguments);`,
             poll: features.canExecuteOnlyFunctionScripts
                 ? require('@applitools/dom-snapshot').pollResult
-                : `return (${isLegacyBrowser ? await getPollResultForIE() : await getPollResult()}).apply(null, arguments);`,
+                : `return (${await getPollResult()}).apply(null, arguments);`,
         };
         const snapshot = await context.executePoll(scripts, {
             main: arg,
@@ -65,6 +69,10 @@ async function takeDomSnapshot({ context, settings, logger, }) {
             executionTimeout: (_b = settings === null || settings === void 0 ? void 0 : settings.executionTimeout) !== null && _b !== void 0 ? _b : 5 * 60 * 1000,
             pollTimeout: (_c = settings === null || settings === void 0 ? void 0 : settings.pollTimeout) !== null && _c !== void 0 ? _c : 200,
         });
+        // intentionally fetching cookies after the dom snapshot runs
+        if (!features.allCookies) {
+            cookies.push(...(await context.getCookies()));
+        }
         const crossFrames = extractCrossFrames({ snapshot, logger });
         for (const { reference, parentSnapshot, cdtNode } of crossFrames) {
             const frameContext = await context
@@ -88,28 +96,34 @@ async function takeDomSnapshot({ context, settings, logger, }) {
                 cdtNode.attributes.push({ name: 'data-applitools-src', value: frameSnapshot.url });
             }
         }
-        logger.log(`dom snapshot cdt length: ${snapshot.cdt.length}`);
-        logger.log(`blobs urls (${snapshot.blobs.length}):`, JSON.stringify(snapshot.blobs.map(({ url }) => url)));
-        logger.log(`resource urls (${snapshot.resourceUrls.length}):`, JSON.stringify(snapshot.resourceUrls));
+        logSnapshot(logger, snapshot);
         return snapshot;
     }
 }
 exports.takeDomSnapshot = takeDomSnapshot;
-function deserializeDomSnapshot({ snapshot }) {
-    const { blobs, selector: _, crossFrames: __, ...rest } = snapshot;
-    const deserializedSnapshot = {
+function transformRawDomSnapshot(snapshot, elements) {
+    const { blobs, safeSelectors, selector: _, crossFrames: __, ...rest } = snapshot;
+    const domSnapshot = {
         ...rest,
         resourceContents: blobs.reduce((resourceContents, blob) => {
-            if (blob.value === undefined)
-                return { ...resourceContents, [blob.url]: blob };
-            else
-                return { ...resourceContents, [blob.url]: { ...blob, value: Buffer.from(blob.value, 'base64') } };
+            return {
+                ...resourceContents,
+                [blob.url]: blob,
+            };
         }, {}),
-        frames: snapshot.frames.map(frameSnapshot => deserializeDomSnapshot({ snapshot: frameSnapshot })),
+        frames: snapshot.frames.map(frameSnapshot => transformRawDomSnapshot(frameSnapshot)),
     };
-    return deserializedSnapshot;
+    if (elements === null || elements === void 0 ? void 0 : elements.length) {
+        domSnapshot.generatedSelectors = elements.map((elements, i) => {
+            var _a, _b;
+            return ({
+                originalSelector: (_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.commonSelector) !== null && _b !== void 0 ? _b : null,
+                safeSelector: safeSelectors[i],
+            });
+        });
+    }
+    return domSnapshot;
 }
-exports.deserializeDomSnapshot = deserializeDomSnapshot;
 function extractCrossFrames({ snapshot, parent = null, logger, }) {
     var _a;
     const crossFrames = [snapshot, ...((_a = snapshot.frames) !== null && _a !== void 0 ? _a : [])].flatMap((snapshot, index) => {
@@ -130,7 +144,28 @@ function extractCrossFrames({ snapshot, parent = null, logger, }) {
                 : []),
         ];
     });
-    logger.log(`frames paths for ${snapshot.crossFrames}`, crossFrames.map(selector => JSON.stringify(selector)).join(' , '));
+    logger.log(...(snapshot.crossFrames
+        ? [
+            `dom snapshot - frames paths for ${JSON.stringify(snapshot.crossFrames)}:`,
+            crossFrames.map(selector => ({
+                // we don't want `selector.parentSnapshot` to be logged - the size of it can be huge
+                cdtNode: selector.cdtNode,
+                reference: selector.reference,
+            })),
+        ]
+        : ['dom snapshot - no cross frames found']));
     return crossFrames;
 }
-exports.extractCrossFrames = extractCrossFrames;
+function logSnapshot(logger, snapshot) {
+    try {
+        logger.log(`dom snapshot - cdt length: ${snapshot.cdt.length}`);
+        logger.log(`dom snapshot - blobs urls (${snapshot.blobs.length}):`, JSON.stringify(snapshot.blobs.map(({ url }) => url)));
+        logger.log(`dom snapshot - resource urls (${snapshot.resourceUrls.length}):`, JSON.stringify(snapshot.resourceUrls));
+        logger.log(`dom snapshot - cdt nodes with data-applitools-selector: ${JSON.stringify(snapshot.cdt.filter(node => { var _a; return (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.some(attr => attr.name === 'data-applitools-selector'); }))}`);
+        logger.log('dom snapshot - safeSelectors:', snapshot.safeSelectors);
+        logger.log('dom snapshot - warnings:', snapshot.warnings);
+    }
+    catch (err) {
+        logger.error(`error while logging dom snapshot`, err);
+    }
+}

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

@@ -31,89 +31,120 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.takeDomSnapshots = void 0;
 const take_dom_snapshot_1 = require("./take-dom-snapshot");
-const utils = __importStar(require("@applitools/utils"));
+const generate_safe_selectors_1 = require("./generate-safe-selectors");
+const wait_for_lazy_load_1 = require("../../automation/utils/wait-for-lazy-load");
 const chalk_1 = __importDefault(require("chalk"));
+const utils = __importStar(require("@applitools/utils"));
+const lang = __importStar(require("../../lang"));
 __exportStar(require("./take-dom-snapshot"), exports);
 async function takeDomSnapshots({ driver, settings, hooks, provides, logger, }) {
-    var _a, _b, _c, _d;
+    var _a, _b;
+    // calculating cookies here once so that we (a) don't do it for each dom snapshot, and (b) do it before generating safe selectors
+    const features = await driver.getFeatures();
+    settings.cookies = features.allCookies ? await driver.getCookies().catch(() => []) : [];
+    settings.lazyLoad = settings.lazyLoad !== true ? settings.lazyLoad : {};
     const currentContext = driver.currentContext;
-    const waitBeforeCapture = async () => {
-        if (utils.types.isFunction(settings.waitBeforeCapture)) {
-            await settings.waitBeforeCapture();
-        }
-        else if (settings.waitBeforeCapture) {
-            await utils.general.sleep(settings.waitBeforeCapture);
+    if (!((_a = settings.layoutBreakpoints) === null || _a === void 0 ? void 0 : _a.breakpoints)) {
+        if (settings.lazyLoad) {
+            await (0, wait_for_lazy_load_1.waitForLazyLoad)({ context: currentContext, settings: settings.lazyLoad, logger });
         }
-    };
-    await ((_a = hooks === null || hooks === void 0 ? void 0 : hooks.beforeSnapshots) === null || _a === void 0 ? void 0 : _a.call(hooks));
-    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 waitBeforeCapture();
+        await beforeEachSnapshot();
         const snapshot = await (0, take_dom_snapshot_1.takeDomSnapshot)({ context: currentContext, settings, logger });
-        return Array(settings.renderers.length).fill(snapshot);
+        return Array(settings.environments.length).fill(snapshot);
     }
-    const isStrictBreakpoints = utils.types.isArray(settings.layoutBreakpoints);
-    const requiredWidths = await settings.renderers.reduce(async (prev, renderer, index) => {
-        const { name, width } = (await extractRendererInfo({ renderer }));
+    const isStrictBreakpoints = utils.types.isArray((_b = settings.layoutBreakpoints) === null || _b === void 0 ? void 0 : _b.breakpoints);
+    const requiredWidths = await settings.environments.reduce(async (prev, environment, index) => {
+        const { name, width } = (await extractEnvironmentInfo(environment));
         const requiredWidths = await prev;
         const requiredWidth = isStrictBreakpoints
-            ? calculateBreakpoint({ breakpoints: settings.layoutBreakpoints, value: width })
+            ? calculateBreakpoint({ breakpoints: settings.layoutBreakpoints.breakpoints, value: width })
             : width;
-        let renderers = requiredWidths.get(requiredWidth);
-        if (!renderers)
-            requiredWidths.set(requiredWidth, (renderers = []));
-        renderers.push({ name, width, index });
+        let environments = requiredWidths.get(requiredWidth);
+        if (!environments)
+            requiredWidths.set(requiredWidth, (environments = []));
+        environments.push({ name, width, index });
         return requiredWidths;
     }, Promise.resolve(new Map()));
-    const smallestBreakpoint = Math.min(...(isStrictBreakpoints ? settings.layoutBreakpoints : []));
+    const smallestBreakpoint = Math.min(...(isStrictBreakpoints ? settings.layoutBreakpoints.breakpoints : []));
     if (isStrictBreakpoints && requiredWidths.has(smallestBreakpoint - 1)) {
-        const smallestBrowsers = requiredWidths
-            .get(smallestBreakpoint - 1)
-            .map(({ name, width }) => `(${name}, ${width})`)
-            .join(', ');
-        const message = chalk_1.default.yellow(`The following configuration's viewport-widths are smaller than the smallest configured layout breakpoint (${smallestBreakpoint} pixels): [${smallestBrowsers}]. As a fallback, the resources that will be used for these configurations have been captured on a viewport-width of ${smallestBreakpoint} - 1 pixels. If an additional layout breakpoint is needed for you to achieve better results - please add it to your configuration.`);
-        logger.console.log(message);
+        const message = lang.requestedEnvironmentSmallerThenBreakpointWarning({
+            breakpoint: smallestBreakpoint,
+            browsers: requiredWidths.get(smallestBreakpoint - 1),
+        });
+        logger.console.log(chalk_1.default.yellow(message));
     }
-    logger.log(`taking multiple dom snapshots for breakpoints:`, settings.layoutBreakpoints);
-    logger.log(`required widths: ${[...requiredWidths.keys()].join(', ')}`);
-    const viewportSize = await driver.getViewportSize();
-    const snapshots = Array(settings.renderers.length);
-    if (requiredWidths.has(viewportSize.width)) {
-        logger.log(`taking dom snapshot for existing width ${viewportSize.width}`);
-        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 });
-        requiredWidths.get(viewportSize.width).forEach(({ index }) => (snapshots[index] = snapshot));
+    logger.log(`Taking multiple dom snapshots for the breakpoints`, settings.layoutBreakpoints);
+    const initialViewportSize = await driver.getViewportSize();
+    const entries = [];
+    const initialsBrowsers = requiredWidths.get(initialViewportSize.width);
+    if (initialsBrowsers) {
+        logger.log(`The first dom snapshot is going to be taking for initial viewport size`, initialViewportSize);
+        requiredWidths.delete(initialViewportSize.width);
+        entries.push({ browsers: initialsBrowsers });
     }
-    for (const [requiredWidth, browsersInfo] of requiredWidths.entries()) {
-        logger.log(`taking dom snapshot for width ${requiredWidth}`);
-        try {
-            await driver.setViewportSize({ width: requiredWidth, height: viewportSize.height });
-        }
-        catch (err) {
-            logger.error(err);
-            const actualViewportSize = await driver.getViewportSize();
-            if (isStrictBreakpoints) {
-                const failedBrowsers = browsersInfo.map(({ name, width }) => `(${name}, ${width})`).join(', ');
-                const message = chalk_1.default.yellow(`One of the configured layout breakpoints is ${requiredWidth} pixels, while your local browser has a limit of ${actualViewportSize.width}, so the SDK couldn't resize it to the desired size. As a fallback, the resources that will be used for the following configurations: [${failedBrowsers}] have been captured on the browser's limit (${actualViewportSize.width} pixels). To resolve this, you may use a headless browser as it can be resized to any size.`);
-                logger.console.log(message);
-                logger.log(message);
+    requiredWidths.forEach((browsers, requiredWidth) => entries.push({ viewportSize: { width: requiredWidth, height: initialViewportSize.height }, browsers }));
+    logger.log(`All entries to take dom snapshots for`, entries);
+    // making safe selectors before any resize in order to make sure fallback selectors are created
+    await (0, generate_safe_selectors_1.generateSafeSelectors)({
+        context: currentContext,
+        elementReferences: settings.elementReferences,
+    });
+    const snapshots = Array(settings.environments.length);
+    for (const [index, { viewportSize, browsers }] of entries.entries()) {
+        logger.log(`Taking dom snapshot for viewport size ${viewportSize}`);
+        if (viewportSize) {
+            try {
+                await driver.setViewportSize(viewportSize);
             }
-            else {
-                const failedBrowsers = browsersInfo.map(({ name }) => `(${name})`).join(', ');
-                const message = chalk_1.default.yellow(`The following configurations [${failedBrowsers}] have a viewport-width of ${requiredWidth} pixels, while your local browser has a limit of ${actualViewportSize.width} pixels, so the SDK couldn't resize it to the desired size. As a fallback, the resources that will be used for these checkpoints have been captured on the browser's limit (${actualViewportSize.width} pixels). To resolve this, you may use a headless browser as it can be resized to any size.`);
-                logger.console.log(message);
-                logger.log(message);
+            catch (error) {
+                logger.error(`Failed to set viewport size to ${viewportSize} due to the error`, error);
+                const actualViewportSize = await driver.getViewportSize();
+                if (isStrictBreakpoints) {
+                    const message = lang.breakpointOutOfDriverBoundsWarning({
+                        requiredWidth: viewportSize.width,
+                        actualWidth: actualViewportSize.width,
+                        browsers,
+                    });
+                    logger.console.log(chalk_1.default.yellow(message));
+                    logger.log(message);
+                }
+                else {
+                    const message = lang.requestedEnvironmentOutOfDriverBoundsWarning({
+                        requiredWidth: viewportSize.width,
+                        actualWidth: actualViewportSize.width,
+                        browsers,
+                    });
+                    logger.console.log(chalk_1.default.yellow(message));
+                    logger.log(message);
+                }
             }
         }
-        await ((_d = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _d === void 0 ? void 0 : _d.call(hooks));
-        await waitBeforeCapture();
+        if (settings.layoutBreakpoints.reload)
+            await driver.reloadPage();
+        if (settings.lazyLoad && (index === 0 || settings.layoutBreakpoints.reload)) {
+            await (0, wait_for_lazy_load_1.waitForLazyLoad)({ context: currentContext, settings: settings.lazyLoad, logger });
+        }
+        await beforeEachSnapshot();
         const snapshot = await (0, take_dom_snapshot_1.takeDomSnapshot)({ context: currentContext, settings, logger });
-        browsersInfo.forEach(({ index }) => (snapshots[index] = snapshot));
+        browsers.forEach(({ index }) => (snapshots[index] = snapshot));
+    }
+    await driver.setViewportSize(initialViewportSize);
+    if (settings.layoutBreakpoints.reload) {
+        await driver.reloadPage();
+        await beforeEachSnapshot();
     }
-    await driver.setViewportSize(viewportSize);
     return snapshots;
+    async function beforeEachSnapshot() {
+        var _a, _b;
+        await ((_a = hooks === null || hooks === void 0 ? void 0 : hooks.beforeEachSnapshot) === null || _a === void 0 ? void 0 : _a.call(hooks));
+        if (utils.types.isNumber(settings.waitBeforeCapture)) {
+            await utils.general.sleep(settings.waitBeforeCapture);
+        }
+        else {
+            await ((_b = settings.waitBeforeCapture) === null || _b === void 0 ? void 0 : _b.call(settings));
+        }
+    }
     function calculateBreakpoint({ breakpoints, value }) {
         const nextBreakpointIndex = breakpoints
             .sort((item1, item2) => (item1 > item2 ? 1 : -1))
@@ -125,19 +156,19 @@ async function takeDomSnapshots({ driver, settings, hooks, provides, logger, })
         else
             return breakpoints[nextBreakpointIndex - 1];
     }
-    async function extractRendererInfo({ renderer }) {
-        if (utils.types.has(renderer, ['width', 'height'])) {
-            const { name, width, height } = renderer;
+    async function extractEnvironmentInfo(environment) {
+        if (utils.types.has(environment, ['width', 'height'])) {
+            const { name, width, height } = environment;
             return { name: name !== null && name !== void 0 ? name : 'default', width, height };
         }
-        else if (utils.types.has(renderer, 'chromeEmulationInfo')) {
+        else if (utils.types.has(environment, 'chromeEmulationInfo')) {
             const devices = await provides.getChromeEmulationDevices();
-            const { deviceName, screenOrientation = 'portrait' } = renderer.chromeEmulationInfo;
+            const { deviceName, screenOrientation = 'portrait' } = environment.chromeEmulationInfo;
             return { name: deviceName, screenOrientation, ...devices[deviceName][screenOrientation] };
         }
-        else if (utils.types.has(renderer, 'iosDeviceInfo')) {
+        else if (utils.types.has(environment, 'iosDeviceInfo')) {
             const devices = await provides.getIOSDevices();
-            const { deviceName, screenOrientation = 'portrait' } = renderer.iosDeviceInfo;
+            const { deviceName, screenOrientation = 'portrait' } = environment.iosDeviceInfo;
             return { name: deviceName, screenOrientation, ...devices[deviceName][screenOrientation] };
         }
     }