Merge pull request #200 from sushobhit-lt/DOT-4308

parthlambdatest · web-flow · commit 892eca03a18a · 2025-01-06T21:03:50.000+05:30
[DOT-4308] figma web implementation
diff --git a/package.json b/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/**/*"
diff --git a/src/commander/commander.ts b/src/commander/commander.ts
@@ -1,10 +1,10 @@
 import { Command } from 'commander'
 import exec from './exec.js'
-import { configWeb, configStatic, configFigma} from './config.js'
+import { configWeb, configStatic, configFigma, configWebFigma} from './config.js'
 import capture from './capture.js'
 import upload from './upload.js'
 import { version } from '../../package.json'
-import uploadFigma from './uploadFigma.js'
+import { uploadFigma, uploadWebFigmaCommand  } from './uploadFigma.js'
 
 const program = new Command();
 
@@ -20,6 +20,9 @@ program
     .addCommand(upload)
     .addCommand(configFigma)
     .addCommand(uploadFigma)
+    .addCommand(configWebFigma)
+    .addCommand(uploadWebFigmaCommand)
+
     
 
 export default program;
diff --git a/src/commander/config.ts b/src/commander/config.ts
@@ -1,9 +1,11 @@
 import { Command } from 'commander'
-import { createConfig, createWebStaticConfig, createFigmaConfig } from '../lib/config.js'
+import { createConfig, createWebStaticConfig, createFigmaConfig, createWebFigmaConfig } from '../lib/config.js'
 
 export const configWeb = new Command();
 export const configStatic = new Command();
 export const configFigma = new Command();
+export const configWebFigma = new Command();
+
 
 configWeb
     .name('config:create')
@@ -29,4 +31,11 @@ configFigma
         createFigmaConfig(filepath);
     })
 
+configWebFigma
+    .name('config:create-figma-web')
+    .description('Create figma config file with browsers')
+    .argument('[filepath]', 'Optional config filepath')
+    .action(async function(filepath, options) {
+        createWebFigmaConfig(filepath);
+    })
 
diff --git a/src/commander/uploadFigma.ts b/src/commander/uploadFigma.ts
@@ -1,25 +1,28 @@
 import fs from 'fs'
 import { Command } from 'commander'
 import { Context } from '../types.js'
-import { color , Listr, ListrDefaultRendererLogLevels, LoggerFormat } from 'listr2'
+import { color, Listr, ListrDefaultRendererLogLevels, LoggerFormat } from 'listr2'
 import auth from '../tasks/auth.js'
 import ctxInit from '../lib/ctx.js'
 import getGitInfo from '../tasks/getGitInfo.js'
-import createBuild from '../tasks/createBuild.js'
-import captureScreenshots from '../tasks/captureScreenshots.js'
 import finalizeBuild from '../tasks/finalizeBuild.js'
-import { validateFigmaDesignConfig } from '../lib/schemaValidation.js'
+import { validateFigmaDesignConfig, validateWebFigmaConfig } from '../lib/schemaValidation.js'
 import uploadFigmaDesigns from '../tasks/uploadFigmaDesigns.js'
+import uploadWebFigma from '../tasks/uploadWebFigma.js'
+import { verifyFigmaWebConfig } from '../lib/config.js'
+import chalk from 'chalk';
 
-const command = new Command();
 
-command
+const uploadFigma = new Command();
+const uploadWebFigmaCommand = new 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(async function(file, _, command) {
+    .option('--buildName <buildName>', 'Name of the build')
+    .action(async function (file, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 
         if (!fs.existsSync(file)) {
@@ -62,4 +65,67 @@ command
 
     })
 
-export default command;
+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(async function (file, _, command) {
+        let ctx: Context = ctxInit(command.optsWithGlobals());
+
+        if (!fs.existsSync(file)) {
+            console.log(`Error: figma-web config file ${file} not found.`);
+            return;
+        }
+        try {
+            ctx.config = JSON.parse(fs.readFileSync(file, 'utf8'));
+            ctx.log.info(JSON.stringify(ctx.config));
+            if (!validateWebFigmaConfig(ctx.config)) {
+                ctx.log.debug(JSON.stringify(validateWebFigmaConfig.errors, null, 2));
+                // Iterate and add warning for "additionalProperties"
+                validateWebFigmaConfig.errors?.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);
+                    }
+                });
+            }
+
+            //Validate the figma config
+            verifyFigmaWebConfig(ctx);
+        } catch (error: any) {
+            ctx.log.error(chalk.red(`Invalid figma-web config; ${error.message}`));
+            return;
+        }
+
+        let tasks = new Listr<Context>(
+            [
+                auth(ctx),
+                getGitInfo(ctx),
+                uploadWebFigma(ctx),
+                finalizeBuild(ctx)
+            ],
+            {
+                rendererOptions: {
+                    icon: {
+                        [ListrDefaultRendererLogLevels.OUTPUT]: `→`
+                    },
+                    color: {
+                        [ListrDefaultRendererLogLevels.OUTPUT]: color.gray as LoggerFormat
+                    }
+                }
+            }
+        )
+
+        try {
+            await tasks.run(ctx);
+        } catch (error) {
+            console.log('\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/');
+        }
+
+    })
+
+export { uploadFigma, uploadWebFigmaCommand }
diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -1,6 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import constants from './constants.js';
+import { Context } from "../types.js";
 
 export function createConfig(filepath: string) {
     // default filepath
@@ -67,3 +68,59 @@ export function createFigmaConfig(filepath: string) {
     fs.writeFileSync(filepath, JSON.stringify(constants.DEFAULT_FIGMA_CONFIG, null, 2) + '\n');
     console.log(`Created designs config: ${filepath}`);
 };
+
+export function createWebFigmaConfig(filepath: string) {
+    // default filepath
+    filepath = filepath || '.smartui.json';
+    let filetype = path.extname(filepath);
+    if (filetype != '.json') {
+        console.log('Error: figma config file must have .json extension');
+        return
+    }
+
+    // verify the file does not already exist
+    if (fs.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
+    }
+
+    // write stringified default config options to the filepath
+    fs.mkdirSync(path.dirname(filepath), { recursive: true });
+    fs.writeFileSync(filepath, JSON.stringify(constants.WEB_FIGMA_CONFIG, null, 2) + '\n');
+    console.log(`Created figma web config: ${filepath}`);
+};
+
+export function verifyFigmaWebConfig(ctx: Context) {
+    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 && ctx.config?.figma || {};
+    const screenshots = [];
+    for (let c of 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;
+}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -370,5 +370,30 @@ export 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"]
+                },
+              ]
+        }
     }
 }
