Merge pull request #99 from parthlambdatest/Dot-3170

[Dot-3170] Uploading Images through SmartUI CLI

Author: pinanks

src/commander/commander.ts

@@ -2,6 +2,7 @@ import { Command } from 'commander'
 import exec from './exec.js'
 import { configWeb, configStatic, configFigma} from './config.js'
 import capture from './capture.js'
+import upload from './upload.js'
 import { version } from '../../package.json'
 import uploadFigma from './uploadFigma.js'
 
@@ -16,6 +17,7 @@ program
     .addCommand(capture)
     .addCommand(configWeb)
     .addCommand(configStatic)
+    .addCommand(upload)
     .addCommand(configFigma)
     .addCommand(uploadFigma)
 

src/commander/upload.ts

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import { Command } from 'commander';
+import { Context } from '../types.js';
+import { color, Listr, ListrDefaultRendererLogLevels } 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 uploadScreenshots from '../tasks/uploadScreenshots.js';
+import finalizeBuild from '../tasks/finalizeBuild.js';
+
+const command = new Command();
+
+command
+    .name('upload')
+    .description('Upload screenshots from given directory')
+    .argument('<directory>', 'Path of the directory')
+    .option('-R, --ignoreResolutions', 'Ignore resolution')
+    .option('-F, --files <extensions>', 'Comma-separated list of allowed file extensions', val => {
+        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());
+    })
+    .action(async function(directory, _, command) {
+        let ctx: Context = ctxInit(command.optsWithGlobals());
+
+        if (!fs.existsSync(directory)) {
+            console.log(`Error: The provided directory ${directory} not found.`);
+            return;
+        }
+
+        ctx.uploadFilePath = directory;
+
+        let tasks = new Listr<Context>(
+            [
+                auth(ctx),
+                getGitInfo(ctx),
+                createBuild(ctx),
+                uploadScreenshots(ctx),
+                finalizeBuild(ctx)
+            ],
+            {
+                rendererOptions: {
+                    icon: {
+                        [ListrDefaultRendererLogLevels.OUTPUT]: `→`
+                    },
+                    color: {
+                        [ListrDefaultRendererLogLevels.OUTPUT]: color.gray
+                    }
+                }
+            }
+        );
+
+        try {
+            await tasks.run(ctx);
+        } catch (error) {
+            console.log('\nRefer docs: https://www.lambdatest.com/support/docs/smart-visual-regression-testing/');
+        }
+
+    });
+
+export default command;

src/lib/ctx.ts

