Merge pull request #414 from shrinishLT/DOT-3556-D

add customCSS support

Author: parthlambdatest

package.json

@@ -43,6 +43,7 @@
     "json-stringify-safe": "^5.0.1",
     "listr2": "^7.0.1",
     "node-cache": "^5.1.2",
+    "postcss": "^8.5.6",
     "sharp": "^0.33.4",
     "tsup": "^7.2.0",
     "uuid": "^11.0.3",

src/lib/ctx.ts

@@ -6,6 +6,7 @@ import logger from './logger.js'
 import getEnv from './env.js'
 import httpClient from './httpClient.js'
 import fs from 'fs'
+import { resolveCustomCSS } from './utils.js'
 
 export default (options: Record<string, string>): Context => {
     let env: Env = getEnv();
@@ -52,6 +53,20 @@ export default (options: Record<string, string>): Context => {
             if (!validateConfigFn(config)) {
                 throw new Error(validateConfigFn.errors[0].message);
             }
+
+            // Resolve customCSS if provided
+            if ((config as any).customCSS) {
+                try {
+                    (config as any).customCSS = resolveCustomCSS(
+                        (config as any).customCSS,
+                        options.config,
+                        logger
+                    );
+                    logger.debug('Successfully resolved and validated customCSS from config');
+                } catch (error: any) {
+                    throw new Error(`customCSS error: ${error.message}`);
+                }
+            }
         } else {
             logger.info("## No config file provided. Using default config.");
         }
@@ -155,7 +170,8 @@ export default (options: Record<string, string>): Context => {
             loadDomContent: loadDomContent,
             approvalThreshold: config.approvalThreshold,
             rejectionThreshold: config.rejectionThreshold,
-            showRenderErrors: config.showRenderErrors ?? false
+            showRenderErrors: config.showRenderErrors ?? false,
+            customCSS: (config as any).customCSS
         },
         uploadFilePath: '',
         webStaticConfig: [],

src/lib/processSnapshot.ts

@@ -1,9 +1,10 @@
 import { Snapshot, Context, DiscoveryErrors } from "../types.js";
-import { scrollToBottomAndBackToTop, getRenderViewports, getRenderViewportsForOptions, validateCoordinates } from "./utils.js"
+import { scrollToBottomAndBackToTop, getRenderViewports, getRenderViewportsForOptions, validateCoordinates, resolveCustomCSS, parseCSSFile, validateCSSSelectors, generateCSSInjectionReport } from "./utils.js"
 import { chromium, Locator } from "@playwright/test"
 import constants from "./constants.js";
 import { updateLogContext } from '../lib/logger.js'
 import NodeCache from 'node-cache'; 
+import chalk from "chalk";
 
 const globalCache = new NodeCache({ stdTTL: 3600, checkperiod: 600 });
 const MAX_RESOURCE_SIZE = 15 * (1024 ** 2); // 15MB
@@ -168,6 +169,20 @@ export async function prepareSnapshot(snapshot: Snapshot, ctx: Context): Promise
         processedOptions.useExtendedViewport = true;
     }
 
+    try {
+        if (options?.customCSS) {
+            const resolvedCSS = resolveCustomCSS(options.customCSS, '', ctx.log);
+            processedOptions.customCSS = resolvedCSS;
+            ctx.log.debug('Using per-snapshot customCSS (overriding config)');
+        } else if (ctx.config.customCSS) {
+            processedOptions.customCSS = ctx.config.customCSS;
+            ctx.log.debug('Using config customCSS');
+        }
+    } catch (error: any) {
+        ctx.log.warn(`customCSS warning: ${error.message}`);
+        chalk.yellow(`[SmartUI] warning: ${error.message}`);
+    }
+
     processedOptions.allowedAssets = ctx.config.allowedAssets;
     processedOptions.selectors = selectors;
 
@@ -611,6 +626,19 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
         processedOptions.useExtendedViewport = true;
     }
 
+    try {
+        if (options?.customCSS) {
+            const resolvedCSS = resolveCustomCSS(options.customCSS, '', ctx.log);
+            processedOptions.customCSS = resolvedCSS;
+        } else if (ctx.config.customCSS) {
+            processedOptions.customCSS = ctx.config.customCSS;
+        }
+    } catch (error: any) {
+        optionWarnings.add(`${error.message}`);
+    }
+
+    ctx.log.debug(`Processed options: ${JSON.stringify(processedOptions)}`);
+
     // process for every viewport
     let navigated: boolean = false;
     let previousDeviceType: string | null = null;
@@ -896,6 +924,24 @@ export default async function processSnapshot(snapshot: Snapshot, ctx: Context):
         await checkPending();
       }
 
+    // Validate and report CSS injection after selector processing
+    if (processedOptions.customCSS) {
+        try {
+            const cssRules = parseCSSFile(processedOptions.customCSS);
+            const validationResult = await validateCSSSelectors(page, cssRules, ctx.log);
+            const report = generateCSSInjectionReport(validationResult, ctx.log);
+            
+            if (validationResult.failedSelectors.length > 0) {
+                validationResult.failedSelectors.forEach(selector => {
+                    optionWarnings.add(`customCSS selector not found: ${selector}`);
+                });
+            }
+        } catch (error: any) {
+            ctx.log.warn(`CSS validation failed: ${error.message}`);
+            optionWarnings.add(`CSS validation error: ${error.message}`);
+        }
+    }
+
 
     let hasBrowserErrors = false;
     for (let browser in discoveryErrors.browsers) {

src/lib/schemaValidation.ts

@@ -284,6 +284,10 @@ const ConfigSchema = {
             type: "boolean",
             errorMessage: "Invalid config; loadDomContent must be true/false"
         },
+        customCSS: {
+            type: "string",
+            errorMessage: "Invalid config; customCSS must be a string"
+        },
         approvalThreshold: {
             type: "number",
             minimum: 0,
@@ -594,6 +598,10 @@ const SnapshotSchema: JSONSchemaType<Snapshot> = {
                         minProperties: 1,
                     },
                     errorMessage: "Invalid snapshot options; customCookies must be an array of objects with string properties"
+                },
+                customCSS: {
+                    type: "string",
+                    errorMessage: "Invalid snapshot options; customCSS must be a string"
                 }
             },
             additionalProperties: false