@lambdatest/smartui-cli 3.0.10 → 3.0.12

package/dist/index.cjs

@@ -4,11 +4,10 @@
 var commander = require('commander');
 var which = require('which');
 var listr2 = require('listr2');
-var chalk8 = require('chalk');
+var chalk7 = require('chalk');
 var path2 = require('path');
 var fastify = require('fastify');
 var fs5 = require('fs');
-var test = require('@playwright/test');
 var Ajv = require('ajv');
 var addErrors = require('ajv-errors');
 var winston = require('winston');
@@ -16,11 +15,12 @@ var FormData = require('form-data');
 var axios = require('axios');
 var child_process = require('child_process');
 var spawn = require('cross-spawn');
+var test = require('@playwright/test');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var which__default = /*#__PURE__*/_interopDefault(which);
-var chalk8__default = /*#__PURE__*/_interopDefault(chalk8);
+var chalk7__default = /*#__PURE__*/_interopDefault(chalk7);
 var path2__default = /*#__PURE__*/_interopDefault(path2);
 var fastify__default = /*#__PURE__*/_interopDefault(fastify);
 var fs5__default = /*#__PURE__*/_interopDefault(fs5);
@@ -315,326 +315,7 @@ var constants_default = {
   }
 };
 
-// src/lib/utils.ts
-function delDir(dir) {
-  if (fs5__default.default.existsSync(dir)) {
-    fs5__default.default.rmSync(dir, { recursive: true });
-  }
-}
-function scrollToBottomAndBackToTop({
-  frequency = 100,
-  timing = 8,
-  remoteWindow = window
-} = {}) {
-  return new Promise((resolve) => {
-    let scrolls = 1;
-    let scrollLength = remoteWindow.document.body.scrollHeight / frequency;
-    (function scroll() {
-      let scrollBy = scrollLength * scrolls;
-      remoteWindow.setTimeout(() => {
-        remoteWindow.scrollTo(0, scrollBy);
-        if (scrolls < frequency) {
-          scrolls += 1;
-          scroll();
-        }
-        if (scrolls === frequency) {
-          remoteWindow.setTimeout(() => {
-            remoteWindow.scrollTo(0, 0);
-            resolve();
-          }, timing);
-        }
-      }, timing);
-    })();
-  });
-}
-function launchBrowsers(ctx) {
-  return __async(this, null, function* () {
-    let browsers = {};
-    let launchOptions = { headless: true };
-    if (ctx.config.web) {
-      for (const browser of ctx.config.web.browsers) {
-        switch (browser) {
-          case constants_default.CHROME:
-            browsers[constants_default.CHROME] = yield test.chromium.launch(launchOptions);
-            break;
-          case constants_default.SAFARI:
-            browsers[constants_default.SAFARI] = yield test.webkit.launch(launchOptions);
-            break;
-          case constants_default.FIREFOX:
-            browsers[constants_default.FIREFOX] = yield test.firefox.launch(launchOptions);
-            break;
-          case constants_default.EDGE:
-            browsers[constants_default.EDGE] = yield test.chromium.launch(__spreadValues({ channel: constants_default.EDGE_CHANNEL }, launchOptions));
-            break;
-        }
-      }
-    }
-    if (ctx.config.mobile) {
-      for (const device of ctx.config.mobile.devices) {
-        if (constants_default.SUPPORTED_MOBILE_DEVICES[device].os === "android" && !browsers[constants_default.CHROME])
-          browsers[constants_default.CHROME] = yield test.chromium.launch(launchOptions);
-        else if (constants_default.SUPPORTED_MOBILE_DEVICES[device].os === "ios" && !browsers[constants_default.SAFARI])
-          browsers[constants_default.SAFARI] = yield test.webkit.launch(launchOptions);
-      }
-    }
-    return browsers;
-  });
-}
-function closeBrowsers(browsers) {
-  return __async(this, null, function* () {
-    var _a;
-    for (const browserName of Object.keys(browsers))
-      yield (_a = browsers[browserName]) == null ? void 0 : _a.close();
-  });
-}
-function getWebRenderViewports(ctx) {
-  let webRenderViewports = [];
-  if (ctx.config.web) {
-    for (const viewport of ctx.config.web.viewports) {
-      webRenderViewports.push({
-        viewport,
-        viewportString: `${viewport.width}${viewport.height ? "x" + viewport.height : ""}`,
-        fullPage: viewport.height ? false : true,
-        device: false
-      });
-    }
-  }
-  return webRenderViewports;
-}
-function getMobileRenderViewports(ctx) {
-  var _a;
-  let mobileRenderViewports = {};
-  mobileRenderViewports[constants_default.MOBILE_OS_IOS] = [];
-  mobileRenderViewports[constants_default.MOBILE_OS_ANDROID] = [];
-  if (ctx.config.mobile) {
-    for (const device of ctx.config.mobile.devices) {
-      let os = constants_default.SUPPORTED_MOBILE_DEVICES[device].os;
-      let { width, height } = constants_default.SUPPORTED_MOBILE_DEVICES[device].viewport;
-      let portrait = ctx.config.mobile.orientation === constants_default.MOBILE_ORIENTATION_PORTRAIT ? true : false;
-      (_a = mobileRenderViewports[os]) == null ? void 0 : _a.push({
-        viewport: { width: portrait ? width : height, height: portrait ? height : width },
-        viewportString: `${device} (${ctx.config.mobile.orientation})`,
-        fullPage: ctx.config.mobile.fullPage,
-        device: true,
-        os
-      });
-    }
-  }
-  return mobileRenderViewports;
-}
-function getRenderViewports(ctx) {
-  let mobileRenderViewports = getMobileRenderViewports(ctx);
-  return [
-    ...getWebRenderViewports(ctx),
-    ...mobileRenderViewports[constants_default.MOBILE_OS_IOS],
-    ...mobileRenderViewports[constants_default.MOBILE_OS_ANDROID]
-  ];
-}
-var MAX_RESOURCE_SIZE = 15 * 1024 ** 2;
-var ALLOWED_RESOURCES = ["document", "stylesheet", "image", "media", "font", "other"];
-var ALLOWED_STATUSES = [200, 201];
-var REQUEST_TIMEOUT = 1e4;
-var MIN_VIEWPORT_HEIGHT = 1080;
-var processSnapshot_default = (snapshot, ctx) => __async(void 0, null, function* () {
-  ctx.log.debug(`Processing snapshot ${snapshot.name}`);
-  let launchOptions = { headless: true };
-  let contextOptions = {
-    javaScriptEnabled: ctx.config.enableJavaScript,
-    userAgent: constants_default.CHROME_USER_AGENT
-  };
-  if (!ctx.browser) {
-    if (ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY)
-      launchOptions.proxy = { server: ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY };
-    ctx.browser = yield test.chromium.launch(launchOptions);
-    ctx.log.debug(`Chromium launched with options ${JSON.stringify(launchOptions)}`);
-  }
-  const context = yield ctx.browser.newContext(contextOptions);
-  ctx.log.debug(`Browser context created with options ${JSON.stringify(contextOptions)}`);
-  const page = yield context.newPage();
-  let cache = {};
-  yield page.route("**/*", (route, request) => __async(void 0, null, function* () {
-    const requestUrl = request.url();
-    const requestHostname = new URL(requestUrl).hostname;
-    try {
-      if (/\.(mp3|mp4|wav|ogg|webm)$/i.test(request.url())) {
-        throw new Error("resource type mp3/mp4/wav/ogg/webm");
-      }
-      ctx.config.allowedHostnames.push(new URL(snapshot.url).hostname);
-      if (ctx.config.enableJavaScript)
-        ALLOWED_RESOURCES.push("script");
-      const response = yield page.request.fetch(request, { timeout: REQUEST_TIMEOUT });
-      const body = yield response.body();
-      if (!body) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping no response`);
-      } else if (!body.length) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping empty response`);
-      } else if (requestUrl === snapshot.url) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping root resource`);
-      } else if (!ctx.config.allowedHostnames.includes(requestHostname)) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping remote resource`);
-      } else if (cache[requestUrl]) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping already cached resource`);
-      } else if (body.length > MAX_RESOURCE_SIZE) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping resource larger than 15MB`);
-      } else if (!ALLOWED_STATUSES.includes(response.status())) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping disallowed status [${response.status()}]`);
-      } else if (!ALLOWED_RESOURCES.includes(request.resourceType())) {
-        ctx.log.debug(`Handling request ${requestUrl}
- - skipping disallowed resource type [${request.resourceType()}]`);
-      } else {
-        ctx.log.debug(`Handling request ${requestUrl}
- - content-type ${response.headers()["content-type"]}`);
-        cache[requestUrl] = {
-          body: body.toString("base64"),
-          type: response.headers()["content-type"]
-        };
-      }
-      route.fulfill({
-        status: response.status(),
-        headers: response.headers(),
-        body
-      });
-    } catch (error) {
-      ctx.log.debug(`Handling request ${requestUrl}
- - aborted due to ${error.message}`);
-      route.abort();
-    }
-  }));
-  let options = snapshot.options;
-  let optionWarnings = /* @__PURE__ */ new Set();
-  let processedOptions = {};
-  let selectors = [];
-  let ignoreOrSelectDOM;
-  let ignoreOrSelectBoxes;
-  if (options && Object.keys(options).length) {
-    ctx.log.debug(`Snapshot options: ${JSON.stringify(options)}`);
-    const isNotAllEmpty = (obj) => {
-      var _a;
-      for (let key in obj)
-        if ((_a = obj[key]) == null ? void 0 : _a.length)
-          return true;
-      return false;
-    };
-    if (options.element && Object.keys(options.element).length) {
-      if (options.element.id)
-        processedOptions.element = "#" + options.element.id;
-      else if (options.element.class)
-        processedOptions.element = "." + options.element.class;
-      else if (options.element.cssSelector)
-        processedOptions.element = options.element.cssSelector;
-      else if (options.element.xpath)
-        processedOptions.element = "xpath=" + options.element.xpath;
-    } else if (options.ignoreDOM && Object.keys(options.ignoreDOM).length && isNotAllEmpty(options.ignoreDOM)) {
-      processedOptions.ignoreBoxes = {};
-      ignoreOrSelectDOM = "ignoreDOM";
-      ignoreOrSelectBoxes = "ignoreBoxes";
-    } else if (options.selectDOM && Object.keys(options.selectDOM).length && isNotAllEmpty(options.selectDOM)) {
-      processedOptions.selectBoxes = {};
-      ignoreOrSelectDOM = "selectDOM";
-      ignoreOrSelectBoxes = "selectBoxes";
-    }
-    if (ignoreOrSelectDOM) {
-      for (const [key, value] of Object.entries(options[ignoreOrSelectDOM])) {
-        switch (key) {
-          case "id":
-            selectors.push(...value.map((e) => "#" + e));
-            break;
-          case "class":
-            selectors.push(...value.map((e) => "." + e));
-            break;
-          case "xpath":
-            selectors.push(...value.map((e) => "xpath=" + e));
-            break;
-          case "cssSelector":
-            selectors.push(...value);
-            break;
-        }
-      }
-    }
-  }
-  let navigated = false;
-  let renderViewports = getRenderViewports(ctx);
-  for (const { viewport, viewportString, fullPage } of renderViewports) {
-    yield 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}`);
-    if (!navigated) {
-      try {
-        yield page.goto(snapshot.url, { waitUntil: "domcontentloaded" });
-        yield new Promise((r) => setTimeout(r, 1250));
-        if (ctx.config.waitForTimeout)
-          yield page.waitForTimeout(ctx.config.waitForTimeout);
-        navigated = true;
-        ctx.log.debug(`Navigated to ${snapshot.url}`);
-      } catch (error) {
-        ctx.log.debug(`Navigation to discovery page failed; ${error}`);
-        throw new Error(error.message);
-      }
-    }
-    if (ctx.config.enableJavaScript && fullPage)
-      yield page.evaluate(scrollToBottomAndBackToTop);
-    try {
-      yield page.waitForLoadState("networkidle", { timeout: 5e3 });
-      ctx.log.debug("Network idle 500ms");
-    } catch (error) {
-      ctx.log.debug(`Network idle failed due to ${error}`);
-    }
-    if (processedOptions.element) {
-      let l = yield page.locator(processedOptions.element).all();
-      if (l.length === 0) {
-        throw new Error(`for snapshot ${snapshot.name} viewport ${viewportString}, no element found for selector ${processedOptions.element}`);
-      } else if (l.length > 1) {
-        throw new Error(`for snapshot ${snapshot.name} viewport ${viewportString}, multiple elements found for selector ${processedOptions.element}`);
-      }
-    } else if (selectors.length) {
-      let locators = [];
-      if (!Array.isArray(processedOptions[ignoreOrSelectBoxes][viewportString]))
-        processedOptions[ignoreOrSelectBoxes][viewportString] = [];
-      for (const selector of selectors) {
-        let l = yield page.locator(selector).all();
-        if (l.length === 0) {
-          optionWarnings.add(`for snapshot ${snapshot.name} viewport ${viewportString}, no element found for selector ${selector}`);
-          continue;
-        }
-        locators.push(...l);
-      }
-      for (const locator of locators) {
-        let bb = yield locator.boundingBox();
-        if (bb)
-          processedOptions[ignoreOrSelectBoxes][viewportString].push({
-            left: bb.x,
-            top: bb.y,
-            right: bb.x + bb.width,
-            bottom: bb.y + bb.height
-          });
-      }
-    }
-  }
-  if (snapshot.dom.resources.length) {
-    for (let resource of snapshot.dom.resources) {
-      cache[resource.url] = {
-        body: resource.content,
-        type: resource.mimetype
-      };
-    }
-  }
-  return {
-    processedSnapshot: {
-      name: snapshot.name,
-      url: snapshot.url,
-      dom: Buffer.from(snapshot.dom.html).toString("base64"),
-      resources: cache,
-      options: processedOptions
-    },
-    warnings: [...optionWarnings, ...snapshot.dom.warnings]
-  };
-});
+// src/lib/schemaValidation.ts
 var ajv = new Ajv__default.default({ allErrors: true });
 ajv.addFormat("web-url", {
   type: "string",
@@ -961,35 +642,25 @@ var server_default = (ctx) => __async(void 0, null, function* () {
     reply.code(200).send({ data: { dom: SMARTUI_DOM } });
   });
   server.post("/snapshot", opts, (request, reply) => __async(void 0, null, function* () {
+    var _a;
     let replyCode;
     let replyBody;
     try {
       let { snapshot, testType } = request.body;
       if (!validateSnapshot(snapshot))
         throw new Error(validateSnapshot.errors[0].message);
-      let { processedSnapshot, warnings } = yield processSnapshot_default(snapshot, ctx);
-      yield ctx.client.uploadSnapshot(ctx.build.id, processedSnapshot, testType, ctx.log);
-      ctx.totalSnapshots++;
+      ctx.testType = testType;
+      (_a = ctx.snapshotQueue) == null ? void 0 : _a.enqueue(snapshot);
       replyCode = 200;
-      replyBody = { data: { message: "success", warnings } };
+      replyBody = { data: { message: "success", warnings: [] } };
     } catch (error) {
       ctx.log.debug(`snapshot failed; ${error}`);
       replyCode = 500;
       replyBody = { error: { message: error.message } };
     }
-    if (ctx.browser) {
-      for (let context of ctx.browser.contexts()) {
-        for (let page of context.pages()) {
-          yield page.close();
-          ctx.log.debug(`Closed browser page`);
-        }
-        yield context.close();
-        ctx.log.debug(`Closed browser context`);
-      }
-    }
     return reply.code(replyCode).send(replyBody);
   }));
-  yield server.listen({ port: 49152 });
+  yield server.listen({ port: ctx.options.port });
   let { port } = server.addresses()[0];
   process.env.SMARTUI_SERVER_ADDRESS = `http://localhost:${port}`;
   process.env.CYPRESS_SMARTUI_SERVER_ADDRESS = `http://localhost:${port}`;
@@ -1047,13 +718,13 @@ var logger = winston.createLogger({
       let message = typeof info.message === "object" ? JSON.stringify(info.message) : info.message;
       switch (info.level) {
         case "debug":
-          message = chalk8__default.default.blue(message);
+          message = chalk7__default.default.blue(message);
           break;
         case "warn":
-          message = chalk8__default.default.yellow(message);
+          message = chalk7__default.default.yellow(message);
           break;
         case "error":
-          message = chalk8__default.default.red(message);
+          message = chalk7__default.default.red(message);
           break;
       }
       return info.level === "info" ? message : `[${contextString}:${info.level}] ` + message;
@@ -1072,11 +743,11 @@ var startServer_default = (ctx) => {
       updateLogContext({ task: "startServer" });
       try {
         ctx2.server = yield server_default(ctx2);
-        task.output = chalk8__default.default.gray(`listening on port ${(_a = ctx2.server.addresses()[0]) == null ? void 0 : _a.port}`);
+        task.output = chalk7__default.default.gray(`listening on port ${(_a = ctx2.server.addresses()[0]) == null ? void 0 : _a.port}`);
         task.title = "SmartUI started";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(error.message);
+        task.output = chalk7__default.default.gray(error.message);
         throw new Error("SmartUI server setup failed");
       }
     }),
@@ -1090,11 +761,11 @@ var auth_default = (ctx) => {
       updateLogContext({ task: "auth" });
       try {
         yield ctx2.client.auth(ctx2.log);
-        task.output = chalk8__default.default.gray(`using project token '******#${ctx2.env.PROJECT_TOKEN.split("#").pop()}'`);
+        task.output = chalk7__default.default.gray(`using project token '******#${ctx2.env.PROJECT_TOKEN.split("#").pop()}'`);
         task.title = "Authenticated with SmartUI";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(error.message);
+        task.output = chalk7__default.default.gray(error.message);
         throw new Error("Authentication failed");
       }
     }),
@@ -1103,7 +774,7 @@ var auth_default = (ctx) => {
 };
 
 // package.json
-var version = "3.0.10";
+var version = "3.0.12";
 var package_default = {
   name: "@lambdatest/smartui-cli",
   version,
@@ -1213,19 +884,19 @@ var httpClient = class {
       params
     }, log);
   }
-  uploadSnapshot(buildId, snapshot, testType, log) {
+  uploadSnapshot(ctx, snapshot) {
     return this.request({
-      url: `/builds/${buildId}/snapshot`,
+      url: `/builds/${ctx.build.id}/snapshot`,
       method: "POST",
       headers: { "Content-Type": "application/json" },
       data: {
         snapshot,
         test: {
-          type: testType,
+          type: ctx.testType,
           source: "cli"
         }
       }
-    }, log);
+    }, ctx.log);
   }
   uploadScreenshot({ id: buildId, name: buildName, baseline }, ssPath, ssName, browserName, viewport, log) {
     browserName = browserName === constants_default.SAFARI ? constants_default.WEBKIT : browserName;
@@ -1292,6 +963,7 @@ var ctx_default = (options) => {
   let webConfig;
   let mobileConfig;
   let config = constants_default.DEFAULT_CONFIG;
+  let port;
   try {
     if (options.config) {
       config = JSON.parse(fs5__default.default.readFileSync(options.config, "utf-8"));
@@ -1303,6 +975,10 @@ var ctx_default = (options) => {
         throw new Error(validateConfig.errors[0].message);
       }
     }
+    port = parseInt(options.port || "49152", 10);
+    if (isNaN(port) || port < 1 || port > 65535) {
+      throw new Error("Invalid port number. Port number must be an integer between 1 and 65535.");
+    }
   } catch (error) {
     console.log(`[smartui] Error: ${error.message}`);
     process.exit();
@@ -1349,7 +1025,8 @@ var ctx_default = (options) => {
     options: {
       parallel: options.parallel ? true : false,
       markBaseline: options.markBaseline ? true : false,
-      buildName: options.buildName || ""
+      buildName: options.buildName || "",
+      port
     },
     cliVersion: version,
     totalSnapshots: -1
@@ -1416,11 +1093,11 @@ var getGitInfo_default = (ctx) => {
       }
       try {
         ctx2.git = git_default(ctx2);
-        task.output = chalk8__default.default.gray(`branch: ${ctx2.git.branch}, commit: ${ctx2.git.commitId}, author: ${ctx2.git.commitAuthor}`);
+        task.output = chalk7__default.default.gray(`branch: ${ctx2.git.branch}, commit: ${ctx2.git.commitId}, author: ${ctx2.git.commitAuthor}`);
         task.title = "Fetched git information";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(`${error.message}`);
+        task.output = chalk7__default.default.gray(`${error.message}`);
         throw new Error("Error fetching git repo details");
       }
     }),
@@ -1440,11 +1117,11 @@ var createBuild_default = (ctx) => {
           url: resp.data.buildURL,
           baseline: resp.data.baseline
         };
-        task.output = chalk8__default.default.gray(`build id: ${resp.data.buildId}`);
+        task.output = chalk7__default.default.gray(`build id: ${resp.data.buildId}`);
         task.title = "SmartUI build created";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(error.message);
+        task.output = chalk7__default.default.gray(error.message);
         throw new Error("SmartUI build creation failed");
       }
     }),
