Merge pull request #457 from LambdaTest/stage

Release PR: new scroll mechanism

Author: parthlambdatest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdatest/smartui-cli",
-  "version": "4.1.51",
+  "version": "4.1.52",
   "description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",
   "files": [
     "dist/**/*"

src/lib/ctx.ts

@@ -1,4 +1,4 @@
-import { Context, Env, WebConfig, MobileConfig, basicAuth, tunnelConfig } from '../types.js'
+import { Context, Env, WebConfig, MobileConfig, basicAuth, tunnelConfig, lazyLoadConfig } from '../types.js'
 import constants from './constants.js'
 import { version } from '../../package.json'
 import { validateConfig, validateConfigForScheduled } from './schemaValidation.js'
@@ -13,6 +13,7 @@ export default (options: Record<string, string>): Context => {
     let webConfig: WebConfig;
     let mobileConfig: MobileConfig;
     let basicAuthObj: basicAuth
+    let lazyLoadConfigObj: lazyLoadConfig
     let tunnelObj: tunnelConfig
     let config = constants.DEFAULT_CONFIG;
     let port: number;
@@ -123,6 +124,9 @@ export default (options: Record<string, string>): Context => {
     if (config.basicAuthorization) {
         basicAuthObj = config.basicAuthorization;
     }
+    if (config.lazyLoadConfiguration) {
+        lazyLoadConfigObj = config.lazyLoadConfiguration;
+    }
     if (config.tunnel) {
         tunnelObj = config.tunnel;
     }
@@ -163,6 +167,7 @@ export default (options: Record<string, string>): Context => {
             allowedHostnames: config.allowedHostnames || [],
             allowedAssets: config.allowedAssets || [],
             basicAuthorization: basicAuthObj,
+            lazyLoadConfiguration: lazyLoadConfigObj,
             smartIgnore: config.smartIgnore ?? false,
             delayedUpload: config.delayedUpload ?? false,
             useGlobalCache: config.useGlobalCache ?? false,

src/lib/processSnapshot.ts

@@ -1,5 +1,5 @@
 import { Snapshot, Context, DiscoveryErrors } from "../types.js";
-import { scrollToBottomAndBackToTop, getRenderViewports, getRenderViewportsForOptions, validateCoordinates, resolveCustomCSS, parseCSSFile, validateCSSSelectors, generateCSSInjectionReport } from "./utils.js"
+import { scrollToBottomAndBackToTop, smoothScrollToBottom, getRenderViewports, getRenderViewportsForOptions, validateCoordinates, resolveCustomCSS, parseCSSFile, validateCSSSelectors, generateCSSInjectionReport } from "./utils.js"
 import { chromium, Locator } from "@playwright/test"
 import constants from "./constants.js";
 import { updateLogContext } from '../lib/logger.js'
@@ -169,6 +169,21 @@ export async function prepareSnapshot(snapshot: Snapshot, ctx: Context): Promise
         processedOptions.useExtendedViewport = true;
     }
 
+    if (ctx.config.lazyLoadConfiguration && ctx.config.lazyLoadConfiguration.enabled) {
+        let stepValue = ctx.config.lazyLoadConfiguration.scrollStep || 250;
+        let delayValue = ctx.config.lazyLoadConfiguration.scrollDelay || 100;
+        let maxScrollsValue = ctx.config.lazyLoadConfiguration.maxScrolls || 50;
+        let jumpBackToTopValue = ctx.config.lazyLoadConfiguration.jumpBackToTop !== false;
+        //Add this in processed options inside lazyLoadConfiguration key
+        processedOptions.lazyLoadConfiguration = {
+            enabled: true,
+            scrollStep: stepValue,
+            scrollDelay: delayValue,
+            maxScrolls: maxScrollsValue,
+            jumpBackToTop: jumpBackToTopValue
+        };
+    }
+
     try {
         if (options?.customCSS) {
             const resolvedCSS = resolveCustomCSS(options.customCSS, '', ctx.log);
@@ -654,6 +669,21 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
         renderViewports = getRenderViewports(ctx);
     }
 
+    if (ctx.config.lazyLoadConfiguration && ctx.config.lazyLoadConfiguration.enabled) {
+        let stepValue = ctx.config.lazyLoadConfiguration.scrollStep || 250;
+        let delayValue = ctx.config.lazyLoadConfiguration.scrollDelay || 100;
+        let maxScrollsValue = ctx.config.lazyLoadConfiguration.maxScrolls || 50;
+        let jumpBackToTopValue = ctx.config.lazyLoadConfiguration.jumpBackToTop || false;
+        //Add this in processed options inside lazyLoadConfiguration key
+        processedOptions.lazyLoadConfiguration = {
+            enabled: true,
+            scrollStep: stepValue,
+            scrollDelay: delayValue,
+            maxScrolls: maxScrollsValue,
+            jumpBackToTop: jumpBackToTopValue
+        };
+    }
+
     for (const { viewport, viewportString, fullPage, device } of renderViewports) {
 
         // Check if this is the first iteration or if the device type has changed from the previous iteration
@@ -707,7 +737,19 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
             }
 
         }
-        if (ctx.config.cliEnableJavaScript && fullPage) await page.evaluate(scrollToBottomAndBackToTop, { frequency: 100, timing: ctx.config.scrollTime });
+        if (ctx.config.cliEnableJavaScript && fullPage) { 
+            if (ctx.config.lazyLoadConfiguration && ctx.config.lazyLoadConfiguration.enabled) {
+                let stepValue = ctx.config.lazyLoadConfiguration.scrollStep || 250;
+                let delayValue = ctx.config.lazyLoadConfiguration.scrollDelay || 300;
+                let maxScrollsValue = ctx.config.lazyLoadConfiguration.maxScrolls || 50;
+                let jumpBackToTopValue = ctx.config.lazyLoadConfiguration.jumpBackToTop !== false;
+                ctx.log.debug('Starting lazy load scrolling with configuration: ' + JSON.stringify({ step: stepValue, delay: delayValue, maxScrolls: maxScrollsValue, jumpBackToTop: jumpBackToTopValue }));
+                await page.evaluate(smoothScrollToBottom, { step: stepValue, delay: delayValue, maxScrolls: maxScrollsValue, jumpBackToTop: jumpBackToTopValue });
+                ctx.log.debug('Completed lazy load scrolling');
+            } else {
+                await page.evaluate(scrollToBottomAndBackToTop, { frequency: 100, timing: ctx.config.scrollTime });
+            }
+        }
 
         try {
             await page.waitForLoadState('networkidle', { timeout: 15000 });

src/lib/schemaValidation.ts

@@ -175,6 +175,39 @@ const ConfigSchema = {
                 },
             }
         },
+        lazyLoadConfiguration: {
+            type: "object",
+            properties: {
+                enabled: {
+                    type: "boolean",
+                    errorMessage: "Invalid config; lazyLoad enabled must be true/false"
+                },
+                scrollStep: {
+                    type: "number",
+                    minimum: 50,
+                    maximum: 2000,
+                    errorMessage: "Invalid config; lazyLoad scrollStep must be > 50 and <= 2000"
+                },
+                scrollDelay: {
+                    type: "number",
+                    minimum: 100,
+                    maximum: 5000,
+                    errorMessage: "Invalid config; lazyLoad scrollDelay must be > 100 and <= 5000"
+                },
+                maxScrolls: {
+                    type: "number",
+                    minimum: 1,
+                    maximum: 100,
+                    errorMessage: "Invalid config; lazyLoad maxScrolls must be > 1 and <= 100"
+                },
+                jumpBackToTop: {
+                    type: "boolean",    
+                    errorMessage: "Invalid config; lazyLoad jumpBackToTop must be true/false"
+                }
+            },
+            required: ["enabled"],
+            additionalProperties: false
+        },
         delayedUpload: {
             type: "boolean",
             errorMessage: "Invalid config; delayedUpload must be true/false"

src/lib/utils.ts

@@ -58,6 +58,40 @@ export function scrollToBottomAndBackToTop({
     });
 }
 
+export function smoothScrollToBottom({
+  step = 250,
+  delay = 300,
+  maxScrolls = 50,
+  jumpBackToTop = true
+} = {}): Promise<void> {
+  return new Promise((resolve) => {
+    let totalHeight = document.body.scrollHeight;
+    let currentScroll = window.scrollY;
+    let scrollCount = 0;
+
+    function scroll() {
+      if (currentScroll + window.innerHeight >= totalHeight || scrollCount >= maxScrolls) {
+        if (jumpBackToTop) {
+          window.scrollTo(0, 0);
+        }
+        resolve();
+        return;
+      }
+
+      window.scrollBy(0, step);
+      scrollCount++;
+
+      setTimeout(() => {
+        currentScroll = window.scrollY;
+        totalHeight = document.body.scrollHeight;
+        scroll();
+      }, delay);
+    }
+
+    scroll();
+  });
+}
+
 export async function launchBrowsers(ctx: Context): Promise<Record<string, Browser>> {
     let browsers: Record<string, Browser> = {};
     const isHeadless = process.env.HEADLESS?.toLowerCase() === 'false' ? false : true;

src/types.ts

@@ -27,6 +27,7 @@ export interface Context {
         allowedHostnames: Array<string>;
         allowedAssets: Array<string>;
         basicAuthorization: basicAuth | undefined;
+        lazyLoadConfiguration: lazyLoadConfig | undefined;
         smartIgnore: boolean;
         delayedUpload: boolean;
         useGlobalCache: boolean;
@@ -255,6 +256,14 @@ export interface basicAuth {
     password: string;
 }
 
+export interface lazyLoadConfig {
+    enabled: boolean;
+    scrollStep: number;
+    scrollDelay: number;
+    maxScrolls: number;
+    jumpBackToTop: boolean;
+}
+
 export interface tunnelConfig {
     type: string;
     tunnelName: string;