@lambdatest/smartui-cli 2.0.3 → 2.0.5

package/dist/index.cjs

@@ -8,14 +8,14 @@ var chalk = require('chalk');
 var path2 = require('path');
 var fastify = require('fastify');
 var fs = require('fs');
-var winston = require('winston');
+var test = require('@playwright/test');
 var Ajv = require('ajv');
 var addErrors = require('ajv-errors');
+var winston = require('winston');
 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 }; }
 
@@ -66,6 +66,271 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+var MIN_VIEWPORT_HEIGHT = 1080;
+var processSnapshot_default = (snapshot, ctx) => __async(void 0, null, function* () {
+  let options = snapshot.options;
+  let warnings = [];
+  let processedOptions = {};
+  if (options && Object.keys(options).length !== 0) {
+    ctx.log.debug(`Processing options: ${JSON.stringify(options)}`);
+    if (options.ignoreDOM && Object.keys(options.ignoreDOM).length !== 0 || options.selectDOM && Object.keys(options.selectDOM).length !== 0) {
+      if (!ctx.browser)
+        ctx.browser = yield test.chromium.launch({ headless: true });
+      let ignoreOrSelectDOM;
+      let ignoreOrSelectBoxes;
+      if (options.ignoreDOM && Object.keys(options.ignoreDOM).length !== 0) {
+        processedOptions.ignoreBoxes = {};
+        ignoreOrSelectDOM = "ignoreDOM";
+        ignoreOrSelectBoxes = "ignoreBoxes";
+      } else {
+        processedOptions.selectBoxes = {};
+        ignoreOrSelectDOM = "selectDOM";
+        ignoreOrSelectBoxes = "selectBoxes";
+      }
+      let selectors = [];
+      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;
+        }
+      }
+      for (const vp of ctx.webConfig.viewports) {
+        const page = yield ctx.browser.newPage({ viewport: { width: vp.width, height: vp.height || MIN_VIEWPORT_HEIGHT } });
+        yield page.setContent(snapshot.dom.html);
+        let viewport = `${vp.width}${vp.height ? "x" + vp.height : ""}`;
+        if (!Array.isArray(processedOptions[ignoreOrSelectBoxes][viewport]))
+          processedOptions[ignoreOrSelectBoxes][viewport] = [];
+        let locators = [];
+        let boxes = [];
+        for (const selector of selectors) {
+          let l = yield page.locator(selector).all();
+          if (l.length === 0) {
+            warnings.push(`For snapshot ${snapshot.name}, no element found for selector ${selector}`);
+            continue;
+          }
+          locators.push(...l);
+        }
+        for (const locator of locators) {
+          let bb = yield locator.boundingBox();
+          if (bb)
+            boxes.push({
+              left: bb.x,
+              top: bb.y,
+              right: bb.x + bb.width,
+              bottom: bb.y + bb.height
+            });
+        }
+        processedOptions[ignoreOrSelectBoxes][viewport].push(...boxes);
+        yield page.close();
+      }
+    }
+  }
+  warnings.push(...snapshot.dom.warnings);
+  return {
+    processedSnapshot: {
+      name: snapshot.name,
+      url: snapshot.url,
+      dom: Buffer.from(snapshot.dom.html).toString("base64"),
+      options: processedOptions
+    },
+    warnings
+  };
+});
+var ajv = new Ajv__default.default({ allErrors: true });
+ajv.addFormat("web-url", {
+  type: "string",
+  validate: (url) => {
+    const urlPattern = new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$", "i");
+    return urlPattern.test(url.trim());
+  }
+});
+addErrors__default.default(ajv);
+var ConfigSchema = {
+  type: "object",
+  properties: {
+    web: {
+      type: "object",
+      properties: {
+        browsers: {
+          type: "array",
+          items: { type: "string", enum: ["chrome", "firefox", "edge", "safari"] },
+          uniqueItems: true,
+          maxItems: 4,
+          errorMessage: "Invalid config; allowed browsers - chrome, firefox, edge, safari"
+        },
+        viewports: {
+          type: "array",
+          items: {
+            type: "array",
+            oneOf: [
+              {
+                items: [{ type: "number", minimum: 320, maximum: 7680 }],
+                minItems: 1,
+                maxItems: 1
+              },
+              {
+                items: [
+                  { type: "number", minimum: 320, maximum: 7680 },
+                  { type: "number", minimum: 320, maximum: 7680 }
+                ],
+                minItems: 2,
+                maxItems: 2
+              }
+            ],
+            errorMessage: "Invalid config; width/height must be >= 320 and <= 7680"
+          },
+          uniqueItems: true,
+          maxItems: 5,
+          errorMessage: "Invalid config; max unique viewports allowed - 5"
+        },
+        waitForPageRender: {
+          type: "number",
+          minimum: 0,
+          maximum: 3e5,
+          errorMessage: "Invalid config; waitForPageRender must be > 0 and <= 300000"
+        },
+        waitForTimeout: {
+          type: "number",
+          minimum: 0,
+          maximum: 3e4,
+          errorMessage: "Invalid config; waitForTimeout must be > 0 and <= 30000"
+        }
+      },
+      required: ["browsers", "viewports"],
+      additionalProperties: false
+    }
+  },
+  required: ["web"],
+  additionalProperties: false
+};
+var WebStaticConfigSchema = {
+  type: "array",
+  items: {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        minLength: 1,
+        errorMessage: "name is mandatory and cannot be empty"
+      },
+      url: {
+        type: "string",
+        format: "web-url",
+        errorMessage: "url is mandatory and must be a valid web URL"
+      },
+      waitForTimeout: {
+        type: "number",
+        nullable: true,
+        minimum: 0,
+        maximum: 3e4,
+        errorMessage: "waitForTimeout must be > 0 and <= 30000"
+      }
+    },
+    required: ["name", "url"],
+    additionalProperties: false
+  },
+  uniqueItems: true
+};
+var SnapshotSchema = {
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      minLength: 1,
+      errorMessage: "Invalid snapshot; name is mandatory and cannot be empty"
+    },
+    url: {
+      type: "string",
+      format: "web-url",
+      errorMessage: "Invalid snapshot; url is mandatory and must be a valid web URL"
+    },
+    dom: {
+      type: "object"
+    },
+    options: {
+      type: "object",
+      properties: {
+        ignoreDOM: {
+          type: "object",
+          properties: {
+            id: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; id cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; id array must have unique items"
+            },
+            class: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; class cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; class array must have unique items"
+            },
+            cssSelector: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; cssSelector cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; cssSelector array must have unique items"
+            },
+            xpath: {
+              type: "array",
+              items: { type: "string", minLength: 1 },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; xpath array must have unique and non-empty items"
+            }
+          }
+        },
+        selectDOM: {
+          type: "object",
+          properties: {
+            id: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; id cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; id array must have unique items"
+            },
+            class: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; class cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; class array must have unique items"
+            },
+            cssSelector: {
+              type: "array",
+              items: { type: "string", minLength: 1, pattern: "^[^;]*$", errorMessage: "Invalid snapshot options; cssSelector cannot be empty or have semicolon" },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; cssSelector array must have unique items"
+            },
+            xpath: {
+              type: "array",
+              items: { type: "string", minLength: 1 },
+              uniqueItems: true,
+              errorMessage: "Invalid snapshot options; xpath array must have unique and non-empty items"
+            }
+          }
+        }
+      },
+      additionalProperties: false
+    }
+  },
+  required: ["name", "url", "dom", "options"],
+  additionalProperties: false,
+  errorMessage: "Invalid snapshot"
+};
+var validateConfig = ajv.compile(ConfigSchema);
+var validateWebStaticConfig = ajv.compile(WebStaticConfigSchema);
+var validateSnapshot = ajv.compile(SnapshotSchema);
+
+// src/lib/server.ts
 var server_default = (ctx) => __async(void 0, null, function* () {
   const server = fastify__default.default({ logger: false, bodyLimit: 1e7 });
   const opts = {};
@@ -77,15 +342,17 @@ 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* () {
-    let { snapshot, testType } = request.body;
-    snapshot.dom = Buffer.from(snapshot.dom).toString("base64");
     try {
-      yield ctx.client.uploadSnapshot(ctx.build.id, snapshot, testType, ctx.log);
+      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++;
+      reply.code(200).send({ data: { message: "success", warnings } });
     } catch (error) {
-      reply.code(500).send({ error: { message: error.message } });
+      return reply.code(500).send({ error: { message: error.message } });
     }
-    ctx.totalSnapshots++;
-    reply.code(200).send({ data: { message: "success" } });
   }));
   yield server.listen({ port: 8080 });
   let { port } = server.addresses()[0];
