@testsmith/perfornium 0.1.0

package/dist/protocols/web/handler.js

@@ -0,0 +1,706 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebHandler = void 0;
+const playwright_1 = require("playwright");
+const logger_1 = require("../../utils/logger");
+const core_web_vitals_1 = require("./core-web-vitals");
+class WebHandler {
+    constructor(config) {
+        this.browsers = new Map();
+        this.contexts = new Map();
+        this.pages = new Map();
+        this.verificationMetrics = new Map();
+        this.config = {
+            ...config,
+            type: config.type || 'chromium',
+            headless: config.headless !== undefined ? config.headless : true
+        };
+    }
+    async initialize() {
+        logger_1.logger.debug(`Enhanced WebHandler initialized - Core Web Vitals tracking enabled (type: ${this.config.type}, headless: ${this.config.headless})`);
+    }
+    async execute(action, context) {
+        try {
+            logger_1.logger.info(`🎬 WebHandler.execute: command="${action.command}", selector="${action.selector || 'N/A'}", url="${action.url || 'N/A'}"`);
+            const page = await this.getPage(context.vu_id);
+            let result;
+            let verificationMetrics;
+            let webVitals;
+            let performanceMetrics;
+            // Always inject Web Vitals collector for browser tests
+            await core_web_vitals_1.CoreWebVitalsCollector.injectVitalsCollector(page);
+            switch (action.command) {
+                case 'goto':
+                    {
+                        const actionStart = Date.now();
+                        result = await this.handleGoto(page, action);
+                        result.action_time = Date.now() - actionStart;
+                        // Collect Web Vitals after navigation (optional, doesn't affect action_time)
+                        if (action.collectWebVitals !== false) {
+                            webVitals = await core_web_vitals_1.CoreWebVitalsCollector.collectVitals(page, action.webVitalsWaitTime || 1000);
+                        }
+                    }
+                    break;
+                case 'click':
+                    {
+                        const actionStart = Date.now();
+                        if (action.measureVerification) {
+                            const measured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || 'click_action', 'click', () => this.handleClick(page, action), { selector: action.selector });
+                            result = measured.result;
+                            verificationMetrics = measured.metrics;
+                        }
+                        else {
+                            result = await this.handleClick(page, action);
+                        }
+                        result.action_time = Date.now() - actionStart;
+                        // Only collect Web Vitals if explicitly requested
+                        if (action.collectWebVitals) {
+                            webVitals = await core_web_vitals_1.CoreWebVitalsCollector.collectVitals(page, action.webVitalsWaitTime || 1000);
+                        }
+                    }
+                    break;
+                case 'fill':
+                    {
+                        const actionStart = Date.now();
+                        if (action.measureVerification) {
+                            const measured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || 'fill_action', 'fill', () => this.handleFill(page, action), { selector: action.selector, expected_text: action.value });
+                            result = measured.result;
+                            verificationMetrics = measured.metrics;
+                        }
+                        else {
+                            result = await this.handleFill(page, action);
+                        }
+                        result.action_time = Date.now() - actionStart;
+                        // Only collect Web Vitals if explicitly requested
+                        if (action.collectWebVitals) {
+                            webVitals = await core_web_vitals_1.CoreWebVitalsCollector.collectVitals(page, action.webVitalsWaitTime || 1000);
+                        }
+                    }
+                    break;
+                case 'select':
+                    {
+                        const actionStart = Date.now();
+                        result = await this.handleSelect(page, action);
+                        result.action_time = Date.now() - actionStart;
+                    }
+                    break;
+                case 'press':
+                    {
+                        const actionStart = Date.now();
+                        result = await this.handlePress(page, action);
+                        result.action_time = Date.now() - actionStart;
+                    }
+                    break;
+                case 'wait_for_selector':
+                    {
+                        const actionStart = Date.now();
+                        if (action.measureVerification) {
+                            const measured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || 'wait_for_selector', 'wait', () => this.handleWaitForSelector(page, action), { selector: action.selector });
+                            result = measured.result;
+                            verificationMetrics = measured.metrics;
+                        }
+                        else {
+                            result = await this.handleWaitForSelector(page, action);
+                        }
+                        result.action_time = Date.now() - actionStart;
+                    }
+                    break;
+                case 'verify_exists':
+                    const measured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || action.name || 'verify_exists', 'verification', () => this.handleVerifyExists(page, action), { selector: action.selector });
+                    result = measured.result;
+                    verificationMetrics = measured.metrics;
+                    break;
+                case 'verify_visible':
+                    const visibleMeasured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || action.name || 'verify_visible', 'verification', () => this.handleVerifyVisible(page, action), { selector: action.selector });
+                    result = visibleMeasured.result;
+                    verificationMetrics = visibleMeasured.metrics;
+                    break;
+                case 'verify_text':
+                    const textMeasured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || action.name || 'verify_text', 'verification', () => this.handleVerifyText(page, action), { selector: action.selector, expected_text: action.expected_text });
+                    result = textMeasured.result;
+                    verificationMetrics = textMeasured.metrics;
+                    break;
+                case 'verify_contains':
+                    const containsMeasured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || action.name || 'verify_contains', 'verification', () => this.handleVerifyContains(page, action), { selector: action.selector, expected_text: action.value });
+                    result = containsMeasured.result;
+                    verificationMetrics = containsMeasured.metrics;
+                    break;
+                case 'verify_not_exists':
+                    const notExistsMeasured = await core_web_vitals_1.VerificationMetricsCollector.measureVerificationStep(action.verificationName || action.name || 'verify_not_exists', 'verification', () => this.handleVerifyNotExists(page, action), { selector: action.selector });
+                    result = notExistsMeasured.result;
+                    verificationMetrics = notExistsMeasured.metrics;
+                    break;
+                case 'measure_web_vitals':
+                    webVitals = await core_web_vitals_1.CoreWebVitalsCollector.collectVitals(page, action.webVitalsWaitTime || 3000);
+                    result = { web_vitals: webVitals };
+                    break;
+                case 'performance_audit':
+                    performanceMetrics = await core_web_vitals_1.WebPerformanceCollector.collectAllMetrics(page, verificationMetrics);
+                    result = { performance_audit: performanceMetrics };
+                    break;
+                case 'wait_for_load_state':
+                    const waitUntil = action.waitUntil === 'commit' ? 'load' : (action.waitUntil || 'load');
+                    await page.waitForLoadState(waitUntil, { timeout: action.timeout || 30000 });
+                    result = { load_state: waitUntil };
+                    break;
+                case 'network_idle':
+                    await page.waitForLoadState('networkidle', { timeout: action.networkIdleTimeout || 30000 });
+                    result = { network_idle: true };
+                    break;
+                case 'dom_ready':
+                    await page.waitForLoadState('domcontentloaded', { timeout: action.timeout || 30000 });
+                    result = { dom_ready: true };
+                    break;
+                case 'screenshot':
+                    const screenshot = await page.screenshot({
+                        type: 'png',
+                        fullPage: action.options?.fullPage || false
+                    });
+                    result = {
+                        screenshot: screenshot.length,
+                        screenshot_data: action.options?.includeData ? screenshot.toString('base64') : undefined
+                    };
+                    if (verificationMetrics) {
+                        verificationMetrics.screenshot_size = screenshot.length;
+                    }
+                    break;
+                default:
+                    // Fall back to original handler methods for backward compatibility
+                    result = await this.handleLegacyAction(page, action, context);
+            }
+            // Store verification metrics for later analysis
+            if (verificationMetrics) {
+                const vuMetrics = this.verificationMetrics.get(context.vu_id) || [];
+                vuMetrics.push(verificationMetrics);
+                this.verificationMetrics.set(context.vu_id, vuMetrics);
+            }
+            // Evaluate Web Vitals if collected
+            let vitalsScore;
+            let vitalsDetails;
+            if (webVitals) {
+                const evaluation = core_web_vitals_1.CoreWebVitalsCollector.evaluateVitals(webVitals, action.webVitalsThresholds);
+                vitalsScore = evaluation.score;
+                vitalsDetails = evaluation.details;
+            }
+            // Use action_time if available (actual action duration without web vitals collection)
+            // Or verification metrics duration for verify steps
+            const responseTime = result?.action_time || verificationMetrics?.duration;
+            // Only record metrics for meaningful performance measurements:
+            // - Verifications (verify_*) - time for elements/text to appear (measures app responsiveness)
+            // - Waits (wait_for_*) - time for conditions to be met
+            // - Performance measurements (measure_*, performance_audit)
+            // NOT recorded: goto, click, fill, press, select, hover, screenshot (navigation/interactions)
+            const measurableCommands = [
+                'verify_exists', 'verify_visible', 'verify_text', 'verify_contains', 'verify_not_exists',
+                'wait_for_selector', 'wait_for_text',
+                'measure_web_vitals', 'performance_audit'
+            ];
+            const shouldRecord = measurableCommands.includes(action.command);
+            const enhancedResult = {
+                success: true,
+                data: result,
+                shouldRecord, // Only record verifications and navigations for meaningful metrics
+                response_time: responseTime,
+                custom_metrics: {
+                    page_url: page.url(),
+                    page_title: await page.title(),
+                    vu_id: context.vu_id,
+                    command: action.command,
+                    action_time: result?.action_time,
+                    web_vitals: webVitals,
+                    vitals_score: vitalsScore,
+                    vitals_details: vitalsDetails,
+                    verification_metrics: verificationMetrics,
+                    performance_metrics: performanceMetrics
+                }
+            };
+            return enhancedResult;
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error.message,
+                shouldRecord: true, // Record errors too for analysis
+                custom_metrics: {
+                    vu_id: context.vu_id,
+                    error_type: error.constructor.name,
+                    error_stack: error.stack?.split('\n').slice(0, 3).join('; ')
+                }
+            };
+        }
+    }
+    async handleGoto(page, action) {
+        const fullUrl = action.url?.startsWith('http')
+            ? action.url
+            : `${this.config.base_url}${action.url || ''}`;
+        const response = await page.goto(fullUrl, {
+            timeout: action.timeout || 30000,
+            waitUntil: action.waitUntil || 'domcontentloaded'
+        });
+        return {
+            url: page.url(),
+            status: response?.status(),
+            headers: await response?.allHeaders(),
+            loading_time: Date.now() - performance.now()
+        };
+    }
+    async handleClick(page, action) {
+        const timeout = action.timeout || 30000;
+        const selector = action.selector;
+        // Wait for the element to be visible and stable before clicking
+        await page.waitForSelector(selector, {
+            state: 'visible',
+            timeout
+        });
+        // Highlight element before clicking (if enabled)
+        await this.highlightElement(page, selector);
+        // Click using locator for reliability
+        await page.locator(selector).click({ timeout });
+        return { clicked: selector };
+    }
+    async handleFill(page, action) {
+        const timeout = action.timeout || 30000;
+        // Wait for the element to be visible before filling
+        await page.waitForSelector(action.selector, {
+            state: 'visible',
+            timeout
+        });
+        // Highlight element before filling (if enabled)
+        await this.highlightElement(page, action.selector);
+        await page.locator(action.selector).fill(action.value, { timeout });
+        return { filled: action.selector, value: action.value };
+    }
+    async handleSelect(page, action) {
+        const timeout = action.timeout || 30000;
+        await page.waitForSelector(action.selector, {
+            state: 'visible',
+            timeout
+        });
+        // Highlight element before selecting (if enabled)
+        await this.highlightElement(page, action.selector);
+        await page.locator(action.selector).selectOption(action.value, { timeout });
+        return { selected: action.selector, value: action.value };
+    }
+    async handlePress(page, action) {
+        const timeout = action.timeout || 30000;
+        const key = action.key;
+        if (action.selector) {
+            // Press key on specific element
+            await page.waitForSelector(action.selector, {
+                state: 'visible',
+                timeout
+            });
+            // Highlight element before pressing (if enabled)
+            await this.highlightElement(page, action.selector);
+            await page.locator(action.selector).press(key, { timeout });
+            return { pressed: key, selector: action.selector };
+        }
+        else {
+            // Press key globally (on the page)
+            await page.keyboard.press(key);
+            return { pressed: key };
+        }
+    }
+    async handleWaitForSelector(page, action) {
+        await page.waitForSelector(action.selector, {
+            timeout: action.timeout || 30000
+        });
+        return { waited_for: action.selector };
+    }
+    async handleVerifyExists(page, action) {
+        await page.waitForSelector(action.selector, {
+            state: 'attached',
+            timeout: action.timeout || 30000
+        });
+        const elementCount = await page.locator(action.selector).count();
+        return {
+            verified: 'exists',
+            selector: action.selector,
+            name: action.name,
+            found_elements: elementCount,
+            element_count: elementCount
+        };
+    }
+    async handleVerifyVisible(page, action) {
+        await page.waitForSelector(action.selector, {
+            state: 'visible',
+            timeout: action.timeout || 30000
+        });
+        return {
+            verified: 'visible',
+            selector: action.selector,
+            name: action.name,
+            is_visible: true
+        };
+    }
+    async handleVerifyText(page, action) {
+        await page.waitForSelector(action.selector, {
+            state: 'attached',
+            timeout: action.timeout || 30000
+        });
+        const textLocator = page.locator(action.selector);
+        const actualText = await textLocator.textContent();
+        const expectedText = action.expected_text;
+        if (!actualText || !actualText.includes(expectedText)) {
+            throw new Error(`Verification failed: Element "${action.selector}" text "${actualText}" does not contain expected text "${expectedText}"${action.name ? ` (${action.name})` : ''}`);
+        }
+        return {
+            verified: 'text',
+            selector: action.selector,
+            name: action.name,
+            expected_text: expectedText,
+            actual_text: actualText,
+            text_match: true
+        };
+    }
+    async handleVerifyContains(page, action) {
+        await page.waitForSelector(action.selector, {
+            state: 'attached',
+            timeout: action.timeout || 30000
+        });
+        const textLocator = page.locator(action.selector);
+        const actualText = await textLocator.textContent();
+        const expectedText = action.value;
+        if (!actualText || !actualText.includes(expectedText)) {
+            throw new Error(`Verification failed: Element "${action.selector}" text "${actualText}" does not contain "${expectedText}"${action.name ? ` (${action.name})` : ''}`);
+        }
+        return {
+            verified: 'contains',
+            selector: action.selector,
+            name: action.name,
+            expected_text: expectedText,
+            actual_text: actualText,
+            text_match: true
+        };
+    }
+    async handleVerifyNotExists(page, action) {
+        try {
+            await page.waitForSelector(action.selector, {
+                state: 'detached',
+                timeout: action.timeout || 5000
+            });
+        }
+        catch (error) {
+            const count = await page.locator(action.selector).count();
+            if (count > 0) {
+                throw new Error(`Verification failed: Element "${action.selector}" exists but should not exist${action.name ? ` (${action.name})` : ''}`);
+            }
+        }
+        return {
+            verified: 'not_exists',
+            selector: action.selector,
+            name: action.name,
+            found_elements: 0
+        };
+    }
+    async handleLegacyAction(page, action, context) {
+        // Handle any legacy actions not covered by new implementation
+        switch (action.command) {
+            case 'evaluate':
+                if (action.script) {
+                    const result = await page.evaluate(action.script);
+                    return { evaluation_result: result };
+                }
+                break;
+            case 'hover':
+                await page.hover(action.selector);
+                return { hovered: action.selector };
+            default:
+                throw new Error(`Unsupported web action: ${action.command}`);
+        }
+    }
+    async getPage(vuId) {
+        let page = this.pages.get(vuId);
+        if (!page) {
+            const browser = await this.createBrowserForVU(vuId);
+            this.browsers.set(vuId, browser);
+            const context = await browser.newContext({
+                viewport: this.config.viewport || { width: 1280, height: 720 },
+                ignoreHTTPSErrors: true,
+                storageState: undefined
+            });
+            page = await context.newPage();
+            page.setDefaultTimeout(30000);
+            page.setDefaultNavigationTimeout(30000);
+            // Clear storage if configured
+            await this.clearStorageIfConfigured(page, context);
+            this.contexts.set(vuId, context);
+            this.pages.set(vuId, page);
+            logger_1.logger.debug(`VU ${vuId}: Created enhanced browser with Web Vitals support`);
+        }
+        return page;
+    }
+    async createBrowserForVU(vuId) {
+        const browserType = this.config.type || 'chromium';
+        const launchOptions = {
+            headless: this.config.headless !== false,
+            slowMo: this.config.slow_mo || 0,
+            args: [
+                '--no-sandbox',
+                '--disable-dev-shm-usage',
+                '--disable-web-security',
+                '--disable-features=VizDisplayCompositor',
+                '--disable-http-cache',
+                '--disable-cache',
+                '--disable-application-cache',
+                '--disable-offline-load-stale-cache',
+                '--disk-cache-size=0',
+                '--media-cache-size=0',
+                '--no-first-run',
+                '--no-default-browser-check',
+                '--disable-background-networking',
+                '--disable-sync',
+                '--metrics-recording-only',
+                '--mute-audio',
+                '--disable-renderer-backgrounding',
+                // Enable performance monitoring
+                '--enable-precise-memory-info',
+                '--enable-performance-manager-web-contents-observer',
+                '--enable-experimental-web-platform-features'
+            ]
+        };
+        let browser;
+        try {
+            switch (browserType) {
+                case 'chromium':
+                    browser = await playwright_1.chromium.launch(launchOptions);
+                    break;
+                case 'firefox':
+                    browser = await playwright_1.firefox.launch(launchOptions);
+                    break;
+                case 'webkit':
+                    browser = await playwright_1.webkit.launch(launchOptions);
+                    break;
+                default:
+                    throw new Error(`Unsupported browser type: ${browserType}`);
+            }
+            logger_1.logger.debug(`VU ${vuId}: Launched enhanced ${browserType} browser with Web Vitals support`);
+            return browser;
+        }
+        catch (error) {
+            logger_1.logger.error(`VU ${vuId}: Failed to launch ${browserType} browser:`, error);
+            throw error;
+        }
+    }
+    // Get verification metrics for a specific VU
+    getVerificationMetrics(vuId) {
+        return this.verificationMetrics.get(vuId) || [];
+    }
+    // Get aggregated verification metrics across all VUs
+    getAggregatedVerificationMetrics() {
+        const allMetrics = [];
+        for (const metrics of this.verificationMetrics.values()) {
+            allMetrics.push(...metrics);
+        }
+        if (allMetrics.length === 0) {
+            return {
+                total_verifications: 0,
+                success_rate: 0,
+                average_duration: 0,
+                p95_duration: 0,
+                slowest_step: null,
+                fastest_step: null
+            };
+        }
+        const successful = allMetrics.filter(m => m.success);
+        const durations = allMetrics.map(m => m.duration).sort((a, b) => a - b);
+        return {
+            total_verifications: allMetrics.length,
+            success_rate: successful.length / allMetrics.length,
+            average_duration: durations.reduce((a, b) => a + b, 0) / durations.length,
+            p95_duration: durations[Math.floor(durations.length * 0.95)],
+            slowest_step: allMetrics.reduce((prev, current) => prev.duration > current.duration ? prev : current),
+            fastest_step: allMetrics.reduce((prev, current) => prev.duration < current.duration ? prev : current)
+        };
+    }
+    async cleanup() {
+        const browserCount = this.browsers.size;
+        logger_1.logger.debug(`Cleaning up ${browserCount} enhanced browsers with Web Vitals data...`);
+        // Log final verification metrics summary
+        const aggregatedMetrics = this.getAggregatedVerificationMetrics();
+        logger_1.logger.info('Final verification metrics summary:', aggregatedMetrics);
+        // Close all resources
+        for (const [vuId, page] of this.pages) {
+            try {
+                if (!page.isClosed()) {
+                    await page.close();
+                }
+            }
+            catch (error) {
+                logger_1.logger.warn(`VU ${vuId}: Error closing page:`, error);
+            }
+        }
+        for (const [vuId, context] of this.contexts) {
+            try {
+                await context.close();
+            }
+            catch (error) {
+                logger_1.logger.warn(`VU ${vuId}: Error closing context:`, error);
+            }
+        }
+        for (const [vuId, browser] of this.browsers) {
+            try {
+                if (browser.isConnected()) {
+                    await browser.close();
+                }
+            }
+            catch (error) {
+                logger_1.logger.warn(`VU ${vuId}: Error closing browser:`, error);
+            }
+        }
+        this.pages.clear();
+        this.contexts.clear();
+        this.browsers.clear();
+        this.verificationMetrics.clear();
+        logger_1.logger.debug(`Enhanced cleanup completed - ${browserCount} browsers closed`);
+    }
+    async cleanupVU(vuId) {
+        logger_1.logger.debug(`Cleaning up enhanced browser resources for VU ${vuId}...`);
+        const page = this.pages.get(vuId);
+        if (page) {
+            try {
+                if (!page.isClosed()) {
+                    await page.close();
+                }
+            }
+            catch (error) {
+                logger_1.logger.warn(`VU ${vuId}: Error closing page:`, error);
+            }
+            this.pages.delete(vuId);
+        }
+        const context = this.contexts.get(vuId);
+        if (context) {
+            try {
+                await context.close();
+            }
+            catch (error) {
+                // Ignore "context already closed" errors - this is expected when browser closes first
+                if (!error?.message?.includes('Failed to find context') &&
+                    !error?.message?.includes('Target closed') &&
+                    !error?.message?.includes('has been closed')) {
+                    logger_1.logger.warn(`VU ${vuId}: Error closing context:`, error);
+                }
+            }
+            this.contexts.delete(vuId);
+        }
+        const browser = this.browsers.get(vuId);
+        if (browser) {
+            try {
+                if (browser.isConnected()) {
+                    await browser.close();
+                }
+            }
+            catch (error) {
+                logger_1.logger.warn(`VU ${vuId}: Error closing browser:`, error);
+            }
+            this.browsers.delete(vuId);
+        }
+        // Clean up verification metrics
+        this.verificationMetrics.delete(vuId);
+        logger_1.logger.debug(`VU ${vuId}: Enhanced browser cleanup completed`);
+    }
+    getBrowserInfo(vuId) {
+        const browser = this.browsers.get(vuId);
+        if (!browser)
+            return null;
+        return {
+            connected: browser.isConnected()
+        };
+    }
+    getActiveVUCount() {
+        return this.browsers.size;
+    }
+    /**
+     * Clear browser storage (localStorage, sessionStorage, cookies) if configured
+     */
+    async clearStorageIfConfigured(page, context) {
+        const clearConfig = this.config.clear_storage;
+        if (!clearConfig)
+            return;
+        const config = typeof clearConfig === 'boolean'
+            ? { local_storage: true, session_storage: true, cookies: true, cache: false }
+            : clearConfig;
+        try {
+            // We need to navigate to a page first to access storage
+            // Use about:blank or a data URL
+            await page.goto('about:blank');
+            // Clear cookies
+            if (config.cookies !== false) {
+                await context.clearCookies();
+                logger_1.logger.debug('Cleared cookies');
+            }
+            // Clear localStorage and sessionStorage
+            if (config.local_storage !== false || config.session_storage !== false) {
+                await page.evaluate((opts) => {
+                    if (opts.local_storage !== false) {
+                        try {
+                            localStorage.clear();
+                        }
+                        catch (e) { /* ignore */ }
+                    }
+                    if (opts.session_storage !== false) {
+                        try {
+                            sessionStorage.clear();
+                        }
+                        catch (e) { /* ignore */ }
+                    }
+                }, { local_storage: config.local_storage, session_storage: config.session_storage });
+                if (config.local_storage !== false)
+                    logger_1.logger.debug('Cleared localStorage');
+                if (config.session_storage !== false)
+                    logger_1.logger.debug('Cleared sessionStorage');
+            }
+            logger_1.logger.debug('Browser storage cleared');
+        }
+        catch (error) {
+            logger_1.logger.warn('Failed to clear storage:', error);
+        }
+    }
+    /**
+     * Highlight an element before interacting with it (for debugging)
+     */
+    async highlightElement(page, selector) {
+        const highlightConfig = this.config.highlight;
+        // Skip if highlight is not enabled
+        if (!highlightConfig)
+            return;
+        const config = typeof highlightConfig === 'boolean'
+            ? { enabled: highlightConfig }
+            : highlightConfig;
+        if (!config.enabled)
+            return;
+        const duration = config.duration || 500;
+        const color = config.color || '#ff0000';
+        const style = config.style || 'border';
+        try {
+            const locator = page.locator(selector).first();
+            const count = await locator.count();
+            if (count === 0)
+                return;
+            // Apply highlight styles
+            await locator.evaluate((el, opts) => {
+                const { color, style, duration } = opts;
+                const originalStyle = el.getAttribute('style') || '';
+                let highlightStyle = '';
+                if (style === 'border' || style === 'both') {
+                    highlightStyle += `outline: 3px solid ${color} !important; outline-offset: 2px !important;`;
+                }
+                if (style === 'background' || style === 'both') {
+                    highlightStyle += `background-color: ${color}33 !important;`;
+                }
+                el.setAttribute('style', originalStyle + highlightStyle);
+                // Restore original style after duration
+                setTimeout(() => {
+                    el.setAttribute('style', originalStyle);
+                }, duration);
+            }, { color, style, duration });
+            // Wait for highlight to be visible
+            await page.waitForTimeout(duration);
+        }
+        catch (error) {
+            // Don't fail the test if highlighting fails
+            logger_1.logger.debug(`Failed to highlight element ${selector}:`, error);
+        }
+    }
+}
+exports.WebHandler = WebHandler;