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);
  
  // 检查所有 input 元素
  const inputs = await page.locator('input').all();
  console.log(`找到 ${inputs.length} 个 input 元素:`);
  
  for (let i = 0; i < inputs.length; i++) {
    const input = inputs[i];
    const placeholder = await input.getAttribute('placeholder');
    const vModel = await input.getAttribute('v-model');
    const isVisible = await input.isVisible();
    const type = await input.getAttribute('type');
    
    console.log(`\n输入框 ${i + 1}:`);
    console.log(`  - placeholder: "${placeholder}"`);
    console.log(`  - v-model: "${vModel}"`);
    console.log(`  - type: "${type}"`);
    console.log(`  - 可见: ${isVisible ? '✅' : '❌'}`);
  }
  
  // 尝试查找包含"标题"的元素
  console.log('\n\n查找包含"标题"的元素:');
  const titleElements = await page.locator('text=标题').all();
  console.log(`找到 ${titleElements.length} 个包含"标题"的元素`);
  
  for (let i = 0; i < titleElements.length; i++) {
    const el = titleElements[i];
    const text = await el.textContent();
    const tagName = await el.evaluate(e => e.tagName);
    console.log(`  ${i + 1}. <${tagName}>: "${text}"`);
  }
  
  // 尝试使用不同选择器
  console.log('\n\n尝试不同选择器:');
  
  const selectors = [
    'input[placeholder*="标题"]',
    'input[placeholder*="video"]',
    '.form-input',
    'input.form-input',
    'input[type="text"]',
    'input'
  ];
  
  for (const selector of selectors) {
    const count = await page.locator(selector).count();
    console.log(`  ${selector}: ${count > 0 ? '✅ 找到' : '❌ 未找到'} (${count}个)`);
  }
  
  await browser.close();
})();