TenerifeProp/tests/scripts/console-error-monitor-standalone.js

#!/usr/bin/env node

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

async function runConsoleErrorMonitor() {
  console.log('🔍 Starting Console Error Monitor...');
  
  // Get target URL from environment variable or use default
  const targetUrl = process.env.TARGET_URL || 'http://host.docker.internal:8080';
  const catalogUrl = `${targetUrl}/catalog.html`;
  
  console.log(`📍 Target URL: ${catalogUrl}`);
  
  // Create reports directory if it doesn't exist
  const reportsDir = process.env.REPORTS_DIR || path.join(__dirname, '../reports');
  if (!fs.existsSync(reportsDir)) {
    fs.mkdirSync(reportsDir, { recursive: true });
  }

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  
  // Capture console messages
  const consoleMessages = [];
  context.on('console', msg => {
    consoleMessages.push({
      type: msg.type(),
      text: msg.text(),
      location: msg.location(),
      timestamp: new Date().toISOString()
    });
    console.log(`_CONSOLE: ${msg.type()} - ${msg.text()}`);
  });
  
  // Capture page errors
  const pageErrors = [];
  context.on('pageerror', error => {
    pageErrors.push({
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString()
    });
    console.log(`_PAGE_ERROR: ${error.message}`);
  });
  
  const page = await context.newPage();

  try {
    // Navigate to the catalog page
    console.log('📍 Navigating to catalog page');
    await page.goto(catalogUrl, { waitUntil: 'networkidle', timeout: 30000 });
    
    // Wait a bit for any JavaScript to execute
    await page.waitForTimeout(5000);
    
    // Check for specific sections
    console.log('📍 Checking page sections...');
    
    // Check if main sections are present
    const sections = [
      { name: 'Hero Banner', selector: 'header' },
      { name: 'Quick Categories', selector: '#quick-categories' },
      { name: 'Catalog Grid', selector: '.container.py-5:has-text("Catálogo")' },
      { name: 'Why Buy Section', selector: 'section.bg-primary' },
      { name: 'How It Works', selector: 'section.bg-light' },
      { name: 'CTA Form', selector: 'section.bg-primary:has-text("Reserve su propiedad")' },
      { name: 'FAQ Section', selector: 'section.bg-white:has-text("Preguntas frecuentes")' }
    ];
    
    const sectionStatus = {};
    for (const section of sections) {
      const element = await page.locator(section.selector);
      sectionStatus[section.name] = await element.isVisible() ? '✅ Visible' : '❌ Not Found';
      console.log(`  ${section.name}: ${sectionStatus[section.name]}`);
    }
    
    // Test navigation menu links
    console.log('🧭 Testing navigation menu links...');
    
    // Click "Inicio" link
    console.log('🔗 Clicking "Inicio" link...');
    const inicioLink = await page.locator('a.nav-link[href="/"]').first();
    if (await inicioLink.isVisible()) {
      await inicioLink.click();
      await page.waitForTimeout(2000); // Wait for navigation
      
      // Verify we're on the homepage
      const currentUrl = page.url();
      console.log(`📍 Current URL after clicking "Inicio": ${currentUrl}`);
      
      if (currentUrl.includes('localhost:8080') || currentUrl === targetUrl + '/') {
        console.log('✅ Navigation to homepage successful');
      } else {
        console.log('❌ Navigation to homepage failed');
      }
    } else {
      console.log('⚠️ "Inicio" link not found');
    }
    
    // Report findings
    console.log('\n📋 CONSOLE ERROR MONITOR REPORT');
    console.log('==============================');
    
    // Console errors
    if (consoleMessages.length > 0) {
      console.log('\n📝 Console Messages:');
      consoleMessages.forEach(msg => {
        console.log(`  ${msg.type.toUpperCase()}: ${msg.text}`);
      });
    } else {
      console.log('\n✅ No console messages captured');
    }
    
    // Page errors
    if (pageErrors.length > 0) {
      console.log('\n❌ Page Errors:');
      pageErrors.forEach(error => {
        console.log(`  ${error.message}`);
      });
    } else {
      console.log('\n✅ No page errors detected');
    }
    
    // Section status
    console.log('\n📍 Section Status:');
    Object.entries(sectionStatus).forEach(([name, status]) => {
      console.log(`  ${name}: ${status}`);
    });
    
    // Create a detailed report
    const report = {
      timestamp: new Date().toISOString(),
      targetUrl: catalogUrl,
      consoleMessages,
      pageErrors,
      sectionStatus,
      summary: {
        totalConsoleMessages: consoleMessages.length,
        totalPageErrors: pageErrors.length,
        sectionsFound: Object.values(sectionStatus).filter(status => status.includes('Visible')).length,
        sectionsTotal: Object.keys(sectionStatus).length
      }
    };
    
    // Save report to JSON file
    const reportPath = path.join(reportsDir, 'console-error-report.json');
    fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
    console.log(`\n📝 Report saved to: ${reportPath}`);
    
    // Save report as markdown too
    const markdownReport = `
# Console Error Monitor Report

## Test Execution
- URL: ${catalogUrl}
- Timestamp: ${new Date().toISOString()}

## Summary
- Console Messages: ${consoleMessages.length}
- Page Errors: ${pageErrors.length}
- Sections Found: ${report.summary.sectionsFound}/${report.summary.sectionsTotal}

## Console Messages
${consoleMessages.map(msg => `- ${msg.type.toUpperCase()}: ${msg.text}`).join('\n') || '✅ No console messages'}

## Page Errors
${pageErrors.map(error => `- ${error.message}`).join('\n') || '✅ No page errors'}

## Section Status
${Object.entries(sectionStatus).map(([name, status]) => `- ${name}: ${status}`).join('\n')}

## Status
${pageErrors.length > 0 ? '❌ Issues detected' : '✅ All tests passed'}
`;
    
    const markdownReportPath = path.join(reportsDir, 'console-error-report.md');
    fs.writeFileSync(markdownReportPath, markdownReport);
    console.log(`\n📝 Markdown report saved to: ${markdownReportPath}`);
    
    // Exit with appropriate code
    if (pageErrors.length > 0) {
      console.log('\n⚠️  Issues were detected during testing');
      process.exit(1);
    } else {
      console.log('\n✅ All tests passed successfully');
      process.exit(0);
    }
    
  } catch (error) {
    console.error('❌ Error during console error monitoring:', error);
    process.exit(1);
  } finally {
    await browser.close();
    console.log('\n🏁 Console error monitoring completed');
  }
}

// Run the console error monitor
runConsoleErrorMonitor();