@@ -196,9 +463,9 @@ var DEFAULT_CONFIG = {
       "edge"
     ],
     viewports: [
-      [1920, 1080],
-      [1366, 768],
-      [360, 640]
+      [1920],
+      [1366],
+      [360]
     ],
     waitForTimeout: 1e3
   }
@@ -237,100 +504,56 @@ function createWebStaticConfig(filepath) {
 }
 
 // package.json
-var version = "2.0.3";
-var ajv = new Ajv__default.default({ allErrors: true });
-ajv.addFormat("web-url", {
-  type: "string",
-  validate: (url) => {
-    const urlPattern = new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$", "i");
-    return urlPattern.test(url);
-  }
-});
-addErrors__default.default(ajv);
-var ConfigSchema = {
-  type: "object",
-  properties: {
-    web: {
-      type: "object",
-      properties: {
-        browsers: {
-          type: "array",
-          items: { type: "string", enum: ["chrome", "firefox", "edge", "safari"] },
-          uniqueItems: true,
-          maxItems: 4,
-          errorMessage: "Invalid config; allowed browsers - chrome, firefox, edge, safari"
-        },
-        viewports: {
-          type: "array",
-          items: {
-            type: "array",
-            items: [
-              { type: "number", minimum: 320, maximum: 7680 },
-              { type: "number", minimum: 320, maximum: 7680 }
-            ],
-            additionalItems: false,
-            minItems: 2,
-            maxItems: 2
-          },
-          uniqueItems: true,
-          maxItems: 5,
-          errorMessage: "Invalid config; width/height must be >= 320 and <= 7680; max viewports allowed - 5"
-        },
-        waitForPageRender: {
-          type: "number",
-          minimum: 0,
-          maximum: 3e5,
-          errorMessage: "Invalid config; waitForPageRender must be > 0 and <= 300000"
-        },
-        waitForTimeout: {
-          type: "number",
-          minimum: 0,
-          maximum: 3e4,
-          errorMessage: "Invalid config; waitForTimeout must be > 0 and <= 30000"
-        }
-      },
-      required: ["browsers", "viewports"],
-      additionalProperties: false
-    }
-  },
-  required: ["web"],
-  additionalProperties: false
-};
-var WebStaticConfigSchema = {
-  type: "array",
-  items: {
-    type: "object",
-    properties: {
-      name: {
-        type: "string",
-        minLength: 1,
-        errorMessage: "name is mandatory and cannot be empty"
-      },
-      url: {
-        type: "string",
-        format: "web-url",
-        errorMessage: "url is mandatory and must be a valid web URL"
-      },
-      waitForTimeout: {
-        type: "number",
-        nullable: true,
-        minimum: 0,
-        maximum: 3e4,
-        errorMessage: "waitForTimeout must be > 0 and <= 30000"
-      }
-    },
-    required: ["name", "url"],
-    additionalProperties: false
-  },
-  uniqueItems: true
-};
-var validateConfig = ajv.compile(ConfigSchema);
-var validateWebStaticConfig = ajv.compile(WebStaticConfigSchema);
+var version = "2.0.5";
+var HTTP_SCHEME = "https:";
+var HTTP_SCHEME_PREFIX = "https://";
+var WWW = "www.";
 function delDir(dir) {
   if (fs__default.default.existsSync(dir)) {
     fs__default.default.rmSync(dir, { recursive: true });
   }
 }
