telegram-management-system/frontend-vben/apps/web-antd/tests/e2e/login-debug.test.ts

import { test, expect } from '@playwright/test';

test('登录调试测试', async ({ page }) => {
  await page.setViewportSize({ width: 1920, height: 1080 });

  console.log('🚀 访问登录页面...');
  await page.goto('http://localhost:5174');
  await page.waitForLoadState('networkidle');

  console.log('📝 填写登录信息...');

  // 填写用户名
  const usernameInput = page.locator('input[placeholder="请输入用户名"]');
  await usernameInput.clear();
  await usernameInput.fill('admin');
  console.log('✅ 用户名已填写');

  // 填写密码
  const passwordInput = page.locator('input[placeholder="密码"]');
  await passwordInput.clear();
  await passwordInput.fill('111111');
  console.log('✅ 密码已填写');

  // 截图查看填写后的状态
  await page.screenshot({
    path: 'test-results/screenshots/before-login-click.png',
    fullPage: true,
  });

  console.log('🖱️ 点击登录按钮...');
  const loginButton = page.locator('button:has-text("登录")');
  await loginButton.click();

  console.log('⏳ 等待登录处理...');

  // 等待一段时间观察变化
  await page.waitForTimeout(5000);

  console.log('📍 当前URL:', page.url());
  console.log('📍 页面标题:', await page.title());

  // 截图查看登录后的状态
  await page.screenshot({
    path: 'test-results/screenshots/after-login-click.png',
    fullPage: true,
  });

  // 检查是否有错误消息
  const errorMessages = await page
    .locator('.ant-notification, .ant-message, [class*="error"]')
    .all();
  console.log(`🔍 找到 ${errorMessages.length} 个可能的错误消息`);

  for (let i = 0; i < errorMessages.length; i++) {
    const message = errorMessages[i];
    const isVisible = await message.isVisible();
    if (isVisible) {
      const text = await message.textContent();
      console.log(`❌ 错误消息 ${i + 1}: ${text}`);
    }
  }

  // 检查是否有成功消息
  const successMessages = await page
    .locator(
      '.ant-notification-success, .ant-message-success, [class*="success"]',
    )
    .all();
  console.log(`🔍 找到 ${successMessages.length} 个可能的成功消息`);

  for (let i = 0; i < successMessages.length; i++) {
    const message = successMessages[i];
    const isVisible = await message.isVisible();
    if (isVisible) {
      const text = await message.textContent();
      console.log(`✅ 成功消息 ${i + 1}: ${text}`);
    }
  }

  // 检查URL变化
  if (
    page.url().includes('dashboard') ||
    page.url().includes('home') ||
    page.url().includes('workspace')
  ) {
    console.log('🎉 登录成功，已跳转到主页面');

    // 等待页面完全加载
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000);

    // 截图查看主页面
    await page.screenshot({
      path: 'test-results/screenshots/main-dashboard.png',
      fullPage: true,
    });

    // 查找菜单
    console.log('🔍 在主页面查找菜单...');

    const menuElements = await page
      .locator(
        '.ant-menu, .ant-layout-sider, [class*="menu"], [class*="sidebar"]',
      )
      .all();
    console.log(`找到 ${menuElements.length} 个可能的菜单容器`);

    for (let i = 0; i < menuElements.length; i++) {
      const element = menuElements[i];
      const isVisible = await element.isVisible();
      if (isVisible) {
        const text = await element.textContent();
        const preview = text ? text.substring(0, 300) + '...' : '无文本内容';
        console.log(`📋 菜单容器 ${i + 1}: ${preview}`);
      }
    }
  } else {
    console.log('❌ 登录可能失败，未跳转到主页面');
    console.log('当前URL:', page.url());
  }
});