@lambdatest/smartui-cli 2.0.7 → 2.0.9

package/dist/index.cjs

@@ -7,7 +7,7 @@ var listr2 = require('listr2');
 var chalk = require('chalk');
 var path2 = require('path');
 var fastify = require('fastify');
-var fs = require('fs');
+var fs2 = require('fs');
 var test = require('@playwright/test');
 var Ajv = require('ajv');
 var addErrors = require('ajv-errors');
@@ -23,7 +23,7 @@ var which__default = /*#__PURE__*/_interopDefault(which);
 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 fs2__default = /*#__PURE__*/_interopDefault(fs2);
 var Ajv__default = /*#__PURE__*/_interopDefault(Ajv);
 var addErrors__default = /*#__PURE__*/_interopDefault(addErrors);
 var FormData__default = /*#__PURE__*/_interopDefault(FormData);
@@ -66,19 +66,109 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+function delDir(dir) {
+  if (fs2__default.default.existsSync(dir)) {
+    fs2__default.default.rmSync(dir, { recursive: true });
+  }
+}
+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);
+    })();
+  });
+}
+var MAX_RESOURCE_SIZE = 5 * 1024 ** 2;
+var ALLOWED_RESOURCES = ["document", "stylesheet", "image", "media", "font", "other"];
+var ALLOWED_STATUSES = [200, 201];
 var MIN_VIEWPORT_HEIGHT = 1080;
 var processSnapshot_default = (snapshot, ctx) => __async(void 0, null, function* () {
+  ctx.log.debug(`Processing snapshot ${snapshot.name}`);
+  if (!ctx.browser)
+    ctx.browser = yield test.chromium.launch({ headless: true });
+  const context = yield ctx.browser.newContext();
+  const page = yield context.newPage();
+  let cache = {};
+  yield page.route("**/*", (route, request) => __async(void 0, null, function* () {
+    const requestUrl = request.url();
+    const snapshotHostname = new URL(snapshot.url).hostname;
+    const requestHostname = new URL(requestUrl).hostname;
+    try {
+      const response = yield page.request.fetch(request);
+      const body = yield response.body();
+      if (ctx.webConfig.enableJavaScript)
+        ALLOWED_RESOURCES.push("script");
+      if (!body) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping no response`);
+      } else if (!body.length) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping empty response`);
+      } else if (requestUrl === snapshot.url) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping root resource`);
+      } else if (requestHostname !== snapshotHostname) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping remote resource`);
+      } else if (cache[requestUrl]) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping already cached resource`);
+      } else if (body.length > MAX_RESOURCE_SIZE) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping resource larger than 5MB`);
+      } else if (!ALLOWED_STATUSES.includes(response.status())) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping disallowed status [${response.status()}]`);
+      } else if (!ctx.webConfig.enableJavaScript && !ALLOWED_RESOURCES.includes(request.resourceType())) {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - skipping disallowed resource type [${request.resourceType()}]`);
+      } else {
+        ctx.log.debug(`Handling request ${requestUrl}
+ - content-type ${response.headers()["content-type"]}`);
+        cache[requestUrl] = {
+          body: body.toString("base64"),
+          type: response.headers()["content-type"]
+        };
+      }
+      route.fulfill({
+        status: response.status(),
+        headers: response.headers(),
+        body
+      });
+    } catch (error) {
+      ctx.log.debug(`Handling request ${requestUrl} - aborted`);
+      route.abort();
+    }
+  }));
   let options = snapshot.options;
   let optionWarnings = /* @__PURE__ */ new Set();
   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) {
+  let selectors2 = [];
+  let ignoreOrSelectDOM;
+  let ignoreOrSelectBoxes;
+  if (options && Object.keys(options).length) {
+    ctx.log.debug(`Snapshot options: ${JSON.stringify(options)}`);
+    if (options.ignoreDOM && Object.keys(options.ignoreDOM).length || options.selectDOM && Object.keys(options.selectDOM).length) {
+      if (options.ignoreDOM && Object.keys(options.ignoreDOM).length) {
         processedOptions.ignoreBoxes = {};
         ignoreOrSelectDOM = "ignoreDOM";
         ignoreOrSelectBoxes = "ignoreBoxes";
@@ -87,59 +177,72 @@ var processSnapshot_default = (snapshot, ctx) => __async(void 0, null, function*
         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));
+            selectors2.push(...value.map((e) => "#" + e));
             break;
           case "class":
-            selectors.push(...value.map((e) => "." + e));
+            selectors2.push(...value.map((e) => "." + e));
             break;
           case "xpath":
-            selectors.push(...value.map((e) => "xpath=" + e));
+            selectors2.push(...value.map((e) => "xpath=" + e));
             break;
           case "cssSelector":
-            selectors.push(...value);
+            selectors2.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) {
-            optionWarnings.add(`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
-            });
+    }
+  }
+  let navigated = false;
+  for (const viewport of ctx.webConfig.viewports) {
+    yield page.setViewportSize({ width: viewport.width, height: viewport.height || MIN_VIEWPORT_HEIGHT });
+    ctx.log.debug(`Page resized to ${viewport.width}x${viewport.height || MIN_VIEWPORT_HEIGHT}`);
+    if (!navigated) {
+      yield page.goto(snapshot.url);
+      navigated = true;
+      ctx.log.debug(`Navigated to ${snapshot.url}`);
+    }
+    if (!viewport.height)
+      yield page.evaluate(scrollToBottomAndBackToTop);
+    yield page.waitForLoadState("networkidle");
+    ctx.log.debug("Network idle 500ms");
+    if (selectors2.length) {
+      let viewportString = `${viewport.width}${viewport.height ? "x" + viewport.height : ""}`;
+      if (!Array.isArray(processedOptions[ignoreOrSelectBoxes][viewportString]))
+        processedOptions[ignoreOrSelectBoxes][viewportString] = [];
+      let locators = [];
+      let boxes = [];
+      for (const selector of selectors2) {
+        let l = yield page.locator(selector).all();
+        if (l.length === 0) {
+          optionWarnings.add(`For snapshot ${snapshot.name}, no element found for selector ${selector}`);
+          continue;
         }
-        processedOptions[ignoreOrSelectBoxes][viewport].push(...boxes);
-        yield page.close();
+        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][viewportString].push(...boxes);
     }
   }
+  yield page.close();
+  yield context.close();
   return {
     processedSnapshot: {
       name: snapshot.name,
       url: snapshot.url,
       dom: Buffer.from(snapshot.dom.html).toString("base64"),
+      resources: cache,
       options: processedOptions
     },
     warnings: [...optionWarnings, ...snapshot.dom.warnings]
@@ -207,6 +310,10 @@ var ConfigSchema = {
           minimum: 0,
           maximum: 3e4,
           errorMessage: "Invalid config; waitForTimeout must be > 0 and <= 30000"
+        },
+        enableJavaScript: {
+          type: "boolean",
+          errorMessage: "Invalid config; enableJavaScript must be true/false"
         }
       },
       required: ["browsers", "viewports"],
@@ -337,7 +444,7 @@ var validateSnapshot = ajv.compile(SnapshotSchema);
 var server_default = (ctx) => __async(void 0, null, function* () {
   const server = fastify__default.default({ logger: false, bodyLimit: 1e7 });
   const opts = {};
-  const SMARTUI_DOM = fs.readFileSync(path2__default.default.resolve(__dirname, "dom-serializer.js"), "utf-8");
+  const SMARTUI_DOM = fs2.readFileSync(path2__default.default.resolve(__dirname, "dom-serializer.js"), "utf-8");
   server.get("/healthcheck", opts, (_, reply) => {
     reply.code(200).send({ cliVersion: ctx.cliVersion });
   });
@@ -360,6 +467,7 @@ var server_default = (ctx) => __async(void 0, null, function* () {
   yield server.listen();
   let { port } = server.addresses()[0];
   process.env.SMARTUI_SERVER_ADDRESS = `http://localhost:${port}`;
+  process.env.CYPRESS_SMARTUI_SERVER_ADDRESS = `http://localhost:${port}`;
   return server;
 });
 
@@ -474,7 +582,8 @@ var DEFAULT_CONFIG = {
       [1366],
       [360]
     ],
-    waitForTimeout: 1e3
+    waitForTimeout: 1e3,
+    enableJavaScript: false
   }
 };
 function createConfig(filepath) {
@@ -484,13 +593,13 @@ function createConfig(filepath) {
     console.log("Error: Config file must have .json extension");
     return;
   }
-  if (fs__default.default.existsSync(filepath)) {
+  if (fs2__default.default.existsSync(filepath)) {
     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_CONFIG, null, 2) + "\n");
+  fs2__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
+  fs2__default.default.writeFileSync(filepath, JSON.stringify(DEFAULT_CONFIG, null, 2) + "\n");
   console.log(`Created SmartUI Config: ${filepath}`);
 }
 function createWebStaticConfig(filepath) {
@@ -500,18 +609,18 @@ function createWebStaticConfig(filepath) {
     console.log("Error: Config file must have .json extension");
     return;
   }
-  if (fs__default.default.existsSync(filepath)) {
+  if (fs2__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-static links.json'`);
     return;
   }
-  fs__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
-  fs__default.default.writeFileSync(filepath, JSON.stringify(DEFAULT_WEB_STATIC_CONFIG, null, 2) + "\n");
+  fs2__default.default.mkdirSync(path2__default.default.dirname(filepath), { recursive: true });
+  fs2__default.default.writeFileSync(filepath, JSON.stringify(DEFAULT_WEB_STATIC_CONFIG, null, 2) + "\n");
   console.log(`Created web-static config: ${filepath}`);
 }
 
 // package.json
-var version = "2.0.7";
+var version = "2.0.9";
 var package_default = {
   name: "@lambdatest/smartui-cli",
   version,
@@ -559,39 +668,6 @@ var package_default = {
     typescript: "^5.3.2"
   }
 };
-function delDir(dir) {
-  if (fs__default.default.existsSync(dir)) {
-    fs__default.default.rmSync(dir, { recursive: true });
-  }
-}
-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 {
   constructor({ SMARTUI_CLIENT_API_URL, PROJECT_TOKEN }) {
     this.axiosInstance = axios__default.default.create({
@@ -601,7 +677,7 @@ var httpClient = class {
   }
   request(config, log) {
     return __async(this, null, function* () {
-      log.debug(`http request: ${JSON.stringify(config)}`);
+      log.debug(`http request: ${config.method} ${config.url}`);
       return this.axiosInstance.request(config).then((resp) => {
         log.debug(`http response: ${JSON.stringify({
           status: resp.status,
@@ -679,7 +755,7 @@ var httpClient = class {
     }, log);
   }
   uploadScreenshot({ id: buildId, name: buildName, baseline }, ssPath, ssName, browserName, viewport, completed) {
-    const file = fs__default.default.readFileSync(ssPath);
+    const file = fs2__default.default.readFileSync(ssPath);
     const form = new FormData__default.default();
     form.append("screenshots", file, { filename: `${ssName}.png`, contentType: "image/png" });
     form.append("browser", browserName);
@@ -725,7 +801,7 @@ var ctx_default = (options) => {
   let config = DEFAULT_CONFIG;
   try {
     if (options.config) {
-      config = JSON.parse(fs__default.default.readFileSync(options.config, "utf-8"));
+      config = JSON.parse(fs2__default.default.readFileSync(options.config, "utf-8"));
       if (config.web.resolutions) {
         config.web.viewports = config.web.resolutions;
         delete config.web.resolutions;
@@ -747,7 +823,8 @@ var ctx_default = (options) => {
       browsers: config.web.browsers,
       viewports,
       waitForPageRender: config.web.waitForPageRender || 0,
-      waitForTimeout: config.web.waitForTimeout || 0
+      waitForTimeout: config.web.waitForTimeout || 0,
+      enableJavaScript: config.web.enableJavaScript || false
     },
     webStaticConfig: [],
     git: {
@@ -889,6 +966,7 @@ var finalizeBuild_default = (ctx) => {
   return {
     title: `Finalizing build`,
     task: (ctx2, task) => __async(void 0, null, function* () {
+      updateLogContext({ task: "finalizeBuild" });
       try {
         yield new Promise((resolve) => setTimeout(resolve, 2e3));
         yield ctx2.client.finalizeBuild(ctx2.build.id, ctx2.totalSnapshots, ctx2.log);
@@ -1052,12 +1130,12 @@ 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)) {
+    if (!fs2__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"));
+      ctx.webStaticConfig = JSON.parse(fs2__default.default.readFileSync(file, "utf8"));
       if (!validateWebStaticConfig(ctx.webStaticConfig))
         throw new Error(validateWebStaticConfig.errors[0].message);
     } catch (error) {

package/package.json

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