@lambdatest/smartui-cli 4.0.15 → 4.0.16

package/dist/index.cjs

@@ -427,6 +427,31 @@ var constants_default = {
         ]
       }
     ]
+  },
+  WEB_FIGMA_CONFIG: {
+    web: {
+      browsers: [
+        "chrome",
+        "firefox",
+        "safari",
+        "edge"
+      ]
+    },
+    figma: {
+      "depth": 2,
+      "configs": [
+        {
+          "figma_file_token": "<token>",
+          "figma_ids": ["id-1", "id-2"],
+          "screenshot_names": ["homepage", "about"]
+        },
+        {
+          "figma_file_token": "<token>",
+          "figma_ids": ["id-3", "id-4"],
+          "screenshot_names": ["xyz", "abc"]
+        }
+      ]
+    }
   }
 };
 
@@ -844,10 +869,97 @@ var FigmaDesignConfigSchema = {
   required: ["figma_config"],
   additionalProperties: false
 };
+var FigmaWebConfigSchema = {
+  type: "object",
+  "properties": {
+    "web": {
+      "type": "object",
+      "properties": {
+        browsers: {
+          type: "array",
+          items: { type: "string", enum: [constants_default.CHROME, constants_default.FIREFOX, constants_default.SAFARI, constants_default.EDGE] },
+          uniqueItems: true,
+          maxItems: 4,
+          errorMessage: `allowed browsers - ${constants_default.CHROME}, ${constants_default.FIREFOX}, ${constants_default.SAFARI}, ${constants_default.EDGE}`
+        },
+        "viewports": {
+          "type": "array",
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "integer",
+              "minimum": 1
+            },
+            "minItems": 1
+          }
+        }
+      },
+      "required": ["browsers"]
+    },
+    "figma": {
+      "type": "object",
+      "properties": {
+        depth: {
+          type: "integer",
+          minimum: 2,
+          errorMessage: "Depth must be an integer and greater than 1"
+        },
+        "configs": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "figma_file_token": {
+                "type": "string",
+                minLength: 1,
+                errorMessage: "figma_file_token is mandatory and cannot be empty"
+              },
+              "figma_ids": {
+                "type": "array",
+                "items": {
+                  "type": "string",
+                  minLength: 1,
+                  errorMessage: "Each ID in figma_ids must be a non-empty string"
+                },
+                minItems: 1,
+                uniqueItems: true,
+                errorMessage: {
+                  type: "figma_ids must be an array of strings",
+                  minItems: "figma_ids cannot be empty",
+                  uniqueItems: "figma_ids must contain unique values"
+                }
+              },
+              "screenshot_names": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                uniqueItems: false
+              }
+            },
+            "required": ["figma_file_token", "figma_ids"]
+          },
+          uniqueItems: true,
+          errorMessage: {
+            uniqueItems: "Each entry in the figma configs must be unique"
+          }
+        }
+      },
+      "required": ["configs"]
+    },
+    smartIgnore: {
+      type: "boolean",
+      errorMessage: "Invalid config; smartIgnore must be true/false"
+    }
+  },
+  "required": ["web", "figma"],
+  additionalProperties: false
+};
 var validateConfig = ajv.compile(ConfigSchema);
 var validateWebStaticConfig = ajv.compile(WebStaticConfigSchema);
 var validateSnapshot = ajv.compile(SnapshotSchema);
 var validateFigmaDesignConfig = ajv.compile(FigmaDesignConfigSchema);
