TenerifeProp/tests/scripts/capture-screenshots.js

#!/usr/bin/env node

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

async function runScreenshotCapture(mode = 'current') {
  console.log(`📸 Starting Screenshot Capture (${mode})...`);
  
  // 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 screenshots directory based on mode
  const screenshotsDir = path.join(__dirname, `../visual/${mode}`);
  if (!fs.existsSync(screenshotsDir)) {
    fs.mkdirSync(screenshotsDir, { recursive: true });
  }

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  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 });
    
    // Take full page screenshot
    console.log('📸 Taking full page screenshot...');
    await page.screenshot({ 
      path: path.join(screenshotsDir, 'catalog-full-page.png'), 
      fullPage: true 
    });

    // Scroll and capture each major section
    console.log('📷 Capturing Featured Hero Banner...');
    const header = await page.locator('header').first();
    if (await header.isVisible()) {
      await header.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-hero-banner.png') 
      });
    } else {
      console.log('⚠️ Hero banner not found');
    }

    console.log('📷 Capturing Quick Categories Row...');
    const categoriesSection = await page.locator('#quick-categories');
    if (await categoriesSection.isVisible()) {
      await categoriesSection.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-quick-categories.png') 
      });
    } else {
      console.log('⚠️ Quick categories section not found');
    }

    console.log('📷 Capturing "¿Por qué comprar con nosotros?" section...');
    const whyBuySection = await page.locator('section.bg-primary');
    if (await whyBuySection.isVisible()) {
      await whyBuySection.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-why-buy.png') 
      });
    } else {
      console.log('⚠️ "¿Por qué comprar con nosotros?" section not found');
    }

    console.log('📷 Capturing Catalog Grid...');
    const catalogGrid = await page.locator('.container.py-5:has-text("Catálogo")');
    if (await catalogGrid.isVisible()) {
      await catalogGrid.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-grid.png') 
      });
    } else {
      console.log('⚠️ Catalog grid section not found');
    }

    console.log('📷 Capturing "¿Cómo funciona?" steps section...');
    const howItWorksSection = await page.locator('section.bg-light');
    if (await howItWorksSection.isVisible()) {
      await howItWorksSection.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-how-it-works.png') 
      });
    } else {
      console.log('⚠️ "¿Cómo funciona?" section not found');
    }

    console.log('📷 Capturing CTA form section...');
    const ctaSection = await page.locator('section.bg-primary:has-text("Reserve su propiedad")');
    if (await ctaSection.isVisible()) {
      await ctaSection.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-cta-form.png') 
      });
    } else {
      console.log('⚠️ CTA form section not found');
    }

    console.log('📷 Capturing FAQ accordion...');
    const faqSection = await page.locator('section.bg-white:has-text("Preguntas frecuentes")');
    if (await faqSection.isVisible()) {
      await faqSection.screenshot({ 
        path: path.join(screenshotsDir, 'catalog-faq.png') 
      });
    } else {
      console.log('⚠️ FAQ section not found');
    }

    // 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');
      }
      
      // Go back to catalog page for further testing
      await page.goto(catalogUrl, { waitUntil: 'networkidle' });
      await page.waitForTimeout(1000);
    } else {
      console.log('⚠️ "Inicio" link not found');
    }

    // Report findings
    console.log('\n📋 SCREENSHOT CAPTURE SUMMARY');
    console.log('=============================');
    console.log(`✅ Full page screenshot captured (${mode})`);
    console.log(`✅ Hero banner section screenshot captured (${mode})`);
    console.log(`✅ Quick categories section screenshot captured (${mode})`);
    console.log(`✅ "¿Por qué comprar con nosotros?" section screenshot captured (${mode})`);
    console.log(`✅ Catalog grid screenshot captured (${mode})`);
    console.log(`✅ "¿Cómo funciona?" section screenshot captured (${mode})`);
    console.log(`✅ CTA form section screenshot captured (${mode})`);
    console.log(`✅ FAQ section screenshot captured (${mode})`);
    console.log(`✅ Navigation test completed (${mode})`);
    
    console.log(`\n📁 Screenshots saved to: ${screenshotsDir}`);
    
  } catch (error) {
    console.error('❌ Error during screenshot capture:', error);
  } finally {
    await browser.close();
    console.log('\n🏁 Screenshot capture completed');
  }
}

// Get mode from command line arguments
const mode = process.argv[2] || 'current';

// Run the screenshot capture
runScreenshotCapture(mode);