implement: smartui upload

Author: parthlambdatest

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,57 @@
+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')
+    .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,6 +13,7 @@ export default (options: Record<string, string>): Context => {
     let mobileConfig: MobileConfig;
     let config = constants.DEFAULT_CONFIG;
     let port: number;
+    let resolutionOff: boolean;
 
     try {
         if (options.config) {
@@ -33,6 +34,7 @@ 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;
     } catch (error: any) {
         console.log(`[smartui] Error: ${error.message}`);
         process.exit();
@@ -62,6 +64,7 @@ export default (options: Record<string, string>): Context => {
             enableJavaScript: config.enableJavaScript || false,
             allowedHostnames: config.allowedHostnames || []
         },
+        uploadFilePath: '',
         webStaticConfig: [],
         git: {
             branch: '',
@@ -81,7 +84,8 @@ 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
         },
         cliVersion: version,
         totalSnapshots: -1

src/lib/screenshot.ts

@@ -1,3 +1,6 @@
+import fs from 'fs';
+import path from 'path';
+import sizeOf from 'image-size';
 import { Browser, BrowserContext, Page } from "@playwright/test"
 import { Context } from "../types.js"
 import * as utils from "./utils.js"
@@ -133,4 +136,61 @@ 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> {
+    let screenshotsDir = ctx.uploadFilePath;
+
+    // Read all files in the screenshots directory
+    const files = fs.readdirSync(screenshotsDir);
+
+    for (let file of files) {
+        let fileExtension = path.extname(file).toLowerCase();
+        if (fileExtension === '.png' || fileExtension === '.jpeg' || fileExtension === '.jpg') {
+            let filePath = `${screenshotsDir}/${file}`;
+            let ssId = 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);
+        }
+    }
+}

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

@@ -20,6 +20,7 @@ export interface Context {
         enableJavaScript: boolean;
         allowedHostnames: Array<string>;
     };
+    uploadFilePath: string;
     webStaticConfig: WebStaticConfig;
     build: Build;
     git: Git;
@@ -31,6 +32,7 @@ export interface Context {
         markBaseline?: boolean,
         buildName?: string,
         port?: number,
+        ignoreResolutions?: boolean,
     }
     cliVersion: string;
     totalSnapshots: number;