diff --git a/src/lib/fetchFigma.ts b/src/lib/fetchFigma.ts
@@ -0,0 +1,50 @@
+import { Context } from "../types.js";
+
+export default async (ctx: Context): Promise<any> => {
+  const buildId = ctx.build.id;
+  ctx.log.debug(`Fetching figma results for buildId ${buildId}`);
+  const startTime = Date.now(); // Record the start time
+  try {
+    const results = await callFetchWebFigmaRecursive(startTime, buildId, ctx);
+    return results;
+  } catch (error) {
+    ctx.log.error(`Failed to fetch figma results: ${error}`);
+    return { message: "Failed to fetch figma results" };
+  }
+};
+
+
+// Recursive function with 5-second interval and 5-minute timeout
+async function callFetchWebFigmaRecursive(
+  startTime: number,
+  buildId: any,
+  ctx: Context
+): Promise<any> {
+  const currentTime = Date.now();
+  const elapsedTime = (currentTime - startTime) / 1000; // Elapsed time in seconds
+
+  // Check if total elapsed time exceeds 3 minutes
+  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 = await ctx.client.fetchWebFigma(buildId, ctx.log);
+    ctx.log.debug("responseData : " + JSON.stringify(response));
+
+    const message = response?.data?.message || "";
+    if (message === "") {
+      ctx.log.debug("No results yet. Retrying after 5 seconds...");
+      await new Promise((resolve) => setTimeout(resolve, 5000)); // Wait for 5 seconds
+      return await callFetchWebFigmaRecursive(startTime, buildId, ctx);
+    } else {
+      return response?.data?.message;
+    }
+  } catch (error) {
+    ctx.log.error("Error in fetchWebFigma:", error);
+    ctx.log.debug("Retrying after 5 seconds...");
+    await new Promise((resolve) => setTimeout(resolve, 5000)); // Wait for 5 seconds
+    return await callFetchWebFigmaRecursive(startTime, buildId, ctx);
+  }
+}
diff --git a/src/lib/httpClient.ts b/src/lib/httpClient.ts
@@ -33,6 +33,9 @@ export default class httpClient {
 
     async request(config: AxiosRequestConfig, log: Logger): Promise<Record<string, any>> {
         log.debug(`http request: ${config.method} ${config.url}`);
+        if(config && config.data) {
+            log.debug(config.data);
+        }
 
         return this.axiosInstance.request(config)
             .then(resp => {
@@ -50,7 +53,7 @@ export default class httpClient {
                         headers: error.response.headers,
                         body: error.response.data
                     })}`);
-                    throw new Error(error.response.data.error?.message || error.response.data.message);
+                    throw new Error(error.response.data.error?.message || error.response.data.message || error.response.data);
                 }
                 if (error.request) {
                     log.debug(`http request failed: ${error.toJSON()}`);
@@ -223,4 +226,26 @@ export default class httpClient {
             maxContentLength: Infinity, // prevent axios from limiting the content size
         }, ctx.log)
     }
+
+    processWebFigma(requestBody: any, log: Logger) {
+            return this.request({
+                url: "figma-web/upload",
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: JSON.stringify(requestBody)
+            }, log);
+        }
+
+    fetchWebFigma(buildId: any, log: Logger) {
+            return this.request({
+                url: "figma-web/fetch",
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                params: { buildId }
+            }, log);
+        }
 }
diff --git a/src/lib/schemaValidation.ts b/src/lib/schemaValidation.ts
diff --git a/src/lib/uploadWebFigma.ts b/src/lib/uploadWebFigma.ts
diff --git a/src/tasks/uploadWebFigma.ts b/src/tasks/uploadWebFigma.ts
diff --git a/src/types.ts b/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@lambdatest/smartui-cli",`
`3`		`- "version": "4.0.15",`
	`3`	`+ "version": "4.0.16",`
`4`	`4`	`"description": "A command line interface (CLI) to run SmartUI tests on LambdaTest",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist/*/"`