@lambdatest/smartui-cli 2.0.4 → 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];
@@ -237,104 +504,7 @@ function createWebStaticConfig(filepath) {
 }
 
 // package.json
-var version = "2.0.4";
-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 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.";
@@ -682,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]}"`);
@@ -716,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();
     }
   });
 });
@@ -738,7 +909,7 @@ var BROWSER_FIREFOX = "firefox";
 var BROWSER_EDGE = "edge";
 var EDGE_CHANNEL = "msedge";
 var PW_WEBKIT = "webkit";
-var MIN_RESOLUTION_HEIGHT = 320;
+var MIN_VIEWPORT_HEIGHT2 = 1080;
 function captureScreenshots(ctx, screenshots) {
   return __async(this, null, function* () {
     var _a;
@@ -782,7 +953,7 @@ function captureScreenshots(ctx, screenshots) {
             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: height || MIN_RESOLUTION_HEIGHT });
+            yield page.setViewportSize({ width, height: height || MIN_VIEWPORT_HEIGHT2 });
             if (height === 0)
               yield page.evaluate(scrollToBottomAndBackToTop);
             yield page.waitForTimeout(screenshot.waitForTimeout || 0);

package/package.json

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