@@ -13,7 +13,10 @@ export default (options: Record<string, string>): Context => {
     let mobileConfig: MobileConfig;
     let config = constants.DEFAULT_CONFIG;
     let port: number;
-
+    let resolutionOff: boolean;
+    let extensionFiles: string;
+    let ignoreStripExtension: Array<string>;
+    let ignoreFilePattern: Array<string>;
     try {
         if (options.config) {
             config = JSON.parse(fs.readFileSync(options.config, 'utf-8'));
@@ -33,6 +36,10 @@ export default (options: Record<string, string>): Context => {
         if (isNaN(port) || port < 1 || port > 65535) {
             throw new Error('Invalid port number. Port number must be an integer between 1 and 65535.');
         }
+        resolutionOff = options.ignoreResolutions || false;
+        extensionFiles = options.files || ['png', 'jpeg', 'jpg'];
+        ignoreStripExtension = options.ignoreStripExtensions || false
+        ignoreFilePattern = options.ignorePattern || []
     } catch (error: any) {
         console.log(`[smartui] Error: ${error.message}`);
         process.exit();
@@ -62,6 +69,7 @@ export default (options: Record<string, string>): Context => {
             enableJavaScript: config.enableJavaScript || false,
             allowedHostnames: config.allowedHostnames || []
         },
+        uploadFilePath: '',
         webStaticConfig: [],
         git: {
             branch: '',
@@ -81,7 +89,11 @@ export default (options: Record<string, string>): Context => {
             parallel: options.parallel ? true : false,
             markBaseline: options.markBaseline ? true : false,
             buildName: options.buildName || '',
-            port: port
+            port: port,
+            ignoreResolutions: resolutionOff,
+            fileExtension: extensionFiles,
+            stripExtension: ignoreStripExtension,
+            ignorePattern: ignoreFilePattern,
         },
         cliVersion: version,
         totalSnapshots: -1

src/lib/screenshot.ts

@@ -1,3 +1,5 @@
+import fs from 'fs';
+import path from 'path';
 import { Browser, BrowserContext, Page } from "@playwright/test"
 import { Context } from "../types.js"
 import * as utils from "./utils.js"
@@ -133,4 +135,78 @@ export async function  captureScreenshots(ctx: Context): Promise<Record<string,a
     utils.delDir('screenshots');
 
     return { capturedScreenshots, output };
-}
+}
+
+function getImageDimensions(filePath: string): { width: number, height: number } | null {
+    const buffer = fs.readFileSync(filePath);
+    let width, height;
+
+    if (buffer.toString('hex', 0, 2) === 'ffd8') {
+        // JPEG
+        let offset = 2;
+        while (offset < buffer.length) {
+            const marker = buffer.toString('hex', offset, offset + 2);
+            offset += 2;
+            const length = buffer.readUInt16BE(offset);
+            if (marker === 'ffc0' || marker === 'ffc2') {
+                height = buffer.readUInt16BE(offset + 3);
+                width = buffer.readUInt16BE(offset + 5);
+                return { width, height };
+            }
+            offset += length;
+        }
+    } else if (buffer.toString('hex', 1, 4) === '504e47') {
+        // PNG
+        width = buffer.readUInt32BE(16);
+        height = buffer.readUInt32BE(20);
+        return { width, height };
+    }
+
+    return null;
+}
+
+export async function uploadScreenshots(ctx: Context): Promise<void> {
+    const allowedExtensions = ctx.options.fileExtension.map(ext => `.${ext.trim().toLowerCase()}`);
+
+    async function processDirectory(directory: string, relativePath: string = ''): Promise<void> {
+        const files = fs.readdirSync(directory);
+
+        for (let file of files) {
+            const filePath = path.join(directory, file);
+            const stat = fs.statSync(filePath);
+            const relativeFilePath = path.join(relativePath, file);
+
+            if (stat.isDirectory() && ctx.options.ignorePattern.includes(relativeFilePath)) {
+                continue; // Skip this path
+            }
+
+            if (stat.isDirectory()) {
+                await processDirectory(filePath, relativeFilePath); // Recursively process subdirectory
+            } else {
+                let fileExtension = path.extname(file).toLowerCase();
+                if (allowedExtensions.includes(fileExtension)) {
+                    let ssId = relativeFilePath;
+                    if (ctx.options.stripExtension) {
+                        ssId = path.join(relativePath, path.basename(file, fileExtension));
+                    }
+
+                    let viewport = 'default';
+
+                    if (!ctx.options.ignoreResolutions) {
+                        const dimensions = getImageDimensions(filePath);
+                        if (!dimensions) {
+                            throw new Error(`Unable to determine dimensions for image: ${filePath}`);
+                        }
+                        const width = dimensions.width;
+                        const height = dimensions.height;
+                        viewport = `${width}x${height}`;
+                    }
+
+                    await ctx.client.uploadScreenshot(ctx.build, filePath, ssId, 'default', viewport, ctx.log);
+                }
+            }
+        }
+    }
+
+    await processDirectory(ctx.uploadFilePath);
+}

src/tasks/uploadScreenshots.ts

@@ -0,0 +1,27 @@
+import { ListrTask, ListrRendererFactory } from 'listr2';
+import { Context } from '../types.js';
+import { uploadScreenshots } from '../lib/screenshot.js';
+import chalk from 'chalk';
+import { updateLogContext } from '../lib/logger.js';
+
+export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRendererFactory> => {
+    return {
+        title: 'Uploading screenshots',
+        task: async (ctx, task): Promise<void> => {
+            try {
+                ctx.task = task;
+                updateLogContext({ task: 'upload' });
+
+                await uploadScreenshots(ctx);
+
+                task.title = 'Screenshots uploaded successfully';
+            } catch (error: any) {
+                ctx.log.debug(error);
+                task.output = chalk.gray(`${error.message}`);
+                throw new Error('Uploading screenshots failed');
+            }
+        },
+        rendererOptions: { persistentOutput: true },
+        exitOnError: false
+    };
+};

src/types.ts

@@ -22,6 +22,7 @@ export interface Context {
         enableJavaScript: boolean;
         allowedHostnames: Array<string>;
     };
+    uploadFilePath: string;
     webStaticConfig: WebStaticConfig;
     build: Build;
     git: Git;
@@ -33,6 +34,10 @@ export interface Context {
         markBaseline?: boolean,
         buildName?: string,
         port?: number,
+        ignoreResolutions?: boolean,
+        fileExtension?: Array<string>,
+        stripExtension?: boolean,
+        ignorePattern?: Array<string>,
     }
     cliVersion: string;
     totalSnapshots: number;