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);
  
  // 检查输入框及其父元素的样式
  const styles = await page.evaluate(() => {
    const input = document.querySelector('.form-input');
    if (!input) return { error: '未找到 input.form-input' };
    
    const computed = getComputedStyle(input);
    const parent = input.parentElement;
    const parentComputed = parent ? getComputedStyle(parent) : null;
    const grandParent = parent ? parent.parentElement : null;
    const grandParentComputed = grandParent ? getComputedStyle(grandParent) : null;
    
    return {
      input: {
        display: computed.display,
        visibility: computed.visibility,
        opacity: computed.opacity,
        width: computed.width,
        height: computed.height,
        position: computed.position,
        overflow: computed.overflow,
        zIndex: computed.zIndex,
      },
      parent: parent ? {
        tag: parent.tagName,
        class: parent.className,
        display: parentComputed?.display,
        visibility: parentComputed?.visibility,
        opacity: parentComputed?.opacity,
        width: parentComputed?.width,
        height: parentComputed?.height,
      } : null,
      grandParent: grandParent ? {
        tag: grandParent.tagName,
        class: grandParent.className,
        display: grandParentComputed?.display,
        visibility: grandParentComputed?.visibility,
        opacity: grandParentComputed?.opacity,
        width: grandParentComputed?.width,
        height: grandParentComputed?.height,
        overflow: grandParentComputed?.overflow,
      } : null,
    };
  });
  
  console.log('输入框及其父元素样式:');
  console.log(JSON.stringify(styles, null, 2));
  
  await browser.close();
})();