let playwright
try { playwright = await import('playwright'); } catch (e) { console.error('Playwright no está instalado:', e); process.exit(2); }
const { chromium } = playwright;
(async ()=>{
  const browser = await chromium.launch();
  const page = await browser.newPage();
  try{
    console.log('Navegando a simulate.html...');
    await page.goto('http://localhost:3021/simulate.html', { waitUntil: 'networkidle', timeout: 15000 });
    console.log('Página cargada. Buscando botón Start...');
    const btn = await page.waitForSelector('button#recBtn, button:has-text("Start")', { timeout: 5000 });
    if(!btn) throw new Error('Botón de grabación no encontrado');
    console.log('Haciendo click en Start...');
    await btn.click();
    // esperar a que la clase recording esté presente o a que el .record-dot sea visible
    await page.waitForSelector('.btn-control.recording', { timeout: 5000 });
    await page.waitForSelector('.record-dot', { timeout: 5000 });
    console.log('Recording visuals present — tomando captura...');
    await page.screenshot({ path: '/tmp/studio_record_test.png', fullPage: true });
    console.log('Screenshot guardada en /tmp/studio_record_test.png');
    // comprobar atributos
    const attrs = await page.evaluate(()=>{
      const btn = document.getElementById('recBtn');
      return {
        ariaPressed: btn?.getAttribute('aria-pressed'),
        hasRecordingClass: btn?.classList.contains('recording'),
        recordDotDisplay: window.getComputedStyle(btn?.querySelector('.record-dot') || document.createElement('span')).display
      }
    });
    console.log('Atributos tras click:', JSON.stringify(attrs));
  }catch(e){ console.error('Error durante la prueba:', e); process.exitCode = 2 }
  await browser.close();
})();