npm - @memberjunction/react-test-harness - Versions diffs - 2.89.0 → 2.91.0 - Mend

@memberjunction/react-test-harness 2.89.0 → 2.91.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +98 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/lib/browser-context.d.ts.map +1 -1
package/dist/lib/browser-context.js +6 -2
package/dist/lib/browser-context.js.map +1 -1
package/dist/lib/component-linter.d.ts +1 -0
package/dist/lib/component-linter.d.ts.map +1 -1
package/dist/lib/component-linter.js +2620 -663
package/dist/lib/component-linter.js.map +1 -1
package/dist/lib/component-runner.d.ts +19 -49
package/dist/lib/component-runner.d.ts.map +1 -1
package/dist/lib/component-runner.js +925 -745
package/dist/lib/component-runner.js.map +1 -1
package/dist/lib/test-harness.d.ts +32 -0
package/dist/lib/test-harness.d.ts.map +1 -1
package/dist/lib/test-harness.js +52 -0
package/dist/lib/test-harness.js.map +1 -1
package/package.json +3 -3

package/dist/lib/component-runner.js CHANGED Viewed

@@ -1,16 +1,38 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentRunner = void 0;
-const react_runtime_1 = require("@memberjunction/react-runtime");
 const core_1 = require("@memberjunction/core");
 const component_linter_1 = require("./component-linter");
