@lambdatest/smartui-cli 4.0.8 → 4.0.9

package/README.md

@@ -0,0 +1,68 @@
+# SmartUI-CLI
+
+<img height="400" src="https://user-images.githubusercontent.com/126776938/232535511-8d51cf1b-1a33-48fc-825c-b13e7a9ec388.png">
+
+<p align="center">
+  <a href="https://www.lambdatest.com/blog/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Blog</a>
+  &nbsp; &#8901; &nbsp;
+  <a href="https://www.lambdatest.com/support/docs/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Docs</a>
+  &nbsp; &#8901; &nbsp;
+  <a href="https://www.lambdatest.com/learning-hub/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Learning Hub</a>
+  &nbsp; &#8901; &nbsp;
+  <a href="https://www.lambdatest.com/newsletter/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Newsletter</a>
+  &nbsp; &#8901; &nbsp;
+  <a href="https://www.lambdatest.com/certifications/?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample" target="_bank">Certifications</a>
+  &nbsp; &#8901; &nbsp;
+  <a href="https://www.youtube.com/c/LambdaTest" target="_bank">YouTube</a>
+</p>
+&emsp;
+&emsp;
+&emsp;
+
+
+
+[<img height="58" width="200" src="https://user-images.githubusercontent.com/70570645/171866795-52c11b49-0728-4229-b073-4b704209ddde.png">](https://accounts.lambdatest.com/register?utm_source=github&utm_medium=repo&utm_campaign=playwright-sample)
+
+
+The **SmartUI-CLI** allows you to capture visual snapshots of your web applications, upload images, and run visual regression tests using [LambdaTest's SmartUI](https://www.lambdatest.com/visual-regression-testing) platform directly from the command line.
+
+- [Installation](#installation)
+- [Commands](#commands)
+- [Documentation](#documentation)
+- [Issues](#issues)
+
+## Installation
+
+```sh-session
+$ npm install smartui-cli
+```
+
+**Note:**  
+If you face any problems executing tests with SmartUI-CLI `versions >= v4.x.x`, upgrade your Node.js version to `v20.3` or above.
+
+## Commands
+- `npx smartui exec` - Capture DOM assets for visual testing across multiple browsers and resolutions.
+- `npx smartui capture` - Bulk capture static URLs for visual testing.
+- `npx smartui upload` - Upload custom images or screenshots for visual comparison.
+- `npx smartui upload-figma` - Upload Figma design images for visual comparison.
+- `npx smartui config` - Creates configuration file according to the usecase.
+
+### Documentation
+
+In addition to its core functionalities, the SmartUI CLI leverages LambdaTest's cloud infrastructure for robust, scalable visual regression testing across various browsers and devices.
+
+- [SmartUI Selenium SDK](https://www.lambdatest.com/support/docs/smartui-selenium-java-sdk) - A complete SDK to capture DOM assets for visual tests.
+- [LambdaTest Documentation](https://www.lambdatest.com/support/docs/) - Official LambdaTest documentation for SmartUI and other integrations.
+- [Bulk capturing static URLs with SmartUI](https://www.lambdatest.com/support/docs/smartui-cli/) - Documentation for capturing satatic urls in bulk with SmartUI
+- [Bring your own screenshots](https://www.lambdatest.com/support/docs/smartui-cli-upload/) - Documentation for capturing satatic urls in bulk
+- [Figma CLI](https://www.lambdatest.com/support/docs/smartui-cli-figma/) - Documentation for uploading figma components to SmartUI
+
+### Issues
+
+If you encounter problems with SmartUI-CLI, [add an issue on GitHub](https://github.com/LambdaTest/smartui-cli/issues/new).
+
+For other support issues, reach out via [LambdaTest Support](https://www.lambdatest.com/support).
+
+------
+
+[Know more](https://www.lambdatest.com/visual-regression-testing) about SmartUI and it's AI enabled comparison engines.

package/dist/index.cjs

@@ -199,6 +199,8 @@ var constants_default = {
   FILE_EXTENSION_GIFS: "gif",
   // Default scrollTime
   DEFAULT_SCROLL_TIME: 8,
+  // Default page load time
+  DEFAULT_PAGE_LOAD_TIMEOUT: 18e4,
   // Magic Numbers 
   MAGIC_NUMBERS: [
     { ext: "jpg", magic: Buffer.from([255, 216, 255]) },
@@ -949,7 +951,7 @@ var auth_default = (ctx) => {
 };
 
 // package.json
-var version = "4.0.8";
+var version = "4.0.9";
 var package_default = {
   name: "@lambdatest/smartui-cli",
   version,
@@ -959,7 +961,8 @@ var package_default = {
   ],
   scripts: {
     build: "tsup",
-    release: "pnpm run build && pnpm publish --access public --no-git-checks"
+    release: "pnpm run build && pnpm publish --access public --no-git-checks",
+    "local-build": "pnpm run build && pnpm pack"
   },
   bin: {
     smartui: "./dist/index.cjs"
@@ -1100,13 +1103,13 @@ var httpClient = class {
     }).then(() => {
       log2.debug(`${ssName} for ${browserName} ${viewport} uploaded successfully`);
     }).catch((error) => {
-      if (error.response) {
+      log2.error(`Unable to upload screenshot ${JSON.stringify(error)}`);
+      if (error && error.response && error.response.data && error.response.data.error) {
         throw new Error(error.response.data.error.message);
       }
-      if (error.request) {
-        throw new Error(error.toJSON().message);
+      if (error) {
+        throw new Error(JSON.stringify(error));
       }
-      throw new Error(error.message);
     });
   }
   checkUpdate(log2) {
@@ -1179,6 +1182,7 @@ var ctx_default = (options) => {
   let extensionFiles;
   let ignoreStripExtension;
   let ignoreFilePattern;
+  let parallelObj;
   let fetchResultObj;
   let fetchResultsFileObj;
   try {
@@ -1200,6 +1204,7 @@ var ctx_default = (options) => {
     extensionFiles = options.files || ["png", "jpeg", "jpg"];
     ignoreStripExtension = options.removeExtensions || false;
     ignoreFilePattern = options.ignoreDir || [];
+    parallelObj = options.parallel ? options.parallel === true ? 1 : options.parallel : 1;
     if (options.fetchResults) {
       if (options.fetchResults !== true && !options.fetchResults.endsWith(".json")) {
         console.error("Error: The file extension for --fetch-results must be .json");
@@ -1264,7 +1269,8 @@ var ctx_default = (options) => {
     },
     args: {},
     options: {
-      parallel: options.parallel ? true : false,
+      parallel: parallelObj,
+      force: options.force ? true : false,
       markBaseline: options.markBaseline ? true : false,
       buildName: options.buildName || "",
       port,
@@ -1409,8 +1415,10 @@ function scrollToBottomAndBackToTop({
 }
 function launchBrowsers(ctx) {
   return __async(this, null, function* () {
+    var _a;
     let browsers = {};
-    let launchOptions = { headless: true };
+    const isHeadless = ((_a = process.env.HEADLESS) == null ? void 0 : _a.toLowerCase()) === "false" ? false : true;
+    let launchOptions = { headless: isHeadless };
     if (ctx.config.web) {
       for (const browser of ctx.config.web.browsers) {
         switch (browser) {
@@ -1748,18 +1756,19 @@ var REQUEST_TIMEOUT = 1e4;
 var MIN_VIEWPORT_HEIGHT = 1080;
 function processSnapshot(snapshot, ctx) {
   return __async(this, null, function* () {
-    var _a;
+    var _a, _b;
     updateLogContext({ task: "discovery" });
     ctx.log.debug(`Processing snapshot ${snapshot.name} ${snapshot.url}`);
+    const isHeadless = ((_a = process.env.HEADLESS) == null ? void 0 : _a.toLowerCase()) === "false" ? false : true;
     let launchOptions = {
-      headless: true,
+      headless: isHeadless,
       args: constants_default.LAUNCH_ARGS
     };
     let contextOptions = {
       javaScriptEnabled: ctx.config.cliEnableJavaScript,
       userAgent: constants_default.CHROME_USER_AGENT
     };
-    if (!((_a = ctx.browser) == null ? void 0 : _a.isConnected())) {
+    if (!((_b = ctx.browser) == null ? void 0 : _b.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);
@@ -2426,7 +2435,7 @@ configFigma.name("config:create-figma").description("Create figma designs config
 });
 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" };
+    let pageOptions = { waitUntil: process.env.SMARTUI_PAGE_WAIT_UNTIL_EVENT || "load", timeout: ctx.config.waitForPageRender || constants_default.DEFAULT_PAGE_LOAD_TIMEOUT };
     let ssId = name.toLowerCase().replace(/\s/g, "_");
     let context;
     let contextOptions = {};
@@ -2639,6 +2648,88 @@ function uploadScreenshots(ctx) {
     }
   });
 }
+function captureScreenshotsConcurrent(ctx) {
+  return __async(this, null, function* () {
+    delDir("screenshots");
+    let totalSnapshots = ctx.webStaticConfig && ctx.webStaticConfig.length;
+    let browserInstances = ctx.options.parallel || 1;
+    let optimizeBrowserInstances = 0;
+    optimizeBrowserInstances = Math.floor(Math.log2(totalSnapshots));
+    if (optimizeBrowserInstances < 1) {
+      optimizeBrowserInstances = 1;
+    }
+    if (optimizeBrowserInstances > browserInstances) {
+      optimizeBrowserInstances = browserInstances;
+    }
+    if (ctx.options.force && browserInstances > 1) {
+      optimizeBrowserInstances = browserInstances;
+    }
+    let urlsPerInstance = 0;
+    if (optimizeBrowserInstances == 1) {
+      urlsPerInstance = totalSnapshots;
+    } else {
+      urlsPerInstance = Math.ceil(totalSnapshots / optimizeBrowserInstances);
+    }
+    ctx.log.debug(`*** browserInstances requested ${ctx.options.parallel} `);
+    ctx.log.debug(`*** optimizeBrowserInstances  ${optimizeBrowserInstances} `);
+    ctx.log.debug(`*** urlsPerInstance  ${urlsPerInstance}`);
+    ctx.task.output = `URLs : ${totalSnapshots} || Parallel Browser Instances: ${optimizeBrowserInstances}
+`;
+    let staticURLChunks = splitURLs(ctx.webStaticConfig, urlsPerInstance);
+    let totalCapturedScreenshots = 0;
+    let output = "";
+    const responses = yield Promise.all(staticURLChunks.map((urlConfig) => __async(this, null, function* () {
+      let { capturedScreenshots, finalOutput } = yield processChunk(ctx, urlConfig);
+      return { capturedScreenshots, finalOutput };
+    })));
+    responses.forEach((response) => {
+      totalCapturedScreenshots += response.capturedScreenshots;
+      output += response.finalOutput;
+    });
+    delDir("screenshots");
+    return { totalCapturedScreenshots, output };
+  });
+}
+function splitURLs(arr, chunkSize) {
+  const result = [];
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    result.push(arr.slice(i, i + chunkSize));
+  }
+  return result;
+}
+function processChunk(ctx, urlConfig) {
+  return __async(this, null, function* () {
+    let browsers = {};
+    let capturedScreenshots = 0;
+    let finalOutput = "";
+    try {
+      browsers = yield launchBrowsers(ctx);
+    } catch (error) {
+      yield closeBrowsers(browsers);
+      ctx.log.debug(error);
+      throw new Error(`Failed launching browsers ${error}`);
+    }
+    for (let staticConfig of urlConfig) {
+      try {
+        yield captureScreenshotsAsync(ctx, staticConfig, browsers);
+        delDir(`screenshots/${staticConfig.name.toLowerCase().replace(/\s/g, "_")}`);
+        let output = `${chalk6__default.default.gray(staticConfig.name)} ${chalk6__default.default.green("\u2713")}
+`;
+        ctx.task.output = ctx.task.output ? ctx.task.output + output : output;
+        finalOutput += output;
+        capturedScreenshots++;
+      } catch (error) {
+        ctx.log.debug(`screenshot capture failed for ${JSON.stringify(staticConfig)}; error: ${error}`);
+        let output = `${chalk6__default.default.gray(staticConfig.name)} ${chalk6__default.default.red("\u2717")}
+`;
+        ctx.task.output += output;
+        finalOutput += output;
+      }
+    }
+    yield closeBrowsers(browsers);
+    return { capturedScreenshots, finalOutput };
+  });
+}
 var captureScreenshots_default = (ctx) => {
   return {
     title: "Capturing screenshots",
@@ -2649,9 +2740,16 @@ var captureScreenshots_default = (ctx) => {
           startPolling(ctx2, task);
         }
         updateLogContext({ task: "capture" });
-        let { capturedScreenshots, output } = yield captureScreenshots(ctx2);
-        if (capturedScreenshots != ctx2.webStaticConfig.length) {
-          throw new Error(output);
+        if (ctx2.options.parallel) {
+          let { totalCapturedScreenshots, output } = yield captureScreenshotsConcurrent(ctx2);
+          if (totalCapturedScreenshots != ctx2.webStaticConfig.length) {
+            throw new Error(output);
+          }
+        } else {
+          let { capturedScreenshots, output } = yield captureScreenshots(ctx2);
+          if (capturedScreenshots != ctx2.webStaticConfig.length) {
+            throw new Error(output);
+          }
         }
         task.title = "Screenshots captured successfully";
       } catch (error) {
@@ -2667,21 +2765,26 @@ 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").option("--fetch-results [filename]", "Fetch results and optionally specify an output file, e.g., <filename>.json").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").action(function(file, _, command5) {
   return __async(this, null, function* () {
     let ctx = ctx_default(command5.optsWithGlobals());
     if (!fs5__default.default.existsSync(file)) {
-      console.log(`Error: Web Static Config file ${file} not found.`);
+      ctx.log.error(`Web Static Config file ${file} not found.`);
       return;
     }
     try {
       ctx.webStaticConfig = JSON.parse(fs5__default.default.readFileSync(file, "utf8"));
       if (!validateWebStaticConfig(ctx.webStaticConfig))
         throw new Error(validateWebStaticConfig.errors[0].message);
+      if (ctx.webStaticConfig && ctx.webStaticConfig.length === 0) {
+        ctx.log.error(`No URLs found in the specified config file -> ${file}`);
+        return;
+      }
     } catch (error) {
-      console.log(`[smartui] Error: Invalid Web Static Config; ${error.message}`);
+      ctx.log.error(`Invalid Web Static Config; ${error.message}`);
       return;
     }
+    ctx.log.debug(ctx.config);
     let tasks = new listr2.Listr(
       [
         auth_default(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdatest/smartui-cli",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",
   "files": [
     "dist/**/*"
@@ -43,6 +43,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "release": "pnpm run build && pnpm publish --access public --no-git-checks"
+    "release": "pnpm run build && pnpm publish --access public --no-git-checks",
+    "local-build": "pnpm run build && pnpm pack"
   }
 }