@shadowcoderr/context-graph 0.3.3 → 0.3.4

package/dist/core/capture-engine.js

@@ -40,6 +40,7 @@ const dom_analyzer_1 = require("../analyzers/dom-analyzer");
 const a11y_extractor_1 = require("../analyzers/a11y-extractor");
 const locator_generator_1 = require("../analyzers/locator-generator");
 const network_logger_1 = require("../analyzers/network-logger");
+const screenshot_capturer_1 = require("../analyzers/screenshot-capturer");
 const redactor_1 = require("../security/redactor");
 const validator_1 = require("../security/validator");
 const logger_1 = require("../utils/logger");
@@ -48,6 +49,7 @@ class CaptureEngine {
     a11yExtractor;
     locatorGenerator;
     networkLogger;
+    screenshotCapturer;
     redactor;
     validator;
     constructor(config) {
@@ -55,33 +57,49 @@ class CaptureEngine {
         this.a11yExtractor = new a11y_extractor_1.AccessibilityExtractor();
         this.locatorGenerator = new locator_generator_1.LocatorGenerator();
         this.redactor = new redactor_1.SecurityRedactor(config.security.customPatterns);
-        this.networkLogger = new network_logger_1.NetworkLogger(this.redactor);
+        this.networkLogger = new network_logger_1.NetworkLogger(this.redactor, {
+            captureHeaders: config.capture.network.captureHeaders,
+            captureBody: config.capture.network.captureBody,
+        });
+        this.screenshotCapturer = new screenshot_capturer_1.ScreenshotCapturer({
+            fullPage: config.capture.screenshots.fullPage,
+            elementTargeting: config.capture.screenshots.elementTargeting,
+        });
         this.validator = new validator_1.DataValidator();
     }
     async attachNetworkListeners(page) {
         await this.networkLogger.attachListeners(page);
     }
-    async capturePageSnapshot(page, config, consoleMessages = []) {
+    /**
+     * Capture a full snapshot of the current page state.
+     *
+     * @param page            — Playwright Page instance
+     * @param config          — Active configuration
+     * @param consoleMessages — Console messages buffered by BrowserAdapter
+     * @param pageDir         — If provided, full-page screenshots are captured here.
+     *                          The caller is responsible for ensuring the directory
+     *                          exists before passing this parameter.
+     */
+    async capturePageSnapshot(page, config, consoleMessages = [], pageDir) {
         logger_1.logger.info('Starting page capture');
         const url = page.url();
         const timestamp = new Date();
         const domain = new URL(url).hostname;
-        // Capture all data in parallel where possible
-        // Add timeout to prevent hanging - increased for complex pages
-        const captureTimeout = 45000; // 45 seconds max per capture
+        const CAPTURE_TIMEOUT = 45_000;
         const captureWithTimeout = async (promise, name) => {
             try {
                 return await Promise.race([
                     promise,
-                    new Promise((_, reject) => setTimeout(() => reject(new Error(`${name} timeout`)), captureTimeout))
+                    new Promise((_, reject) => setTimeout(() => reject(new Error(`${name} capture timed out`)), CAPTURE_TIMEOUT)),
                 ]);
             }
             catch (error) {
-                logger_1.logger.warn(`${name} capture failed or timed out: ${error.message}`);
+                logger_1.logger.warn(`${name} capture failed: ${error.message}`);
                 return null;
             }
         };
-        const [domResult, a11yTree, locators, performanceMetrics,] = await Promise.all([
+        // ── Primary captures (run in parallel) ─────────────────────────────────────
+        const [domResult, a11yTree, locators, performanceMetrics] = await Promise.all([
             captureWithTimeout(this.domAnalyzer.analyze(page), 'DOM'),
             config.capture.accessibility.enabled
                 ? captureWithTimeout(this.a11yExtractor.extract(page, config.capture.accessibility.includeHidden), 'A11y')
@@ -90,149 +108,121 @@ class CaptureEngine {
             captureWithTimeout(this.domAnalyzer.getPerformanceMetrics(page), 'Performance'),
         ]);
         const frameContents = domResult?.frames || [];
-        const frames = await this.getFrameHierarchy(page, frameContents);
+        const frames = await captureWithTimeout(this.getFrameHierarchy(page, frameContents), 'Frames');
         const networkEvents = this.networkLogger.getEvents();
-        // Capture enhanced data
+        // ── Secondary captures ─────────────────────────────────────────────────────
         const [pageState, networkSummary, enhancedTiming] = await Promise.all([
             captureWithTimeout(this.capturePageState(page), 'PageState'),
             captureWithTimeout(this.captureNetworkSummary(networkEvents), 'NetworkSummary'),
             captureWithTimeout(this.captureEnhancedTiming(page), 'EnhancedTiming'),
         ]);
         const metadata = {
-            captureId: `${timestamp.toISOString().replace(/[-:]/g, '').replace('T', '_').split('.')[0]}_${domain.replace(/\./g, '_')}`,
+            captureId: `${timestamp
+                .toISOString()
+                .replace(/[-:]/g, '')
+                .replace('T', '_')
+                .split('.')[0]}_${domain.replace(/\./g, '_')}`,
             timestamp: timestamp.toISOString(),
             mode: 'browser',
             url,
             domain,
             title: await page.title().catch(() => ''),
-            viewport: {
-                ...config.browser.viewport,
-                deviceScaleFactor: 1,
-            },
+            viewport: { ...config.browser.viewport, deviceScaleFactor: 1 },
             timing: enhancedTiming || {
                 navigationStart: Date.now() - 1000,
                 domContentLoaded: Date.now() - 500,
                 loadComplete: Date.now(),
                 networkIdle: Date.now(),
             },
-            performance: performanceMetrics || { domNodes: 0, scripts: 0, stylesheets: 0, images: 0, totalRequests: 0 },
+            performance: performanceMetrics || {
+                domNodes: 0, scripts: 0, stylesheets: 0, images: 0, totalRequests: 0,
+            },
             userAgent: await page.evaluate(() => navigator.userAgent).catch(() => ''),
-            cookies: '[REDACTED]', // Always redact cookies
+            cookies: '[REDACTED]',
             pageName: this.generatePageName(url),
             pageState: pageState || undefined,
             networkSummary: networkSummary || undefined,
-            contentHash: '', // Will be computed after snapshot is built
+            contentHash: '',
         };
+        const enhancedLocators = await captureWithTimeout(this.enhanceLocatorsData(page, locators || { elements: [] }), 'EnhancedLocators');
         const snapshot = {
             metadata,
             domSnapshot: domResult?.html || '<html></html>',
             a11yTree: a11yTree || { role: 'unknown', name: '', children: [] },
-            locators: await this.enhanceLocatorsData(page, locators || { elements: [] }),
-            frames: frames || { url: url, name: '', children: [] },
+            locators: enhancedLocators || { elements: [] },
+            frames: frames || { url, name: '', children: [] },
             networkEvents,
             consoleMessages,
-            screenshotPaths: [], // Placeholder
+            screenshotPaths: [],
         };
-        // Compute content hash for change detection
+        // ── Content hash (structural fingerprint) ───────────────────────────────────
         snapshot.metadata.contentHash = this.computeContentHash(snapshot);
-        // Validate the snapshot
+        // ── Screenshots (only if caller provided a page directory) ─────────────────
+        if (config.capture.screenshots.enabled && pageDir) {
+            try {
+                const elementTargets = config.capture.screenshots.elementTargeting
+                    ? screenshot_capturer_1.ScreenshotCapturer.buildElementTargets(snapshot.locators.elements || [])
+                    : [];
+                const screenshotResult = await captureWithTimeout(this.screenshotCapturer.capturePageScreenshots(page, pageDir, snapshot.metadata.captureId, elementTargets), 'Screenshots');
+                if (screenshotResult?.fullPagePath) {
+                    snapshot.screenshotPaths = [screenshotResult.fullPagePath];
+                    if (screenshotResult.elementPaths.length > 0) {
+                        snapshot.screenshotPaths.push(...screenshotResult.elementPaths.map(e => e.path));
+                    }
+                }
+            }
+            catch (error) {
+                logger_1.logger.warn(`Screenshot capture failed: ${error.message}`);
+            }
+        }
+        // ── Validation ─────────────────────────────────────────────────────────────
         const validation = this.validator.validatePageSnapshot(snapshot);
-        if (!validation.valid) {
+        if (!validation.valid)
             logger_1.logger.warn(`Validation errors: ${validation.errors.join(', ')}`);
-        }
-        if (validation.warnings.length > 0) {
+        if (validation.warnings.length > 0)
             logger_1.logger.warn(`Validation warnings: ${validation.warnings.join(', ')}`);
-        }
         logger_1.logger.info('Page capture completed');
         return snapshot;
     }
-    async getFrameHierarchy(page, frameContents) {
-        // Build hierarchy and attach serialized content if available
+    // ── Frame hierarchy ─────────────────────────────────────────────────────────
+    async getFrameHierarchy(page, frameContents = []) {
         const frames = page.frames();
         const buildHierarchy = (frame) => {
-            const children = frame.childFrames().map(buildHierarchy);
-            const contentEntry = (frameContents || []).find((f) => f.url === frame.url() && f.name === frame.name());
+            const contentEntry = frameContents.find(f => f.url === frame.url() && f.name === frame.name());
             return {
                 url: frame.url(),
                 name: frame.name(),
-                children,
-                content: contentEntry ? contentEntry.content : undefined,
+                children: frame.childFrames().map(buildHierarchy),
+                content: contentEntry?.content,
             };
         };
         return buildHierarchy(frames[0]);
     }
-    getRedactionAudit() {
-        return this.redactor.getAuditLog();
-    }
-    generatePageName(url) {
-        try {
-            const u = new URL(url);
-            const pathname = u.pathname.replace(/\/+$/g, ''); // strip trailing slash
-            // Handle root/index page
-            if (!pathname || pathname === '/') {
-                // If there are query params, include them
-                const params = Array.from(u.searchParams.entries()).sort((a, b) => a[0].localeCompare(b[0]));
-                if (params.length > 0) {
-                    if (params.length === 1 && params[0][0] === 'id') {
-                        return `index-${this.sanitize(params[0][1])}`;
-                    }
-                    const paramStr = params.map(([k, v]) => `${this.sanitize(k)}-${this.sanitize(v)}`).join('-');
-                    return `index-${paramStr}`;
-                }
-                return 'index';
-            }
-            const segments = pathname.split('/').filter(Boolean);
-            // Remove extension of last segment
-            const last = segments[segments.length - 1];
-            const baseLast = last.replace(/\.html?$/i, '');
-            segments[segments.length - 1] = baseLast;
-            let base = segments.join('-');
-            // Handle query parameters
-            const params = Array.from(u.searchParams.entries()).sort((a, b) => a[0].localeCompare(b[0]));
-            if (params.length === 1 && params[0][0] === 'id') {
-                // Special case: if only 'id' param, append just the value
-                base = `${base}-${this.sanitize(params[0][1])}`;
-            }
-            else if (params.length > 0) {
-                // Multiple params: include key-value pairs
-                for (const [k, v] of params) {
-                    base = `${base}-${this.sanitize(k)}-${this.sanitize(v)}`;
-                }
-            }
-            base = this.sanitize(base);
-            return base || 'page';
-        }
-        catch (error) {
-            logger_1.logger.warn(`Failed to generate page name from URL: ${url}, error: ${error.message}`);
-            return 'page';
-        }
-    }
-    sanitize(name) {
-        return name.replace(/[^a-z0-9\-]/gi, '-').replace(/-+/g, '-').replace(/(^-|-$)/g, '').toLowerCase();
-    }
+    // ── Content hash ────────────────────────────────────────────────────────────
     /**
-     * Compute a content hash for change detection
-     * Combines DOM, accessibility tree, and locators into a single hash
+     * Compute a structural fingerprint of the page for change detection.
+     *
+     * Instead of truncating the raw HTML at 5 000 chars (which causes SPAs with
+     * large identical `<head>` sections to hash identically across routes), we
+     * extract a token stream of `tagName[#id][@role]` from the DOM.  This is
+     * order-sensitive, compact, and captures the semantic structure without
+     * being affected by text-content changes that don't alter layout.
      */
     computeContentHash(snapshot) {
         try {
-            // Create a hashable representation of the page content
             const hashContent = {
-                // DOM structure (normalized)
-                dom: this.normalizeDomForHash(snapshot.domSnapshot),
-                // Accessibility tree structure
-                a11y: this.normalizeA11yForHash(snapshot.a11yTree),
-                // Locator signatures (element IDs and their best locators)
-                locators: snapshot.locators.elements.map(e => ({
+                domStructure: this.normalizeDomForHash(snapshot.domSnapshot),
+                a11yStructure: this.normalizeA11yForHash(snapshot.a11yTree),
+                locatorSignatures: (snapshot.locators.elements || []).map(e => ({
                     id: e.elementId,
                     tag: e.tagName,
                     role: e.attributes?.role,
                     testId: e.attributes?.['data-testid'],
-                    text: e.text?.substring(0, 50), // Limit text length
-                    uniqueLocators: e.locators.filter(l => l.isUnique).map(l => l.strategy),
+                    text: e.text?.substring(0, 50),
+                    uniqueStrategies: e.locators.filter(l => l.isUnique).map(l => l.strategy),
                 })),
             };
-            const hashString = JSON.stringify(hashContent, Object.keys(hashContent).sort());
+            const hashString = JSON.stringify(hashContent);
             return crypto.createHash('sha256').update(hashString).digest('hex').substring(0, 16);
         }
         catch (error) {
@@ -241,85 +231,126 @@ class CaptureEngine {
         }
     }
     /**
-     * Normalize DOM for hashing by removing dynamic content
+     * Extract a structural token stream from HTML rather than truncating text.
+     * Produces strings like `div#app@main|button|input@textbox` — semantically
+     * rich but immune to text-content noise and `<head>` boilerplate.
+     *
+     * Up to 500 tokens are extracted to bound memory usage while covering
+     * enough of the page to reliably detect structural changes.
      */
     normalizeDomForHash(dom) {
-        // Remove scripts, styles, and dynamic attributes
-        let normalized = dom
-            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-            .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
-            .replace(/\s+(class|id|style)="[^"]*"/g, '') // Remove class/id/style attributes
-            .replace(/\s+data-cc-element-id="[^"]*"/g, '') // Remove our own tracking attribute
-            .replace(/\s+/g, ' ') // Normalize whitespace
-            .trim();
-        // Limit length for performance
-        return normalized.substring(0, 5000);
+        const tagPattern = /<([a-z][a-z0-9]*)[^>]*?(?:\sid="([^"]*)")?[^>]*?(?:\srole="([^"]*)")?[^>]*/gi;
+        const tokens = [];
+        let match;
+        let count = 0;
+        while ((match = tagPattern.exec(dom)) !== null && count < 500) {
+            const tag = match[1];
+            const id = match[2] ? `#${match[2]}` : '';
+            const role = match[3] ? `@${match[3]}` : '';
+            tokens.push(`${tag}${id}${role}`);
+            count++;
+        }
+        return tokens.join('|');
     }
-    /**
-     * Normalize accessibility tree for hashing
-     */
     normalizeA11yForHash(a11y) {
         if (!a11y)
             return null;
         return {
             role: a11y.role,
             name: a11y.name?.substring(0, 50),
-            children: a11y.children?.map((c) => this.normalizeA11yForHash(c)),
+            children: a11y.children?.slice(0, 20).map((c) => this.normalizeA11yForHash(c)),
         };
     }
-    /**
-     * Capture page state information
-     */
+    // ── Page name ───────────────────────────────────────────────────────────────
+    generatePageName(url) {
+        try {
+            const u = new URL(url);
+            const pathname = u.pathname.replace(/\/+$/, '');
+            let pageName = 'index';
+            if (pathname && pathname !== '/') {
+                const segments = pathname.split('/').filter(Boolean);
+                segments[segments.length - 1] = segments[segments.length - 1].replace(/\.html?$/i, '');
+                pageName = segments.join('-');
+            }
+            const params = Array.from(u.searchParams.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+            if (params.length > 0) {
+                if (params.length === 1 && params[0][0] === 'id') {
+                    pageName = `${pageName}-${this.sanitizeName(params[0][1])}`;
+                }
+                else {
+                    const paramStr = params
+                        .map(([k, v]) => `${this.sanitizeName(k)}-${this.sanitizeName(v)}`)
+                        .join('-');
+                    pageName = `${pageName}-${paramStr}`;
+                }
+            }
+            const sanitized = this.sanitizeName(pageName) || 'page';
+            // Limit length to avoid ENOENT on long URLs (Windows limit is 260, but let's be safe with folder names)
+            if (sanitized.length > 100) {
+                const hash = crypto.createHash('md5').update(sanitized).digest('hex').substring(0, 8);
+                return sanitized.substring(0, 90) + '-' + hash;
+            }
+            return sanitized;
+        }
+        catch (error) {
+            logger_1.logger.warn(`Failed to generate page name from URL: ${url}`);
+            return 'page-' + crypto.randomBytes(4).toString('hex');
+        }
+    }
+    sanitizeName(name) {
+        return name
+            .replace(/[^a-z0-9\-]/gi, '-')
+            .replace(/-+/g, '-')
+            .replace(/(^-|-$)/g, '')
+            .toLowerCase();
+    }
+    // ── Page state ──────────────────────────────────────────────────────────────
     async capturePageState(page) {
         try {
             return await page.evaluate(() => {
-                const activeElement = document.activeElement;
-                const focusedElement = activeElement ?
-                    (activeElement.id ? `#${activeElement.id}` :
-                        activeElement.className ? `.${activeElement.className.split(' ')[0]}` :
-                            activeElement.tagName.toLowerCase()) : undefined;
+                const activeEl = document.activeElement;
+                const focusedElement = activeEl
+                    ? activeEl.id
+                        ? `#${activeEl.id}`
+                        : activeEl.className
+                            ? `.${activeEl.className.split(' ')[0]}`
+                            : activeEl.tagName.toLowerCase()
+                    : undefined;
                 const selectedText = window.getSelection()?.toString() || '';
-                // Capture form data (redacted)
                 const formData = {};
-                const forms = document.querySelectorAll('form');
-                forms.forEach((form, idx) => {
+                document.querySelectorAll('form').forEach((form, idx) => {
                     const formId = form.id || `form_${idx}`;
                     const inputs = {};
-                    form.querySelectorAll('input, select, textarea').forEach((input) => {
-                        const name = input.name || input.id || `input_${idx}`;
-                        if (input.type === 'checkbox' || input.type === 'radio') {
-                            inputs[name] = input.checked;
-                        }
-                        else if (input.type === 'password') {
+                    form.querySelectorAll('input, select, textarea').forEach((el) => {
+                        const name = el.name || el.id || `input_${idx}`;
+                        if (el.type === 'checkbox' || el.type === 'radio')
+                            inputs[name] = el.checked;
+                        else if (el.type === 'password')
                             inputs[name] = '[REDACTED]';
-                        }
-                        else {
-                            inputs[name] = input.value ? '[REDACTED]' : '';
-                        }
+                        else
+                            inputs[name] = el.value ? '[REDACTED]' : '';
                     });
-                    if (Object.keys(inputs).length > 0) {
+                    if (Object.keys(inputs).length > 0)
                         formData[formId] = inputs;
-                    }
                 });
-                // Capture storage keys (not values)
                 const localStorageKeys = {};
                 try {
                     for (let i = 0; i < window.localStorage.length; i++) {
-                        const key = window.localStorage.key(i);
-                        if (key)
-                            localStorageKeys[key] = '[REDACTED]';
+                        const k = window.localStorage.key(i);
+                        if (k)
+                            localStorageKeys[k] = '[REDACTED]';
                     }
                 }
-                catch { }
+                catch { /* private browsing / security */ }
                 const sessionStorageKeys = {};
                 try {
                     for (let i = 0; i < window.sessionStorage.length; i++) {
-                        const key = window.sessionStorage.key(i);
-                        if (key)
-                            sessionStorageKeys[key] = '[REDACTED]';
+                        const k = window.sessionStorage.key(i);
+                        if (k)
+                            sessionStorageKeys[k] = '[REDACTED]';
                     }
                 }
-                catch { }
+                catch { /* private browsing / security */ }
                 return {
                     scrollPosition: { x: window.scrollX, y: window.scrollY },
                     focusedElement,
@@ -335,42 +366,34 @@ class CaptureEngine {
             return null;
         }
     }
-    /**
-     * Capture network request summary
-     */
+    // ── Network summary ─────────────────────────────────────────────────────────
     async captureNetworkSummary(networkEvents) {
         try {
             const requestTypes = {};
             const apiEndpoints = [];
             let failedRequests = 0;
             for (const event of networkEvents) {
-                // Count by resource type
                 const type = event.resourceType || 'other';
                 requestTypes[type] = (requestTypes[type] || 0) + 1;
-                // Track failed requests
-                if (event.type === 'response' && event.status && (event.status < 200 || event.status >= 400)) {
+                if (event.type === 'response' &&
+                    event.status &&
+                    (event.status < 200 || event.status >= 400)) {
                     failedRequests++;
                 }
-                // Extract API endpoints (XHR/Fetch to same domain or API-like URLs)
                 if ((type === 'xhr' || type === 'fetch') && event.url) {
                     try {
-                        const url = new URL(event.url);
-                        const path = url.pathname;
-                        if (path.startsWith('/api/') || path.includes('/api/') ||
-                            event.method && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(event.method)) {
-                            if (!apiEndpoints.includes(path)) {
-                                apiEndpoints.push(path);
-                            }
-                        }
+                        const p = new URL(event.url).pathname;
+                        if (!apiEndpoints.includes(p))
+                            apiEndpoints.push(p);
                     }
-                    catch { }
+                    catch { /* non-parseable URL */ }
                 }
             }
             return {
                 totalRequests: networkEvents.length,
                 failedRequests,
                 requestTypes,
-                apiEndpoints: apiEndpoints.slice(0, 20), // Limit to 20 endpoints
+                apiEndpoints: apiEndpoints.slice(0, 20),
             };
         }
         catch (error) {
@@ -378,84 +401,79 @@ class CaptureEngine {
             return null;
         }
     }
-    /**
-     * Capture enhanced timing metrics
-     */
+    // ── Enhanced timing ─────────────────────────────────────────────────────────
     async captureEnhancedTiming(page) {
         try {
-            const timing = await page.evaluate(() => {
+            return await page.evaluate(() => {
                 const perf = window.performance;
-                const navTiming = perf.getEntriesByType('navigation')[0];
-                const paintTiming = perf.getEntriesByType('paint');
-                const fcp = paintTiming.find((entry) => entry.name === 'first-contentful-paint');
-                const lcp = perf.getEntriesByType('largest-contentful-paint');
-                const lcpEntry = lcp.length > 0 ? lcp[lcp.length - 1] : null;
+                const nav = perf.getEntriesByType('navigation')[0];
+                const paint = perf.getEntriesByType('paint');
+                const fcp = paint.find((e) => e.name === 'first-contentful-paint');
+                const lcpEntries = perf.getEntriesByType('largest-contentful-paint');
+                const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1] : null;
                 return {
-                    navigationStart: navTiming ? navTiming.navigationStart || navTiming.fetchStart : Date.now() - 1000,
-                    domContentLoaded: navTiming ? navTiming.domContentLoadedEventEnd : Date.now() - 500,
-                    loadComplete: navTiming ? navTiming.loadEventEnd : Date.now(),
+                    navigationStart: nav ? nav.fetchStart : Date.now() - 1000,
+                    domContentLoaded: nav ? nav.domContentLoadedEventEnd : Date.now() - 500,
+                    loadComplete: nav ? nav.loadEventEnd : Date.now(),
                     networkIdle: Date.now(),
                     firstContentfulPaint: fcp ? fcp.startTime : undefined,
-                    largestContentfulPaint: lcpEntry ? lcpEntry.renderTime || lcpEntry.loadTime : undefined,
-                    timeToInteractive: navTiming ? navTiming.domInteractive : undefined,
+                    largestContentfulPaint: lcp
+                        ? lcp.renderTime || lcp.loadTime
+                        : undefined,
+                    timeToInteractive: nav ? nav.domInteractive : undefined,
                 };
             });
-            return timing;
         }
         catch (error) {
             logger_1.logger.warn('Failed to capture enhanced timing: ' + error.message);
             return null;
         }
     }
-    /**
-     * Enhance locators data with CSS styles, viewport info, and form details
-     */
+    // ── Locator enhancement ─────────────────────────────────────────────────────
     async enhanceLocatorsData(page, locatorsData) {
         try {
-            // Build element selector map for efficient lookup
             const elementMap = new Map();
             for (const element of locatorsData.elements) {
-                // Create selector from element attributes
                 let selector = '';
                 if (element.attributes?.id) {
                     selector = `#${element.attributes.id}`;
                 }
-                else if (element.attributes?.['data-test']) {
-                    selector = `[data-test="${element.attributes['data-test']}"]`;
-                }
                 else if (element.attributes?.['data-testid']) {
                     selector = `[data-testid="${element.attributes['data-testid']}"]`;
                 }
-                else if (element.position && element.position.x >= 0 && element.position.y >= 0) {
-                    // Use position as fallback - find element at this position
+                else if (element.attributes?.['data-test']) {
+                    selector = `[data-test="${element.attributes['data-test']}"]`;
+                }
+                else {
                     selector = `[data-cc-element-id="${element.elementId}"]`;
                 }
-                if (selector) {
+                if (selector)
                     elementMap.set(element.elementId, selector);
-                }
             }
-            // Enhance elements with styles and viewport info
             const enhancedElements = await Promise.all(locatorsData.elements.map(async (element) => {
                 try {
                     const selector = elementMap.get(element.elementId);
                     if (!selector)
                         return element;
-                    // Get CSS styles and viewport info in one call
-                    const enhancement = await page.evaluate(({ sel, pos }) => {
+                    const enhancement = await page
+                        .evaluate(({ sel, pos }) => {
                         let el = null;
-                        // Try to find element by selector
                         try {
                             el = document.querySelector(sel);
                         }
-                        catch { }
-                        // Fallback: find by position if selector fails
-                        if (!el && pos && pos.x >= 0 && pos.y >= 0) {
-                            el = document.elementFromPoint(pos.x, pos.y);
+                        catch { /* invalid selector */ }
+                        // Positional fallback when selector fails (e.g. complex CSS)
+                        if (!el && pos?.x >= 0 && pos?.y >= 0) {
+                            el = document.elementFromPoint(pos.x + 1, pos.y + 1);
                         }
                         if (!el)
                             return null;
                         const computed = window.getComputedStyle(el);
                         const rect = el.getBoundingClientRect();
+                        const inViewport = rect.top >= 0 &&
+                            rect.left >= 0 &&
+                            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                            rect.right <= (window.innerWidth || document.documentElement.clientWidth);
                         return {
                             styles: {
                                 display: computed.display,
@@ -463,46 +481,57 @@ class CaptureEngine {
                                 opacity: computed.opacity,
                                 zIndex: computed.zIndex,
                                 position: computed.position,
-                                backgroundColor: computed.backgroundColor !== 'rgba(0, 0, 0, 0)' && computed.backgroundColor !== 'transparent' ? computed.backgroundColor : undefined,
+                                backgroundColor: computed.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
+                                    computed.backgroundColor !== 'transparent'
+                                    ? computed.backgroundColor
+                                    : undefined,
                                 color: computed.color,
                                 fontSize: computed.fontSize,
                                 fontWeight: computed.fontWeight,
-                                border: computed.border !== '0px none rgb(0, 0, 0)' ? computed.border : undefined,
-                                borderRadius: computed.borderRadius !== '0px' ? computed.borderRadius : undefined,
                             },
                             viewportInfo: {
-                                visible: rect.width > 0 && rect.height > 0,
-                                inViewport: rect.top >= 0 && rect.left >= 0 &&
-                                    rect.bottom <= window.innerHeight &&
-                                    rect.right <= window.innerWidth,
-                                viewportPosition: { x: rect.left, y: rect.top },
+                                visible: rect.width > 0 && rect.height > 0 && computed.visibility !== 'hidden' && computed.display !== 'none',
+                                inViewport,
+                                viewportPosition: { x: Math.round(rect.left), y: Math.round(rect.top) },
+                            },
+                            // Update bounding box with fresh data
+                            position: {
+                                x: Math.round(rect.left),
+                                y: Math.round(rect.top),
+                                width: Math.round(rect.width),
+                                height: Math.round(rect.height),
                             },
                         };
-                    }, { sel: selector, pos: element.position }).catch(() => null);
+                    }, { sel: selector, pos: element.position })
+                        .catch(() => null);
                     if (enhancement) {
                         return {
                             ...element,
                             styles: enhancement.styles,
                             viewportInfo: enhancement.viewportInfo,
+                            // Overwrite stale position data with fresh bounding box
+                            position: enhancement.position ?? element.position,
+                            computedState: {
+                                ...element.computedState,
+                                isVisible: enhancement.viewportInfo.visible,
+                            },
                         };
                     }
                     return element;
                 }
-                catch (error) {
+                catch {
                     return element;
                 }
             }));
-            // Extract form field details
-            const formFields = await this.captureFormFieldDetails(page, locatorsData.elements);
-            // Build viewport elements list
             const viewportElements = enhancedElements
                 .filter((el) => el.viewportInfo?.inViewport)
                 .map((el) => ({
                 elementId: el.elementId,
-                visible: el.viewportInfo?.visible || false,
-                inViewport: el.viewportInfo?.inViewport || false,
-                viewportPosition: el.viewportInfo?.viewportPosition || { x: 0, y: 0 },
+                visible: el.viewportInfo.visible,
+                inViewport: el.viewportInfo.inViewport,
+                viewportPosition: el.viewportInfo.viewportPosition,
             }));
+            const formFields = await this.captureFormFieldDetails(page, locatorsData.elements);
             return {
                 elements: enhancedElements,
                 viewportElements: viewportElements.length > 0 ? viewportElements : undefined,
@@ -514,79 +543,64 @@ class CaptureEngine {
             return locatorsData;
         }
     }
-    /**
-     * Capture form field details
-     */
     async captureFormFieldDetails(page, elements) {
-        try {
-            const formFields = [];
-            for (const element of elements) {
-                const tagName = element.tagName?.toLowerCase();
-                if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
-                    try {
-                        // Build selector from element attributes
-                        let selector = '';
-                        if (element.attributes?.id) {
-                            selector = `#${element.attributes.id}`;
-                        }
-                        else if (element.attributes?.['data-test']) {
-                            selector = `[data-test="${element.attributes['data-test']}"]`;
-                        }
-                        else if (element.attributes?.['data-testid']) {
-                            selector = `[data-testid="${element.attributes['data-testid']}"]`;
-                        }
-                        else if (element.attributes?.name) {
-                            selector = `${tagName}[name="${element.attributes.name}"]`;
-                        }
-                        if (!selector)
-                            continue;
-                        const details = await page.evaluate(({ sel, tag }) => {
-                            const el = document.querySelector(sel);
-                            if (!el)
-                                return null;
-                            // Get label
-                            let label;
-                            if (el.id) {
-                                const labelEl = document.querySelector(`label[for="${el.id}"]`);
-                                label = labelEl?.textContent?.trim();
-                            }
-                            if (!label && el.closest('label')) {
-                                label = el.closest('label')?.textContent?.trim();
-                            }
-                            return {
-                                fieldType: el.type || tag,
-                                label,
-                                placeholder: el.placeholder || undefined,
-                                required: el.hasAttribute('required'),
-                                pattern: el.pattern || undefined,
-                                maxLength: el.maxLength > 0 ? el.maxLength : undefined,
-                                minLength: el.minLength > 0 ? el.minLength : undefined,
-                                validationRules: {
-                                    required: el.hasAttribute('required'),
-                                    pattern: el.pattern || undefined,
-                                    maxLength: el.maxLength > 0 ? el.maxLength : undefined,
-                                    minLength: el.minLength > 0 ? el.minLength : undefined,
-                                },
-                            };
-                        }, { sel: selector, tag: tagName }).catch(() => null);
-                        if (details) {
-                            formFields.push({
-                                elementId: element.elementId,
-                                ...details,
-                            });
-                        }
+        const formFields = [];
+        for (const element of elements) {
+            const tagName = element.tagName?.toLowerCase();
+            if (!['input', 'select', 'textarea'].includes(tagName))
+                continue;
+            try {
+                let selector = '';
+                if (element.attributes?.id)
+                    selector = `#${element.attributes.id}`;
+                else if (element.attributes?.['data-testid'])
+                    selector = `[data-testid="${element.attributes['data-testid']}"]`;
+                else if (element.attributes?.name)
+                    selector = `${tagName}[name="${element.attributes.name}"]`;
+                else
+                    continue;
+                const details = await page
+                    .evaluate(({ sel, tag }) => {
+                    const el = document.querySelector(sel);
+                    if (!el)
+                        return null;
+                    let label;
+                    if (el.id) {
+                        label = document.querySelector(`label[for="${el.id}"]`)?.textContent?.trim();
                     }
-                    catch (error) {
-                        // Skip this element
+                    if (!label) {
+                        label = el.closest('label')?.textContent?.trim();
                     }
+                    return {
+                        fieldType: el.type || tag,
+                        label,
+                        placeholder: el.placeholder || undefined,
+                        required: el.hasAttribute('required'),
+                        pattern: el.pattern || undefined,
+                        maxLength: el.maxLength > 0
+                            ? el.maxLength
+                            : undefined,
+                        minLength: el.minLength > 0
+                            ? el.minLength
+                            : undefined,
+                    };
+                }, { sel: selector, tag: tagName })
+                    .catch(() => null);
+                if (details) {
+                    formFields.push({ elementId: element.elementId, ...details });
                 }
             }
-            return formFields;
-        }
-        catch (error) {
-            logger_1.logger.warn('Failed to capture form field details: ' + error.message);
-            return [];
+            catch { /* skip this element */ }
         }
+        return formFields;
+    }
+    // ── Redaction audit ─────────────────────────────────────────────────────────
+    getRedactionAudit() {
+        return this.redactor.getAuditLog();
+    }
+    /** Network event count — passed to StorageEngine for statistics */
+    getNetworkEventCount() {
+        return this.networkLogger.getRequestCount();
     }
 }
 exports.CaptureEngine = CaptureEngine;