`quick-mobile-test.js`

141 lines
const puppeteer = require('puppeteer');

const SITE_URL = 'http://45.61.58.125:7991';

async function quickMobileTest() {
  console.log('Quick Mobile Test - Direct Analysis\n');

  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();

  // Set iPhone viewport
  await page.setViewport({
    width: 375,
    height: 667,
    isMobile: true,
    hasTouch: true
  });

  const results = {};

  // Test each page
  const pages = ['/', '/camera', '/price-tracker'];

  for (const path of pages) {
    console.log(`Testing ${path}...`);

    try {
      await page.goto(`${SITE_URL}${path}`, {
        waitUntil: 'networkidle2',
        timeout: 5000
      }).catch(() => {
        // Continue even if networkidle times out
        return page.goto(`${SITE_URL}${path}`, {
          waitUntil: 'domcontentloaded'
        });
      });

      // Wait using setTimeout instead of waitForTimeout
      await new Promise(resolve => setTimeout(resolve, 1000));

      const analysis = await page.evaluate(() => {
        const results = {
          issues: [],
          good: []
        };

        // Check viewport
        const viewport = document.querySelector('meta[name="viewport"]');
        if (viewport) {
          results.good.push('Has viewport meta tag');
        }

        // Check horizontal scroll
        if (document.body.scrollWidth > window.innerWidth) {
          results.issues.push(`Horizontal overflow: ${document.body.scrollWidth}px > ${window.innerWidth}px`);
        } else {
          results.good.push('No horizontal overflow');
        }

        // Check inputs
        const inputs = document.querySelectorAll('input:not([type="hidden"]):not([type="checkbox"]), textarea, select');
        let smallInputs = 0;
        inputs.forEach(input => {
          const fontSize = parseInt(window.getComputedStyle(input).fontSize);
          if (fontSize < 16) smallInputs++;
        });

        if (smallInputs > 0) {
          results.issues.push(`${smallInputs} inputs with font < 16px (iOS zoom issue)`);
        } else if (inputs.length > 0) {
          results.good.push(`All ${inputs.length} inputs have font-size ≥ 16px`);
        }

        // Check navigation
        const nav = document.querySelector('nav');
        if (nav) {
          const display = window.getComputedStyle(nav).display;
          if (display === 'none') {
            results.good.push('Navigation hidden on mobile (expected)');
          }
        }

        return results;
      });

      results[path] = analysis;

      // Take screenshot
      await page.screenshot({
        path: `mobile-screenshots/quick-${path.replace(/\//g, '') || 'home'}-375px.png`
      });

    } catch (error) {
      console.log(`  Error on ${path}: ${error.message}`);
      results[path] = { error: error.message };
    }
  }

  await browser.close();

  // Print results
  console.log('\n=== MOBILE TEST RESULTS ===\n');

  let totalIssues = 0;

  for (const [path, result] of Object.entries(results)) {
    console.log(`${path}:`);

    if (result.error) {
      console.log(`  ❌ Error: ${result.error}`);
    } else {
      if (result.issues && result.issues.length > 0) {
        totalIssues += result.issues.length;
        result.issues.forEach(issue => console.log(`  ❌ ${issue}`));
      }
      if (result.good && result.good.length > 0) {
        result.good.forEach(good => console.log(`  ✅ ${good}`));
      }
    }
    console.log('');
  }

  console.log('=== OVERALL ASSESSMENT ===\n');

  if (totalIssues === 0) {
    console.log('✅ MOBILE-FRIENDLY: No critical issues detected!');
  } else if (totalIssues <= 2) {
    console.log('⚠️  MOSTLY MOBILE-FRIENDLY: Minor issues found');
  } else {
    console.log('❌ NEEDS IMPROVEMENT: Multiple mobile issues detected');
  }

  console.log(`\nTotal Issues: ${totalIssues}`);
  console.log('\nScreenshots saved in mobile-screenshots/');
}

quickMobileTest().catch(console.error);