@@ -1463,13 +1140,13 @@ var exec_default = (ctx) => {
         let totalOutput = "";
         const output = listr2.createWritable((chunk) => {
           totalOutput += chunk;
-          task.output = chalk8__default.default.gray(totalOutput);
+          task.output = chalk7__default.default.gray(totalOutput);
         });
         (_b = childProcess.stdout) == null ? void 0 : _b.pipe(output);
         (_c = childProcess.stderr) == null ? void 0 : _c.pipe(output);
         childProcess.on("error", (error) => {
           var _a3;
-          task.output = chalk8__default.default.gray(`error: ${error.message}`);
+          task.output = chalk7__default.default.gray(`error: ${error.message}`);
           throw new Error(`Execution of '${(_a3 = ctx2.args.execCommand) == null ? void 0 : _a3.join(" ")}' failed`);
         });
         childProcess.on("close", (code, signal) => __async(void 0, null, function* () {
@@ -1487,6 +1164,46 @@ var exec_default = (ctx) => {
     exitOnError: false
   };
 };
+var processSnapshot_default = (ctx) => {
+  return {
+    title: `Processing snapshots`,
+    task: (ctx2, task) => __async(void 0, null, function* () {
+      var _a;
+      try {
+        yield new Promise((resolve) => {
+          let output2 = "";
+          const intervalId = setInterval(() => {
+            var _a2, _b, _c;
+            if (((_a2 = ctx2.snapshotQueue) == null ? void 0 : _a2.isEmpty()) && !((_b = ctx2.snapshotQueue) == null ? void 0 : _b.isProcessing())) {
+              clearInterval(intervalId);
+              resolve();
+            } else {
+              task.title = `Processing snapshot ${(_c = ctx2.snapshotQueue) == null ? void 0 : _c.getProcessingSnapshot()}`;
+            }
+          }, 500);
+        });
+        let output = "";
+        for (let snapshot of (_a = ctx2.snapshotQueue) == null ? void 0 : _a.getProcessedSnapshots()) {
+          if (snapshot.error)
+            output += `${chalk7__default.default.red("\u2717")} ${chalk7__default.default.gray(`${snapshot.name}
+[error] ${snapshot.error}`)}
+`;
+          else
+            output += `${chalk7__default.default.green("\u2713")} ${chalk7__default.default.gray(snapshot.name)}
+${snapshot.warnings.length ? chalk7__default.default.gray(`[warning] ${snapshot.warnings.join("\n[warning] ")}
+`) : ""}`;
+        }
+        task.output = output;
+        task.title = "Processed snapshots";
+      } catch (error) {
+        ctx2.log.debug(error);
+        task.output = chalk7__default.default.gray(error.message);
+        throw new Error("Processing of snapshots failed");
+      }
+    }),
+    rendererOptions: { persistentOutput: true }
+  };
+};
 var finalizeBuild_default = (ctx) => {
   return {
     title: `Finalizing build`,
@@ -1495,21 +1212,401 @@ var finalizeBuild_default = (ctx) => {
       try {
         yield new Promise((resolve) => setTimeout(resolve, 2e3));
         yield ctx2.client.finalizeBuild(ctx2.build.id, ctx2.totalSnapshots, ctx2.log);
-        task.output = chalk8__default.default.gray(`build url: ${ctx2.build.url}`);
+        task.output = chalk7__default.default.gray(`build url: ${ctx2.build.url}`);
         task.title = "Finalized build";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(error.message);
+        task.output = chalk7__default.default.gray(error.message);
         throw new Error("Finalize build failed");
       }
     }),
     rendererOptions: { persistentOutput: true }
   };
 };
+function delDir(dir) {
+  if (fs5__default.default.existsSync(dir)) {
+    fs5__default.default.rmSync(dir, { recursive: true });
+  }
+}
+function scrollToBottomAndBackToTop({
+  frequency = 100,
+  timing = 8,
+  remoteWindow = window
+} = {}) {
+  return new Promise((resolve) => {
+    let scrolls = 1;
+    let scrollLength = remoteWindow.document.body.scrollHeight / frequency;
+    (function scroll() {
+      let scrollBy = scrollLength * scrolls;
+      remoteWindow.setTimeout(() => {
+        remoteWindow.scrollTo(0, scrollBy);
+        if (scrolls < frequency) {
+          scrolls += 1;
+          scroll();
+        }
+        if (scrolls === frequency) {
+          remoteWindow.setTimeout(() => {
+            remoteWindow.scrollTo(0, 0);
+            resolve();
+          }, timing);
+        }
+      }, timing);
+    })();
+  });
+}
+function launchBrowsers(ctx) {
+  return __async(this, null, function* () {
+    let browsers = {};
+    let launchOptions = { headless: true };
+    if (ctx.config.web) {
+      for (const browser of ctx.config.web.browsers) {
+        switch (browser) {
+          case constants_default.CHROME:
+            browsers[constants_default.CHROME] = yield test.chromium.launch(launchOptions);
+            break;
+          case constants_default.SAFARI:
+            browsers[constants_default.SAFARI] = yield test.webkit.launch(launchOptions);
+            break;
+          case constants_default.FIREFOX:
+            browsers[constants_default.FIREFOX] = yield test.firefox.launch(launchOptions);
+            break;
+          case constants_default.EDGE:
+            browsers[constants_default.EDGE] = yield test.chromium.launch(__spreadValues({ channel: constants_default.EDGE_CHANNEL }, launchOptions));
+            break;
+        }
+      }
+    }
+    if (ctx.config.mobile) {
+      for (const device of ctx.config.mobile.devices) {
+        if (constants_default.SUPPORTED_MOBILE_DEVICES[device].os === "android" && !browsers[constants_default.CHROME])
+          browsers[constants_default.CHROME] = yield test.chromium.launch(launchOptions);
+        else if (constants_default.SUPPORTED_MOBILE_DEVICES[device].os === "ios" && !browsers[constants_default.SAFARI])
+          browsers[constants_default.SAFARI] = yield test.webkit.launch(launchOptions);
+      }
+    }
+    return browsers;
+  });
+}
+function closeBrowsers(browsers) {
+  return __async(this, null, function* () {
+    var _a;
+    for (const browserName of Object.keys(browsers))
+      yield (_a = browsers[browserName]) == null ? void 0 : _a.close();
+  });
+}
+function getWebRenderViewports(ctx) {
+  let webRenderViewports = [];
+  if (ctx.config.web) {
+    for (const viewport of ctx.config.web.viewports) {
+      webRenderViewports.push({
+        viewport,
+        viewportString: `${viewport.width}${viewport.height ? "x" + viewport.height : ""}`,
+        fullPage: viewport.height ? false : true,
+        device: false
+      });
+    }
+  }
+  return webRenderViewports;
+}
+function getMobileRenderViewports(ctx) {
+  var _a;
+  let mobileRenderViewports = {};
+  mobileRenderViewports[constants_default.MOBILE_OS_IOS] = [];
+  mobileRenderViewports[constants_default.MOBILE_OS_ANDROID] = [];
+  if (ctx.config.mobile) {
+    for (const device of ctx.config.mobile.devices) {
+      let os = constants_default.SUPPORTED_MOBILE_DEVICES[device].os;
+      let { width, height } = constants_default.SUPPORTED_MOBILE_DEVICES[device].viewport;
+      let portrait = ctx.config.mobile.orientation === constants_default.MOBILE_ORIENTATION_PORTRAIT ? true : false;
+      (_a = mobileRenderViewports[os]) == null ? void 0 : _a.push({
+        viewport: { width: portrait ? width : height, height: portrait ? height : width },
+        viewportString: `${device} (${ctx.config.mobile.orientation})`,
+        fullPage: ctx.config.mobile.fullPage,
+        device: true,
+        os
+      });
+    }
+  }
+  return mobileRenderViewports;
+}
+function getRenderViewports(ctx) {
+  let mobileRenderViewports = getMobileRenderViewports(ctx);
+  return [
+    ...getWebRenderViewports(ctx),
+    ...mobileRenderViewports[constants_default.MOBILE_OS_IOS],
+    ...mobileRenderViewports[constants_default.MOBILE_OS_ANDROID]
+  ];
+}
+var MAX_RESOURCE_SIZE = 15 * 1024 ** 2;
+var ALLOWED_RESOURCES = ["document", "stylesheet", "image", "media", "font", "other"];
+var ALLOWED_STATUSES = [200, 201];
+var REQUEST_TIMEOUT = 1e4;
+var MIN_VIEWPORT_HEIGHT = 1080;
+var Queue = class {
+  constructor(ctx) {
+    this.snapshots = [];
+    this.processedSnapshots = [];
+    this.processing = false;
+    this.processingSnapshot = "";
+    this.ctx = ctx;
+  }
+  enqueue(item) {
+    this.snapshots.push(item);
+    if (!this.processing) {
+      this.processing = true;
+      this.processNext();
+    }
+  }
+  processNext() {
+    return __async(this, null, function* () {
+      if (!this.isEmpty()) {
+        const snapshot = this.snapshots.shift();
+        try {
+          this.processingSnapshot = snapshot == null ? void 0 : snapshot.name;
+          let { processedSnapshot, warnings } = yield processSnapshot(snapshot, this.ctx);
+          yield this.ctx.client.uploadSnapshot(this.ctx, processedSnapshot);
+          this.ctx.totalSnapshots++;
+          this.processedSnapshots.push({ name: snapshot.name, warnings });
+        } catch (error) {
+          this.ctx.log.debug(`snapshot failed; ${error}`);
+          this.processedSnapshots.push({ name: snapshot.name, error: error.message });
+        }
+        if (this.ctx.browser) {
+          for (let context of this.ctx.browser.contexts()) {
+            for (let page of context.pages()) {
+              yield page.close();
+              this.ctx.log.debug(`Closed browser page for snapshot ${snapshot.name}`);
+            }
+            yield context.close();
+            this.ctx.log.debug(`Closed browser context for snapshot ${snapshot.name}`);
+          }
+        }
+        this.processNext();
+      } else {
+        this.processing = false;
+      }
+    });
+  }
+  isProcessing() {
+    return this.processing;
+  }
+  getProcessingSnapshot() {
+    return this.processingSnapshot;
+  }
+  getProcessedSnapshots() {
+    return this.processedSnapshots;
+  }
+  isEmpty() {
+    return this.snapshots.length ? false : true;
+  }
+};
+function processSnapshot(snapshot, ctx) {
+  return __async(this, null, function* () {
+    var _a;
+    ctx.log.debug(`Processing snapshot ${snapshot.name}`);
+    let launchOptions = { headless: true };
+    let contextOptions = {
+      javaScriptEnabled: ctx.config.enableJavaScript,
+      userAgent: constants_default.CHROME_USER_AGENT
+    };
+    if (!((_a = ctx.browser) == null ? void 0 : _a.isConnected())) {
+      if (ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY)
+        launchOptions.proxy = { server: ctx.env.HTTP_PROXY || ctx.env.HTTPS_PROXY };
+      ctx.browser = yield test.chromium.launch(launchOptions);
+      ctx.log.debug(`Chromium launched with options ${JSON.stringify(launchOptions)}`);
+    }
+    const context = yield ctx.browser.newContext(contextOptions);
+    ctx.log.debug(`Browser context created with options ${JSON.stringify(contextOptions)}`);
+    const page = yield context.newPage();
+    let cache = {};
+    yield page.route("**/*", (route, request) => __async(this, null, function* () {
+      const requestUrl = request.url();
+      const requestHostname = new URL(requestUrl).hostname;
+      try {
+        if (/\.(mp3|mp4|wav|ogg|webm)$/i.test(request.url())) {
+          throw new Error("resource type mp3/mp4/wav/ogg/webm");
+        }
+        ctx.config.allowedHostnames.push(new URL(snapshot.url).hostname);
+        if (ctx.config.enableJavaScript)
+          ALLOWED_RESOURCES.push("script");
+        const response = yield page.request.fetch(request, { timeout: REQUEST_TIMEOUT });
+        const body = yield response.body();
+        if (!body) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping no response`);
+        } else if (!body.length) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping empty response`);
+        } else if (requestUrl === snapshot.url) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping root resource`);
+        } else if (!ctx.config.allowedHostnames.includes(requestHostname)) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping remote resource`);
+        } else if (cache[requestUrl]) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping already cached resource`);
+        } else if (body.length > MAX_RESOURCE_SIZE) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping resource larger than 15MB`);
+        } else if (!ALLOWED_STATUSES.includes(response.status())) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping disallowed status [${response.status()}]`);
+        } else if (!ALLOWED_RESOURCES.includes(request.resourceType())) {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - skipping disallowed resource type [${request.resourceType()}]`);
+        } else {
+          ctx.log.debug(`Handling request ${requestUrl}
+ - content-type ${response.headers()["content-type"]}`);
+          cache[requestUrl] = {
+            body: body.toString("base64"),
+            type: response.headers()["content-type"]
+          };
+        }
+        route.fulfill({
+          status: response.status(),
+          headers: response.headers(),
+          body
+        });
+      } catch (error) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - aborted due to ${error.message}`);
+        route.abort();
+      }
+    }));
+    let options = snapshot.options;
+    let optionWarnings = /* @__PURE__ */ new Set();
+    let processedOptions = {};
+    let selectors = [];
+    let ignoreOrSelectDOM;
+    let ignoreOrSelectBoxes;
+    if (options && Object.keys(options).length) {
+      ctx.log.debug(`Snapshot options: ${JSON.stringify(options)}`);
+      const isNotAllEmpty = (obj) => {
+        var _a2;
+        for (let key in obj)
+          if ((_a2 = obj[key]) == null ? void 0 : _a2.length)
+            return true;
+        return false;
+      };
+      if (options.element && Object.keys(options.element).length) {
+        if (options.element.id)
+          processedOptions.element = "#" + options.element.id;
+        else if (options.element.class)
+          processedOptions.element = "." + options.element.class;
+        else if (options.element.cssSelector)
+          processedOptions.element = options.element.cssSelector;
+        else if (options.element.xpath)
+          processedOptions.element = "xpath=" + options.element.xpath;
+      } else if (options.ignoreDOM && Object.keys(options.ignoreDOM).length && isNotAllEmpty(options.ignoreDOM)) {
+        processedOptions.ignoreBoxes = {};
+        ignoreOrSelectDOM = "ignoreDOM";
+        ignoreOrSelectBoxes = "ignoreBoxes";
+      } else if (options.selectDOM && Object.keys(options.selectDOM).length && isNotAllEmpty(options.selectDOM)) {
+        processedOptions.selectBoxes = {};
+        ignoreOrSelectDOM = "selectDOM";
+        ignoreOrSelectBoxes = "selectBoxes";
+      }
+      if (ignoreOrSelectDOM) {
+        for (const [key, value] of Object.entries(options[ignoreOrSelectDOM])) {
+          switch (key) {
+            case "id":
+              selectors.push(...value.map((e) => "#" + e));
+              break;
+            case "class":
+              selectors.push(...value.map((e) => "." + e));
+              break;
+            case "xpath":
+              selectors.push(...value.map((e) => "xpath=" + e));
+              break;
+            case "cssSelector":
+              selectors.push(...value);
+              break;
+          }
+        }
+      }
+    }
+    let navigated = false;
+    let renderViewports = getRenderViewports(ctx);
+    for (const { viewport, viewportString, fullPage } of renderViewports) {
+      yield 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}`);
+      if (!navigated) {
+        try {
+          yield page.goto(snapshot.url, { waitUntil: "domcontentloaded" });
+          yield new Promise((r) => setTimeout(r, 1250));
+          if (ctx.config.waitForTimeout)
+            yield page.waitForTimeout(ctx.config.waitForTimeout);
+          navigated = true;
+          ctx.log.debug(`Navigated to ${snapshot.url}`);
+        } catch (error) {
+          ctx.log.debug(`Navigation to discovery page failed; ${error}`);
+          throw new Error(error.message);
+        }
+      }
+      if (ctx.config.enableJavaScript && fullPage)
+        yield page.evaluate(scrollToBottomAndBackToTop);
+      try {
+        yield page.waitForLoadState("networkidle", { timeout: 5e3 });
+        ctx.log.debug("Network idle 500ms");
+      } catch (error) {
+        ctx.log.debug(`Network idle failed due to ${error}`);
+      }
+      if (processedOptions.element) {
+        let l = yield page.locator(processedOptions.element).all();
+        if (l.length === 0) {
+          throw new Error(`for snapshot ${snapshot.name} viewport ${viewportString}, no element found for selector ${processedOptions.element}`);
+        } else if (l.length > 1) {
+          throw new Error(`for snapshot ${snapshot.name} viewport ${viewportString}, multiple elements found for selector ${processedOptions.element}`);
+        }
+      } else if (selectors.length) {
+        let locators = [];
+        if (!Array.isArray(processedOptions[ignoreOrSelectBoxes][viewportString]))
+          processedOptions[ignoreOrSelectBoxes][viewportString] = [];
+        for (const selector of selectors) {
+          let l = yield page.locator(selector).all();
+          if (l.length === 0) {
+            optionWarnings.add(`for snapshot ${snapshot.name} viewport ${viewportString}, no element found for selector ${selector}`);
+            continue;
+          }
+          locators.push(...l);
+        }
+        for (const locator of locators) {
+          let bb = yield locator.boundingBox();
+          if (bb)
+            processedOptions[ignoreOrSelectBoxes][viewportString].push({
+              left: bb.x,
+              top: bb.y,
+              right: bb.x + bb.width,
+              bottom: bb.y + bb.height
+            });
+        }
+      }
+    }
+    if (snapshot.dom.resources.length) {
+      for (let resource of snapshot.dom.resources) {
+        cache[resource.url] = {
+          body: resource.content,
+          type: resource.mimetype
+        };
+      }
+    }
+    return {
+      processedSnapshot: {
+        name: snapshot.name,
+        url: snapshot.url,
+        dom: Buffer.from(snapshot.dom.html).toString("base64"),
+        resources: cache,
+        options: processedOptions
+      },
+      warnings: [...optionWarnings, ...snapshot.dom.warnings]
+    };
+  });
+}
 
 // src/commander/exec.ts
 var command = new commander.Command();
