← back to Handbag Auth Nextjs

simple-mobile-test.js

161 lines

const puppeteer = require('puppeteer');
const fs = require('fs').promises;

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

async function testMobileResponsiveness() {
  console.log('Starting Mobile Responsiveness Test...\n');

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

  const page = await browser.newPage();

  // Test viewports
  const viewports = [
    { name: 'iPhone-SE', width: 375, height: 667 },
    { name: 'iPhone-12', width: 390, height: 844 },
    { name: 'iPad', width: 768, height: 1024 }
  ];

  const pages = [
    { name: 'Home', path: '/' },
    { name: 'Camera', path: '/camera' },
    { name: 'Price Tracker', path: '/price-tracker' }
  ];

  const issues = [];

  // Create screenshots directory
  await fs.mkdir('mobile-screenshots', { recursive: true });

  for (const viewport of viewports) {
    console.log(`Testing ${viewport.name} (${viewport.width}x${viewport.height}):`);

    await page.setViewport({
      width: viewport.width,
      height: viewport.height,
      isMobile: true,
      hasTouch: true
    });

    for (const pageInfo of pages) {
      try {
        console.log(`  - ${pageInfo.name}...`);

        await page.goto(`${SITE_URL}${pageInfo.path}`, {
          waitUntil: 'networkidle2',
          timeout: 10000
        });

        // Take screenshot
        const screenshotName = `${viewport.name}-${pageInfo.name.toLowerCase().replace(' ', '-')}.png`;
        await page.screenshot({
          path: `mobile-screenshots/${screenshotName}`,
          fullPage: true
        });

        // Basic checks
        const pageIssues = await page.evaluate(() => {
          const issues = [];

          // Check horizontal overflow
          if (document.documentElement.scrollWidth > document.documentElement.clientWidth) {
            issues.push('Horizontal scroll detected');
          }

          // Check input font sizes
          const inputs = document.querySelectorAll('input, textarea, select');
          let smallInputs = 0;
          inputs.forEach(input => {
            const fontSize = parseInt(window.getComputedStyle(input).fontSize);
            if (fontSize < 16) smallInputs++;
          });
          if (smallInputs > 0) {
            issues.push(`${smallInputs} inputs with font-size < 16px (iOS zoom issue)`);
          }

          // Check touch targets
          const buttons = document.querySelectorAll('button, a');
          let smallButtons = 0;
          buttons.forEach(btn => {
            const rect = btn.getBoundingClientRect();
            if (rect.width < 44 || rect.height < 44) smallButtons++;
          });
          if (smallButtons > 0) {
            issues.push(`${smallButtons} touch targets < 44px`);
          }

          // Check text readability
          const allElements = document.querySelectorAll('p, span, div, h1, h2, h3, h4, h5, h6');
          let tinyText = 0;
          allElements.forEach(el => {
            if (el.textContent && el.textContent.trim()) {
              const fontSize = parseInt(window.getComputedStyle(el).fontSize);
              if (fontSize > 0 && fontSize < 12) tinyText++;
            }
          });
          if (tinyText > 0) {
            issues.push(`${tinyText} elements with text < 12px`);
          }

          return issues;
        });

        if (pageIssues.length > 0) {
          issues.push({
            viewport: viewport.name,
            page: pageInfo.name,
            issues: pageIssues
          });
          console.log(`    ⚠️  Issues: ${pageIssues.join(', ')}`);
        } else {
          console.log(`    ✅ No issues found`);
        }

      } catch (error) {
        console.log(`    ❌ Error: ${error.message}`);
        issues.push({
          viewport: viewport.name,
          page: pageInfo.name,
          error: error.message
        });
      }
    }
    console.log('');
  }

  await browser.close();

  // Generate report
  const report = {
    timestamp: new Date().toISOString(),
    site: SITE_URL,
    totalIssues: issues.length,
    issues: issues
  };

  await fs.writeFile('mobile-report.json', JSON.stringify(report, null, 2));

  console.log('=== SUMMARY ===');
  if (issues.length === 0) {
    console.log('✅ No mobile responsiveness issues detected!');
  } else {
    console.log(`⚠️  Found ${issues.length} pages with issues:\n`);
    issues.forEach(issue => {
      console.log(`${issue.viewport} - ${issue.page}:`);
      if (issue.error) {
        console.log(`  Error: ${issue.error}`);
      } else {
        issue.issues.forEach(i => console.log(`  - ${i}`));
      }
    });
  }

  console.log('\n📸 Screenshots saved in mobile-screenshots/');
  console.log('📊 Report saved in mobile-report.json');
}

testMobileResponsiveness().catch(console.error);