test-browser.js

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

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

  const page = await browser.newPage();
  await page.setViewport({ width: 1400, height: 900 });

  // Collect console messages
  const logs = [];
  page.on('console', msg => {
    logs.push(`[${msg.type()}] ${msg.text()}`);
  });
  page.on('pageerror', err => {
    logs.push(`[PAGE_ERROR] ${err.message}`);
  });

  console.log('Loading page...');
  await page.goto('http://localhost:3000', { waitUntil: 'networkidle0', timeout: 15000 });

  // Screenshot 1: Initial load
  await page.screenshot({ path: '/tmp/screenshot-01-initial.png', fullPage: false });
  console.log('Screenshot 1: Initial load saved');

  // Check if xterm loaded
  const xtermCheck = await page.evaluate(() => ({
    hasTerminal: typeof Terminal !== 'undefined',
    hasFitAddon: typeof FitAddon !== 'undefined',
    hasWebLinks: typeof WebLinksAddon !== 'undefined',
    terminalManager: typeof TerminalManager !== 'undefined',
  }));
  console.log('xterm globals:', JSON.stringify(xtermCheck));

  // Get page HTML state
  const bodyText = await page.evaluate(() => document.body.innerText.substring(0, 500));
  console.log('Page text:', bodyText.substring(0, 200));

  // Check sessions list
  const sessions = await page.evaluate(async () => {
    try {
      const res = await fetch('/api/sessions');
      return await res.json();
    } catch(e) {
      return { error: e.message };
    }
  });
  console.log('Sessions:', JSON.stringify(sessions));

  // Create a session via API to test terminal rendering
  console.log('\nCreating test session...');
  const createResult = await page.evaluate(async () => {
    try {
      const res = await fetch('/api/sessions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: 'browser-test', command: 'bash' })
      });
      return await res.json();
    } catch(e) {
      return { error: e.message };
    }
  });
  console.log('Create result:', JSON.stringify(createResult));

  // Wait for UI to update
  await new Promise(r => setTimeout(r, 1500));

  // Screenshot 2: After session created
  await page.screenshot({ path: '/tmp/screenshot-02-session.png', fullPage: false });
  console.log('Screenshot 2: After session created');

  // Check terminal-area content
  const termArea = await page.evaluate(() => {
    const ta = document.getElementById('terminal-area');
    return {
      innerHTML: ta ? ta.innerHTML.substring(0, 1000) : 'NOT FOUND',
      children: ta ? ta.children.length : -1,
      classList: ta ? Array.from(ta.classList) : []
    };
  });
  console.log('Terminal area:', JSON.stringify(termArea, null, 2).substring(0, 500));

  // Wait more time for WebSocket to connect
  await new Promise(r => setTimeout(r, 2000));

  // Screenshot 3: After terminal should be connected
  await page.screenshot({ path: '/tmp/screenshot-03-terminal.png', fullPage: false });
  console.log('Screenshot 3: After terminal connection');

  // Try typing into the terminal
  console.log('\nTrying to type into terminal...');
  const typeResult = await page.evaluate(() => {
    // Find active terminal
    const xtermEl = document.querySelector('.xterm');
    if (!xtermEl) return { error: 'No .xterm element found' };

    const textarea = xtermEl.querySelector('textarea');
    if (!textarea) return { error: 'No textarea in xterm element' };

    // Check TerminalManager state
    const tmState = {};
    if (typeof TerminalManager !== 'undefined') {
      tmState.terminalCount = TerminalManager.terminals ? TerminalManager.terminals.size : -1;
    }

    return {
      found: true,
      textareaExists: true,
      terminalManager: tmState
    };
  });
  console.log('Type result:', JSON.stringify(typeResult));

  // Print console logs
  console.log('\n=== Browser Console Logs ===');
  logs.forEach(l => console.log(l));

  await browser.close();
  console.log('\nDone. Screenshots saved to /tmp/');
})();