@lambdatest/smartui-cli 3.0.11 → 4.0.0

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,13 @@ 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');
+var sharp = require('sharp');
 
 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);
@@ -29,6 +30,7 @@ var addErrors__default = /*#__PURE__*/_interopDefault(addErrors);
 var FormData__default = /*#__PURE__*/_interopDefault(FormData);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var spawn__default = /*#__PURE__*/_interopDefault(spawn);
+var sharp__default = /*#__PURE__*/_interopDefault(sharp);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -128,6 +130,18 @@ var constants_default = {
   MOBILE_ORIENTATION_LANDSCAPE: "landscape",
   // CI
   GITHUB_API_HOST: "https://api.github.com",
+  // log file path
+  LOG_FILE_PATH: ".smartui.log",
+  // Disallowed file extension
+  FILE_EXTENSION_ZIP: ".zip",
+  FILE_EXTENSION_GIFS: "gif",
+  // Magic Numbers 
+  MAGIC_NUMBERS: [
+    { ext: "jpg", magic: Buffer.from([255, 216, 255]) },
+    { ext: "jpeg", magic: Buffer.from([255, 216, 255]) },
+    { ext: "png", magic: Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]) },
+    { ext: "gif", magic: Buffer.from([71, 73, 70, 56]) }
+  ],
   SUPPORTED_MOBILE_DEVICES: {
     "Blackberry KEY2 LE": { os: "android", viewport: { width: 412, height: 618 } },
     "Galaxy A12": { os: "android", viewport: { width: 360, height: 800 } },
@@ -315,327 +329,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* () {
-  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(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 _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/lib/schemaValidation.ts
 var ajv = new Ajv__default.default({ allErrors: true });
 ajv.addFormat("web-url", {
   type: "string",
@@ -952,7 +646,15 @@ var validateFigmaDesignConfig = ajv.compile(FigmaDesignConfigSchema);
 
 // src/lib/server.ts
 var server_default = (ctx) => __async(void 0, null, function* () {
-  const server = fastify__default.default({ logger: ctx.env.LT_SDK_DEBUG ? true : false, bodyLimit: 3e7 });
+  const server = fastify__default.default({
+    logger: {
+      level: "debug",
+      stream: { write: (message) => {
+        ctx.log.debug(message);
+      } }
+    },
+    bodyLimit: 3e7
+  });
   const opts = {};
   const SMARTUI_DOM = fs5.readFileSync(path2__default.default.resolve(__dirname, "dom-serializer.js"), "utf-8");
   server.get("/healthcheck", opts, (_, reply) => {
@@ -962,32 +664,22 @@ 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: ctx.options.port });
@@ -1002,7 +694,6 @@ var env_default = () => {
   const {
     PROJECT_TOKEN = "",
     SMARTUI_CLIENT_API_URL = "https://api.lambdatest.com/visualui/1.0",
-    LT_SDK_LOG_LEVEL,
     LT_SDK_DEBUG,
     SMARTUI_GIT_INFO_FILEPATH,
     HTTP_PROXY,
@@ -1017,7 +708,6 @@ var env_default = () => {
   return {
     PROJECT_TOKEN,
     SMARTUI_CLIENT_API_URL,
-    LT_SDK_LOG_LEVEL,
     LT_SDK_DEBUG,
     SMARTUI_GIT_INFO_FILEPATH,
     HTTP_PROXY,
@@ -1030,37 +720,37 @@ var env_default = () => {
     CURRENT_BRANCH
   };
 };
-var logContext = { task: "smartui-cli" };
+var logContext = {};
 function updateLogContext(newContext) {
   logContext = __spreadValues(__spreadValues({}, logContext), newContext);
 }
 var logLevel = () => {
   let env = env_default();
-  let debug = env.LT_SDK_DEBUG === "true" ? "debug" : void 0;
-  return debug || env.LT_SDK_LOG_LEVEL || "info";
+  return env.LT_SDK_DEBUG === "true" ? "debug" : "info";
 };
 var logger = winston.createLogger({
-  level: logLevel(),
   format: winston.format.combine(
     winston.format.timestamp(),
     winston.format.printf((info) => {
       let contextString = Object.values(logContext).join(" | ");
-      let message = typeof info.message === "object" ? JSON.stringify(info.message) : info.message;
+      let message = typeof info.message === "object" ? JSON.stringify(info.message).trim() : info.message.trim();
       switch (info.level) {
-        case "debug":
-          message = chalk8__default.default.blue(message);
-          break;
         case "warn":
-          message = chalk8__default.default.yellow(message);
-          break;
-        case "error":
-          message = chalk8__default.default.red(message);
+          message = chalk7__default.default.yellow(message);
           break;
       }
       return info.level === "info" ? message : `[${contextString}:${info.level}] ` + message;
     })
   ),
-  transports: [new winston.transports.Console(), new winston.transports.File({ filename: ".smartui.log" })]
+  transports: [
+    new winston.transports.Console({
+      level: logLevel()
+    }),
+    new winston.transports.File({
+      level: "debug",
+      filename: constants_default.LOG_FILE_PATH
+    })
+  ]
 });
 var logger_default = logger;
 
@@ -1073,11 +763,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");
       }
     }),
@@ -1091,11 +781,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");
       }
     }),
@@ -1104,7 +794,7 @@ var auth_default = (ctx) => {
 };
 
 // package.json
-var version = "3.0.11";
+var version = "4.0.0";
 var package_default = {
   name: "@lambdatest/smartui-cli",
   version,
@@ -1144,6 +834,7 @@ var package_default = {
     fastify: "^4.24.3",
     "form-data": "^4.0.0",
     listr2: "^7.0.1",
+    sharp: "^0.33.4",
     tsup: "^7.2.0",
     which: "^4.0.0",
     winston: "^3.10.0"
@@ -1159,11 +850,11 @@ var httpClient = class {
       headers: { "projectToken": PROJECT_TOKEN }
     });
   }
-  request(config, log) {
+  request(config, log2) {
     return __async(this, null, function* () {
-      log.debug(`http request: ${config.method} ${config.url}`);
+      log2.debug(`http request: ${config.method} ${config.url}`);
       return this.axiosInstance.request(config).then((resp) => {
-        log.debug(`http response: ${JSON.stringify({
+        log2.debug(`http response: ${JSON.stringify({
           status: resp.status,
           headers: resp.headers,
           body: resp.data
@@ -1172,7 +863,7 @@ var httpClient = class {
       }).catch((error) => {
         var _a;
         if (error.response) {
-          log.debug(`http response: ${JSON.stringify({
+          log2.debug(`http response: ${JSON.stringify({
             status: error.response.status,
             headers: error.response.headers,
             body: error.response.data
@@ -1180,21 +871,21 @@ var httpClient = class {
           throw new Error(((_a = error.response.data.error) == null ? void 0 : _a.message) || error.response.data.message);
         }
         if (error.request) {
-          log.debug(`http request failed: ${error.toJSON()}`);
+          log2.debug(`http request failed: ${error.toJSON()}`);
           throw new Error(error.toJSON().message);
         }
-        log.debug(`http request failed: ${error.message}`);
+        log2.debug(`http request failed: ${error.message}`);
         throw new Error(error.message);
       });
     });
   }
-  auth(log) {
+  auth(log2) {
     return this.request({
       url: "/token/verify",
       method: "GET"
-    }, log);
+    }, log2);
   }
-  createBuild(git, config, log) {
+  createBuild(git, config, log2) {
     return this.request({
       url: "/build",
       method: "POST",
@@ -1202,9 +893,9 @@ var httpClient = class {
         git,
         config
       }
-    }, log);
+    }, log2);
   }
-  finalizeBuild(buildId, totalSnapshots, log) {
+  finalizeBuild(buildId, totalSnapshots, log2) {
     let params = { buildId };
     if (totalSnapshots > -1)
       params.totalSnapshots = totalSnapshots;
@@ -1212,23 +903,23 @@ var httpClient = class {
       url: "/build",
       method: "DELETE",
       params
-    }, log);
+    }, log2);
   }
-  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) {
+  uploadScreenshot({ id: buildId, name: buildName, baseline }, ssPath, ssName, browserName, viewport, log2) {
     browserName = browserName === constants_default.SAFARI ? constants_default.WEBKIT : browserName;
     const file = fs5__default.default.readFileSync(ssPath);
     const form = new FormData__default.default();
@@ -1245,7 +936,7 @@ var httpClient = class {
       headers: form.getHeaders(),
       data: form
     }).then(() => {
-      log.debug(`${ssName} for ${browserName} ${viewport} uploaded successfully`);
+      log2.debug(`${ssName} for ${browserName} ${viewport} uploaded successfully`);
     }).catch((error) => {
       if (error.response) {
         throw new Error(error.response.data.error.message);
@@ -1256,7 +947,7 @@ var httpClient = class {
       throw new Error(error.message);
     });
   }
-  checkUpdate(log) {
+  checkUpdate(log2) {
     return this.request({
       url: `/packageinfo`,
       method: "GET",
@@ -1265,9 +956,9 @@ var httpClient = class {
         packageName: package_default.name,
         packageVersion: package_default.version
       }
-    }, log);
+    }, log2);
   }
-  getFigmaFilesAndImages(figmaFileToken, figmaToken, queryParams, authToken, depth, markBaseline, buildName, log) {
+  getFigmaFilesAndImages(figmaFileToken, figmaToken, queryParams, authToken, depth, markBaseline, buildName, log2) {
     const requestBody = {
       figma_file_token: figmaFileToken,
       figma_token: figmaToken,
@@ -1284,7 +975,34 @@ var httpClient = class {
         "Content-Type": "application/json"
       },
       data: JSON.stringify(requestBody)
-    }, log);
+    }, log2);
+  }
+  getS3PreSignedURL(ctx) {
+    return this.request({
+      url: `/loguploadurl`,
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      data: {
+        buildId: ctx.build.id
+      }
+    }, ctx.log);
+  }
+  uploadLogs(ctx, uploadURL) {
+    const fileStream = fs5__default.default.createReadStream(constants_default.LOG_FILE_PATH);
+    const { size } = fs5__default.default.statSync(constants_default.LOG_FILE_PATH);
+    return this.request({
+      url: uploadURL,
+      method: "PUT",
+      headers: {
+        "Content-Type": "text/plain",
+        "Content-Length": size
+      },
+      data: fileStream,
+      maxBodyLength: Infinity,
+      // prevent axios from limiting the body size
+      maxContentLength: Infinity
+      // prevent axios from limiting the content size
+    }, ctx.log);
   }
 };
 var ctx_default = (options) => {
@@ -1294,6 +1012,10 @@ var ctx_default = (options) => {
   let mobileConfig;
   let config = constants_default.DEFAULT_CONFIG;
   let port;
+  let resolutionOff;
+  let extensionFiles;
+  let ignoreStripExtension;
+  let ignoreFilePattern;
   try {
     if (options.config) {
       config = JSON.parse(fs5__default.default.readFileSync(options.config, "utf-8"));
@@ -1309,6 +1031,10 @@ var ctx_default = (options) => {
     if (isNaN(port) || port < 1 || port > 65535) {
       throw new Error("Invalid port number. Port number must be an integer between 1 and 65535.");
     }
+    resolutionOff = options.ignoreResolutions || false;
+    extensionFiles = options.files || ["png", "jpeg", "jpg"];
+    ignoreStripExtension = options.removeExtensions || false;
+    ignoreFilePattern = options.ignoreDir || [];
   } catch (error) {
     console.log(`[smartui] Error: ${error.message}`);
     process.exit();
@@ -1337,6 +1063,7 @@ var ctx_default = (options) => {
       enableJavaScript: config.enableJavaScript || false,
       allowedHostnames: config.allowedHostnames || []
     },
+    uploadFilePath: "",
     webStaticConfig: [],
     git: {
       branch: "",
@@ -1356,16 +1083,20 @@ var ctx_default = (options) => {
       parallel: options.parallel ? true : false,
       markBaseline: options.markBaseline ? true : false,
       buildName: options.buildName || "",
-      port
+      port,
+      ignoreResolutions: resolutionOff,
+      fileExtension: extensionFiles,
+      stripExtension: ignoreStripExtension,
+      ignorePattern: ignoreFilePattern
     },
     cliVersion: version,
     totalSnapshots: -1
   };
 };
-function executeCommand(command4) {
+function executeCommand(command5) {
   let dst = process.cwd();
   try {
-    return child_process.execSync(command4, {
+    return child_process.execSync(command5, {
       cwd: dst,
       stdio: ["ignore"],
       encoding: "utf-8"
@@ -1396,8 +1127,8 @@ var git_default = (ctx) => {
   } else {
     const splitCharacter = "<##>";
     const prettyFormat = ["%h", "%H", "%s", "%f", "%b", "%at", "%ct", "%an", "%ae", "%cn", "%ce", "%N", ""];
-    const command4 = 'git log -1 --pretty=format:"' + prettyFormat.join(splitCharacter) + '" && git rev-parse --abbrev-ref HEAD && git tag --contains HEAD';
-    let res = executeCommand(command4).split(splitCharacter);
+    const command5 = 'git log -1 --pretty=format:"' + prettyFormat.join(splitCharacter) + '" && git rev-parse --abbrev-ref HEAD && git tag --contains HEAD';
+    let res = executeCommand(command5).split(splitCharacter);
     var branchAndTags = res[res.length - 1].split("\n").filter((n) => n);
     var branch = ctx.env.CURRENT_BRANCH || branchAndTags[0];
     branchAndTags.slice(1);
@@ -1423,11 +1154,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");
       }
     }),
@@ -1447,11 +1178,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");
       }
     }),
@@ -1470,13 +1201,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* () {
@@ -1494,37 +1225,469 @@ 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`,
     task: (ctx2, task) => __async(void 0, null, function* () {
+      var _a, _b;
       updateLogContext({ task: "finalizeBuild" });
       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");
       }
+      try {
+        yield (_a = ctx2.browser) == null ? void 0 : _a.close();
+        ctx2.log.debug(`Closed browser`);
+        yield (_b = ctx2.server) == null ? void 0 : _b.close();
+        ctx2.log.debug(`Closed server`);
+        let resp = yield ctx2.client.getS3PreSignedURL(ctx2);
+        yield ctx2.client.uploadLogs(ctx2, resp.data.url);
+        fs5.unlinkSync(constants_default.LOG_FILE_PATH);
+      } catch (error) {
+        ctx2.log.debug(error);
+      }
     }),
     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;
+    updateLogContext({ task: "discovery" });
+    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.firefox.launch(launchOptions);
+      ctx.log.debug(`Firefox 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").option("-P, --port <number>", "Port number for the server").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, _, command5) {
   return __async(this, null, function* () {
-    var _a, _b;
-    let ctx = ctx_default(command4.optsWithGlobals());
+    let ctx = ctx_default(command5.optsWithGlobals());
     if (!which__default.default.sync(execCommand[0], { nothrow: true })) {
       ctx.log.error(`Error: Command not found "${execCommand[0]}"`);
       return;
     }
     ctx.args.execCommand = execCommand;
+    ctx.snapshotQueue = new Queue(ctx);
     ctx.totalSnapshots = 0;
     let tasks = new listr2.Listr(
       [
@@ -1533,6 +1696,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
         getGitInfo_default(),
         createBuild_default(),
         exec_default(ctx),
+        processSnapshot_default(),
         finalizeBuild_default()
       ],
       {
@@ -1550,9 +1714,6 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
       yield tasks.run(ctx);
     } 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();
     }
   });
 });
@@ -1722,13 +1883,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;
       }
@@ -1738,6 +1899,108 @@ function captureScreenshots(ctx) {
     return { capturedScreenshots, output };
   });
 }
+function getImageDimensions(filePath) {
+  const buffer = fs5__default.default.readFileSync(filePath);
+  let width, height;
+  if (buffer.toString("hex", 0, 2) === "ffd8") {
+    let offset = 2;
+    while (offset < buffer.length) {
+      const marker = buffer.toString("hex", offset, offset + 2);
+      offset += 2;
+      const length = buffer.readUInt16BE(offset);
+      if (marker === "ffc0" || marker === "ffc2") {
+        height = buffer.readUInt16BE(offset + 3);
+        width = buffer.readUInt16BE(offset + 5);
+        return { width, height };
+      }
+      offset += length;
+    }
+  } else if (buffer.toString("hex", 1, 4) === "504e47") {
+    width = buffer.readUInt32BE(16);
+    height = buffer.readUInt32BE(20);
+    return { width, height };
+  }
+  return null;
+}
+function isAllowedImage(filePath) {
+  return __async(this, null, function* () {
+    try {
+      const fileBuffer = fs5__default.default.readFileSync(filePath);
+      const isMagicValid = constants_default.MAGIC_NUMBERS.some((magic) => fileBuffer.slice(0, magic.magic.length).equals(magic.magic));
+      const metadata = yield sharp__default.default(filePath).metadata();
+      if (metadata.format === constants_default.FILE_EXTENSION_GIFS) {
+        return false;
+      }
+      if (metadata.width > 0 && metadata.height > 0) {
+        return true;
+      }
+      if (isMagicValid && metadata.format !== constants_default.FILE_EXTENSION_GIFS) {
+        return true;
+      }
+      return false;
+    } catch (error) {
+      return false;
+    }
+  });
+}
+function uploadScreenshots(ctx) {
+  return __async(this, null, function* () {
+    const allowedExtensions = ctx.options.fileExtension.map((ext) => `.${ext.trim().toLowerCase()}`);
+    let noOfScreenshots = 0;
+    function processDirectory(directory, relativePath = "") {
+      return __async(this, null, function* () {
+        const files = fs5__default.default.readdirSync(directory);
+        for (let file of files) {
+          const filePath = path2__default.default.join(directory, file);
+          const stat = fs5__default.default.statSync(filePath);
+          const relativeFilePath = path2__default.default.join(relativePath, file);
+          if (stat.isDirectory() && ctx.options.ignorePattern.includes(relativeFilePath)) {
+            ctx.log.info(`Ignoring Directory ${relativeFilePath}`);
+            continue;
+          }
+          if (stat.isDirectory()) {
+            yield processDirectory(filePath, relativeFilePath);
+          } else {
+            let fileExtension = path2__default.default.extname(file).toLowerCase();
+            if (allowedExtensions.includes(fileExtension)) {
+              const isValid = yield isAllowedImage(filePath);
+              if (!isValid) {
+                ctx.log.info(`File ${filePath} is not a valid ${fileExtension} image or is corrupted. Skipping.`);
+                continue;
+              }
+              let ssId = relativeFilePath;
+              if (ctx.options.stripExtension) {
+                ssId = path2__default.default.join(relativePath, path2__default.default.basename(file, fileExtension));
+              }
+              let viewport = "default";
+              if (!ctx.options.ignoreResolutions) {
+                const dimensions = getImageDimensions(filePath);
+                if (!dimensions) {
+                  ctx.log.info(`Unable to determine dimensions for image: ${filePath}`);
+                } else {
+                  const width = dimensions.width;
+                  const height = dimensions.height;
+                  viewport = `${width}x${height}`;
+                }
+              }
+              yield ctx.client.uploadScreenshot(ctx.build, filePath, ssId, "default", viewport, ctx.log);
+              ctx.log.info(`${filePath} : uploaded successfully`);
+              noOfScreenshots++;
+            } else {
+              ctx.log.info(`File ${filePath} has invalid file extension: ${fileExtension}. Skipping`);
+            }
+          }
+        }
+      });
+    }
+    yield processDirectory(ctx.uploadFilePath);
+    if (noOfScreenshots == 0) {
+      ctx.log.info(`No screenshots uploaded.`);
+    } else {
+      ctx.log.info(`${noOfScreenshots} screenshots uploaded successfully.`);
+    }
+  });
+}
 var captureScreenshots_default = (ctx) => {
   return {
     title: "Capturing screenshots",
@@ -1752,7 +2015,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");
       }
     }),
@@ -1763,9 +2026,9 @@ var captureScreenshots_default = (ctx) => {
 
 // src/commander/capture.ts
 var command2 = new commander.Command();
-command2.name("capture").description("Capture screenshots of static sites").argument("<file>", "Web static config file").option("--parallel", "Capture parallely on all browsers").action(function(file, _, command4) {
+command2.name("capture").description("Capture screenshots of static sites").argument("<file>", "Web static config file").option("--parallel", "Capture parallely on all browsers").action(function(file, _, command5) {
   return __async(this, null, function* () {
-    let ctx = ctx_default(command4.optsWithGlobals());
+    let ctx = ctx_default(command5.optsWithGlobals());
     if (!fs5__default.default.existsSync(file)) {
       console.log(`Error: Web Static Config file ${file} not found.`);
       return;
@@ -1805,6 +2068,71 @@ command2.name("capture").description("Capture screenshots of static sites").argu
   });
 });
 var capture_default = command2;
+var uploadScreenshots_default = (ctx) => {
+  return {
+    title: "Uploading screenshots",
+    task: (ctx2, task) => __async(void 0, null, function* () {
+      try {
+        ctx2.task = task;
+        updateLogContext({ task: "upload" });
+        yield uploadScreenshots(ctx2);
+        task.title = "Screenshots uploaded successfully";
+      } catch (error) {
+        ctx2.log.debug(error);
+        task.output = chalk7__default.default.gray(`${error.message}`);
+        throw new Error("Uploading screenshots failed");
+      }
+    }),
+    rendererOptions: { persistentOutput: true },
+    exitOnError: false
+  };
+};
+
+// src/commander/upload.ts
+var command3 = new commander.Command();
+command3.name("upload").description("Upload screenshots from given directory").argument("<directory>", "Path of the directory").option("-R, --ignoreResolutions", "Ignore resolution").option("-F, --files <extensions>", "Comma-separated list of allowed file extensions", (val) => {
+  return val.split(",").map((ext) => ext.trim().toLowerCase());
+}).option("-E, --removeExtensions", "Strips file extensions from snapshot names").option("-i, --ignoreDir <patterns>", "Comma-separated list of directories to ignore", (val) => {
+  return val.split(",").map((pattern) => pattern.trim());
+}).action(function(directory, _, command5) {
+  return __async(this, null, function* () {
+    let ctx = ctx_default(command5.optsWithGlobals());
+    if (!fs5__default.default.existsSync(directory)) {
+      console.log(`Error: The provided directory ${directory} not found.`);
+      return;
+    }
+    if (path2__default.default.extname(directory).toLowerCase() === constants_default.FILE_EXTENSION_ZIP) {
+      ctx.log.debug(`Error: The provided directory ${directory} is a zip file. Zips are not accepted.`);
+      return;
+    }
+    ctx.uploadFilePath = directory;
+    let tasks = new listr2.Listr(
+      [
+        auth_default(),
+        getGitInfo_default(),
+        createBuild_default(),
+        uploadScreenshots_default(),
+        finalizeBuild_default()
+      ],
+      {
+        rendererOptions: {
+          icon: {
+            [listr2.ListrDefaultRendererLogLevels.OUTPUT]: `\u2192`
+          },
+          color: {
+            [listr2.ListrDefaultRendererLogLevels.OUTPUT]: listr2.color.gray
+          }
+        }
+      }
+    );
+    try {
+      yield tasks.run(ctx);
+    } catch (error) {
+      console.log("\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/");
+    }
+  });
+});
+var upload_default = command3;
 
 // src/lib/uploadFigmaDesigns.ts
 var uploadFigmaDesigns_default = (ctx) => __async(void 0, null, function* () {
@@ -1846,7 +2174,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");
       }
     }),
@@ -1856,11 +2184,11 @@ var uploadFigmaDesigns_default2 = (ctx) => {
 };
 
 // src/commander/uploadFigma.ts
-var command3 = new commander.Command();
-command3.name("upload-figma").description("Capture screenshots of static sites").argument("<file>", "figma design config file").option("--markBaseline", "Mark the uploaded images as baseline").option("--buildName <buildName>", "Name of the build").action(function(file, _, command4) {
+var command4 = new commander.Command();
+command4.name("upload-figma").description("Capture screenshots of static sites").argument("<file>", "figma design config file").option("--markBaseline", "Mark the uploaded images as baseline").option("--buildName <buildName>", "Name of the build").action(function(file, _, command5) {
   return __async(this, null, function* () {
     var _a, _b;
-    let ctx = ctx_default(command4.optsWithGlobals());
+    let ctx = ctx_default(command5.optsWithGlobals());
     if (!fs5__default.default.existsSync(file)) {
       console.log(`Error: Figma Config file ${file} not found.`);
       return;
@@ -1898,31 +2226,34 @@ command3.name("upload-figma").description("Capture screenshots of static sites")
     }
   });
 });
-var uploadFigma_default = command3;
+var uploadFigma_default = command4;
 
 // src/commander/commander.ts
 var program = new commander.Command();
-program.name("smartui").description("CLI to help you run your SmartUI tests on LambdaTest platform").version(`v${version}`).option("-c --config <filepath>", "Config file path").addCommand(exec_default2).addCommand(capture_default).addCommand(configWeb).addCommand(configStatic).addCommand(configFigma).addCommand(uploadFigma_default);
+program.name("smartui").description("CLI to help you run your SmartUI tests on LambdaTest platform").version(`v${version}`).option("-c --config <filepath>", "Config file path").addCommand(exec_default2).addCommand(capture_default).addCommand(configWeb).addCommand(configStatic).addCommand(upload_default).addCommand(configFigma).addCommand(uploadFigma_default);
 var commander_default = program;
 (function() {
   return __async(this, null, function* () {
     let client = new httpClient(env_default());
-    let log = logger_default;
+    let log2 = logger_default;
     try {
-      log.info(`
+      let { data: { latestVersion, deprecated, additionalDescription, additionalDescriptionLatestVersion } } = yield client.checkUpdate(log2);
+      log2.info(`
 LambdaTest SmartUI CLI v${package_default.version}`);
-      let { data: { latestVersion, deprecated } } = yield client.checkUpdate(log);
-      if (deprecated)
-        log.warn(`This version is deprecated. A new version ${latestVersion} is available!
+      log2.info(chalk7__default.default.yellow(`${additionalDescription}`));
+      if (deprecated) {
+        log2.warn(`This version is deprecated. A new version ${latestVersion} is available!`);
+        log2.warn(`${additionalDescriptionLatestVersion}
 `);
-      else if (package_default.version !== latestVersion)
-        log.info(chalk8__default.default.gray(`A new version ${latestVersion} is available!
+      } else if (package_default.version !== latestVersion) {
+        log2.info(chalk7__default.default.green(`A new version ${latestVersion} is available!`));
+        log2.info(chalk7__default.default.red(`${additionalDescriptionLatestVersion}
 `));
-      else
-        log.info(chalk8__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
+      } else
+        log2.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"));
+      log2.debug(error);
+      log2.info(chalk7__default.default.gray("https://www.npmjs.com/package/@lambdatest/smartui-cli\n"));
     }
     commander_default.parse();
   });