Merge pull request #158 from parthlambdatest/Dot-3923

[Dot-3923] feat: implement fetch results feature

Author: pinanks

src/commander/capture.ts

@@ -17,6 +17,7 @@ command
     .description('Capture screenshots of static sites')
     .argument('<file>', 'Web static config file')
     .option('--parallel', 'Capture parallely on all browsers')
+    .option('--fetch-results [filename]', 'Fetch results and optionally specify an output file, e.g., <filename>.json')
     .action(async function(file, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 

src/commander/exec.ts

@@ -19,6 +19,7 @@ command
     .description('Run test commands around SmartUI')
     .argument('<command...>', 'Command supplied for running tests')
     .option('-P, --port <number>', 'Port number for the server')
+    .option('--fetch-results [filename]', 'Fetch results and optionally specify an output file, e.g., <filename>.json')
     .action(async function(execCommand, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 

src/commander/upload.ts

@@ -25,6 +25,7 @@ command
     .option('-i, --ignoreDir <patterns>', 'Comma-separated list of directories to ignore', val => {
         return val.split(',').map(pattern => pattern.trim());
     })
+    .option('--fetch-results [filename]', 'Fetch results and optionally specify an output file, e.g., <filename>.json')
     .action(async function(directory, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 

src/commander/uploadFigma.ts

@@ -19,6 +19,7 @@ command
     .argument('<file>', 'figma design config file')
     .option('--markBaseline', 'Mark the uploaded images as baseline')
     .option('--buildName <buildName>' , 'Name of the build')
+    .option('--fetch-results [filename]', 'Fetch results and optionally specify an output file, e.g., <filename>.json')
     .action(async function(file, _, command) {
         let ctx: Context = ctxInit(command.optsWithGlobals());
 

src/lib/constants.ts

@@ -122,6 +122,10 @@ export default {
     MOBILE_ORIENTATION_PORTRAIT: 'portrait',
     MOBILE_ORIENTATION_LANDSCAPE: 'landscape',
 
+    // build status
+    BUILD_COMPLETE: 'completed',
+    BUILD_ERROR: 'error',
+
     // CI
     GITHUB_API_HOST: 'https://api.github.com',
 

src/lib/ctx.ts

@@ -18,6 +18,8 @@ export default (options: Record<string, string>): Context => {
     let extensionFiles: string;
     let ignoreStripExtension: Array<string>;
     let ignoreFilePattern: Array<string>;
+    let fetchResultObj: boolean;
+    let fetchResultsFileObj: string;
     try {
         if (options.config) {
             config = JSON.parse(fs.readFileSync(options.config, 'utf-8'));
@@ -41,6 +43,11 @@ export default (options: Record<string, string>): Context => {
         extensionFiles = options.files || ['png', 'jpeg', 'jpg'];
         ignoreStripExtension = options.removeExtensions || false
         ignoreFilePattern = options.ignoreDir || []
+
+        if(options.fetchResults){
+            fetchResultObj = true
+            fetchResultsFileObj = options.fetchResults === true ? 'results.json' : options.fetchResults;
+        }
     } catch (error: any) {
         console.log(`[smartui] Error: ${error.message}`);
         process.exit();
@@ -103,6 +110,8 @@ export default (options: Record<string, string>): Context => {
             fileExtension: extensionFiles,
             stripExtension: ignoreStripExtension,
             ignorePattern: ignoreFilePattern,
+            fetchResults: fetchResultObj,
+            fetchResultsFileName: fetchResultsFileObj,
         },
         cliVersion: version,
         totalSnapshots: -1

src/lib/httpClient.ts

@@ -64,6 +64,14 @@ export default class httpClient {
         }, log)
     }
 
+    getScreenshotData(buildId: string, baseline: boolean, log: Logger) {
+        return this.request({
+            url: '/screenshot',
+            method: 'GET',
+            params: { buildId, baseline }
+        }, log);
+    }    
+
     finalizeBuild(buildId: string, totalSnapshots: number, log: Logger) {
         let params: Record<string, string | number> = {buildId};
         if (totalSnapshots > -1) params.totalSnapshots = totalSnapshots;

src/lib/utils.ts

@@ -3,6 +3,8 @@ import { Context } from '../types.js'
 import { chromium, firefox, webkit, Browser } from '@playwright/test'
 import constants from './constants.js';
 
+let isPollingActive = false;
+
 export function delDir(dir: string): void {
     if (fs.existsSync(dir)) {
         fs.rmSync(dir, { recursive: true });
@@ -199,4 +201,87 @@ export function getRenderViewportsForOptions(options: any): Array<Record<string,
         ...mobileRenderViewports[constants.MOBILE_OS_IOS],
         ...mobileRenderViewports[constants.MOBILE_OS_ANDROID]
     ];
+}
+
+// Global SIGINT handler
+process.on('SIGINT', () => {
+    if (isPollingActive) {
+        console.log('Fetching results interrupted. Exiting...');
+        isPollingActive = false;
+    } else {
+        console.log('\nExiting gracefully...');
+    }
+    process.exit(0);
+});
+
+// Background polling function
+export async function startPolling(ctx: Context, task: any): Promise<void> {
+    ctx.log.info('Fetching results in progress....');
+    isPollingActive = true;
+
+    const intervalId = setInterval(async () => {
+        if (!isPollingActive) {
+            clearInterval(intervalId);
+            return;
+        }
+        
+        try {
+            const resp = await ctx.client.getScreenshotData(ctx.build.id, ctx.build.baseline, ctx.log);
+
+            if (!resp.build) {
+                ctx.log.info("Error: Build data is null.");
+                clearInterval(intervalId);
+                isPollingActive = false;
+            }
+
+            fs.writeFileSync(ctx.options.fetchResultsFileName, JSON.stringify(resp, null, 2));
+            ctx.log.debug(`Updated results in ${ctx.options.fetchResultsFileName}`);
+
+            if (resp.build.build_status_ind === constants.BUILD_COMPLETE || resp.build.build_status_ind === constants.BUILD_ERROR) {
+                clearInterval(intervalId);
+                ctx.log.info(`Fetching results completed. Final results written to ${ctx.options.fetchResultsFileName}`);
+                isPollingActive = false;
+
+
+                // Evaluating Summary
+                let totalScreenshotsWithMismatches = 0;
+                let totalVariantsWithMismatches = 0;
+                const totalScreenshots = Object.keys(resp.screenshots || {}).length;
+                let totalVariants = 0;
+
+                for (const [screenshot, variants] of Object.entries(resp.screenshots || {})) {
+                    let screenshotHasMismatch = false;
+                    let variantMismatchCount = 0;
+
+                    totalVariants += variants.length; // Add to total variants count
+
+                    for (const variant of variants) {
+                        if (variant.mismatch_percentage > 0) {
+                            screenshotHasMismatch = true;
+                            variantMismatchCount++;
+                        }
+                    }
+
+                    if (screenshotHasMismatch) {
+                        totalScreenshotsWithMismatches++;
+                        totalVariantsWithMismatches += variantMismatchCount;
+                    }
+                }
+
+                // Display summary
+                ctx.log.info(
+                    `\nSummary of Mismatches:\n` +
+                    `Total Variants with Mismatches: ${totalVariantsWithMismatches} out of ${totalVariants}\n` +
+                    `Total Screenshots with Mismatches: ${totalScreenshotsWithMismatches} out of ${totalScreenshots}\n` +
+                    `Branch Name: ${resp.build.branch}\n` +
+                    `Project Name: ${resp.project.name}\n` +
+                    `Build ID: ${resp.build.build_id}\n`
+                );                
+            }
+        } catch (error: any) {
+            ctx.log.error(`Error fetching screenshot data: ${error.message}`);
+            clearInterval(intervalId);
+            isPollingActive = false;
+        }
+    }, 5000);
 }

src/tasks/captureScreenshots.ts

@@ -3,13 +3,17 @@ import { Context } from '../types.js'
 import { captureScreenshots } from '../lib/screenshot.js'
 import chalk from 'chalk';
 import { updateLogContext } from '../lib/logger.js'
+import { startPolling } from '../lib/utils.js';
 
 export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRendererFactory>  =>  {
     return {
         title: 'Capturing screenshots',
         task: async (ctx, task): Promise<void> => {
             try {
                 ctx.task = task;
+                if (ctx.options.fetchResults) {
+                    startPolling(ctx, task);
+                }
                 updateLogContext({task: 'capture'});
 
                 let { capturedScreenshots, output } = await captureScreenshots(ctx);

src/tasks/exec.ts

@@ -3,11 +3,17 @@ import { Context } from '../types.js'
 import chalk from 'chalk'
 import spawn from 'cross-spawn'
 import { updateLogContext } from '../lib/logger.js'
+import { startPolling } from '../lib/utils.js'
 
 export default (ctx: Context): ListrTask<Context, ListrRendererFactory, ListrRendererFactory>  =>  {
     return {
         title: `Executing '${ctx.args.execCommand?.join(' ')}'`,
         task: async (ctx, task): Promise<void> => {
+
+            if (ctx.options.fetchResults) {
+                startPolling(ctx, task);
+            }
+
             updateLogContext({task: 'exec'});
 
             return new Promise((resolve, reject) => {