@lambdatest/smartui-cli 2.0.2 → 2.0.4

package/dist/index.cjs

@@ -9,11 +9,13 @@ var path2 = require('path');
 var fastify = require('fastify');
 var fs = require('fs');
 var winston = require('winston');
+var Ajv = require('ajv');
+var addErrors = require('ajv-errors');
 var FormData = require('form-data');
 var axios = require('axios');
 var child_process = require('child_process');
 var spawn = require('cross-spawn');
-var playwright = require('playwright');
+var test = require('@playwright/test');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -22,6 +24,8 @@ var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 var path2__default = /*#__PURE__*/_interopDefault(path2);
 var fastify__default = /*#__PURE__*/_interopDefault(fastify);
 var fs__default = /*#__PURE__*/_interopDefault(fs);
+var Ajv__default = /*#__PURE__*/_interopDefault(Ajv);
+var addErrors__default = /*#__PURE__*/_interopDefault(addErrors);
 var FormData__default = /*#__PURE__*/_interopDefault(FormData);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var spawn__default = /*#__PURE__*/_interopDefault(spawn);
@@ -80,6 +84,7 @@ var server_default = (ctx) => __async(void 0, null, function* () {
     } catch (error) {
       reply.code(500).send({ error: { message: error.message } });
     }
+    ctx.totalSnapshots++;
     reply.code(200).send({ data: { message: "success" } });
   }));
   yield server.listen({ port: 8080 });
@@ -164,6 +169,7 @@ var auth_default = (ctx) => {
         task.title = "Authenticated with SmartUI";
       } catch (error) {
         ctx2.log.debug(error.message);
+        task.output = chalk__default.default.gray(error.message);
         throw new Error("Authentication failed");
       }
     }),
@@ -181,7 +187,7 @@ var DEFAULT_WEB_STATIC_CONFIG = [
     "url": "https://example.com/"
   }
 ];
-var DEFAULT_WEB_CONFIG = {
+var DEFAULT_CONFIG = {
   web: {
     browsers: [
       "chrome",
@@ -190,27 +196,28 @@ var DEFAULT_WEB_CONFIG = {
       "edge"
     ],
     viewports: [
-      [1920, 1080],
-      [1366, 768],
-      [360, 640]
-    ]
+      [1920],
+      [1366],
+      [360]
+    ],
+    waitForTimeout: 1e3
   }
 };
-function createWebConfig(filepath) {
-  filepath = filepath || "smartui-web.json";
+function createConfig(filepath) {
+  filepath = filepath || ".smartui.json";
   let filetype = path2__default.default.extname(filepath);
   if (filetype != ".json") {
     console.log("Error: Config file must have .json extension");
     return;
   }
   if (fs__default.default.existsSync(filepath)) {
-    console.log(`Error: SmartUI Web Config already exists: ${filepath}`);
-    console.log(`To create a new file, please specify the file name like: 'smartui config:create-web webConfig.json'`);
+    console.log(`Error: SmartUI Config already exists: ${filepath}`);
+    console.log(`To create a new file, please specify the file name like: 'smartui config:create .smartui-config.json'`);
     return;
   }
   fs__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
-  fs__default.default.writeFileSync(filepath, JSON.stringify(DEFAULT_WEB_CONFIG, null, 2) + "\n");
-  console.log(`Created SmartUI Web Config: ${filepath}`);
+  fs__default.default.writeFileSync(filepath, JSON.stringify(DEFAULT_CONFIG, null, 2) + "\n");
+  console.log(`Created SmartUI Config: ${filepath}`);
 }
 function createWebStaticConfig(filepath) {
   filepath = filepath || "url.json";
@@ -221,7 +228,7 @@ function createWebStaticConfig(filepath) {
   }
   if (fs__default.default.existsSync(filepath)) {
     console.log(`Error: web-static config already exists: ${filepath}`);
-    console.log(`To create a new file, please specify the file name like: 'smartui config:create-web links.json'`);
+    console.log(`To create a new file, please specify the file name like: 'smartui config:create-web-static links.json'`);
     return;
   }
   fs__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
@@ -230,12 +237,153 @@ function createWebStaticConfig(filepath) {
 }
 
 // package.json
-var version = "2.0.2";
+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 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 {
@@ -286,18 +434,21 @@ var httpClient = class {
         },
         config: {
           browsers: config.browsers,
-          resolutions: config.viewports
+          resolutions: config.viewports,
+          waitForPageRender: config.waitForPageRender,
+          waitForTimeout: config.waitForTimeout
         }
       }
     }, log);
   }
