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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  await page.goto('http://localhost:5173/#/pages/video-generator/create', {
    waitUntil: 'networkidle',
    timeout: 30000
  });
  
  await page.waitForTimeout(5000);
  
  // 获取页面HTML
  const html = await page.content();
  
  // 查找第一个 input 元素
  const inputMatch = html.match(/<input[^>]*class="form-input"[^>]*>/i);
  
  if (inputMatch) {
    console.log('找到 input 元素:');
    console.log(inputMatch[0]);
    
    // 检查是否有 disabled 或 hidden 属性
    const inputAttrs = inputMatch[0];
    if (inputAttrs.includes('disabled')) {
      console.log('\n⚠️ input 有 disabled 属性');
    }
    if (inputAttrs.includes('hidden')) {
      console.log('\n⚠️ input 有 hidden 属性');
    }
  } else {
    console.log('未找到带 form-input 类的 input 元素');
  }
  
  // 尝试用 JavaScript 检查
  const inputInfo = await page.evaluate(() => {
    const input = document.querySelector('input.form-input');
    if (!input) return { found: false };
    
    return {
      found: true,
      tagName: input.tagName,
      className: input.className,
      placeholder: input.placeholder,
      disabled: input.disabled,
      hidden: input.hidden,
      offsetWidth: input.offsetWidth,
      offsetHeight: input.offsetHeight,
      rect: input.getBoundingClientRect(),
      style: {
        display: getComputedStyle(input).display,
        visibility: getComputedStyle(input).visibility,
        opacity: getComputedStyle(input).opacity,
        width: getComputedStyle(input).width,
        height: getComputedStyle(input).height,
      },
      parentStyle: {
        display: getComputedStyle(input.parentElement).display,
        visibility: getComputedStyle(input.parentElement).visibility,
      }
    };
  });
  
  console.log('\nJavaScript 检查结果:');
  console.log(JSON.stringify(inputInfo, null, 2));
  
  await browser.close();
})();