+var validateWebFigmaConfig = ajv.compile(FigmaWebConfigSchema);
 
 // src/lib/server.ts
 var server_default = (ctx) => __async(void 0, null, function* () {
@@ -1013,7 +1125,7 @@ var auth_default = (ctx) => {
 };
 
 // package.json
-var version = "4.0.15";
+var version = "4.0.16";
 var package_default = {
   name: "@lambdatest/smartui-cli",
   version,
@@ -1083,6 +1195,9 @@ var httpClient = class {
   request(config, log2) {
     return __async(this, null, function* () {
       log2.debug(`http request: ${config.method} ${config.url}`);
+      if (config && config.data) {
+        log2.debug(config.data);
+      }
       return this.axiosInstance.request(config).then((resp) => {
         log2.debug(`http response: ${JSON.stringify({
           status: resp.status,
@@ -1098,7 +1213,7 @@ var httpClient = class {
             headers: error.response.headers,
             body: error.response.data
           })}`);
-          throw new Error(((_a = error.response.data.error) == null ? void 0 : _a.message) || error.response.data.message);
+          throw new Error(((_a = error.response.data.error) == null ? void 0 : _a.message) || error.response.data.message || error.response.data);
         }
         if (error.request) {
           log2.debug(`http request failed: ${error.toJSON()}`);
@@ -1258,6 +1373,26 @@ var httpClient = class {
       // prevent axios from limiting the content size
     }, ctx.log);
   }
+  processWebFigma(requestBody, log2) {
+    return this.request({
+      url: "figma-web/upload",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      data: JSON.stringify(requestBody)
+    }, log2);
+  }
+  fetchWebFigma(buildId, log2) {
+    return this.request({
+      url: "figma-web/fetch",
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      params: { buildId }
+    }, log2);
+  }
 };
 var ctx_default = (options) => {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -1376,10 +1511,10 @@ var ctx_default = (options) => {
     totalSnapshots: -1
   };
 };
-function executeCommand(command5) {
+function executeCommand(command4) {
   let dst = process.cwd();
   try {
-    return child_process.execSync(command5, {
+    return child_process.execSync(command4, {
       cwd: dst,
       stdio: ["ignore"],
       encoding: "utf-8"
@@ -1410,8 +1545,8 @@ var git_default = (ctx) => {
   } else {
     const splitCharacter = "<##>";
     const prettyFormat = ["%h", "%H", "%s", "%f", "%b", "%at", "%ct", "%an", "%ae", "%cn", "%ce", "%N", ""];
-    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);
+    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);
     var branchAndTags = res[res.length - 1].split("\n").filter((n) => n);
     var branch = ctx.env.CURRENT_BRANCH || branchAndTags[0];
     branchAndTags.slice(1);
@@ -2455,14 +2590,14 @@ var Queue = class {
 
 // 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").option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(execCommand, _, command5) {
+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").option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(execCommand, _, command4) {
   return __async(this, null, function* () {
-    const options = command5.optsWithGlobals();
+    const options = command4.optsWithGlobals();
     if (options.buildName === "") {
       console.log(`Error: The '--buildName' option cannot be an empty string.`);
       process.exit(1);
     }
-    let ctx = ctx_default(command5.optsWithGlobals());
+    let ctx = ctx_default(command4.optsWithGlobals());
     if (!which__default.default.sync(execCommand[0], { nothrow: true })) {
       ctx.log.error(`Error: Command not found "${execCommand[0]}"`);
       return;
@@ -2547,11 +2682,59 @@ function createFigmaConfig(filepath) {
   fs5__default.default.writeFileSync(filepath, JSON.stringify(constants_default.DEFAULT_FIGMA_CONFIG, null, 2) + "\n");
   console.log(`Created designs config: ${filepath}`);
 }
+function createWebFigmaConfig(filepath) {
+  filepath = filepath || ".smartui.json";
+  let filetype = path2__default.default.extname(filepath);
+  if (filetype != ".json") {
+    console.log("Error: figma config file must have .json extension");
+    return;
+  }
+  if (fs5__default.default.existsSync(filepath)) {
+    console.log(`Error: figma config already exists: ${filepath}`);
+    console.log(`To create a new file, please specify the file name like: 'smartui config:create-figma-web <fileName>.json'`);
+    return;
+  }
+  fs5__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
+  fs5__default.default.writeFileSync(filepath, JSON.stringify(constants_default.WEB_FIGMA_CONFIG, null, 2) + "\n");
+  console.log(`Created figma web config: ${filepath}`);
+}
+function verifyFigmaWebConfig(ctx) {
+  var _a;
+  if (ctx.env.FIGMA_TOKEN == "") {
+    throw new Error("Missing FIGMA_TOKEN in Environment Variables");
+  }
+  if (ctx.env.LT_USERNAME == "") {
+    throw new Error("Missing LT_USERNAME in Environment Variables");
+  }
+  if (ctx.env.LT_ACCESS_KEY == "") {
+    throw new Error("Missing LT_ACCESS_KEY in Environment Variables");
+  }
+  let figma = ctx.config && ((_a = ctx.config) == null ? void 0 : _a.figma) || {};
+  const screenshots = [];
+  for (let c of figma == null ? void 0 : figma.configs) {
+    if (c.screenshot_names && c.screenshot_names.length > 0 && c.figma_ids && c.figma_ids.length != c.screenshot_names.length) {
+      throw new Error("Mismatch in Figma Ids and Screenshot Names in figma config");
+    }
+    if (isValidArray(c.screenshot_names)) {
+      for (const name of c.screenshot_names) {
+        screenshots.push(name);
+      }
+    }
+  }
+  if (new Set(screenshots).size !== screenshots.length) {
+    throw new Error("Found duplicate screenshot names in figma config");
+  }
+  return true;
+}
+function isValidArray(input) {
+  return Array.isArray(input) && input.length > 0;
+}
 
 // src/commander/config.ts
 var configWeb = new commander.Command();
 var configStatic = new commander.Command();
 var configFigma = new commander.Command();
+var configWebFigma = new commander.Command();
 configWeb.name("config:create").description("Create SmartUI config file").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
   return __async(this, null, function* () {
     createConfig(filepath);
@@ -2567,6 +2750,11 @@ configFigma.name("config:create-figma").description("Create figma designs config
     createFigmaConfig(filepath);
   });
 });
+configWebFigma.name("config:create-figma-web").description("Create figma config file with browsers").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
+  return __async(this, null, function* () {
+    createWebFigmaConfig(filepath);
+  });
+});
 function captureScreenshotsForConfig(_0, _1, _2, _3, _4) {
   return __async(this, arguments, function* (ctx, browsers, { name, url, waitForTimeout }, browserName, renderViewports) {
     let pageOptions = { waitUntil: process.env.SMARTUI_PAGE_WAIT_UNTIL_EVENT || "load", timeout: ctx.config.waitForPageRender || constants_default.DEFAULT_PAGE_LOAD_TIMEOUT };
@@ -2899,14 +3087,14 @@ 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("-C, --parallel [number]", "Specify the number of instances per browser", parseInt).option("-F, --force", "forcefully apply the specified parallel instances per browser").option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(file, _, command5) {
+command2.name("capture").description("Capture screenshots of static sites").argument("<file>", "Web static config file").option("-C, --parallel [number]", "Specify the number of instances per browser", parseInt).option("-F, --force", "forcefully apply the specified parallel instances per browser").option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(file, _, command4) {
   return __async(this, null, function* () {
-    const options = command5.optsWithGlobals();
+    const options = command4.optsWithGlobals();
     if (options.buildName === "") {
       console.log(`Error: The '--buildName' option cannot be an empty string.`);
       process.exit(1);
     }
-    let ctx = ctx_default(command5.optsWithGlobals());
+    let ctx = ctx_default(command4.optsWithGlobals());
     if (!fs5__default.default.existsSync(file)) {
       ctx.log.error(`Web Static Config file ${file} not found.`);
       return;
@@ -2980,14 +3168,14 @@ command3.name("upload").description("Upload screenshots from given directory").a
   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());
-}).option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(directory, _, command5) {
+}).option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").option("--buildName <string>", "Specify the build name").action(function(directory, _, command4) {
   return __async(this, null, function* () {
-    const options = command5.optsWithGlobals();
+    const options = command4.optsWithGlobals();
     if (options.buildName === "") {
       console.log(`Error: The '--buildName' option cannot be an empty string.`);
       process.exit(1);
     }
-    let ctx = ctx_default(command5.optsWithGlobals());
+    let ctx = ctx_default(command4.optsWithGlobals());
     if (!fs5__default.default.existsSync(directory)) {
       console.log(`Error: The provided directory ${directory} not found.`);
       return;
@@ -3074,12 +3262,118 @@ var uploadFigmaDesigns_default2 = (ctx) => {
   };
 };
 
-// src/commander/uploadFigma.ts
-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) {
+// src/lib/uploadWebFigma.ts
+var uploadWebFigma_default = (ctx) => __async(void 0, null, function* () {
+  var _a, _b;
+  const figmaConfig = ctx.config && ((_a = ctx.config) == null ? void 0 : _a.figma) || {};
+  const webConfig = ctx.config && ((_b = ctx.config) == null ? void 0 : _b.web) || {};
+  let results = "";
+  const buildName = ctx.options.buildName;
+  if (figmaConfig && figmaConfig.configs && figmaConfig.configs.length > 0) {
+    const authToken = `Basic ${Buffer.from(`${ctx.env.LT_USERNAME}:${ctx.env.LT_ACCESS_KEY}`).toString("base64")}`;
+    const requestBody = {
+      figma_token: ctx.env.FIGMA_TOKEN,
+      auth: authToken,
+      build_name: buildName,
+      web: webConfig,
+      figma: figmaConfig,
+      smartIgnore: ctx.config.smartIgnore,
+      git: ctx.git
+    };
+    const responseData = yield ctx.client.processWebFigma(requestBody, ctx.log);
+    ctx.log.debug("responseData : " + JSON.stringify(responseData));
+    if (responseData.data.message == "success") {
+      results = responseData.data.message;
+      ctx.build = {
+        id: responseData.data.buildId,
+        url: responseData.data.buildURL || "https://smartui.lambdatestinternal.com"
+      };
+    }
+  } else {
+    throw new Error("No Figma configuration found in config file");
+  }
+  return results;
+});
+
+// src/lib/fetchFigma.ts
+var fetchFigma_default = (ctx) => __async(void 0, null, function* () {
+  const buildId = ctx.build.id;
+  ctx.log.debug(`Fetching figma results for buildId ${buildId}`);
+  const startTime = Date.now();
+  try {
+    const results = yield callFetchWebFigmaRecursive(startTime, buildId, ctx);
+    return results;
+  } catch (error) {
+    ctx.log.error(`Failed to fetch figma results: ${error}`);
+    return { message: "Failed to fetch figma results" };
+  }
+});
+function callFetchWebFigmaRecursive(startTime, buildId, ctx) {
   return __async(this, null, function* () {
     var _a, _b;
-    let ctx = ctx_default(command5.optsWithGlobals());
+    const currentTime = Date.now();
+    const elapsedTime = (currentTime - startTime) / 1e3;
+    if (elapsedTime >= 180) {
+      ctx.log.error("Stopping execution after 5 minutes.");
+      throw new Error("Timeout: Fetching figma results took more than 5 minutes.");
+    }
+    try {
+      const response = yield ctx.client.fetchWebFigma(buildId, ctx.log);
+      ctx.log.debug("responseData : " + JSON.stringify(response));
+      const message = ((_a = response == null ? void 0 : response.data) == null ? void 0 : _a.message) || "";
+      if (message === "") {
+        ctx.log.debug("No results yet. Retrying after 5 seconds...");
+        yield new Promise((resolve) => setTimeout(resolve, 5e3));
+        return yield callFetchWebFigmaRecursive(startTime, buildId, ctx);
+      } else {
+        return (_b = response == null ? void 0 : response.data) == null ? void 0 : _b.message;
+      }
+    } catch (error) {
+      ctx.log.error("Error in fetchWebFigma:", error);
+      ctx.log.debug("Retrying after 5 seconds...");
+      yield new Promise((resolve) => setTimeout(resolve, 5e3));
+      return yield callFetchWebFigmaRecursive(startTime, buildId, ctx);
+    }
+  });
+}
+
+// src/tasks/uploadWebFigma.ts
+var uploadWebFigma_default2 = (ctx) => {
+  return {
+    title: "Processing Web Figma",
+    task: (ctx2, task) => __async(void 0, null, function* () {
+      try {
+        ctx2.task = task;
+        updateLogContext({ task: "upload-figma-web" });
+        let results = yield uploadWebFigma_default(ctx2);
+        if (results != "success") {
+          throw new Error("Uploading Web Figma Screenshot failed");
+        }
+        if (ctx2.build.id) {
+          task.output = chalk6__default.default.gray(`Build Id: ${ctx2.build.id}`);
+          let figmaOutput = yield fetchFigma_default(ctx2);
+          const jsonObject = JSON.parse(figmaOutput);
+          let output = JSON.stringify(jsonObject, null, 2);
+          task.output = task.output + "\n" + chalk6__default.default.green(`${output}`);
+        }
+        task.title = "Web Figma images uploaded successfully to SmartUI";
+        ctx2.log.debug(`Web Figma processed: ${results}`);
+      } catch (error) {
+        ctx2.log.debug(error);
+        task.output = chalk6__default.default.gray(`${error.message}`);
+        throw new Error("Uploading Web Figma Screenshots failed");
+      }
+    }),
+    rendererOptions: { persistentOutput: true },
+    exitOnError: true
+  };
+};
+var uploadFigma = new commander.Command();
+var uploadWebFigmaCommand = new commander.Command();
+uploadFigma.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) {
+  return __async(this, null, function* () {
+    var _a, _b;
+    let ctx = ctx_default(command4.optsWithGlobals());
     if (!fs5__default.default.existsSync(file)) {
       console.log(`Error: Figma Config file ${file} not found.`);
       return;
@@ -3117,11 +3411,62 @@ command4.name("upload-figma").description("Capture screenshots of static sites")
     }
   });
 });
-var uploadFigma_default = command4;
+uploadWebFigmaCommand.name("upload-figma-web").description("Capture screenshots of static sites").argument("<file>", "figma config config file").option("--markBaseline", "Mark the uploaded images as baseline").option("--buildName <buildName>", "Name of the build").action(function(file, _, command4) {
+  return __async(this, null, function* () {
+    var _a;
+    let ctx = ctx_default(command4.optsWithGlobals());
+    if (!fs5__default.default.existsSync(file)) {
+      console.log(`Error: figma-web config file ${file} not found.`);
+      return;
+    }
+    try {
+      ctx.config = JSON.parse(fs5__default.default.readFileSync(file, "utf8"));
+      ctx.log.info(JSON.stringify(ctx.config));
+      if (!validateWebFigmaConfig(ctx.config)) {
+        ctx.log.debug(JSON.stringify(validateWebFigmaConfig.errors, null, 2));
+        (_a = validateWebFigmaConfig.errors) == null ? void 0 : _a.forEach((error) => {
+          if (error.keyword === "additionalProperties") {
+            ctx.log.warn(`Additional property "${error.params.additionalProperty}" is not allowed.`);
+          } else {
+            const validationError = error.message;
+            throw new Error(validationError || "Invalid figma-web config found in file : " + file);
+          }
+        });
+      }
+      verifyFigmaWebConfig(ctx);
+    } catch (error) {
+      ctx.log.error(chalk6__default.default.red(`Invalid figma-web config; ${error.message}`));
+      return;
+    }
+    let tasks = new listr2.Listr(
+      [
+        auth_default(),
+        getGitInfo_default(),
+        uploadWebFigma_default2(),
+        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/");
+    }
+  });
+});
 
 // 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(upload_default).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).addCommand(configWebFigma).addCommand(uploadWebFigmaCommand);
 var commander_default = program;
 (function() {
   return __async(this, null, function* () {

package/package.json

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