telegram-management-system/frontend/test-menu-click.js

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

async function testMenuClick() {
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 1000 
  });
  
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  
  const page = await context.newPage();
  
  // 监听控制台错误和警告
  page.on('console', msg => {
    if (msg.type() === 'error') {
      console.error(`❌ 控制台错误: ${msg.text()}`);
    } else if (msg.type() === 'warning') {
      console.warn(`⚠️ 控制台警告: ${msg.text()}`);
    }
  });
  
  page.on('pageerror', error => {
    console.error(`❌ 页面错误: ${error.message}`);
    console.error(`错误堆栈: ${error.stack}`);
  });
  
  console.log('🔍 深度测试菜单点击功能...');
  
  try {
    // 登录
    await page.goto('http://localhost:8891/login', { waitUntil: 'networkidle' });
    
    console.log('1. 正在登录...');
    const usernameInput = await page.locator('input[placeholder*="用户名"], input[placeholder*="username"], input[type="text"]').first();
    const passwordInput = await page.locator('input[placeholder*="密码"], input[placeholder*="password"], input[type="password"]').first();
    await usernameInput.fill('admin');
    await passwordInput.fill('111111');
    const submitButton = await page.locator('button[type="submit"], button:has-text("登录"), button:has-text("Login")').first();
    await submitButton.click();
    await page.waitForTimeout(3000);
    
    // 访问主页
    await page.goto('http://localhost:8891/home', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });
    
    console.log('2. ✅ 已成功访问主页');
    
    // 等待页面完全加载
    await page.waitForTimeout(2000);
    
    // 截图保存当前状态
    await page.screenshot({ 
      path: 'menu-click-test-before.png',
      fullPage: true 
    });
    
    console.log('3. 🔍 开始测试菜单点击...');
    
    // 测试展开的菜单项点击
    console.log('   测试展开菜单项...');
    const expandedMenuItems = await page.locator('.ivu-menu-item').all();
    console.log(`   找到 ${expandedMenuItems.length} 个展开菜单项`);
    
    if (expandedMenuItems.length > 0) {
      console.log('   尝试点击第一个菜单项...');
      const firstItem = expandedMenuItems[0];
      const itemText = await firstItem.textContent();
      console.log(`   菜单项文本: "${itemText}"`);
      
      // 记录点击前的URL
      const urlBefore = page.url();
      console.log(`   点击前URL: ${urlBefore}`);
      
      await firstItem.click();
      await page.waitForTimeout(2000);
      
      // 记录点击后的URL
      const urlAfter = page.url();
      console.log(`   点击后URL: ${urlAfter}`);
      
      if (urlBefore !== urlAfter) {
        console.log('   ✅ 菜单项点击成功！URL发生了变化');
      } else {
        console.log('   ❌ 菜单项点击可能无效，URL没有变化');
      }
    }
    
    // 测试子菜单项点击
    console.log('   测试子菜单项...');
    const submenuTitles = await page.locator('.ivu-menu-submenu-title').all();
    console.log(`   找到 ${submenuTitles.length} 个子菜单标题`);
    
    if (submenuTitles.length > 0) {
      console.log('   尝试展开第一个子菜单...');
      const firstSubmenu = submenuTitles[0];
      const submenuText = await firstSubmenu.textContent();
      console.log(`   子菜单文本: "${submenuText}"`);
      
      await firstSubmenu.click();
      await page.waitForTimeout(1000);
      
      // 查找展开后的子菜单项
      const submenuItems = await page.locator('.ivu-menu-item').all();
      if (submenuItems.length > 0) {
        console.log('   尝试点击子菜单中的第一项...');
        const urlBefore = page.url();
        await submenuItems[0].click();
        await page.waitForTimeout(2000);
        const urlAfter = page.url();
        
        if (urlBefore !== urlAfter) {
          console.log('   ✅ 子菜单项点击成功！URL发生了变化');
        } else {
          console.log('   ❌ 子菜单项点击可能无效，URL没有变化');
        }
      }
    }
    
    // 测试折叠菜单
    console.log('4. 🔍 测试折叠菜单...');
    
    // 先折叠侧边栏
    const collapseButton = await page.locator('[class*="trigger"], [class*="collapse"]').first();
    if (await collapseButton.count() > 0) {
      await collapseButton.click();
      await page.waitForTimeout(1000);
      console.log('   ✅ 已折叠侧边栏');
      
      // 测试折叠状态下的菜单
      const collapsedMenus = await page.locator('.menu-collapsed a, .drop-menu-a').all();
      console.log(`   找到 ${collapsedMenus.length} 个折叠菜单项`);
      
      if (collapsedMenus.length > 0) {
        console.log('   尝试点击折叠菜单项...');
        const urlBefore = page.url();
        await collapsedMenus[0].click();
        await page.waitForTimeout(2000);
        const urlAfter = page.url();
        
        if (urlBefore !== urlAfter) {
          console.log('   ✅ 折叠菜单项点击成功！');
        } else {
          console.log('   ❌ 折叠菜单项点击可能无效');
        }
      }
    }
    
    // 截图保存测试后状态
    await page.screenshot({ 
      path: 'menu-click-test-after.png',
      fullPage: true 
    });
    
    console.log('5. 📊 测试总结:');
    console.log('   - 已测试展开菜单项点击');
    console.log('   - 已测试子菜单项点击');  
    console.log('   - 已测试折叠菜单项点击');
    console.log('   - 检查控制台错误信息');
    
  } catch (error) {
    console.error('❌ 测试失败:', error.message);
    console.error('错误堆栈:', error.stack);
  }
  
  // 保持浏览器打开15秒以便观察
  console.log('\n⏱️ 保持浏览器打开15秒以便观察...');
  await page.waitForTimeout(15000);
  
  await browser.close();
  console.log('🏁 测试完成');
}

testMenuClick().catch(console.error);