test_wizard_detailed_flow.js

const { chromium } = require('playwright');
const path = require('path');

async function testWizardDetailedFlow() {
    console.log('🔬 Starting Detailed Connection Wizard Flow Test...\n');
    
    const browser = await chromium.launch({ 
        headless: false,
        slowMo: 2000    // Slower for detailed observation
    });
    
    const context = await browser.newContext();
    const page = await context.newPage();
    
    // Enable console and error logging
    const consoleMessages = [];
    const pageErrors = [];
    
    page.on('console', msg => {
        const message = `[${msg.type().toUpperCase()}] ${msg.text()}`;
        consoleMessages.push(message);
        console.log(`[BROWSER]: ${message}`);
    });
    
    page.on('pageerror', error => {
        pageErrors.push(error.toString());
        console.error(`[PAGE ERROR]: ${error}`);
    });
    
    try {
        console.log('📋 Detailed Connection Wizard Flow Analysis\n' + '='.repeat(70));
        
        // Step 1: Navigate and get to BOM tab
        console.log('\n🎯 STEP 1: Navigate to BOM tab and upload file');
        await page.goto('http://localhost:3000');
        await page.waitForLoadState('networkidle');
        
        // Click BOM tab
        await page.locator('button:has-text("BOM")').click();
        await page.waitForTimeout(1000);
        
        // Upload file
        const sampleBomPath = path.resolve('/Users/aswnthraja/PCB_Agent.v2 copy/backend/test_data/simple_bom.csv');
        await page.locator('input[type="file"]').setInputFiles(sampleBomPath);
        await page.waitForTimeout(3000);
        
        await page.screenshot({ path: 'wizard_flow_step1_ready.png', fullPage: true });
        console.log('   ✅ Initial setup complete');
        
        // Step 2: Examine current processing mode state
        console.log('\n🔍 STEP 2: Examine current processing mode state');
        
        // Get current mode indicator
        const currentModeElements = await page.locator('[class*="mode"], .active, .selected').all();
        const currentModeTexts = [];
        
        for (const element of currentModeElements) {
            try {
                if (await element.isVisible()) {
                    const text = await element.textContent();
                    if (text && text.includes('Auto Generation') || text.includes('Connection Wizard')) {
                        currentModeTexts.push(text.trim());
                    }
                }
            } catch (e) {
                // Skip elements we can't access
            }
        }
        
        console.log('   📋 Current mode indicators:', currentModeTexts);
        
        // Step 3: Click Switch Mode button
        console.log('\n🔧 STEP 3: Click Switch Mode button and examine options');
        
        const switchModeButton = page.locator('button:has-text("Switch Mode")');
        await switchModeButton.click();
        await page.waitForTimeout(2000);
        
        await page.screenshot({ path: 'wizard_flow_step3_switch_clicked.png', fullPage: true });
        
        // Look for mode selection panel
        const modeSelectionPanel = await page.locator('div:has-text("Select Processing Mode"), .mode-switch, [class*="switch"]').all();
        console.log(`   📋 Found ${modeSelectionPanel.length} mode selection panels`);
        
        // Step 4: Look for and interact with Connection Wizard option
        console.log('\n🧙‍♂️ STEP 4: Locate and select Connection Wizard option');
        
        // More comprehensive wizard selection
        const wizardSelectors = [
            'button:has-text("Connection Wizard")',
            'div:has-text("Connection Wizard") button',
            'button[data-testid="wizard-mode"]',
            '[class*="wizard"] button',
            'button:near(:text("Connection Wizard"))'
        ];
        
        let wizardButton = null;
        let foundSelector = null;
        
        for (const selector of wizardSelectors) {
            try {
                const element = page.locator(selector).first();
                if (await element.count() > 0 && await element.isVisible()) {
                    wizardButton = element;
                    foundSelector = selector;
                    console.log(`   ✅ Found wizard button with selector: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (wizardButton) {
            console.log('   🎯 Clicking Connection Wizard button...');
            await wizardButton.click();
            await page.waitForTimeout(2000);
            
            await page.screenshot({ path: 'wizard_flow_step4_wizard_selected.png', fullPage: true });
        } else {
            console.log('   ❌ Connection Wizard button not found');
            await page.screenshot({ path: 'wizard_flow_step4_no_wizard.png', fullPage: true });
        }
        
        // Step 5: Check if mode actually changed
        console.log('\n🔄 STEP 5: Verify mode change and check for wizard settings');
        
        // Look for wizard-specific UI elements that should appear
        const wizardSettingsSelectors = [
            'h4:has-text("Wizard Settings")',
            'div:has-text("AI Assistance Level")',
            'select[value*="medium"], select[value*="high"], select[value*="low"]',
            'input[type="range"]',
            'div:has-text("Auto-Apply Threshold")',
            'div:has-text("Validation Strictness")'
        ];
        
        let wizardSettingsFound = [];
        
        for (const selector of wizardSettingsSelectors) {
            try {
                const elements = await page.locator(selector).all();
                for (const element of elements) {
                    if (await element.isVisible()) {
                        const text = await element.textContent();
                        wizardSettingsFound.push(`${selector}: "${text?.substring(0, 50)}..."`);
                    }
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (wizardSettingsFound.length > 0) {
            console.log('   ✅ Wizard settings panel found:');
            wizardSettingsFound.forEach(setting => console.log(`     • ${setting}`));
        } else {
            console.log('   ❌ No wizard settings panel detected');
        }
        
        await page.screenshot({ path: 'wizard_flow_step5_mode_check.png', fullPage: true });
        
        // Step 6: Click Start S-Expression Generation button
        console.log('\n🚀 STEP 6: Click Start S-Expression Generation button');
        
        const startButton = page.locator('button:has-text("Start S-Expression Generation")');
        
        if (await startButton.count() > 0) {
            const isEnabled = await startButton.isEnabled();
            console.log(`   📋 Start button enabled: ${isEnabled}`);
            
            if (isEnabled) {
                console.log('   🎯 Clicking Start S-Expression Generation...');
                await startButton.click();
                await page.waitForTimeout(3000);
                
                await page.screenshot({ path: 'wizard_flow_step6_start_clicked.png', fullPage: true });
            } else {
                console.log('   ⚠️ Start button is disabled');
                await page.screenshot({ path: 'wizard_flow_step6_start_disabled.png', fullPage: true });
            }
        } else {
            console.log('   ❌ Start button not found');
        }
        
        // Step 7: Monitor for wizard interface activation (detailed)
        console.log('\n🧙‍♂️ STEP 7: Monitor for wizard interface activation');
        
        // Wait longer and check multiple times
        for (let i = 0; i < 5; i++) {
            await page.waitForTimeout(2000);
            
            // Check for wizard-specific UI elements
            const wizardInterfaceSelectors = [
                'h2:has-text("Connection Wizard")',
                'div:has-text("Step") div:has-text("of")',
                '.wizard-container',
                '[data-wizard="true"]',
                'div:has-text("Session:")',
                'div:has-text("components •")',
                'div:has-text("connections")',
                'button:has-text("Cancel Wizard")'
            ];
            
            let wizardFound = false;
            let foundElements = [];
            
            for (const selector of wizardInterfaceSelectors) {
                try {
                    const elements = await page.locator(selector).all();
                    for (const element of elements) {
                        if (await element.isVisible()) {
                            const text = await element.textContent();
                            foundElements.push(`${selector}: "${text?.substring(0, 80)}..."`);
                            wizardFound = true;
                        }
                    }
                } catch (e) {
                    // Continue searching
                }
            }
            
            if (wizardFound) {
                console.log(`   ✅ Wizard interface detected on attempt ${i + 1}:`);
                foundElements.forEach(element => console.log(`     • ${element}`));
                break;
            } else {
                console.log(`   ⏳ Attempt ${i + 1}: No wizard interface yet...`);
            }
            
            if (i === 4) {
                console.log('   ❌ No wizard interface detected after 5 attempts');
            }
        }
        
        await page.screenshot({ path: 'wizard_flow_step7_wizard_interface.png', fullPage: true });
        
        // Step 8: Check what actually happened - processing status
        console.log('\n📊 STEP 8: Check processing status and current page state');
        
        // Look for processing indicators
        const processingSelectors = [
            'div:has-text("Processing")',
            'div:has-text("Loading")',
            'div:has-text("Generating")',
            '.spinner',
            '.loading',
            '[class*="progress"]'
        ];
        
        let processingFound = [];
        
        for (const selector of processingSelectors) {
            try {
                const elements = await page.locator(selector).all();
                for (const element of elements) {
                    if (await element.isVisible()) {
                        const text = await element.textContent();
                        processingFound.push(`${selector}: "${text?.substring(0, 80)}..."`);
                    }
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (processingFound.length > 0) {
            console.log('   🔄 Processing indicators found:');
            processingFound.forEach(indicator => console.log(`     • ${indicator}`));
        } else {
            console.log('   📋 No processing indicators found');
        }
        
        // Check for any error messages
        const errorSelectors = [
            'div:has-text("Error")',
            'div:has-text("Failed")',
            '.error',
            '[class*="error"]',
            '.alert-danger',
            '.bg-red'
        ];
        
        let errorsFound = [];
        
        for (const selector of errorSelectors) {
            try {
                const elements = await page.locator(selector).all();
                for (const element of elements) {
                    if (await element.isVisible()) {
                        const text = await element.textContent();
                        errorsFound.push(`${selector}: "${text?.substring(0, 80)}..."`);
                    }
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (errorsFound.length > 0) {
            console.log('   ❌ Error messages found:');
            errorsFound.forEach(error => console.log(`     • ${error}`));
        } else {
            console.log('   ✅ No error messages found');
        }
        
        await page.screenshot({ path: 'wizard_flow_step8_status_check.png', fullPage: true });
        
        // Step 9: Final state analysis
        console.log('\n📋 STEP 9: Final state analysis');
        
        const currentUrl = page.url();
        console.log(`   📍 Current URL: ${currentUrl}`);
        
        // Get all visible headings
        const headings = await page.locator('h1, h2, h3, h4').all();
        const visibleHeadings = [];
        
        for (const heading of headings) {
            try {
                if (await heading.isVisible()) {
                    const text = await heading.textContent();
                    if (text && text.trim().length > 0) {
                        visibleHeadings.push(text.trim());
                    }
                }
            } catch (e) {
                // Skip elements we can't access
            }
        }
        
        console.log('   📋 Current page sections:');
        visibleHeadings.forEach(heading => console.log(`     • "${heading}"`));
        
        await page.screenshot({ path: 'wizard_flow_step9_final_analysis.png', fullPage: true });
        
        // Summary and Diagnosis
        console.log('\n🔬 DETAILED FLOW ANALYSIS SUMMARY');
        console.log('='.repeat(70));
        
        console.log('\n✅ SUCCESSFUL STEPS:');
        console.log('   • Navigation to BOM tab');
        console.log('   • File upload');
        console.log('   • Processing Mode section found');
        console.log('   • Switch Mode button found and clicked');
        
        if (wizardButton) {
            console.log('   • Connection Wizard option found and clicked');
        }
        
        console.log('\n⚠️ ISSUES IDENTIFIED:');
        
        if (!wizardButton) {
            console.log('   • Connection Wizard option not found after Switch Mode');
        }
        
        if (wizardSettingsFound.length === 0) {
            console.log('   • Wizard settings panel not visible (mode may not have switched)');
        }
        
        if (foundElements.length === 0) {
            console.log('   • Wizard interface did not activate after Start button click');
        }
        
        if (errorsFound.length > 0) {
            console.log('   • Error messages detected on page');
        }
        
        console.log('\n🧠 DIAGNOSTIC CONCLUSION:');
        
        if (wizardButton && wizardSettingsFound.length > 0 && foundElements.length === 0) {
            console.log('   ➡️ Mode switch appears to work, but wizard interface is not starting');
            console.log('   ➡️ This suggests the wizard may be starting in auto-generation mode instead');
            console.log('   ➡️ OR there may be a backend issue preventing wizard initialization');
        } else if (!wizardButton) {
            console.log('   ➡️ Mode switching UI is not fully functional');
            console.log('   ➡️ Connection Wizard option is not accessible');
        } else if (foundElements.length > 0) {
            console.log('   ➡️ Wizard interface is working correctly!');
        } else {
            console.log('   ➡️ Multiple issues detected - wizard functionality may not be implemented');
        }
        
        console.log('\n📊 BROWSER STATE:');
        console.log(`   • Console messages: ${consoleMessages.length}`);
        console.log(`   • Page errors: ${pageErrors.length}`);
        
        if (pageErrors.length > 0) {
            console.log('\n❌ PAGE ERRORS DETECTED:');
            pageErrors.forEach(error => console.log(`   • ${error}`));
        }
        
        console.log('\n📁 GENERATED SCREENSHOTS:');
        console.log('   • wizard_flow_step1_ready.png');
        console.log('   • wizard_flow_step3_switch_clicked.png');
        console.log('   • wizard_flow_step4_wizard_selected.png (or wizard_flow_step4_no_wizard.png)');
        console.log('   • wizard_flow_step5_mode_check.png');
        console.log('   • wizard_flow_step6_start_clicked.png');
        console.log('   • wizard_flow_step7_wizard_interface.png');
        console.log('   • wizard_flow_step8_status_check.png');
        console.log('   • wizard_flow_step9_final_analysis.png');
        
    } catch (error) {
        console.error('❌ Test failed with error:', error);
        await page.screenshot({ path: 'wizard_flow_error.png', fullPage: true });
    } finally {
        await browser.close();
        console.log('\n🏁 Detailed wizard flow test completed!');
    }
}

// Run the test
testWizardDetailedFlow().catch(console.error);