+const core_entities_1 = require("@memberjunction/core-entities");
+/**
+ * ComponentRunner that uses the actual React runtime via Playwright UMD bundle
+ */
 class ComponentRunner {
     constructor(browserManager) {
         this.browserManager = browserManager;
-        this.compiler = new react_runtime_1.ComponentCompiler();
-        this.registry = new react_runtime_1.ComponentRegistry();
-        // Set up runtime context (will be populated in browser)
-        this.runtimeContext = {};
     }
     /**
      * Lint component code before execution
@@ -30,675 +52,843 @@ class ComponentRunner {
         const warnings = [];
         const criticalWarnings = [];
         const consoleLogs = [];
+        const dataErrors = []; // Track data access errors from RunView/RunQuery
         let renderCount = 0;
+        const debug = options.debug !== false; // Default to true for debugging
+        const globalTimeout = options.timeout || 30000; // Default 30 seconds total timeout
+        if (debug) {
+            console.log('\n🔍 === Component Execution Debug Mode ===');
+            console.log('Component:', options.componentSpec.name);
+            console.log('Props:', JSON.stringify(options.props || {}, null, 2));
+        }
+        // Get a fresh page for this test execution
+        const page = await this.browserManager.getPage();
+        // Set default timeout for all page operations (Recommendation #2)
+        page.setDefaultTimeout(globalTimeout);
+        // Load component metadata and libraries first (needed for library loading)
+        await core_entities_1.ComponentMetadataEngine.Instance.Config(false, options.contextUser);
+        const allLibraries = core_entities_1.ComponentMetadataEngine.Instance.ComponentLibraries.map(c => c.GetAll());
         try {
-            const page = await this.browserManager.getPage();
-            // Set up monitoring
+            // Navigate to a blank page FIRST, then load runtime
+            await page.goto('about:blank');
+            // Set up the basic HTML structure
+            await page.setContent(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <title>React Component Test (V2)</title>
+          <style>
+            body {
+              margin: 0;
+              padding: 20px;
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            }
+            #root {
+              min-height: 100vh;
+              background-color: white;
+              padding: 20px;
+            }
+          </style>
+        </head>
+        <body>
+          <div id="root" data-testid="react-root"></div>
+        </body>
+        </html>
+      `);
+            // Always load runtime libraries after setting content
+            // This ensures they persist in the current page context
+            // allLibraries is loaded above from ComponentMetadataEngine
+            await this.loadRuntimeLibraries(page, options.componentSpec, allLibraries, debug);
+            // Verify the runtime is actually loaded
+            const runtimeCheck = await page.evaluate(() => {
+                return {
+                    hasMJRuntime: typeof window.MJReactRuntime !== 'undefined',
+                    hasReact: typeof window.React !== 'undefined',
+                    hasReactDOM: typeof window.ReactDOM !== 'undefined',
+                    hasBabel: typeof window.Babel !== 'undefined',
+                    mjRuntimeKeys: window.MJReactRuntime ? Object.keys(window.MJReactRuntime) : []
+                };
+            });
+            if (debug) {
+                console.log('Runtime loaded successfully');
+            }
+            if (!runtimeCheck.hasMJRuntime) {
+                throw new Error('Failed to inject MJReactRuntime into page context');
+            }
+            // Set up error tracking
+            await this.setupErrorTracking(page);
+            // Set up console logging
             this.setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings);
-            this.setupErrorHandling(page, errors);
-            await this.injectRenderTracking(page);
             // Expose MJ utilities to the page
-            await this.exposeMJUtilities(page, options.contextUser);
-            // Create and load the component
-            const htmlContent = this.createHTMLTemplate(options);
-            await page.goto(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
-            // Wait for render with timeout detection
-            const renderSuccess = await this.waitForRender(page, options, errors);
+            await this.exposeMJUtilities(page, options.contextUser, dataErrors, debug);
+            if (debug) {
+                console.log('📤 NODE: About to call page.evaluate with:');
+                console.log('  - spec.name:', options.componentSpec.name);
+                console.log('  - spec.code length:', options.componentSpec.code?.length || 0);
+                console.log('  - props:', JSON.stringify(options.props || {}, null, 2));
+                console.log('  - componentLibraries count:', allLibraries?.length || 0);
+                if (allLibraries && allLibraries.length > 0) {
+                    console.log('  - First few libraries:', allLibraries.slice(0, 3).map(lib => ({
+                        Name: lib.Name,
+                        GlobalVariable: lib.GlobalVariable
+                    })));
+                }
+            }
+            // Execute the component using the real React runtime with timeout (Recommendation #1)
+            const executionPromise = page.evaluate(async ({ spec, props, debug, componentLibraries }) => {
+                if (debug) {
+                    console.log('🎯 Starting component execution');
+                    console.log('📚 BROWSER: Received componentLibraries:', componentLibraries?.length || 0);
+                    if (componentLibraries?.length > 0) {
+                        console.log('  First library:', componentLibraries[0]);
+                    }
+                }
+                // Declare renderCheckInterval at the top scope for cleanup
+                let renderCheckInterval;
+                try {
+                    // Access the real runtime classes
+                    const MJRuntime = window.MJReactRuntime;
+                    if (!MJRuntime) {
+                        throw new Error('React runtime not loaded');
+                    }
+                    const { ComponentCompiler, ComponentRegistry, ComponentHierarchyRegistrar, SetupStyles } = MJRuntime;
+                    if (debug) {
+                        console.log('🚀 Starting component execution with real runtime');
+                        console.log('Available runtime classes:', Object.keys(MJRuntime));
+                    }
+                    // Initialize LibraryRegistry if needed
+                    // Note: In test environment, we may not have full database access
+                    // so libraries are handled by the runtime internally
+                    // Build libraries object from loaded libraries
+                    const loadedLibraries = {};
+                    if (spec.libraries && componentLibraries) {
+                        for (const specLib of spec.libraries) {
+                            // Find the library definition
+                            const libDef = componentLibraries.find(l => l.Name.toLowerCase() === specLib.name.toLowerCase());
+                            if (libDef && libDef.GlobalVariable) {
+                                // Check if the library is available as a global
+                                const libraryValue = window[libDef.GlobalVariable];
+                                if (libraryValue) {
+                                    loadedLibraries[libDef.GlobalVariable] = libraryValue;
+                                    if (debug) {
+                                        console.log(`✅ Added ${libDef.Name} to runtime context as ${libDef.GlobalVariable}`);
+                                    }
+                                }
+                                else {
+                                    console.warn(`⚠️ Library ${libDef.Name} not found as window.${libDef.GlobalVariable}`);
+                                }
+                            }
+                        }
+                    }
+                    // Create runtime context with loaded libraries
+                    const runtimeContext = {
+                        React: window.React,
+                        ReactDOM: window.ReactDOM,
+                        libraries: loadedLibraries
+                    };
+                    // Create instances
+                    const compiler = new ComponentCompiler();
+                    compiler.setBabelInstance(window.Babel);
+                    // IMPORTANT: Configure the LibraryRegistry in the browser context
+                    // This is needed for the compiler to know about approved libraries
+                    if (window.MJReactRuntime && window.MJReactRuntime.LibraryRegistry) {
+                        const { LibraryRegistry } = window.MJReactRuntime;
+                        // Configure the registry with the component libraries
+                        // Note: LibraryRegistry.Config expects ComponentLibraryEntity[]
+                        await LibraryRegistry.Config(false, componentLibraries || []);
+                        if (debug) {
+                            console.log('✅ Configured LibraryRegistry with', componentLibraries?.length || 0, 'libraries');
+                        }
+                    }
+                    const registry = new ComponentRegistry();
+                    const registrar = new ComponentHierarchyRegistrar(compiler, registry, runtimeContext);
+                    // Use the utilities we already created with mock metadata
+                    // Don't call createRuntimeUtilities() as it tries to create new Metadata() which fails
+                    const utilities = window.__mjUtilities;
+                    if (!utilities) {
+                        throw new Error('Utilities not found - exposeMJUtilities may have failed');
+                    }
+                    const styles = SetupStyles();
+                    if (debug) {
+                        console.log('📦 Registering component hierarchy...');
+                    }
+                    // CRITICAL: Ensure spec.libraries have globalVariable set from componentLibraries
+                    // The spec might not have globalVariable, but we need it for the runtime to work
+                    if (spec.libraries && componentLibraries) {
+                        for (const specLib of spec.libraries) {
+                            if (!specLib.globalVariable) {
+                                const libDef = componentLibraries.find(l => l.Name.toLowerCase() === specLib.name.toLowerCase());
+                                if (libDef && libDef.GlobalVariable) {
+                                    specLib.globalVariable = libDef.GlobalVariable;
+                                    if (debug) {
+                                        console.log(`  📝 Enhanced spec library ${specLib.name} with globalVariable: ${libDef.GlobalVariable}`);
+                                    }
+                                }
+                            }
+                        }
+                        if (debug) {
+                            console.log('🔍 Spec libraries after enhancement:', spec.libraries.map((l) => ({
+                                name: l.name,
+                                globalVariable: l.globalVariable
+                            })));
+                        }
+                    }
+                    // Register the component hierarchy
+                    // IMPORTANT: Pass component libraries for library loading to work
+                    if (debug) {
+                        console.log('📚 Registering component with', componentLibraries?.length || 0, 'libraries');
+                        if (componentLibraries?.length > 0) {
+                            console.log('  Passing libraries to registrar:', componentLibraries.slice(0, 2).map((l) => l.Name));
+                        }
+                    }
+                    const registrationResult = await registrar.registerHierarchy(spec, {
+                        styles,
+                        namespace: 'Global',
+                        version: 'v1', // Use v1 to match the registry defaults
+                        allLibraries: componentLibraries || [] // Pass the component libraries for LibraryRegistry
+                    });
+                    if (debug && !registrationResult.success) {
+                        console.log('❌ Registration failed:', registrationResult.errors);
+                    }
+                    if (!registrationResult.success) {
+                        throw new Error('Component registration failed: ' + JSON.stringify(registrationResult.errors));
+                    }
+                    if (debug) {
+                        console.log('✅ Registered components:', registrationResult.registeredComponents);
+                        // Note: ComponentRegistry doesn't expose internal components Map directly
+                        // We can see what was registered through the registrationResult
+                    }
+                    // Get the root component - explicitly pass namespace and version
+                    const RootComponent = registry.get(spec.name, 'Global', 'v1');
+                    if (!RootComponent) {
+                        // Enhanced error message with debugging info
+                        console.error('Failed to find component:', spec.name);
+                        console.error('Registry keys:', Array.from(registry.components.keys()));
+                        throw new Error('Root component not found: ' + spec.name);
+                    }
+                    // Get all registered components for prop passing
+                    const components = registry.getAll('Global', 'v1');
+                    // Add all loaded library exports to the components object
+                    // This allows generated code to use components.PieChart, components.ResponsiveContainer, etc.
+                    // for libraries that export components (like Recharts)
+                    for (const [globalVar, libraryValue] of Object.entries(loadedLibraries)) {
+                        if (typeof libraryValue === 'object' && libraryValue !== null) {
+                            // If the library exports an object with multiple components, spread them
+                            Object.assign(components, libraryValue);
+                            if (debug) {
+                                console.log(`✅ Added ${globalVar} exports to components object`);
+                            }
+                        }
+                    }
+                    // Render the component
+                    const rootElement = document.getElementById('root');
+                    if (!rootElement) {
+                        throw new Error('Root element not found');
+                    }
+                    const root = window.ReactDOM.createRoot(rootElement);
+                    // Set up render count protection (Recommendation #5)
+                    const MAX_RENDERS_ALLOWED = 500; // Reasonable limit for complex components
+                    if (typeof window !== 'undefined') {
+                        renderCheckInterval = setInterval(() => {
+                            const currentRenderCount = window.__testHarnessRenderCount || 0;
+                            if (currentRenderCount > MAX_RENDERS_ALLOWED) {
+                                clearInterval(renderCheckInterval);
+                                // Mark test as failed due to excessive renders
+                                window.__testHarnessTestFailed = true;
+                                window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                                window.__testHarnessRuntimeErrors.push({
+                                    message: `Excessive re-renders detected: ${currentRenderCount} renders (max: ${MAX_RENDERS_ALLOWED})`,
+                                    type: 'render-loop'
+                                });
+                                // Try to unmount to stop the madness
+                                try {
+                                    root.unmount();
+                                }
+                                catch (e) {
+                                    console.error('Failed to unmount after render loop:', e);
+                                }
+                                throw new Error(`Excessive re-renders: ${currentRenderCount} renders detected`);
+                            }
+                        }, 100); // Check every 100ms
+                    }
+                    // Build complete props
+                    const componentProps = {
+                        ...props,
+                        utilities,
+                        styles,
+                        components,
+                        savedUserSettings: {},
+                        onSaveUserSettings: (settings) => {
+                            console.log('User settings saved:', settings);
+                        }
+                    };
+                    if (debug) {
+                        console.log('🎨 Rendering component with props:', Object.keys(componentProps));
+                    }
+                    // Create error boundary wrapper
+                    const ErrorBoundary = class extends window.React.Component {
+                        constructor(props) {
+                            super(props);
+                            this.state = { hasError: false, error: null };
+                        }
+                        static getDerivedStateFromError(error) {
+                            window.__testHarnessTestFailed = true;
+                            return { hasError: true, error };
+                        }
+                        componentDidCatch(error, errorInfo) {
+                            console.error('React Error Boundary caught:', error, errorInfo);
+                            window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                            window.__testHarnessRuntimeErrors.push({
+                                message: error.message,
+                                stack: error.stack,
+                                componentStack: errorInfo.componentStack,
+                                type: 'react-error-boundary'
+                            });
+                            window.__testHarnessTestFailed = true;
+                        }
+                        render() {
+                            if (this.state.hasError) {
+                                // Re-throw to fail hard
+                                throw this.state.error;
+                            }
+                            return this.props.children;
+                        }
+                    };
+                    // Render with error boundary
+                    root.render(window.React.createElement(ErrorBoundary, null, window.React.createElement(RootComponent, componentProps)));
+                    // Clear the render check interval since we succeeded
+                    if (renderCheckInterval) {
+                        clearInterval(renderCheckInterval);
+                    }
+                    if (debug) {
+                        console.log('✅ Component rendered successfully');
+                    }
+                    return {
+                        success: true,
+                        componentCount: registrationResult.registeredComponents.length
+                    };
+                }
+                catch (error) {
+                    // Clean up render check interval if it exists
+                    if (typeof renderCheckInterval !== 'undefined' && renderCheckInterval) {
+                        clearInterval(renderCheckInterval);
+                    }
+                    console.error('🔴 BROWSER: Component execution failed:', error);
+                    console.error('🔴 BROWSER: Error stack:', error.stack);
+                    console.error('🔴 BROWSER: Error type:', typeof error);
+                    console.error('🔴 BROWSER: Error stringified:', JSON.stringify(error, null, 2));
+                    window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                    window.__testHarnessRuntimeErrors.push({
+                        message: error.message || String(error),
+                        stack: error.stack,
+                        type: 'execution-error'
+                    });
+                    window.__testHarnessTestFailed = true;
+                    return {
+                        success: false,
+                        error: error.message || String(error)
+                    };
+                }
+            }, {
+                spec: options.componentSpec,
+                props: options.props,
+                debug,
+                componentLibraries: allLibraries || []
+            });
+            // Create timeout promise (Recommendation #1)
+            const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error(`Component execution timeout after ${globalTimeout}ms`)), globalTimeout));
+            // Race between execution and timeout
+            let executionResult;
+            try {
+                executionResult = await Promise.race([executionPromise, timeoutPromise]);
+            }
+            catch (timeoutError) {
+                // Handle timeout gracefully
+                errors.push(`Component execution timed out after ${globalTimeout}ms`);
+                executionResult = {
+                    success: false,
+                    error: timeoutError instanceof Error ? timeoutError.message : 'Execution timeout'
+                };
+            }
+            if (debug) {
+                console.log('Execution result:', executionResult);
+            }
+            // Wait for render completion
+            const renderWaitTime = options.renderWaitTime || 500;
+            await page.waitForTimeout(renderWaitTime);
             // Get render count
-            renderCount = await this.getRenderCount(page);
-            // Collect runtime errors
+            renderCount = await page.evaluate(() => window.__testHarnessRenderCount || 0);
+            // Collect all errors
             const runtimeErrors = await this.collectRuntimeErrors(page);
             errors.push(...runtimeErrors);
-            // Perform deep render validation
-            const deepRenderErrors = await this.validateDeepRender(page);
-            errors.push(...deepRenderErrors);
+            // Collect warnings (separate from errors)
+            const collectedWarnings = await this.collectWarnings(page);
+            warnings.push(...collectedWarnings);
+            // Capture async errors
+            const asyncWaitTime = options.asyncErrorWaitTime || 1000;
+            await page.waitForTimeout(asyncWaitTime);
+            const asyncErrors = await this.collectRuntimeErrors(page);
+            // Only add new errors
+            asyncErrors.forEach(err => {
+                if (!errors.includes(err)) {
+                    errors.push(err);
+                }
+            });
+            // Also check for new warnings
+            const asyncWarnings = await this.collectWarnings(page);
+            asyncWarnings.forEach(warn => {
+                if (!warnings.includes(warn)) {
+                    warnings.push(warn);
+                }
+            });
             // Get the rendered HTML
-            const html = await this.browserManager.getContent();
-            // Take screenshot if needed
-            const screenshot = await this.browserManager.screenshot();
-            // Determine success and collect any additional errors
-            const { success, additionalErrors } = this.determineSuccess(errors, criticalWarnings, renderCount, !renderSuccess);
-            // Add any additional errors
-            errors.push(...additionalErrors);
-            return {
-                success,
+            const html = await page.content();
+            // Take screenshot
+            const screenshot = await page.screenshot();
+            // Determine success
+            const success = errors.length === 0 &&
+                criticalWarnings.length === 0 &&
+                renderCount <= ComponentRunner.MAX_RENDER_COUNT &&
+                executionResult.success;
+            if (renderCount > ComponentRunner.MAX_RENDER_COUNT) {
+                errors.push(`Excessive render count: ${renderCount} renders detected`);
+            }
+            // Combine runtime errors with data errors
+            const allErrors = [...errors, ...dataErrors];
+            const result = {
+                success: success && dataErrors.length === 0, // Fail if we have data errors
                 html,
-                errors: errors.map(e => {
-                    return {
-                        message: e,
-                        severity: 'critical'
-                    }; // Ensure Violation type
-                }),
-                warnings: warnings.map(w => {
-                    return {
-                        message: w,
-                        severity: 'low'
-                    }; // Ensure Violation type
-                }),
+                errors: allErrors.map(e => ({
+                    message: e,
+                    severity: 'critical',
+                    rule: 'runtime-error',
+                    line: 0,
+                    column: 0
+                })),
+                warnings: warnings.map(w => ({
+                    message: w,
+                    severity: 'low',
+                    rule: 'warning',
+                    line: 0,
+                    column: 0
+                })),
                 criticalWarnings,
                 console: consoleLogs,
                 screenshot,
                 executionTime: Date.now() - startTime,
                 renderCount
             };
+            if (debug) {
+                this.dumpDebugInfo(result);
+            }
+            return result;
         }
         catch (error) {
             errors.push(error instanceof Error ? error.message : String(error));
-            return {
+            // Combine runtime errors with data errors
+            const allErrors = [...errors, ...dataErrors];
+            const result = {
                 success: false,
                 html: '',
-                errors: errors.map(e => {
-                    return {
-                        message: e,
-                        severity: 'critical'
-                    }; // Ensure Violation type
-                }),
-                warnings: warnings.map(w => {
-                    return {
-                        message: w,
-                        severity: 'low'
-                    }; // Ensure Violation type
-                }),
+                errors: allErrors.map(e => ({
+                    message: e,
+                    severity: 'critical',
+                    rule: 'runtime-error',
+                    line: 0,
+                    column: 0
+                })),
+                warnings: warnings.map(w => ({
+                    message: w,
+                    severity: 'low',
+                    rule: 'warning',
+                    line: 0,
+                    column: 0
+                })),
                 criticalWarnings,
                 console: consoleLogs,
                 executionTime: Date.now() - startTime,
                 renderCount
             };
+            if (debug) {
+                console.log('\n❌ Component execution failed with error:', error);
+                this.dumpDebugInfo(result);
+            }
+            return result;
         }
-    }
-    createHTMLTemplate(options) {
-        const propsJson = JSON.stringify(options.props || {});
-        const specJson = JSON.stringify(options.componentSpec);
-        // Set configuration if provided
-        if (options.libraryConfiguration) {
-            react_runtime_1.StandardLibraryManager.setConfiguration(options.libraryConfiguration);
-        }
-        // Get all enabled libraries from configuration
-        const enabledLibraries = react_runtime_1.StandardLibraryManager.getEnabledLibraries();
-        // Separate runtime and component libraries
-        const runtimeLibraries = enabledLibraries.filter((lib) => lib.category === 'runtime');
-        const componentLibraries = enabledLibraries.filter((lib) => lib.category !== 'runtime');
-        // Generate script tags for runtime libraries
-        const runtimeScripts = runtimeLibraries
-            .map((lib) => `  <script crossorigin src="${lib.cdnUrl}"></script>`)
-            .join('\n');
-        // Generate script tags for component libraries
-        const componentScripts = componentLibraries
-            .map((lib) => `  <script src="${lib.cdnUrl}"></script>`)
-            .join('\n');
-        // Generate CSS links
-        const cssLinks = enabledLibraries
-            .filter((lib) => lib.cdnCssUrl)
-            .map((lib) => `  <link rel="stylesheet" href="${lib.cdnCssUrl}">`)
-            .join('\n');
-        // Include the ComponentCompiler class definition
-        const componentCompilerCode = this.getComponentCompilerCode();
-        return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>React Component Test</title>
-${runtimeScripts}
-${componentScripts}
-${cssLinks}
-  <style>
-    body { margin: 0; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
-    #root { min-height: 100vh; }
-  </style>
-  <script>
-    // Initialize error tracking
-    window.__testHarnessRuntimeErrors = [];
-    // Global error handler
-    window.addEventListener('error', (event) => {
-      console.error('Runtime error:', event.error);
-      window.__testHarnessRuntimeErrors.push({
-        message: event.error.message,
-        stack: event.error.stack,
-        type: 'runtime'
-      });
-    });
-    // Render tracking injection
-    (function() {
-      let renderCounter = 0;
-      window.__testHarnessRenderCount = 0;
-      // Wait for React to be available
-      const setupRenderTracking = () => {
-        if (window.React && window.React.createElement) {
-          const originalCreateElement = window.React.createElement.bind(window.React);
-          window.React.createElement = function(type, props, ...children) {
-            renderCounter++;
-            window.__testHarnessRenderCount = renderCounter;
-            if (renderCounter > 1000) {
-              console.error('Excessive renders detected: ' + renderCounter + ' renders. Possible infinite loop.');
-            }
-            return originalCreateElement(type, props, ...children);
-          };
-        }
-      };
-      // Try to set up immediately
-      setupRenderTracking();
-      // Also try after a delay in case React loads later
-      setTimeout(setupRenderTracking, 100);
-    })();
-  </script>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="text/babel">
-    ${options.setupCode || ''}
-    // Create runtime context with dynamic libraries
-    const componentLibraries = ${JSON.stringify(componentLibraries.map((lib) => ({
-            globalVariable: lib.globalVariable,
-            displayName: lib.displayName
-        })))};
-    const libraries = {};
-    componentLibraries.forEach(lib => {
-      if (window[lib.globalVariable]) {
-        libraries[lib.globalVariable] = window[lib.globalVariable];
-      }
-    });
-    const runtimeContext = {
-      React: React,
-      ReactDOM: ReactDOM,
-      libraries: libraries
-    };
-    // Import the ComponentCompiler implementation
-    ${componentCompilerCode}
-    // Create component compiler instance
-    const compiler = new ComponentCompiler();
-    compiler.setBabelInstance(Babel);
-    // Create component registry
-    class SimpleRegistry {
-      constructor() {
-        this.components = new Map();
-      }
-      register(name, component, namespace = 'Global', version = 'v1') {
-        const key = \`\${namespace}/\${version}/\${name}\`;
-        this.components.set(key, component);
-      }
-      get(name, namespace = 'Global', version = 'v1') {
-        const key = \`\${namespace}/\${version}/\${name}\`;
-        return this.components.get(key);
-      }
-      getAll(namespace = 'Global', version = 'v1') {
-        const components = {};
-        const prefix = \`\${namespace}/\${version}/\`;
-        this.components.forEach((component, key) => {
-          if (key.startsWith(prefix)) {
-            const name = key.substring(prefix.length);
-            components[name] = component;
-          }
-        });
-        return components;
-      }
-    }
-    // Create registry instance
-    const registry = new SimpleRegistry();
-    // Create hierarchy registrar
-    class SimpleHierarchyRegistrar {
-      constructor(compiler, registry, runtimeContext) {
-        this.compiler = compiler;
-        this.registry = registry;
-        this.runtimeContext = runtimeContext;
-      }
-      async registerHierarchy(rootSpec, options = {}) {
-        const registeredComponents = [];
-        const errors = [];
-        const warnings = [];
-        // Register components recursively
-        const registerSpec = async (spec) => {
-          // Register children first
-          const children = spec.dependencies || [];
-          for (const child of children) {
-            await registerSpec(child);
-          }
-          // Register this component
-          if (spec.code) {
-            const result = await this.compiler.compile({
-              componentName: spec.name,
-              componentCode: spec.code
-            });
-            if (result.success) {
-              const factory = result.component.component(this.runtimeContext, {});
-              this.registry.register(spec.name, factory.component);
-              registeredComponents.push(spec.name);
-            } else {
-              errors.push({
-                componentName: spec.name,
-                error: result.error.message,
-                phase: 'compilation'
-              });
-            }
-          }
-        };
-        await registerSpec(rootSpec);
-        return {
-          success: errors.length === 0,
-          registeredComponents,
-          errors,
-          warnings
-        };
-      }
-    }
-    const hierarchyRegistrar = new SimpleHierarchyRegistrar(compiler, registry, runtimeContext);
-    // BuildUtilities function - uses real MJ utilities exposed via Playwright
-    const BuildUtilities = () => {
-      const utilities = {
-        md: {
-          entities: () => {
-            return window.__mjGetEntities();
-          },
-          GetEntityObject: async (entityName) => {
-            return await window.__mjGetEntityObject(entityName);
-          }
-        },
-        rv: {
-          RunView: async (params) => {
-            return await window.__mjRunView(params);
-          },
-          RunViews: async (params) => {
-            return await window.__mjRunViews(params);
-          }
-        },
-        rq: {
-          RunQuery: async (params) => {
-            return await window.__mjRunQuery(params);
-          }
-        }
-      };
-      return utilities;
-    };
-    // SetupStyles function - copied from skip-chat implementation
-    const SetupStyles = () => ({
-      colors: {
-        primary: '#5B4FE9',
-        primaryHover: '#4940D4',
-        primaryLight: '#E8E6FF',
-        secondary: '#64748B',
-        secondaryHover: '#475569',
-        success: '#10B981',
-        successLight: '#D1FAE5',
-        warning: '#F59E0B',
-        warningLight: '#FEF3C7',
-        error: '#EF4444',
-        errorLight: '#FEE2E2',
-        info: '#3B82F6',
-        infoLight: '#DBEAFE',
-        background: '#FFFFFF',
-        surface: '#F8FAFC',
-        surfaceHover: '#F1F5F9',
-        text: '#1E293B',
-        textSecondary: '#64748B',
-        textTertiary: '#94A3B8',
-        textInverse: '#FFFFFF',
-        border: '#E2E8F0',
-        borderLight: '#F1F5F9',
-        borderFocus: '#5B4FE9',
-        shadow: 'rgba(0, 0, 0, 0.05)',
-        shadowMedium: 'rgba(0, 0, 0, 0.1)',
-        shadowLarge: 'rgba(0, 0, 0, 0.15)',
-      },
-      spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px',
-        xl: '32px',
-        xxl: '48px',
-        xxxl: '64px',
-      },
-      typography: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
-        fontSize: {
-          xs: '11px',
-          sm: '12px',
-          md: '14px',
-          lg: '16px',
-          xl: '20px',
-          xxl: '24px',
-          xxxl: '32px',
-        },
-        fontWeight: {
-          light: '300',
-          regular: '400',
-          medium: '500',
-          semibold: '600',
-          bold: '700',
-        },
-        lineHeight: {
-          tight: '1.25',
-          normal: '1.5',
-          relaxed: '1.75',
-        },
-      },
-      borders: {
-        radius: {
-          sm: '6px',
-          md: '8px',
-          lg: '12px',
-          xl: '16px',
-          full: '9999px',
-        },
-        width: {
-          thin: '1px',
-          medium: '2px',
-          thick: '3px',
-        },
-      },
-      shadows: {
-        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      },
-      transitions: {
-        fast: '150ms ease-in-out',
-        normal: '250ms ease-in-out',
-        slow: '350ms ease-in-out',
-      },
-      overflow: 'auto'
-    });
-    // React Error Boundary component
-    const ErrorBoundary = class extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-      }
-      static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-      }
-      componentDidCatch(error, errorInfo) {
-        console.error('React Error Boundary caught:', error, errorInfo);
-        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
-        window.__testHarnessRuntimeErrors.push({
-          message: error.message,
-          stack: error.stack,
-          componentStack: errorInfo.componentStack,
-          type: 'react'
-        });
-      }
-      render() {
-        if (this.state.hasError) {
-          return React.createElement('div', { style: { color: 'red', padding: '20px' } },
-            'Component Error: ' + this.state.error.message
-          );
+        finally {
+            // Clean up: close the page after each test execution
+            // This is important because getPage() now creates a new page each time
+            // Closing the page ensures clean isolation between test runs
+            try {
+                await page.close();
+            }
+            catch (closeError) {
+                // Ignore errors when closing the page
+                if (debug) {
+                    console.log('Note: Error closing page (this is usually harmless):', closeError);
+                }
+            }
         }
-        return this.props.children;
-      }
-    };
-    // Load component spec and register hierarchy
-    const componentSpec = ${specJson};
-    const props = ${propsJson};
-    (async () => {
-      // Register the component hierarchy
-      const result = await hierarchyRegistrar.registerHierarchy(componentSpec);
-      if (!result.success) {
-        console.error('Failed to register components:', result.errors);
-        return;
-      }
-      // Get all registered components
-      const components = registry.getAll();
-      // Get the root component
-      const RootComponent = registry.get(componentSpec.name);
-      if (!RootComponent) {
-        console.error('Root component not found:', componentSpec.name);
-        return;
-      }
-      // Simple in-memory storage for user settings
-      let savedUserSettings = {};
-      // Create root for rendering
-      const root = ReactDOM.createRoot(document.getElementById('root'));
-      // Function to render with current settings
-      const renderWithSettings = () => {
-        const enhancedProps = {
-          ...props,
-          components: components,
-          utilities: BuildUtilities(),
-          styles: SetupStyles(),
-          savedUserSettings: savedUserSettings,
-          onSaveUserSettings: (newSettings) => {
-            console.log('User settings saved:', newSettings);
-            // Update in-memory storage
-            savedUserSettings = { ...newSettings };
-            // Re-render with new settings
-            renderWithSettings();
-          }
-        };
-        root.render(
-          React.createElement(ErrorBoundary, null,
-            React.createElement(RootComponent, enhancedProps)
-          )
-        );
-      };
-      // Initial render
-      renderWithSettings();
-    })();
-  </script>
-</body>
-</html>`;
     }
     /**
-     * Checks if a console message is a warning
+     * Load runtime libraries into the page
      */
-    isWarning(type, text) {
-        return type === 'warning' || text.startsWith('Warning:');
-    }
-    /**
-     * Checks if a warning is critical and should fail the test
-     */
-    isCriticalWarning(text) {
-        return ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text));
-    }
-    /**
-     * Sets up console logging with warning detection
-     */
-    setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings) {
-        page.on('console', (msg) => {
-            const type = msg.type();
-            const text = msg.text();
-            consoleLogs.push({ type, text });
-            if (this.isWarning(type, text)) {
-                warnings.push(text);
-                if (this.isCriticalWarning(text)) {
-                    criticalWarnings.push(text);
-                }
+    async loadRuntimeLibraries(page, componentSpec, allLibraries, debug = false) {
+        // Helper function to load scripts with timeout (Recommendation #3)
+        const loadScriptWithTimeout = async (url, timeout = 10000) => {
+            try {
+                await Promise.race([
+                    page.addScriptTag({ url }),
+                    new Promise((_, reject) => setTimeout(() => reject(new Error(`Script load timeout: ${url}`)), timeout))
+                ]);
             }
+            catch (error) {
+                throw new Error(`Failed to load script ${url}: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        };
+        // Load React and ReactDOM with timeout protection
+        await loadScriptWithTimeout('https://unpkg.com/react@18/umd/react.development.js');
+        await loadScriptWithTimeout('https://unpkg.com/react-dom@18/umd/react-dom.development.js');
+        // Load Babel for JSX transformation with timeout
+        await loadScriptWithTimeout('https://unpkg.com/@babel/standalone/babel.min.js');
+        // Load the real MemberJunction React Runtime UMD bundle
+        const fs = await Promise.resolve().then(() => __importStar(require('fs')));
+        // Resolve the path to the UMD bundle
+        const runtimePath = require.resolve('@memberjunction/react-runtime/dist/runtime.umd.js');
+        const runtimeBundle = fs.readFileSync(runtimePath, 'utf-8');
+        // Inject the UMD bundle into the page
+        await page.addScriptTag({ content: runtimeBundle });
+        // The UMD bundle should have created window.MJReactRuntime
+        // Let's verify and potentially add any test-harness specific overrides
+        await page.evaluate(() => {
+            // Check if MJReactRuntime was loaded from the UMD bundle
+            if (typeof window.MJReactRuntime === 'undefined') {
+                throw new Error('MJReactRuntime UMD bundle did not load correctly');
+            }
+            // The real runtime is now available!
         });
-    }
-    /**
-     * Sets up error handling for the page
-     */
-    setupErrorHandling(page, errors) {
-        page.on('pageerror', (error) => {
-            errors.push(error.message);
+        // Verify everything loaded
+        const loaded = await page.evaluate(() => {
+            return {
+                React: typeof window.React !== 'undefined',
+                ReactDOM: typeof window.ReactDOM !== 'undefined',
+                Babel: typeof window.Babel !== 'undefined',
+                MJRuntime: typeof window.MJReactRuntime !== 'undefined'
+            };
         });
+        // All libraries loaded successfully
+        if (!loaded.React || !loaded.ReactDOM || !loaded.Babel || !loaded.MJRuntime) {
+            throw new Error('Failed to load required libraries');
+        }
+        // Load component-specific libraries from CDN
+        if (componentSpec?.libraries && allLibraries) {
+            await this.loadComponentLibraries(page, componentSpec.libraries, allLibraries, debug);
+        }
     }
     /**
-     * Injects render tracking code into the page
-     */
-    async injectRenderTracking(page) {
-        // Instead of using evaluateOnNewDocument, we'll inject the script directly into the HTML
-        // This avoids the Playwright-specific API issue
-        // The actual injection will happen in createHTMLTemplate
-    }
-    /**
-     * Waits for component to render and checks for timeouts
+     * Load component-specific libraries from CDN
      */
-    async waitForRender(page, options, errors) {
-        const timeout = options.timeout || 10000; // 10 seconds default
-        const renderWaitTime = options.renderWaitTime || 1000; // Default 1000ms
-        try {
-            if (options.waitForSelector) {
-                await this.browserManager.waitForSelector(options.waitForSelector, { timeout });
+    async loadComponentLibraries(page, specLibraries, allLibraries, debug = false) {
+        if (debug) {
+            console.log('📚 Loading component libraries:', {
+                count: specLibraries.length,
+                libraries: specLibraries.map(l => l.name)
+            });
+        }
+        // Create a map of library definitions from allLibraries
+        const libraryMap = new Map();
+        for (const lib of allLibraries) {
+            libraryMap.set(lib.Name.toLowerCase(), lib);
+        }
+        // Load each library the component needs
+        for (const specLib of specLibraries) {
+            const libDef = libraryMap.get(specLib.name.toLowerCase());
+            if (!libDef) {
+                console.warn(`⚠️ Library ${specLib.name} not found in metadata`);
+                continue;
             }
-            if (options.waitForLoadState) {
-                await this.browserManager.waitForLoadState(options.waitForLoadState);
+            if (debug) {
+                console.log(`📦 Loading ${specLib.name}:`, {
+                    cdnUrl: libDef.CDNUrl,
+                    globalVariable: libDef.GlobalVariable
+                });
             }
-            else {
-                // Wait for React to finish rendering with configurable time
-                await page.waitForTimeout(renderWaitTime);
-                // Force React to flush all updates
-                await page.evaluate(() => {
-                    if (window.React && window.React.flushSync) {
-                        try {
-                            window.React.flushSync(() => { });
+            // Load CSS if available
+            if (libDef.CDNCssUrl) {
+                const cssUrls = libDef.CDNCssUrl.split(',').map(url => url.trim());
+                for (const cssUrl of cssUrls) {
+                    if (cssUrl) {
+                        await page.addStyleTag({ url: cssUrl });
+                        if (debug) {
+                            console.log(`  ✅ Loaded CSS: ${cssUrl}`);
                         }
-                        catch (e) {
-                            console.error('flushSync error:', e);
+                    }
+                }
+            }
+            // Load the library script with timeout protection
+            if (libDef.CDNUrl) {
+                try {
+                    // Add timeout for library loading (Recommendation #3)
+                    await Promise.race([
+                        page.addScriptTag({ url: libDef.CDNUrl }),
+                        new Promise((_, reject) => setTimeout(() => reject(new Error(`Library load timeout: ${libDef.CDNUrl}`)), 10000))
+                    ]);
+                    // Verify the library loaded
+                    const isLoaded = await page.evaluate((globalVar) => {
+                        return typeof window[globalVar] !== 'undefined';
+                    }, libDef.GlobalVariable);
+                    if (isLoaded) {
+                        if (debug) {
+                            console.log(`  ✅ Loaded ${specLib.name} as window.${libDef.GlobalVariable}`);
                         }
                     }
-                });
-                // Additional small wait after flush to ensure DOM updates
-                await page.waitForTimeout(50);
+                    else {
+                        console.error(`  ❌ Failed to load ${specLib.name} - global variable ${libDef.GlobalVariable} not found`);
+                    }
+                }
+                catch (error) {
+                    console.error(`  ❌ Error loading ${specLib.name} from ${libDef.CDNUrl}:`, error);
+                }
             }
-            return true;
         }
-        catch (timeoutError) {
-            errors.push(`Component rendering timeout after ${timeout}ms - possible infinite render loop`);
-            return false;
+        if (debug) {
+            // Log all available global variables that look like libraries
+            // Get all the global variables we expect from the spec
+            const expectedGlobals = specLibraries.map(lib => {
+                const libDef = libraryMap.get(lib.name.toLowerCase());
+                return libDef?.GlobalVariable;
+            }).filter(Boolean);
+            const globals = await page.evaluate((expected) => {
+                const relevantGlobals = {};
+                // Check the expected globals from the spec
+                for (const key of expected) {
+                    if (window[key]) {
+                        relevantGlobals[key] = typeof window[key];
+                    }
+                    else {
+                        relevantGlobals[key] = 'NOT FOUND';
+                    }
+                }
+                // Also check some common library globals
+                const commonKeys = ['Recharts', 'chroma', '_', 'moment', 'dayjs', 'Chart', 'GSAP', 'gsap', 'lottie'];
+                for (const key of commonKeys) {
+                    if (!(key in relevantGlobals) && window[key]) {
+                        relevantGlobals[key] = typeof window[key];
+                    }
+                }
+                return relevantGlobals;
+            }, expectedGlobals);
+            console.log('🌍 Available library globals:', globals);
         }
     }
     /**
-     * Gets the render count from the page
+     * Set up error tracking in the page
      */
-    async getRenderCount(page) {
-        return await page.evaluate(() => window.__testHarnessRenderCount || 0);
+    async setupErrorTracking(page) {
+        await page.evaluate(() => {
+            // Initialize error tracking
+            window.__testHarnessRuntimeErrors = [];
+            window.__testHarnessConsoleErrors = [];
+            window.__testHarnessConsoleWarnings = [];
+            window.__testHarnessTestFailed = false;
+            window.__testHarnessRenderCount = 0;
+            // Track renders
+            const originalCreateElement = window.React?.createElement;
+            if (originalCreateElement) {
+                window.React.createElement = function (...args) {
+                    window.__testHarnessRenderCount++;
+                    return originalCreateElement.apply(this, args);
+                };
+            }
+            // Override console.error
+            const originalConsoleError = console.error;
+            console.error = function (...args) {
+                const errorText = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ');
+                // Check if this is a warning rather than an error
+                // React warnings typically start with "Warning:" or contain warning-related text
+                const isWarning = errorText.includes('Warning:') ||
+                    errorText.includes('DevTools') ||
+                    errorText.includes('deprecated') ||
+                    errorText.includes('has been renamed') ||
+                    errorText.includes('will be removed') ||
+                    errorText.includes('Consider using') ||
+                    errorText.includes('Please update') ||
+                    (errorText.includes('React') && errorText.includes('recognize the')) || // Prop warnings
+                    (errorText.includes('React') && errorText.includes('Invalid'));
+                if (isWarning) {
+                    // Track as warning, don't fail the test
+                    window.__testHarnessConsoleWarnings.push(errorText);
+                }
+                else {
+                    // Real error - track and fail the test
+                    window.__testHarnessConsoleErrors.push(errorText);
+                    window.__testHarnessTestFailed = true;
+                }
+                originalConsoleError.apply(console, args);
+            };
+            // Global error handler
+            window.addEventListener('error', (event) => {
+                window.__testHarnessRuntimeErrors.push({
+                    message: event.error?.message || event.message,
+                    stack: event.error?.stack,
+                    type: 'runtime'
+                });
+                window.__testHarnessTestFailed = true;
+            });
+            // Unhandled promise rejection handler
+            window.addEventListener('unhandledrejection', (event) => {
+                window.__testHarnessRuntimeErrors.push({
+                    message: 'Unhandled Promise Rejection: ' + (event.reason?.message || event.reason),
+                    stack: event.reason?.stack,
+                    type: 'promise-rejection'
+                });
+                window.__testHarnessTestFailed = true;
+                event.preventDefault();
+            });
+        });
     }
     /**
-     * Collects runtime errors that were caught during component execution
+     * Collect runtime errors from the page
      */
     async collectRuntimeErrors(page) {
-        const runtimeErrors = await page.evaluate(() => {
-            return window.__testHarnessRuntimeErrors || [];
+        const errorData = await page.evaluate(() => {
+            return {
+                runtimeErrors: window.__testHarnessRuntimeErrors || [],
+                consoleErrors: window.__testHarnessConsoleErrors || [],
+                testFailed: window.__testHarnessTestFailed || false
+            };
         });
         const errors = [];
-        runtimeErrors.forEach((error) => {
-            errors.push(`${error.type} error: ${error.message}`);
-            if (error.componentStack) {
-                errors.push(`Component stack: ${error.componentStack}`);
+        // Only add "test failed" message if there are actual errors
+        if (errorData.testFailed && (errorData.runtimeErrors.length > 0 || errorData.consoleErrors.length > 0)) {
+            errors.push('Test marked as failed by error handlers');
+        }
+        errorData.runtimeErrors.forEach((error) => {
+            const errorMsg = `${error.type} error: ${error.message}`;
+            if (!errors.includes(errorMsg)) {
+                errors.push(errorMsg);
+            }
+        });
+        errorData.consoleErrors.forEach((error) => {
+            const errorMsg = `Console error: ${error}`;
+            if (!errors.includes(errorMsg)) {
+                errors.push(errorMsg);
             }
         });
         return errors;
     }
     /**
-     * Performs deep render validation to catch errors that might be in the DOM
+     * Collect warnings from the page (non-fatal issues)
      */
-    async validateDeepRender(page) {
-        const errors = [];
-        try {
-            // Execute a full render cycle by forcing a state update
-            await page.evaluate(() => {
-                // Force React to complete all pending updates
-                if (window.React && window.React.flushSync) {
-                    window.React.flushSync(() => { });
-                }
-            });
-            // Check for render errors in the component tree
-            const renderErrors = await page.evaluate(() => {
-                const errors = [];
-                // Walk the DOM and check for error boundaries or error text
-                const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
-                let node;
-                while (node = walker.nextNode()) {
-                    const text = node.textContent || '';
-                    // Look for common error patterns
-                    if (text.includes('TypeError:') ||
-                        text.includes('ReferenceError:') ||
-                        text.includes('Cannot read properties of undefined') ||
-                        text.includes('Cannot access property') ||
-                        text.includes('is not a function') ||
-                        text.includes('Component Error:')) {
-                        // Only add if it's not already in our error list
-                        const errorMsg = text.trim();
-                        if (errorMsg.length < 500) { // Avoid huge text blocks
-                            errors.push(`Potential error in rendered content: ${errorMsg}`);
-                        }
-                    }
-                }
-                return errors;
-            });
-            errors.push(...renderErrors);
-        }
-        catch (e) {
-            errors.push(`Deep render validation failed: ${e}`);
-        }
-        return errors;
+    async collectWarnings(page) {
+        const warningData = await page.evaluate(() => {
+            return {
+                consoleWarnings: window.__testHarnessConsoleWarnings || []
+            };
+        });
+        const warnings = [];
+        warningData.consoleWarnings.forEach((warning) => {
+            if (!warnings.includes(warning)) {
+                warnings.push(warning);
+            }
+        });
+        return warnings;
     }
     /**
-     * Determines if the component execution was successful
+     * Set up console logging
      */
-    determineSuccess(errors, criticalWarnings, renderCount, hasTimeout) {
-        const additionalErrors = [];
-        if (renderCount > ComponentRunner.MAX_RENDER_COUNT) {
-            additionalErrors.push(`Excessive render count: ${renderCount} renders detected`);
-        }
-        const success = errors.length === 0 &&
-            criticalWarnings.length === 0 &&
-            !hasTimeout &&
-            renderCount <= ComponentRunner.MAX_RENDER_COUNT;
-        return { success, additionalErrors };
+    setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings) {
+        page.on('console', (msg) => {
+            const type = msg.type();
+            const text = msg.text();
+            consoleLogs.push({ type, text });
+            // Note: We're already handling warnings in our console.error override
+            // This catches any direct console.warn() calls
+            if (type === 'warning') {
+                if (!warnings.includes(text)) {
+                    warnings.push(text);
+                }
+                // Check if it's a critical warning that should fail the test
+                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text))) {
+                    criticalWarnings.push(text);
+                }
+            }
+        });
+        page.on('pageerror', (error) => {
+            consoleLogs.push({ type: 'error', text: error.message });
+        });
     }
     /**
-     * Expose MemberJunction utilities to the browser context
+     * Expose MJ utilities to the browser context
      */
-    async exposeMJUtilities(page, contextUser) {
-        // Check if utilities are already exposed
-        const alreadyExposed = await page.evaluate(() => {
-            return typeof window.__mjGetEntityObject === 'function';
-        });
-        if (alreadyExposed) {
-            return; // Already exposed, skip
-        }
+    async exposeMJUtilities(page, contextUser, dataErrors, debug = false) {
+        // Don't check if already exposed - we always start fresh after goto('about:blank')
+        // The page.exposeFunction calls need to be made for each new page instance
+        // Serialize contextUser to pass to the browser context
+        // UserInfo is a simple object that can be serialized
+        const serializedContextUser = JSON.parse(JSON.stringify(contextUser));
         // Create instances in Node.js context
         const metadata = new core_1.Metadata();
         const runView = new core_1.RunView();
         const runQuery = new core_1.RunQuery();
-        // Expose individual functions since we can't pass complex objects
+        // Create a lightweight mock metadata object with serializable data
+        // This avoids authentication/provider issues in the browser context
+        let entitiesData = [];
+        try {
+            // Try to get entities if available, otherwise use empty array
+            if (metadata.Entities) {
+                // Serialize the entities data (remove functions, keep data)
+                entitiesData = JSON.parse(JSON.stringify(metadata.Entities));
+                // Serialized entities for browser context
+            }
+            else {
+                // Metadata.Entities not available, using empty array
+            }
+        }
+        catch (error) {
+            // Could not serialize entities
+            entitiesData = [];
+        }
+        // Create the mock metadata structure with entities and user
+        // Note: Don't include functions here as they can't be serialized
+        // Include common properties that Metadata.Provider might need
+        const mockMetadata = {
+            Entities: entitiesData,
+            CurrentUser: serializedContextUser,
+            Applications: [],
+            Queries: [],
+            QueryFields: [],
+            QueryCategories: [],
+            QueryPermissions: [],
+            Roles: [],
+            Libraries: [],
+            AuditLogTypes: [],
+            Authorizations: [],
+            VisibleExplorerNavigationItems: [],
+            AllExplorerNavigationItems: []
+        };
+        // Inject both the contextUser and mock metadata into the page
+        // Playwright only accepts a single argument, so wrap in an object
+        await page.evaluate((data) => {
+            const { ctxUser, mockMd } = data;
+            window.__mjContextUser = ctxUser;
+            // Add the EntityByName function directly in the browser context
+            mockMd.EntityByName = (name) => {
+                return mockMd.Entities.find((e) => e.Name === name) || null;
+            };
+            window.__mjMockMetadata = mockMd;
+            // IMPORTANT: Create global Metadata mock immediately to prevent undefined errors
+            // This must be available before any component code runs
+            if (!window.Metadata) {
+                window.Metadata = {
+                    Provider: mockMd
+                };
+                // Created global Metadata mock with Provider (early)
+            }
+            // Received contextUser and mock metadata in browser
+        }, { ctxUser: serializedContextUser, mockMd: mockMetadata });
+        // Expose functions
         await page.exposeFunction('__mjGetEntityObject', async (entityName) => {
             try {
                 const entity = await metadata.GetEntityObject(entityName, contextUser);
@@ -711,178 +901,169 @@ ${cssLinks}
         });
         await page.exposeFunction('__mjGetEntities', () => {
             try {
-                return metadata.Entities;
+                // Return the entities array or empty array if not available
+                return entitiesData;
             }
             catch (error) {
                 console.error('Error in __mjGetEntities:', error);
-                return null;
+                return [];
             }
         });
         await page.exposeFunction('__mjRunView', async (params) => {
             try {
-                return await runView.RunView(params, contextUser);
+                const result = await runView.RunView(params, contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    const rowCount = result.Results?.length || 0;
+                    console.log(`✅ RunView SUCCESS: Entity="${params.EntityName}" Rows=${rowCount}`);
+                    if (params.ExtraFilter) {
+                        console.log(`   Filter: ${params.ExtraFilter}`);
+                    }
+                }
+                return result;
             }
             catch (error) {
-                console.error('Error in __mjRunView:', error);
                 const errorMessage = error instanceof Error ? error.message : String(error);
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunView FAILED: Entity="${params.EntityName || 'unknown'}"`);
+                    console.log(`   Error: ${errorMessage}`);
+                }
+                else {
+                    console.error('Error in __mjRunView:', errorMessage);
+                }
+                // Collect this error for the test report
+                dataErrors.push(`RunView error: ${errorMessage} (Entity: ${params.EntityName || 'unknown'})`);
+                // Return error result that won't crash the component
                 return { Success: false, ErrorMessage: errorMessage, Results: [] };
             }
         });
         await page.exposeFunction('__mjRunViews', async (params) => {
             try {
-                return await runView.RunViews(params, contextUser);
+                const results = await runView.RunViews(params, contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    console.log(`✅ RunViews SUCCESS: ${params.length} queries executed`);
+                    params.forEach((p, i) => {
+                        const rowCount = results[i]?.Results?.length || 0;
+                        console.log(`   [${i + 1}] Entity="${p.EntityName}" Rows=${rowCount}`);
+                    });
+                }
+                return results;
             }
             catch (error) {
-                console.error('Error in __mjRunViews:', error);
                 const errorMessage = error instanceof Error ? error.message : String(error);
+                const entities = params.map(p => p.EntityName || 'unknown').join(', ');
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunViews FAILED: Entities=[${entities}]`);
+                    console.log(`   Error: ${errorMessage}`);
+                }
+                else {
+                    console.error('Error in __mjRunViews:', errorMessage);
+                }
+                // Collect this error for the test report
+                dataErrors.push(`RunViews error: ${errorMessage} (Entities: ${entities})`);
+                // Return error results that won't crash the component
                 return params.map(() => ({ Success: false, ErrorMessage: errorMessage, Results: [] }));
             }
         });
         await page.exposeFunction('__mjRunQuery', async (params) => {
             try {
-                return await runQuery.RunQuery(params, contextUser);
+                const result = await runQuery.RunQuery(params, contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    const queryIdentifier = params.QueryName || params.QueryID || 'unknown';
+                    const rowCount = result.Results?.length || 0;
+                    console.log(`✅ RunQuery SUCCESS: Query="${queryIdentifier}" Rows=${rowCount}`);
+                    if (params.Parameters && Object.keys(params.Parameters).length > 0) {
+                        console.log(`   Parameters:`, params.Parameters);
+                    }
+                }
+                return result;
             }
             catch (error) {
-                console.error('Error in __mjRunQuery:', error);
                 const errorMessage = error instanceof Error ? error.message : String(error);
+                const queryIdentifier = params.QueryName || params.QueryID || 'unknown';
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunQuery FAILED: Query="${queryIdentifier}"`);
+                    console.log(`   Error: ${errorMessage}`);
+                }
+                else {
+                    console.error('Error in __mjRunQuery:', errorMessage);
+                }
+                // Collect this error for the test report
+                dataErrors.push(`RunQuery error: ${errorMessage} (Query: ${queryIdentifier})`);
+                // Return error result that won't crash the component
                 return { Success: false, ErrorMessage: errorMessage, Results: [] };
             }
         });
+        // Make them available in utilities with the mock metadata
+        await page.evaluate(() => {
+            // Use the mock metadata for synchronous access
+            const mockMd = window.__mjMockMetadata || { Entities: [], CurrentUser: null };
+            window.__mjUtilities = {
+                md: {
+                    // Use the mock metadata's Entities directly (synchronous)
+                    Entities: mockMd.Entities,
+                    entities: mockMd.Entities, // Support both cases
+                    CurrentUser: mockMd.CurrentUser,
+                    EntityByName: (name) => {
+                        return mockMd.Entities.find((e) => e.Name === name) || null;
+                    },
+                    // Keep async function for GetEntityObject for compatibility
+                    GetEntityObject: async (entityName) => await window.__mjGetEntityObject(entityName)
+                },
+                rv: {
+                    RunView: async (params) => await window.__mjRunView(params),
+                    RunViews: async (params) => await window.__mjRunViews(params)
+                },
+                rq: {
+                    RunQuery: async (params) => await window.__mjRunQuery(params)
+                }
+            };
+            // Update or create global Metadata mock (in case it wasn't created earlier)
+            if (!window.Metadata) {
+                window.Metadata = {
+                    Provider: mockMd
+                };
+                // Created global Metadata mock with Provider (late)
+            }
+            else {
+                // Update the existing one to ensure it has the latest mock data
+                window.Metadata.Provider = mockMd;
+                // Updated existing Metadata.Provider with mock data
+            }
+        });
     }
     /**
-     * Analyze component errors to identify failed components
-     * @param errors Array of error messages
-     * @returns Array of component names that failed
-     */
-    static analyzeComponentErrors(errors) {
-        return react_runtime_1.ComponentErrorAnalyzer.identifyFailedComponents(errors);
-    }
-    /**
-     * Get detailed error analysis
-     * @param errors Array of error messages
-     * @returns Detailed failure information
-     */
-    static getDetailedErrorAnalysis(errors) {
-        return react_runtime_1.ComponentErrorAnalyzer.analyzeComponentErrors(errors);
-    }
-    /**
-     * Gets the ComponentCompiler code to inject into the browser
-     * This is a simplified version that works in the browser context
+     * Dump debug information
      */