-  finalizeBuild(buildId, log) {
+  finalizeBuild(buildId, totalSnapshots, log) {
+    let params = { buildId };
+    if (totalSnapshots > -1)
+      params.totalSnapshots = totalSnapshots;
     return this.request({
       url: "/build",
       method: "DELETE",
-      params: {
-        buildId
-      }
+      params
     }, log);
   }
   uploadSnapshot(buildId, snapshot, testType, log) {
@@ -347,26 +498,34 @@ var httpClient = class {
 var ctx_default = (options) => {
   let env = env_default();
   let viewports = [];
-  let webConfig = DEFAULT_WEB_CONFIG;
+  let config = DEFAULT_CONFIG;
   try {
     if (options.config) {
-      webConfig = JSON.parse(fs__default.default.readFileSync(options.config, "utf-8"));
-    }
-    for (let viewport of webConfig.web.viewports) {
-      viewports.push({ width: viewport[0], height: viewport[1] });
+      config = JSON.parse(fs__default.default.readFileSync(options.config, "utf-8"));
+      if (config.web.resolutions) {
+        config.web.viewports = config.web.resolutions;
+        delete config.web.resolutions;
+      }
     }
+    if (!validateConfig(config))
+      throw new Error(validateConfig.errors[0].message);
   } catch (error) {
-    throw new Error(error.message);
+    console.log(`[smartui] Error: ${error.message}`);
+    process.exit();
   }
+  for (let viewport of config.web.viewports)
+    viewports.push({ width: viewport[0], height: viewport[1] || 0 });
   return {
     env,
     log: logger_default,
     client: new httpClient(env),
-    config: {
-      browsers: webConfig.web.browsers,
-      viewports
+    webConfig: {
+      browsers: config.web.browsers,
+      viewports,
+      waitForPageRender: config.web.waitForPageRender || 0,
+      waitForTimeout: config.web.waitForTimeout || 0
     },
-    staticConfig: [],
+    webStaticConfig: [],
     git: {
       branch: "",
       commitId: "",
@@ -382,7 +541,8 @@ var ctx_default = (options) => {
       projectId: ""
     },
     args: {},
-    cliVersion: version
+    cliVersion: version,
+    totalSnapshots: -1
   };
 };
 function executeCommand(command3) {
@@ -445,7 +605,7 @@ var createBuild_default = (ctx) => {
     task: (ctx2, task) => __async(void 0, null, function* () {
       updateLogContext({ task: "createBuild" });
       try {
-        let resp = yield ctx2.client.createBuild(ctx2.git, ctx2.config, ctx2.log);
+        let resp = yield ctx2.client.createBuild(ctx2.git, ctx2.webConfig, ctx2.log);
         ctx2.build = {
           id: resp.data.buildId,
           name: resp.data.buildName,
@@ -495,21 +655,22 @@ var exec_default = (ctx) => {
         }));
       });
     }),
-    rendererOptions: { persistentOutput: true }
+    rendererOptions: { persistentOutput: true },
+    exitOnError: false
   };
 };
-var finalizeBuild_default = (ctx, waitTime) => {
+var finalizeBuild_default = (ctx) => {
   return {
     title: `Finalizing build`,
     task: (ctx2, task) => __async(void 0, null, function* () {
       try {
-        if (waitTime > 0) {
-          yield new Promise((resolve) => setTimeout(resolve, waitTime));
-          yield ctx2.client.finalizeBuild(ctx2.build.id, ctx2.log);
-        }
+        yield new Promise((resolve) => setTimeout(resolve, 2e3));
+        yield ctx2.client.finalizeBuild(ctx2.build.id, ctx2.totalSnapshots, ctx2.log);
         task.output = chalk__default.default.gray(`build url: ${ctx2.build.url}`);
         task.title = "Finalized build";
       } catch (error) {
+        ctx2.log.debug(error.message);
+        task.output = chalk__default.default.gray(error.message);
         throw new Error("Finalize build error");
       }
     }),
@@ -528,6 +689,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
       return;
     }
     ctx.args.execCommand = execCommand;
+    ctx.totalSnapshots = 0;
     let tasks = new listr2.Listr(
       [
         auth_default(),
@@ -535,7 +697,7 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
         getGitInfo_default(),
         createBuild_default(),
         exec_default(ctx),
-        finalizeBuild_default(ctx, 3e4)
+        finalizeBuild_default()
       ],
       {
         rendererOptions: {
@@ -560,12 +722,12 @@ command.name("exec").description("Run test commands around SmartUI").argument("<
 var exec_default2 = command;
 var configWeb = new commander.Command();
 var configStatic = new commander.Command();
-configWeb.name("config:create-web").description("Create SmartUI Web config file").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
+configWeb.name("config:create").description("Create SmartUI config file").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
   return __async(this, null, function* () {
-    createWebConfig(filepath);
+    createConfig(filepath);
   });
 });
-configStatic.name("config:web-static").description("Create Web Static config file").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
+configStatic.name("config:create-web-static").description("Create Web Static config file").argument("[filepath]", "Optional config filepath").action(function(filepath, options) {
   return __async(this, null, function* () {
     createWebStaticConfig(filepath);
   });
@@ -575,51 +737,70 @@ var BROWSER_SAFARI = "safari";
 var BROWSER_FIREFOX = "firefox";
 var BROWSER_EDGE = "edge";
 var EDGE_CHANNEL = "msedge";
+var PW_WEBKIT = "webkit";
+var MIN_RESOLUTION_HEIGHT = 320;
 function captureScreenshots(ctx, screenshots) {
   return __async(this, null, function* () {
     var _a;
     delDir("screenshots");
-    let totalBrowsers = ctx.config.browsers.length;
-    let totalViewports = ctx.config.viewports.length;
+    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.config.browsers[i]) == null ? void 0 : _a.toLowerCase();
+      let browserName = (_a = ctx.webConfig.browsers[i]) == null ? void 0 : _a.toLowerCase();
       let browser;
       let launchOptions = { headless: true };
-      switch (browserName) {
-        case BROWSER_CHROME:
-          browser = yield playwright.chromium.launch(launchOptions);
-          break;
-        case BROWSER_SAFARI:
-          browser = yield playwright.webkit.launch(launchOptions);
-          break;
-        case BROWSER_FIREFOX:
-          browser = yield playwright.firefox.launch(launchOptions);
-          break;
-        case BROWSER_EDGE:
-          launchOptions.channel = EDGE_CHANNEL;
-          browser = yield playwright.chromium.launch(launchOptions);
-          break;
-      }
-      const context = yield browser.newContext();
-      for (let j = 0; j < totalScreenshots; j++) {
-        let screenshot = screenshots[j];
-        let screenshotId = screenshot.name.toLowerCase().replace(/\s/g, "-");
-        const page = yield context.newPage();
-        yield page.goto(screenshot.url);
-        yield page.waitForTimeout(screenshot.waitForTimeout || 0);
-        for (let k = 0; k < totalViewports; k++) {
-          let { width, height } = ctx.config.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, fullPage: true });
-          let completed = i == totalBrowsers - 1 && j == totalScreenshots - 1 && k == totalViewports - 1 ? true : false;
-          ctx.client.uploadScreenshot(ctx.build, ssPath, screenshot.name, browserName, `${width}x${height}`, completed);
+      let pageOptions = { waitUntil: process.env.SMARTUI_PAGE_WAIT_UNTIL_EVENT || "load" };
+      try {
+        switch (browserName) {
+          case BROWSER_CHROME:
+            browser = yield test.chromium.launch(launchOptions);
+            break;
+          case BROWSER_SAFARI:
+            browser = yield test.webkit.launch(launchOptions);
+            break;
+          case BROWSER_FIREFOX:
+            browser = yield test.firefox.launch(launchOptions);
+            break;
+          case BROWSER_EDGE:
+            launchOptions.channel = EDGE_CHANNEL;
+            browser = yield test.chromium.launch(launchOptions);
+            break;
         }
-        yield page.close();
+        const context = yield browser.newContext();
+        for (let j = 0; j < totalScreenshots; j++) {
+          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);
+          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: height || MIN_RESOLUTION_HEIGHT });
+            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();
+        }
+        yield browser.close();
+      } catch (error) {
+        if (browser)
+          yield browser.close();
+        throw error;
       }
-      yield browser.close();
     }
     return totalBrowsers * totalViewports * totalScreenshots;
   });
@@ -629,16 +810,17 @@ var captureScreenshots_default = (ctx) => {
     title: "Capturing screenshots",
     task: (ctx2, task) => __async(void 0, null, function* () {
       try {
-        let { staticConfig: 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) {
-        console.error(error);
+        task.output = chalk__default.default.gray(`${error.message}`);
         throw new Error("Capturing screenshots failed");
       }
     }),
-    rendererOptions: { persistentOutput: true }
+    rendererOptions: { persistentOutput: true },
+    exitOnError: false
   };
 };
 
@@ -647,13 +829,25 @@ var command2 = new commander.Command();
 command2.name("capture").description("Capture screenshots of static sites").argument("<file>", "Web static config file").action(function(file, _, command3) {
   return __async(this, null, function* () {
     let ctx = ctx_default(command3.optsWithGlobals());
+    if (!fs__default.default.existsSync(file)) {
+      console.log(`Error: Web Static Config file ${file} not found.`);
+      return;
+    }
+    try {
+      ctx.webStaticConfig = JSON.parse(fs__default.default.readFileSync(file, "utf8"));
+      if (!validateWebStaticConfig(ctx.webStaticConfig))
+        throw new Error(validateWebStaticConfig.errors[0].message);
+    } catch (error) {
+      console.log(`[smartui] Error: Invalid Web Static Config; ${error.message}`);
+      return;
+    }
     let tasks = new listr2.Listr(
       [
         auth_default(),
         getGitInfo_default(),
         createBuild_default(),
         captureScreenshots_default(),
-        finalizeBuild_default(ctx, 0)
+        finalizeBuild_default()
       ],
       {
         rendererOptions: {
@@ -667,11 +861,6 @@ command2.name("capture").description("Capture screenshots of static sites").argu
       }
     );
     try {
-      if (!fs__default.default.existsSync(file)) {
-        console.log(`Error: Config file ${file} not found.`);
-        return;
-      }
-      ctx.staticConfig = JSON.parse(fs__default.default.readFileSync(file, "utf8"));
       yield tasks.run(ctx);
     } catch (error) {
       console.log("\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdatest/smartui-cli",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",
   "files": [
     "dist/**/*"
@@ -17,9 +17,15 @@
   "author": "LambdaTest <keys@lambdatest.com>",
   "license": "MIT",
   "dependencies": {
+    "@playwright/browser-chromium": "^1.40.1",
+    "@playwright/browser-firefox": "^1.40.1",
+    "@playwright/browser-webkit": "^1.40.1",
+    "@playwright/test": "^1.40.1",
     "@types/cross-spawn": "^6.0.4",
     "@types/node": "^20.8.9",
     "@types/which": "^3.0.2",
+    "ajv": "^8.12.0",
+    "ajv-errors": "^3.0.0",
     "axios": "^1.6.0",
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
@@ -27,7 +33,6 @@
     "fastify": "^4.24.3",
     "form-data": "^4.0.0",
     "listr2": "^7.0.1",
-    "playwright": "^1.39.0",
     "tsup": "^7.2.0",
     "which": "^4.0.0",
     "winston": "^3.10.0"