telegram-management-system/click-and-debug.js

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

(async () => {
  let browser;
  
  try {
    console.log('启动浏览器进行点击测试...');
    browser = await chromium.launch({ 
      headless: false,
      slowMo: 500
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 }
    });
    
    const page = await context.newPage();
    
    // 监听控制台错误
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        const error = {
          text: msg.text(),
          location: msg.location(),
          time: new Date().toISOString()
        };
        errors.push(error);
        console.log('\n🔴 浏览器错误:', error.text);
      }
    });
    
    // 监听页面崩溃
    page.on('pageerror', error => {
      console.log('\n💥 页面错误:', error.message);
    });
    
    // 监听网络错误
    page.on('requestfailed', request => {
      console.log('\n❌ 请求失败:', request.url(), request.failure()?.errorText);
    });
    
    // 登录
    console.log('\n1. 执行登录...');
    await page.goto('http://localhost:5174/', { waitUntil: 'networkidle' });
    await page.fill('[name="username"]', 'admin');
    await page.fill('[name="password"]', '111111');
    await page.click('button:has-text("登录")');
    await page.waitForTimeout(2000);
    
    // 确保在首页
    if (page.url().includes('login')) {
      await page.goto('http://localhost:5174/dashboard/home', { waitUntil: 'networkidle' });
    }
    
    console.log('\n2. 开始点击测试...\n');
    
    // 测试1：点击侧边栏区域
    console.log('测试1: 尝试点击侧边栏...');
    try {
      // 查找侧边栏
      const siderSelectors = [
        '.ant-layout-sider',
        'aside',
        '[class*="sider"]',
        '[class*="sidebar"]'
      ];
      
      let found = false;
      for (const selector of siderSelectors) {
        if (await page.locator(selector).count() > 0) {
          console.log(`找到侧边栏: ${selector}`);
          await page.locator(selector).first().click();
          found = true;
          break;
        }
      }
      if (!found) {
        console.log('❌ 未找到侧边栏元素');
      }
    } catch (e) {
      console.log('点击侧边栏失败:', e.message);
    }
    
    await page.waitForTimeout(1000);
    
    // 测试2：查找并点击所有可点击的元素
    console.log('\n测试2: 查找所有可点击元素...');
    const clickableElements = await page.locator('button, a, [role="button"], [role="menuitem"], .ant-menu-item, .ant-menu-submenu-title').all();
    console.log(`找到 ${clickableElements.length} 个可点击元素`);
    
    // 点击前5个元素测试
    for (let i = 0; i < Math.min(5, clickableElements.length); i++) {
      try {
        const element = clickableElements[i];
        const text = await element.textContent();
        const tagName = await element.evaluate(el => el.tagName);
        
        console.log(`\n点击元素 ${i + 1}: <${tagName}> "${text?.trim() || '(无文本)'}"`);
        
        // 截图点击前
        await page.screenshot({ path: `test-screenshots/before-click-${i}.png` });
        
        // 点击
        await element.click();
        await page.waitForTimeout(1000);
        
        // 检查URL变化
        console.log(`点击后URL: ${page.url()}`);
        
        // 检查是否有新错误
        if (errors.length > 0) {
          console.log('点击后产生的错误:');
          errors.forEach(err => console.log(`  - ${err.text}`));
          errors.length = 0; // 清空错误列表
        }
        
      } catch (e) {
        console.log(`点击失败: ${e.message}`);
      }
    }
    
    // 测试3：尝试展开菜单
    console.log('\n\n测试3: 尝试查找并展开菜单...');
    
    // 查找菜单容器
    const menuContainer = await page.locator('.ant-menu, [role="menu"]').first();
    if (await menuContainer.count() > 0) {
      console.log('找到菜单容器');
      
      // 查找所有菜单项
      const menuItems = await menuContainer.locator('.ant-menu-submenu-title, .ant-menu-item').all();
      console.log(`菜单项数量: ${menuItems.length}`);
      
      if (menuItems.length === 0) {
        console.log('❌ 菜单容器内没有菜单项');
        
        // 尝试检查菜单数据
        const menuData = await page.evaluate(() => {
          // 检查Vue/React组件
          const app = window.__app__ || window.app;
          if (app) {
            console.log('找到应用实例');
          }
          
          // 检查路由
          if (window.$router) {
            const routes = window.$router.getRoutes();
            return {
              routeCount: routes.length,
              routes: routes.map(r => ({ path: r.path, name: r.name, meta: r.meta }))
            };
          }
          
          return null;
        });
        
        if (menuData) {
          console.log('\n路由信息:');
          console.log(`路由数量: ${menuData.routeCount}`);
          console.log('前10个路由:');
          menuData.routes.slice(0, 10).forEach(r => {
            console.log(`  - ${r.path} (${r.name}) ${r.meta?.title || ''}`);
          });
        }
      }
    } else {
      console.log('❌ 未找到菜单容器');
    }
    
    // 测试4：尝试手动触发菜单渲染
    console.log('\n\n测试4: 尝试手动触发菜单渲染...');
    
    await page.evaluate(() => {
      // 尝试找到store并手动设置菜单
      if (window.__PINIA__) {
        console.log('找到Pinia store');
        const stores = window.__PINIA__._s;
        stores.forEach((store, key) => {
          console.log('Store:', key);
          if (store.setAccessMenus && typeof store.setAccessMenus === 'function') {
            console.log('找到setAccessMenus方法，尝试设置菜单...');
            // 这里可以尝试手动设置菜单数据
          }
        });
      }
    });
    
    // 最终截图
    await page.screenshot({ path: 'test-screenshots/final-state.png', fullPage: true });
    
    console.log('\n\n========== 测试总结 ==========');
    console.log(`总错误数: ${errors.length}`);
    if (errors.length > 0) {
      console.log('\n错误列表:');
      errors.forEach((err, index) => {
        console.log(`${index + 1}. ${err.text}`);
      });
    }
    
    console.log('\n问题诊断:');
    console.log('1. 菜单容器存在但没有菜单项');
    console.log('2. 路由配置正常，页面可以访问');
    console.log('3. 可能是菜单生成逻辑有问题');
    
    console.log('\n保持浏览器打开，继续调试...');
    await new Promise(() => {});
    
  } catch (error) {
    console.error('测试过程出错:', error);
    if (browser) {
      await browser.close();
    }
  }
})();