Merge pull request #116 from LambdaTest/stage

Release 4.0.1

Author: pinanks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdatest/smartui-cli",
-  "version": "4.0.0", 
+  "version": "4.0.1",
   "description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",
   "files": [
     "dist/**/*"
@@ -21,10 +21,10 @@
   "author": "LambdaTest <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@playwright/browser-chromium": "^1.40.1",
-    "@playwright/browser-firefox": "^1.40.1",
-    "@playwright/browser-webkit": "^1.40.1",
-    "@playwright/test": "^1.40.1",
+    "@playwright/browser-chromium": "^1.45.3",
+    "@playwright/browser-firefox": "^1.45.3",
+    "@playwright/browser-webkit": "^1.45.3",
+    "@playwright/test": "^1.45.3",
     "@types/cross-spawn": "^6.0.4",
     "@types/node": "^20.8.9",
     "@types/which": "^3.0.2",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ export default {
     FILE_EXTENSION_ZIP: '.zip',
     FILE_EXTENSION_GIFS: 'gif',
 
+    // Default scrollTime
+    DEFAULT_SCROLL_TIME: 8,
+
     // Magic Numbers 
     MAGIC_NUMBERS: [
         { ext: 'jpg', magic: Buffer.from([0xFF, 0xD8, 0xFF]) },

src/lib/constants.ts

@@ -67,6 +67,8 @@ export default (options: Record<string, string>): Context => {
             waitForPageRender: config.waitForPageRender || 0,
             waitForTimeout: config.waitForTimeout || 0,
             enableJavaScript: config.enableJavaScript || false,
+            cliEnableJavaScript: config.cliEnableJavaScript || true,
+            scrollTime: config.scrollTime || constants.DEFAULT_SCROLL_TIME,
             allowedHostnames: config.allowedHostnames || []
         },
         uploadFilePath: '',

src/lib/ctx.ts

@@ -1,6 +1,6 @@
 import { Snapshot, Context, ProcessedSnapshot } from "../types.js";
 import { scrollToBottomAndBackToTop, getRenderViewports } from "./utils.js"
-import { firefox, Locator } from "@playwright/test"
+import { chromium, Locator } from "@playwright/test"
 import constants from "./constants.js";
 import { updateLogContext } from '../lib/logger.js'
 
@@ -82,13 +82,13 @@ async function processSnapshot(snapshot: Snapshot, ctx: Context): Promise<Record
 
     let launchOptions: Record<string, any> = { headless: true }
     let contextOptions: Record<string, any> = {
-        javaScriptEnabled: ctx.config.enableJavaScript,
+        javaScriptEnabled: ctx.config.cliEnableJavaScript,
         userAgent: constants.CHROME_USER_AGENT,
     }
     if (!ctx.browser?.isConnected()) {
         if (ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY) launchOptions.proxy = { server: ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY };
-        ctx.browser = await firefox.launch(launchOptions);
-        ctx.log.debug(`Firefox launched with options ${JSON.stringify(launchOptions)}`);
+        ctx.browser = await chromium.launch(launchOptions);
+        ctx.log.debug(`Chromium launched with options ${JSON.stringify(launchOptions)}`);
     }
     const context = await ctx.browser.newContext(contextOptions);
     ctx.log.debug(`Browser context created with options ${JSON.stringify(contextOptions)}`);
@@ -198,8 +198,21 @@ async function processSnapshot(snapshot: Snapshot, ctx: Context): Promise<Record
 
     // process for every viewport
     let navigated: boolean = false;
+    let previousDeviceType: string | null = null;
     let renderViewports = getRenderViewports(ctx);
-    for (const { viewport, viewportString, fullPage } of renderViewports) {
+
+    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
+        if (previousDeviceType !== null && previousDeviceType !== device) {
+            // If the device type has changed, reset `navigated` to false
+            // This indicates that we haven't navigated to the required page for the new device type yet
+            navigated = false;
+        }
+
+        // Update `previousDeviceType` to the current device type for comparison in the next iteration
+        previousDeviceType = device;
+
         await page.setViewportSize({ width: viewport.width, height: viewport.height ||  MIN_VIEWPORT_HEIGHT });
         ctx.log.debug(`Page resized to ${viewport.width}x${viewport.height ||  MIN_VIEWPORT_HEIGHT}`);
 
@@ -219,14 +232,16 @@ async function processSnapshot(snapshot: Snapshot, ctx: Context): Promise<Record
             }
 
         }
-        if (ctx.config.enableJavaScript && fullPage) await page.evaluate(scrollToBottomAndBackToTop);
+        if (ctx.config.cliEnableJavaScript && fullPage) await page.evaluate(scrollToBottomAndBackToTop, { frequency: 100, timing: ctx.config.scrollTime });
 
         try {
             await page.waitForLoadState('networkidle', { timeout: 5000 });
             ctx.log.debug('Network idle 500ms');
         } catch (error) {
             ctx.log.debug(`Network idle failed due to ${error}`);
         }
+
+        await new Promise(r => setTimeout(r, 1000));
 
         // snapshot options
         if (processedOptions.element) {

src/lib/processSnapshot.ts

@@ -109,6 +109,16 @@ const ConfigSchema = {
             type: "boolean",
             errorMessage: "Invalid config; enableJavaScript must be true/false"
         },
+        cliEnableJavaScript: {
+            type: "boolean",
+            errorMessage: "Invalid config; cliEnableJavaScript must be true/false"
+        },
+        scrollTime: {
+            type: "number",
+            minimum: 1,
+            maximum: 1000,
+            errorMessage: "Invalid config; scrollTime must be > 1 and <= 1000"
+        },
         allowedHostnames: {
             type: "array",
             items: {

src/lib/schemaValidation.ts

@@ -118,10 +118,13 @@ export function getMobileRenderViewports(ctx: Context): Record<string,any> {
 }
 
 export function getRenderViewports(ctx: Context): Array<Record<string,any>> {
-    let mobileRenderViewports = getMobileRenderViewports(ctx)
+    let mobileRenderViewports = getMobileRenderViewports(ctx);
+    let webRenderViewports = getWebRenderViewports(ctx);
+    
+    // Combine arrays ensuring web viewports are first
     return [
-        ...getWebRenderViewports(ctx),
+        ...webRenderViewports,
         ...mobileRenderViewports[constants.MOBILE_OS_IOS],
         ...mobileRenderViewports[constants.MOBILE_OS_ANDROID]
     ];
-}
+}

src/lib/utils.ts

@@ -20,6 +20,8 @@ export interface Context {
         waitForPageRender: number;
         waitForTimeout: number;
         enableJavaScript: boolean;
+        cliEnableJavaScript: boolean;
+        scrollTime: number;
         allowedHostnames: Array<string>;
     };
     uploadFilePath: string;