telegram-management-system/test-vben-diagnostic.cjs

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

async function runDiagnosticTest() {
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 300
  });
  
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  
  const page = await context.newPage();
  
  // 监听控制台消息
  const consoleMessages = [];
  page.on('console', msg => {
    consoleMessages.push({
      type: msg.type(),
      text: msg.text(),
      location: msg.location()
    });
  });
  
  // 监听页面错误
  const pageErrors = [];
  page.on('pageerror', error => {
    pageErrors.push({
      message: error.message,
      stack: error.stack
    });
  });
  
  // 监听网络请求
  const networkRequests = [];
  page.on('request', request => {
    networkRequests.push({
      url: request.url(),
      method: request.method(),
      resourceType: request.resourceType()
    });
  });
  
  const failedRequests = [];
  page.on('requestfailed', request => {
    failedRequests.push({
      url: request.url(),
      error: request.failure().errorText
    });
  });

  try {
    console.log('=== Vben Frontend 诊断测试 ===\n');
    
    // 1. 访问首页
    console.log('1. 访问首页...');
    await page.goto('http://localhost:5174/', { 
      waitUntil: 'domcontentloaded',
      timeout: 30000 
    });
    
    // 等待应用加载
    console.log('2. 等待应用加载...');
    await page.waitForTimeout(5000);
    
    // 检查页面状态
    console.log('\n3. 页面状态检查：');
    
    // 检查 Vue 应用是否挂载
    const appMounted = await page.evaluate(() => {
      const app = document.querySelector('#app');
      return {
        exists: !!app,
        hasChildren: app ? app.children.length > 0 : false,
        innerHTML: app ? app.innerHTML.substring(0, 200) : null
      };
    });
    console.log('- Vue 应用挂载点:', appMounted);
    
    // 检查是否有任何可见内容
    const visibleContent = await page.evaluate(() => {
      const body = document.body;
      return {
        textContent: body.textContent.trim().substring(0, 200),
        childElementCount: body.childElementCount
      };
    });
    console.log('- 页面可见内容:', visibleContent);
    
    // 检查是否在登录页面
    const loginElements = await page.evaluate(() => {
      const forms = document.querySelectorAll('form');
      const inputs = document.querySelectorAll('input');
      const buttons = document.querySelectorAll('button');
      
      return {
        formCount: forms.length,
        inputCount: inputs.length,
        buttonCount: buttons.length,
        hasPasswordInput: !!document.querySelector('input[type="password"]'),
        hasSubmitButton: !!document.querySelector('button[type="submit"]')
      };
    });
    console.log('- 登录元素检查:', loginElements);
    
    // 4. 尝试直接访问登录路由
    console.log('\n4. 尝试访问登录路由...');
    await page.goto('http://localhost:5174/login', { waitUntil: 'domcontentloaded' });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'test-screenshots/diagnostic-login-route.png' });
    
    // 再次检查登录元素
    const loginRouteElements = await page.evaluate(() => {
      return {
        url: window.location.href,
        hasLoginForm: !!document.querySelector('form'),
        inputElements: Array.from(document.querySelectorAll('input')).map(input => ({
          type: input.type,
          placeholder: input.placeholder,
          name: input.name,
          id: input.id
        }))
      };
    });
    console.log('- 登录路由元素:', JSON.stringify(loginRouteElements, null, 2));
    
    // 5. 检查 API 配置
    console.log('\n5. 检查 API 配置...');
    const apiConfig = await page.evaluate(() => {
      // 尝试获取任何全局配置
      return {
        windowConfig: window._VBEN_ADMIN_PRO_APP_CONF_ || null,
        location: window.location.href
      };
    });
    console.log('- API 配置:', apiConfig);
    
    // 6. 尝试手动触发登录
    console.log('\n6. 尝试查找任何形式的登录入口...');
    const possibleLoginSelectors = [
      'input[type="text"]',
      'input[type="email"]',
      'input[placeholder*="user" i]',
      'input[placeholder*="账" i]',
      'input[placeholder*="admin" i]',
      'input:not([type="hidden"])'
    ];
    
    for (const selector of possibleLoginSelectors) {
      const element = await page.locator(selector).first();
      if (await element.isVisible().catch(() => false)) {
        console.log(`  找到输入框: ${selector}`);
        const attributes = await element.evaluate(el => ({
          type: el.type,
          placeholder: el.placeholder,
          name: el.name,
          id: el.id
        }));
        console.log('  属性:', attributes);
      }
    }
    
    // 7. 输出诊断信息
    console.log('\n=== 诊断信息汇总 ===');
    console.log(`\n控制台消息 (${consoleMessages.length} 条):`);
    consoleMessages.forEach(msg => {
      if (msg.type === 'error' || msg.type === 'warning') {
        console.log(`  [${msg.type}] ${msg.text}`);
      }
    });
    
    console.log(`\n页面错误 (${pageErrors.length} 条):`);
    pageErrors.forEach(error => {
      console.log(`  ${error.message}`);
    });
    
    console.log(`\n失败的请求 (${failedRequests.length} 条):`);
    failedRequests.forEach(req => {
      console.log(`  ${req.url}: ${req.error}`);
    });
    
    console.log(`\n网络请求统计:`);
    const requestTypes = {};
    networkRequests.forEach(req => {
      requestTypes[req.resourceType] = (requestTypes[req.resourceType] || 0) + 1;
    });
    Object.entries(requestTypes).forEach(([type, count]) => {
      console.log(`  ${type}: ${count}`);
    });
    
    // 保存页面 HTML
    const pageHTML = await page.content();
    require('fs').writeFileSync('test-screenshots/diagnostic-page.html', pageHTML);
    console.log('\n页面 HTML 已保存到 diagnostic-page.html');
    
  } catch (error) {
    console.error('诊断过程中发生错误:', error);
  } finally {
    await browser.close();
  }
}

// 运行诊断
runDiagnosticTest().catch(console.error);