`archived/tests/mobile-test-simple.js`

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

async function quickMobileTest() {
  const browser = await puppeteer.launch({ 
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  const page = await browser.newPage();
  
  // iPhone SE viewport
  await page.setViewport({ width: 375, height: 667, isMobile: true });
  await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15');
  
  await page.goto('http://45.61.58.125:3011', { waitUntil: 'networkidle0' });
  
  // Take a screenshot to see the mobile layout
  await page.screenshot({ path: 'mobile-layout.png' });
  
  console.log('✅ Mobile screenshot saved to mobile-layout.png');
  console.log('📱 Testing mobile responsiveness...');
  
  // Test basic mobile optimizations
  const tests = [];
  
  // 1. Viewport meta tag
  const viewport = await page.$('meta[name="viewport"]');
  const viewportContent = viewport ? await page.evaluate(el => el.getAttribute('content'), viewport) : null;
  tests.push({
    name: 'Viewport Meta Tag',
    pass: viewportContent && viewportContent.includes('width=device-width'),
    details: viewportContent
  });
  
  // 2. Input field font size (iOS auto-zoom prevention)
  const textarea = await page.$('textarea[placeholder*="Ask Bubbe"]');
  if (textarea) {
    const fontSize = await page.evaluate(el => window.getComputedStyle(el).fontSize, textarea);
    const fontSizeNum = parseInt(fontSize);
    tests.push({
      name: 'Input Font Size (iOS auto-zoom prevention)',
      pass: fontSizeNum >= 16,
      details: `${fontSize} (needs 16px+)`
    });
  }
  
  // 3. Touch target sizes for buttons
  const sendButton = await page.$('button[type="submit"]');
  if (sendButton) {
    const sendButtonBox = await sendButton.boundingBox();
    const isLargeEnough = sendButtonBox && sendButtonBox.width >= 44 && sendButtonBox.height >= 44;
    tests.push({
      name: 'Send Button Touch Target',
      pass: isLargeEnough,
      details: sendButtonBox ? `${Math.round(sendButtonBox.width)}x${Math.round(sendButtonBox.height)}px` : 'Not found'
    });
  }
  
  // 4. Check main interface responsiveness
  const mainContent = await page.$('.max-w-4xl');
  if (mainContent) {
    const contentBox = await mainContent.boundingBox();
    const fitsViewport = contentBox && contentBox.width <= 375;
    tests.push({
      name: 'Main Content Fits Viewport',
      pass: fitsViewport,
      details: contentBox ? `${Math.round(contentBox.width)}px wide` : 'Not measured'
    });
  }
  
  // 5. Test login button sizing
  const loginButton = await page.$('button[text*="Sign in"]');
  if (loginButton) {
    const loginBox = await loginButton.boundingBox();
    const isLargeEnough = loginBox && loginBox.width >= 44 && loginBox.height >= 44;
    tests.push({
      name: 'Login Button Touch Target',
      pass: isLargeEnough,
      details: loginBox ? `${Math.round(loginBox.width)}x${Math.round(loginBox.height)}px` : 'Not measured'
    });
  }
  
  console.log('\n📱 Mobile Test Results:');
  console.log('======================');
  tests.forEach(test => {
    const emoji = test.pass ? '✅' : '❌';
    console.log(`${emoji} ${test.name}: ${test.pass ? 'PASS' : 'FAIL'}`);
    if (test.details) console.log(`   ${test.details}`);
  });
  
  const passCount = tests.filter(t => t.pass).length;
  const score = Math.round((passCount / tests.length) * 100);
  console.log(`\n📊 Score: ${score}% (${passCount}/${tests.length} tests passed)`);
  
  await browser.close();
  return { score, tests };
}

quickMobileTest().catch(console.error);