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

async function liveTest() {
  console.log('🚀 启动实时测试...');
  
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 500,  // 稍微慢一点，便于观察
    devtools: true  // 打开开发者工具
  });
  
  const page = await browser.newPage();
  
  // 监听控制台输出
  page.on('console', msg => console.log('🔍 页面日志:', msg.text()));
  
  try {
    console.log('📱 访问前端页面...');
    await page.goto('http://localhost:8891');
    
    console.log('⏱️ 等待页面加载...');
    await page.waitForLoadState('networkidle');
    
    console.log('📸 截取登录页面...');
    await page.screenshot({ path: 'login_page.png' });
    
    console.log('🔍 查找登录元素...');
    
    // 查找用户名输入框
    const usernameInput = await page.locator('input[type="text"], input[placeholder*="用户"], input[placeholder*="账号"]').first();
    if (await usernameInput.isVisible()) {
      console.log('✅ 找到用户名输入框');
      await usernameInput.fill('admin');
      console.log('✏️ 填写用户名: admin');
    }
    
    // 查找密码输入框
    const passwordInput = await page.locator('input[type="password"]').first();
    if (await passwordInput.isVisible()) {
      console.log('✅ 找到密码输入框');
      await passwordInput.fill('111111');
      console.log('🔐 填写密码: 111111');
    }
    
    // 查找登录按钮
    const loginButton = await page.locator('button:has-text("登录"), .login-btn, button[type="submit"]').first();
    if (await loginButton.isVisible()) {
      console.log('✅ 找到登录按钮，准备点击...');
      await loginButton.click();
      console.log('🖱️ 点击登录按钮');
    }
    
    console.log('⏱️ 等待登录处理...');
    await page.waitForTimeout(5000);
    
    console.log('📸 截取登录后页面...');
    await page.screenshot({ path: 'after_login.png' });
    
    // 检查是否登录成功
    const currentUrl = page.url();
    console.log(`📍 当前URL: ${currentUrl}`);
    
    if (!currentUrl.includes('login')) {
      console.log('🎉 登录成功！');
      
      console.log('🔍 查找姓名管理菜单...');
      
      // 尝试多种选择器
      const menuSelectors = [
        'text=姓名管理',
        'text=名字管理',
        'text=姓名',
        'text=名字',
        'a[href*="firstname"]',
        'a[href*="lastname"]',
        '.menu-item:has-text("姓名")',
        '.menu-item:has-text("名字")'
      ];
      
      let found = false;
      for (const selector of menuSelectors) {
        try {
          const element = page.locator(selector).first();
          if (await element.isVisible({ timeout: 1000 })) {
            console.log(`✅ 找到菜单项: ${selector}`);
            await element.click();
            console.log('🖱️ 点击菜单项');
            found = true;
            break;
          }
        } catch (e) {
          // 继续尝试下一个
        }
      }
      
      if (!found) {
        console.log('🔍 未找到明确的姓名管理菜单，查找所有菜单项...');
        const allMenus = await page.locator('a, .menu-item').all();
        console.log(`📋 找到 ${allMenus.length} 个菜单项`);
        
        for (let i = 0; i < Math.min(allMenus.length, 10); i++) {
          const text = await allMenus[i].textContent();
          if (text && text.trim()) {
            console.log(`   ${i+1}. "${text.trim()}"`);
          }
        }
      }
      
      await page.waitForTimeout(3000);
      console.log('📸 截取最终页面...');
      await page.screenshot({ path: 'final_page.png' });
      
    } else {
      console.log('❌ 登录可能失败，仍在登录页面');
    }
    
    console.log('🎭 测试完成，浏览器将保持打开5秒供观察...');
    await page.waitForTimeout(5000);
    
  } catch (error) {
    console.error('❌ 测试过程中出错:', error.message);
    await page.screenshot({ path: 'error_page.png' });
  } finally {
    await browser.close();
    console.log('🏁 测试结束');
  }
}

liveTest();