test_connection_wizard_ui.js

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

async function testConnectionWizardUI() {
    console.log('🚀 Starting Connection Wizard UI Test...\n');
    
    const browser = await chromium.launch({ 
        headless: false, // Show browser for debugging
        slowMo: 1000    // Slow down for visibility
    });
    
    const context = await browser.newContext();
    const page = await context.newPage();
    
    // Enable console logging
    page.on('console', msg => {
        console.log(`[BROWSER CONSOLE ${msg.type().toUpperCase()}]:`, msg.text());
    });
    
    // Enable error logging
    page.on('pageerror', error => {
        console.error(`[PAGE ERROR]:`, error);
    });
    
    try {
        console.log('📋 Test Report\n' + '='.repeat(50));
        
        // Step 1: Navigate to the BOM processing page
        console.log('\n1️⃣ STEP 1: Navigate to BOM processing page');
        await page.goto('http://localhost:3000');
        await page.waitForLoadState('networkidle');
        
        // Take initial screenshot
        await page.screenshot({ path: 'step1_homepage.png', fullPage: true });
        console.log('   ✅ Successfully navigated to http://localhost:3000');
        console.log('   📸 Screenshot saved: step1_homepage.png');
        
        // Check page title
        const title = await page.title();
        console.log(`   📄 Page title: "${title}"`);
        
        // Step 2: Look for file upload functionality
        console.log('\n2️⃣ STEP 2: Locate file upload functionality');
        
        // Wait for the page to fully load and look for upload elements
        await page.waitForTimeout(2000);
        
        // Look for common file upload patterns
        const uploadSelectors = [
            'input[type="file"]',
            '[data-testid="file-upload"]',
            '.file-upload',
            '.dropzone',
            '[accept*=".csv"]',
            'button:has-text("Upload")',
            'button:has-text("Choose File")',
            'div:has-text("Drop files")',
            'div:has-text("upload")'
        ];
        
        let uploadElement = null;
        let uploadSelector = null;
        
        for (const selector of uploadSelectors) {
            try {
                uploadElement = await page.locator(selector).first();
                if (await uploadElement.count() > 0) {
                    uploadSelector = selector;
                    console.log(`   ✅ Found upload element: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (!uploadElement || await uploadElement.count() === 0) {
            console.log('   ❌ No file upload element found. Searching for navigation...');
            
            // Look for navigation to BOM processing page
            const navSelectors = [
                'a:has-text("BOM")',
                'button:has-text("BOM")',
                'a[href*="bom"]',
                'nav a',
                '.nav-link'
            ];
            
            for (const selector of navSelectors) {
                try {
                    const navElement = await page.locator(selector).first();
                    if (await navElement.count() > 0) {
                        console.log(`   📍 Found navigation element: ${selector}`);
                        await navElement.click();
                        await page.waitForTimeout(2000);
                        await page.screenshot({ path: 'step2_after_navigation.png', fullPage: true });
                        break;
                    }
                } catch (e) {
                    // Continue searching
                }
            }
        }
        
        // Re-check for upload elements after potential navigation
        for (const selector of uploadSelectors) {
            try {
                uploadElement = await page.locator(selector).first();
                if (await uploadElement.count() > 0) {
                    uploadSelector = selector;
                    console.log(`   ✅ Found upload element after navigation: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        await page.screenshot({ path: 'step2_upload_search.png', fullPage: true });
        console.log('   📸 Screenshot saved: step2_upload_search.png');
        
        // Step 3: Upload a sample BOM file
        console.log('\n3️⃣ STEP 3: Upload sample BOM file');
        
        const sampleBomPath = path.resolve('/Users/aswnthraja/PCB_Agent.v2 copy/backend/test_data/simple_bom.csv');
        
        if (uploadElement && await uploadElement.count() > 0) {
            try {
                if (uploadSelector === 'input[type="file"]') {
                    // Direct file input
                    await uploadElement.setInputFiles(sampleBomPath);
                    console.log('   ✅ File uploaded via file input');
                } else {
                    // Look for file input within or near the upload element
                    const fileInput = await page.locator('input[type="file"]').first();
                    if (await fileInput.count() > 0) {
                        await fileInput.setInputFiles(sampleBomPath);
                        console.log('   ✅ File uploaded via nested file input');
                    } else {
                        console.log('   ⚠️ Upload element found but no file input detected');
                    }
                }
                
                await page.waitForTimeout(3000); // Wait for file processing
                await page.screenshot({ path: 'step3_file_uploaded.png', fullPage: true });
                console.log('   📸 Screenshot saved: step3_file_uploaded.png');
                
            } catch (error) {
                console.log(`   ❌ Error uploading file: ${error.message}`);
            }
        } else {
            console.log('   ❌ No upload element found - cannot upload file');
            await page.screenshot({ path: 'step3_no_upload.png', fullPage: true });
        }
        
        // Step 4: Find and click "Switch Mode" button
        console.log('\n4️⃣ STEP 4: Look for "Switch Mode" button');
        
        const switchModeSelectors = [
            'button:has-text("Switch Mode")',
            'button:has-text("Mode")',
            'button:has-text("Wizard")',
            'button:has-text("Connection")',
            '[data-testid="switch-mode"]',
            '.mode-switch',
            '.switch-mode',
            'button[title*="mode"]',
            'button[aria-label*="mode"]'
        ];
        
        let switchModeButton = null;
        let switchModeSelector = null;
        
        for (const selector of switchModeSelectors) {
            try {
                switchModeButton = await page.locator(selector).first();
                if (await switchModeButton.count() > 0 && await switchModeButton.isVisible()) {
                    switchModeSelector = selector;
                    console.log(`   ✅ Found Switch Mode button: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (switchModeButton && await switchModeButton.count() > 0) {
            try {
                await switchModeButton.click();
                console.log('   ✅ Clicked Switch Mode button');
                await page.waitForTimeout(2000);
                await page.screenshot({ path: 'step4_switch_mode_clicked.png', fullPage: true });
                console.log('   📸 Screenshot saved: step4_switch_mode_clicked.png');
            } catch (error) {
                console.log(`   ❌ Error clicking Switch Mode button: ${error.message}`);
            }
        } else {
            console.log('   ❌ Switch Mode button not found');
            await page.screenshot({ path: 'step4_no_switch_mode.png', fullPage: true });
        }
        
        // Step 5: Select "Connection Wizard" mode
        console.log('\n5️⃣ STEP 5: Select "Connection Wizard" mode');
        
        const wizardModeSelectors = [
            'option:has-text("Connection Wizard")',
            'option:has-text("Wizard")',
            'button:has-text("Connection Wizard")',
            'button:has-text("Wizard")',
            '[value="wizard"]',
            '[value="connection-wizard"]',
            'input[type="radio"][value*="wizard"]',
            '.mode-option:has-text("Wizard")',
            'select option[value*="wizard"]'
        ];
        
        let wizardModeElement = null;
        let wizardModeSelector = null;
        
        for (const selector of wizardModeSelectors) {
            try {
                wizardModeElement = await page.locator(selector).first();
                if (await wizardModeElement.count() > 0 && await wizardModeElement.isVisible()) {
                    wizardModeSelector = selector;
                    console.log(`   ✅ Found Connection Wizard option: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (wizardModeElement && await wizardModeElement.count() > 0) {
            try {
                await wizardModeElement.click();
                console.log('   ✅ Selected Connection Wizard mode');
                await page.waitForTimeout(2000);
                await page.screenshot({ path: 'step5_wizard_selected.png', fullPage: true });
                console.log('   📸 Screenshot saved: step5_wizard_selected.png');
            } catch (error) {
                console.log(`   ❌ Error selecting Connection Wizard mode: ${error.message}`);
            }
        } else {
            console.log('   ❌ Connection Wizard mode option not found');
            
            // Look for any dropdown or select elements
            const dropdowns = await page.locator('select, .dropdown, .select').all();
            if (dropdowns.length > 0) {
                console.log(`   📋 Found ${dropdowns.length} dropdown/select elements - investigating...`);
                for (let i = 0; i < dropdowns.length; i++) {
                    try {
                        const text = await dropdowns[i].textContent();
                        console.log(`   📋 Dropdown ${i + 1}: "${text?.substring(0, 100)}..."`);
                    } catch (e) {
                        console.log(`   📋 Dropdown ${i + 1}: Could not get text`);
                    }
                }
            }
            
            await page.screenshot({ path: 'step5_no_wizard_option.png', fullPage: true });
        }
        
        // Step 6: Verify mode selection (look for visual indicators)
        console.log('\n6️⃣ STEP 6: Verify mode selection with visual indicators');
        
        // Look for visual indicators that wizard mode is selected
        const indicators = [
            '.active:has-text("Wizard")',
            '.selected:has-text("Wizard")',
            '.checked:has-text("Wizard")',
            'input[checked][value*="wizard"]',
            '.mode-indicator',
            '.current-mode',
            '[aria-selected="true"]'
        ];
        
        let foundIndicator = false;
        for (const selector of indicators) {
            try {
                const indicator = await page.locator(selector).first();
                if (await indicator.count() > 0 && await indicator.isVisible()) {
                    const text = await indicator.textContent();
                    console.log(`   ✅ Found visual indicator: ${selector} - "${text}"`);
                    foundIndicator = true;
                }
            } catch (e) {
                // Continue checking
            }
        }
        
        if (!foundIndicator) {
            console.log('   ⚠️ No clear visual indicators found for mode selection');
        }
        
        await page.screenshot({ path: 'step6_verify_selection.png', fullPage: true });
        console.log('   📸 Screenshot saved: step6_verify_selection.png');
        
        // Step 7: Find and click "Start S-Expression Generation" button
        console.log('\n7️⃣ STEP 7: Look for "Start S-Expression Generation" button');
        
        const startButtonSelectors = [
            'button:has-text("Start S-Expression Generation")',
            'button:has-text("Start Generation")',
            'button:has-text("Generate")',
            'button:has-text("Process")',
            'button:has-text("Start")',
            'button:has-text("Convert")',
            'button:has-text("Create Schematic")',
            '[data-testid="start-generation"]',
            '.start-button',
            '.generate-button',
            'input[type="submit"]',
            'button[type="submit"]'
        ];
        
        let startButton = null;
        let startButtonSelector = null;
        
        for (const selector of startButtonSelectors) {
            try {
                startButton = await page.locator(selector).first();
                if (await startButton.count() > 0 && await startButton.isVisible()) {
                    startButtonSelector = selector;
                    console.log(`   ✅ Found Start button: ${selector}`);
                    break;
                }
            } catch (e) {
                // Continue searching
            }
        }
        
        if (startButton && await startButton.count() > 0) {
            try {
                // Check if button is enabled
                const isEnabled = await startButton.isEnabled();
                console.log(`   📋 Button enabled: ${isEnabled}`);
                
                if (isEnabled) {
                    await startButton.click();
                    console.log('   ✅ Clicked Start S-Expression Generation button');
                    await page.waitForTimeout(3000); // Wait for response
                } else {
                    console.log('   ⚠️ Start button found but disabled');
                }
                
                await page.screenshot({ path: 'step7_start_clicked.png', fullPage: true });
                console.log('   📸 Screenshot saved: step7_start_clicked.png');
                
            } catch (error) {
                console.log(`   ❌ Error clicking Start button: ${error.message}`);
            }
        } else {
            console.log('   ❌ Start S-Expression Generation button not found');
            await page.screenshot({ path: 'step7_no_start_button.png', fullPage: true });
        }
        
        // Step 8: Monitor what happens - wait for any navigation or wizard to start
        console.log('\n8️⃣ STEP 8: Monitor post-click behavior');
        
        await page.waitForTimeout(5000); // Wait for any processing or navigation
        
        const currentUrl = page.url();
        console.log(`   📍 Current URL: ${currentUrl}`);
        
        // Check for any loading indicators
        const loadingSelectors = [
            '.loading',
            '.spinner',
            '.progress',
            '[data-loading="true"]',
            '.processing'
        ];
        
        for (const selector of loadingSelectors) {
            try {
                const loading = await page.locator(selector).first();
                if (await loading.count() > 0 && await loading.isVisible()) {
                    console.log(`   🔄 Found loading indicator: ${selector}`);
                }
            } catch (e) {
                // Continue checking
            }
        }
        
        // Check for wizard interface elements
        const wizardSelectors = [
            '.wizard',
            '.connection-wizard',
            '.step-indicator',
            '.wizard-step',
            '.wizard-container',
            '[data-wizard]'
        ];
        
        let wizardStarted = false;
        for (const selector of wizardSelectors) {
            try {
                const wizard = await page.locator(selector).first();
                if (await wizard.count() > 0 && await wizard.isVisible()) {
                    console.log(`   🧙‍♂️ Wizard interface detected: ${selector}`);
                    wizardStarted = true;
                }
            } catch (e) {
                // Continue checking
            }
        }
        
        if (!wizardStarted) {
            console.log('   ⚠️ No wizard interface detected after clicking Start');
        }
        
        await page.screenshot({ path: 'step8_post_click_state.png', fullPage: true });
        console.log('   📸 Screenshot saved: step8_post_click_state.png');
        
        // Step 9: Check browser console for JavaScript errors
        console.log('\n9️⃣ STEP 9: Final console error check');
        
        // Errors are already being logged via page.on('console') and page.on('pageerror')
        console.log('   📋 Console errors (if any) are displayed above with [BROWSER CONSOLE] or [PAGE ERROR] prefix');
        
        // Step 10: Take final screenshot
        console.log('\n🔟 STEP 10: Final documentation');
        await page.screenshot({ path: 'step10_final_state.png', fullPage: true });
        console.log('   📸 Final screenshot saved: step10_final_state.png');
        
        // Summary
        console.log('\n📊 TEST SUMMARY');
        console.log('='.repeat(50));
        console.log(`✅ Successfully navigated to frontend`);
        console.log(`${uploadElement && await uploadElement.count() > 0 ? '✅' : '❌'} File upload functionality found`);
        console.log(`${switchModeButton && await switchModeButton.count() > 0 ? '✅' : '❌'} Switch Mode button found`);
        console.log(`${wizardModeElement && await wizardModeElement.count() > 0 ? '✅' : '❌'} Connection Wizard option found`);
        console.log(`${startButton && await startButton.count() > 0 ? '✅' : '❌'} Start Generation button found`);
        console.log(`${wizardStarted ? '✅' : '❌'} Wizard interface started after click`);
        
        console.log('\n📁 Generated Files:');
        console.log('   • step1_homepage.png - Initial homepage');
        console.log('   • step2_upload_search.png - Upload element search');
        console.log('   • step3_file_uploaded.png - After file upload');
        console.log('   • step4_switch_mode_clicked.png - After clicking switch mode');
        console.log('   • step5_wizard_selected.png - After selecting wizard mode');
        console.log('   • step6_verify_selection.png - Visual verification');
        console.log('   • step7_start_clicked.png - After clicking start');
        console.log('   • step8_post_click_state.png - Post-click state');
        console.log('   • step10_final_state.png - Final state');
        
    } catch (error) {
        console.error('❌ Test failed with error:', error);
        await page.screenshot({ path: 'error_state.png', fullPage: true });
        console.log('📸 Error screenshot saved: error_state.png');
    } finally {
        await browser.close();
        console.log('\n🏁 Test completed!');
    }
}

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