const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  console.log('=== 功能测试 ===\n');
  
  await page.goto('http://localhost:5173/#/pages/video-generator/create', {
    waitUntil: 'networkidle',
    timeout: 30000
  });
  
  await page.waitForTimeout(3000);
  
  // 使用 JavaScript 直接设置值
  console.log('1. 使用 JavaScript 设置输入值:');
  const result = await page.evaluate(() => {
    const input = document.querySelector('input.form-input');
    if (!input) return { success: false, error: '未找到 input' };
    
    // uni-app 的 input 组件通常通过 setter 来设置值
    // 尝试多种方法
    try {
      // 方法1: 直接设置 __vueparentComponent 的值
      if (input.__vueparentComponent) {
        input.__vueparentComponent.ctx.title = 'JavaScript测试标题';
        return { success: true, method: 'vueparentComponent' };
      }
      
      // 方法2: 使用原生 input
      const nativeInput = input.querySelector('input');
      if (nativeInput) {
        nativeInput.value = 'JavaScript测试标题';
        nativeInput.dispatchEvent(new Event('input', { bubbles: true }));
        return { 
          success: true, 
          method: 'nativeInput',
          value: nativeInput.value 
        };
      }
      
      // 方法3: 模拟 input 事件
      input.value = 'JavaScript测试标题';
      input.dispatchEvent(new Event('input', { bubbles: true }));
      return { success: true, method: 'directInput' };
      
    } catch (e) {
      return { success: false, error: e.message };
    }
  });
  
  console.log(JSON.stringify(result, null, 2));
  
  // 截图
  await page.screenshot({ path: 'js-input-test.png', fullPage: true });
  console.log('\n已保存截图: js-input-test.png');
  
  await browser.close();
})();