-command.name("exec").description("Run test commands around SmartUI").argument("<command...>", "Command supplied for running tests").action(function(execCommand, _, command4) {
+command.name("exec").description("Run test commands around SmartUI").argument("<command...>", "Command supplied for running tests").option("-P, --port <number>", "Port number for the server").action(function(execCommand, _, command4) {
   return __async(this, null, function* () {
     var _a, _b;
     let ctx = ctx_default(command4.optsWithGlobals());
@@ -1518,6 +1615,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
       return;
     }
     ctx.args.execCommand = execCommand;
+    ctx.snapshotQueue = new Queue(ctx);
     ctx.totalSnapshots = 0;
     let tasks = new listr2.Listr(
       [
@@ -1526,6 +1624,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
         getGitInfo_default(),
         createBuild_default(),
         exec_default(ctx),
+        processSnapshot_default(),
         finalizeBuild_default()
       ],
       {
@@ -1544,8 +1643,10 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
     } catch (error) {
       ctx.log.info("\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/");
     } finally {
-      yield (_a = ctx.server) == null ? void 0 : _a.close();
-      yield (_b = ctx.browser) == null ? void 0 : _b.close();
+      yield (_a = ctx.browser) == null ? void 0 : _a.close();
+      ctx.log.debug(`Closed browser`);
+      yield (_b = ctx.server) == null ? void 0 : _b.close();
+      ctx.log.debug(`Closed server`);
     }
   });
 });
@@ -1715,13 +1816,13 @@ function captureScreenshots(ctx) {
         else
           yield captureScreenshotsSync(ctx, staticConfig, browsers);
         delDir(`screenshots/${staticConfig.name.toLowerCase().replace(/\s/g, "_")}`);
-        output += `${chalk8__default.default.gray(staticConfig.name)} ${chalk8__default.default.green("\u2713")}
+        output += `${chalk7__default.default.gray(staticConfig.name)} ${chalk7__default.default.green("\u2713")}
 `;
         ctx.task.output = output;
         capturedScreenshots++;
       } catch (error) {
         ctx.log.debug(`screenshot capture failed for ${JSON.stringify(staticConfig)}; error: ${error}`);
-        output += `${chalk8__default.default.gray(staticConfig.name)} ${chalk8__default.default.red("\u2717")}
+        output += `${chalk7__default.default.gray(staticConfig.name)} ${chalk7__default.default.red("\u2717")}
 `;
         ctx.task.output = output;
       }
@@ -1745,7 +1846,7 @@ var captureScreenshots_default = (ctx) => {
         task.title = "Screenshots captured successfully";
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(`${error.message}`);
+        task.output = chalk7__default.default.gray(`${error.message}`);
         throw new Error("Capturing screenshots failed");
       }
     }),
@@ -1839,7 +1940,7 @@ var uploadFigmaDesigns_default2 = (ctx) => {
         ctx2.log.debug(`Figma designs processed: ${results}`);
       } catch (error) {
         ctx2.log.debug(error);
-        task.output = chalk8__default.default.gray(`${error.message}`);
+        task.output = chalk7__default.default.gray(`${error.message}`);
         throw new Error("Uploading Figma designs failed");
       }
     }),
@@ -1909,13 +2010,13 @@ LambdaTest SmartUI CLI v${package_default.version}`);
         log.warn(`This version is deprecated. A new version ${latestVersion} is available!
 `);
       else if (package_default.version !== latestVersion)
-        log.info(chalk8__default.default.gray(`A new version ${latestVersion} is available!
+        log.info(chalk7__default.default.gray(`A new version ${latestVersion} is available!
 `));
       else
-        log.info(chalk8__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
+        log.info(chalk7__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
     } catch (error) {
       log.debug(error);
-      log.info(chalk8__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
+      log.info(chalk7__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
     }
     commander_default.parse();
   });

package/package.json

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