+function ensureHttps(urlString) {
+  try {
+    if (urlString && urlString.startsWith(WWW)) {
+      urlString = HTTP_SCHEME_PREFIX + urlString;
+    }
+    let url = new URL(urlString);
+    if (url.protocol !== HTTP_SCHEME) {
+      url.protocol = HTTP_SCHEME;
+    }
+    return url.toString();
+  } catch (error) {
+    console.error("Invalid URL: " + urlString, error);
+    return null;
+  }
+}
+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);
+    })();
+  });
+}
 
 // src/lib/httpClient.ts
 var httpClient = class {
@@ -461,7 +684,7 @@ var ctx_default = (options) => {
     process.exit();
   }
   for (let viewport of config.web.viewports)
-    viewports.push({ width: viewport[0], height: viewport[1] });
+    viewports.push({ width: viewport[0], height: viewport[1] || 0 });
   return {
     env,
     log: logger_default,
@@ -629,7 +852,7 @@ var finalizeBuild_default = (ctx) => {
 var command = new commander.Command();
 command.name("exec").description("Run test commands around SmartUI").argument("<command...>", "Command supplied for running tests").action(function(execCommand, _, command3) {
   return __async(this, null, function* () {
-    var _a;
+    var _a, _b;
     let ctx = ctx_default(command3.optsWithGlobals());
     if (!which__default.default.sync(execCommand[0], { nothrow: true })) {
       console.log(`Error: Command not found "${execCommand[0]}"`);
@@ -663,6 +886,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
       console.log("\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();
     }
   });
 });
@@ -685,6 +909,7 @@ var BROWSER_FIREFOX = "firefox";
 var BROWSER_EDGE = "edge";
 var EDGE_CHANNEL = "msedge";
 var PW_WEBKIT = "webkit";
+var MIN_VIEWPORT_HEIGHT2 = 1080;
 function captureScreenshots(ctx, screenshots) {
   return __async(this, null, function* () {
     var _a;
@@ -692,6 +917,7 @@ function captureScreenshots(ctx, screenshots) {
     let totalBrowsers = ctx.webConfig.browsers.length;
     let totalViewports = ctx.webConfig.viewports.length;
     let totalScreenshots = screenshots.length;
+    let capturedScreenshots = 0;
     for (let i = 0; i < totalBrowsers; i++) {
       let browserName = (_a = ctx.webConfig.browsers[i]) == null ? void 0 : _a.toLowerCase();
       let browser;
@@ -718,17 +944,25 @@ function captureScreenshots(ctx, screenshots) {
           let screenshot = screenshots[j];
           let screenshotId = screenshot.name.toLowerCase().replace(/\s/g, "-");
           const page = yield context.newPage();
+          if (screenshot.url) {
+            screenshot.url = screenshot.url.trim();
+            screenshot.url = ensureHttps(screenshot.url);
+          }
           yield page.goto(screenshot.url, pageOptions);
-          yield page.waitForTimeout(screenshot.waitForTimeout || 0);
           for (let k = 0; k < totalViewports; k++) {
             let { width, height } = ctx.webConfig.viewports[k];
             let ssName = `${browserName}-${width}x${height}-${screenshotId}.png`;
             let ssPath = `screenshots/${screenshotId}/${ssName}.png`;
-            yield page.setViewportSize({ width, height });
-            yield page.screenshot({ path: ssPath });
+            yield page.setViewportSize({ width, height: height || MIN_VIEWPORT_HEIGHT2 });
+            if (height === 0)
+              yield page.evaluate(scrollToBottomAndBackToTop);
+            yield page.waitForTimeout(screenshot.waitForTimeout || 0);
+            yield page.screenshot({ path: ssPath, fullPage: height ? false : true });
             let completed = i == totalBrowsers - 1 && j == totalScreenshots - 1 && k == totalViewports - 1 ? true : false;
             browserName = browserName === BROWSER_SAFARI ? PW_WEBKIT : browserName;
             ctx.client.uploadScreenshot(ctx.build, ssPath, screenshot.name, browserName, `${width}x${height}`, completed);
+            capturedScreenshots++;
+            ctx.task.output = chalk__default.default.gray(`screenshots captured: ${capturedScreenshots}/${totalBrowsers * totalViewports * totalScreenshots}`);
           }
           yield page.close();
         }
@@ -747,8 +981,8 @@ var captureScreenshots_default = (ctx) => {
     title: "Capturing screenshots",
     task: (ctx2, task) => __async(void 0, null, function* () {
       try {
-        let { webStaticConfig: screenshots } = ctx2;
-        let totalScreenshots = yield captureScreenshots(ctx2, screenshots);
+        ctx2.task = task;
+        let totalScreenshots = yield captureScreenshots(ctx2, ctx2.webStaticConfig);
         task.title = "Screenshots captured successfully";
         task.output = chalk__default.default.gray(`total screenshots: ${totalScreenshots}`);
       } catch (error) {

package/package.json

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