-    getComponentCompilerCode() {
-        // Return a browser-compatible version of ComponentCompiler
-        return `
-    class ComponentCompiler {
-      constructor() {
-        this.cache = new Map();
-      }
-      setBabelInstance(babel) {
-        this.babelInstance = babel;
-      }
-      async compile(options) {
-        const { componentName, componentCode } = options;
-        try {
-          // Validate inputs
-          if (!componentName || !componentCode) {
-            throw new Error('componentName and componentCode are required');
-          }
-          // Wrap component code
-          const wrappedCode = this.wrapComponentCode(componentCode, componentName);
-          // Transform using Babel
-          const result = this.babelInstance.transform(wrappedCode, {
-            presets: ['react'],
-            filename: componentName + '.jsx'
-          });
-          // Create factory
-          const componentFactory = this.createComponentFactory(result.code, componentName);
-          return {
-            success: true,
-            component: {
-              component: componentFactory,
-              id: componentName + '_' + Date.now(),
-              name: componentName,
-              compiledAt: new Date(),
-              warnings: []
-            },
-            duration: 0
-          };
-        } catch (error) {
-          return {
-            success: false,
-            error: {
-              message: error.message,
-              componentName: componentName,
-              phase: 'compilation'
-            },
-            duration: 0
-          };
+    dumpDebugInfo(result) {
+        console.log('\n📊 === Component Execution Results ===');
+        console.log('Success:', result.success ? '✅' : '❌');
+        console.log('Execution time:', result.executionTime + 'ms');
+        console.log('Render count:', result.renderCount);
+        if (result.errors && result.errors.length > 0) {
+            console.log('\n❌ Errors:', result.errors.length);
+            result.errors.forEach((err, i) => {
+                console.log(`  ${i + 1}. ${err.message}`);
+            });
         }
-      }
-      wrapComponentCode(componentCode, componentName) {
-        // Make component libraries available in scope
-        const libraryDeclarations = componentLibraries
-          .map(lib => \`const \${lib.globalVariable} = libraries['\${lib.globalVariable}'];\`)
-          .join('\\n        ');
-        return \`
-          function createComponent(
-            React, ReactDOM,
-            useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
-            libraries, styles, console
-          ) {
-            \${libraryDeclarations}
-            \${componentCode}
-            if (typeof \${componentName} === 'undefined') {
-              throw new Error('Component "\${componentName}" is not defined in the provided code');
-            }
-            return {
-              component: \${componentName},
-              print: function() { window.print(); },
-              refresh: function(data) { }
-            };
-          }
-        \`;
-      }
-      createComponentFactory(transpiledCode, componentName) {
-        const factoryCreator = new Function(
-          'React', 'ReactDOM',
-          'useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useContext', 'useReducer', 'useLayoutEffect',
-          'libraries', 'styles', 'console',
-          transpiledCode + '; return createComponent;'
-        );
-        return (context, styles = {}) => {
-          const { React, ReactDOM, libraries = {} } = context;
-          const createComponentFn = factoryCreator(
-            React, ReactDOM,
-            React.useState, React.useEffect, React.useCallback, React.useMemo,
-            React.useRef, React.useContext, React.useReducer, React.useLayoutEffect,
-            libraries, styles, console
-          );
-          return createComponentFn(
-            React, ReactDOM,
-            React.useState, React.useEffect, React.useCallback, React.useMemo,
-            React.useRef, React.useContext, React.useReducer, React.useLayoutEffect,
-            libraries, styles, console
-          );
-        };
-      }
-    }
-    `;
+        if (result.warnings && result.warnings.length > 0) {
+            console.log('\n⚠️ Warnings:', result.warnings.length);
+            result.warnings.forEach((warn, i) => {
+                console.log(`  ${i + 1}. ${warn.message}`);
+            });
+        }
+        if (result.criticalWarnings && result.criticalWarnings.length > 0) {
+            console.log('\n🔴 Critical Warnings:', result.criticalWarnings.length);
+            result.criticalWarnings.forEach((warn, i) => {
+                console.log(`  ${i + 1}. ${warn}`);
+            });
+        }
+        console.log('\n========================================\n');
     }
 }
 exports.ComponentRunner = ComponentRunner;
@@ -897,6 +1078,5 @@ ComponentRunner.CRITICAL_WARNING_PATTERNS = [
     /Error: Minified React error/i,
     /too many re-renders/i,
 ];
-// Maximum allowed renders before considering it excessive
 ComponentRunner.MAX_RENDER_COUNT = 1000;
 //# sourceMappingURL=component-runner.js.map