telegram-management-system/frontend-vben/playwright-auth-test.js

import { chromium } from 'playwright';

async function testAuthenticationFlow() {
  console.log('启动浏览器测试...');

  const browser = await chromium.launch({
    headless: false,
    slowMo: 1000,
    devtools: true,
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  // 监听所有网络请求
  page.on('request', (request) => {
    console.log('\n📤 请求:', {
      method: request.method(),
      url: request.url(),
      headers: JSON.stringify(request.headers(), null, 2),
    });
  });

  // 监听所有网络响应
  page.on('response', (response) => {
    console.log('\n📥 响应:', {
      status: response.status(),
      url: response.url(),
      headers: JSON.stringify(response.headers(), null, 2),
    });
  });

  // 监听控制台消息
  page.on('console', (msg) => {
    console.log('🖥️ Console:', msg.type(), msg.text());
  });

  try {
    console.log('\n1. 访问首页...');
    await page.goto('http://localhost:5174');
    await page.waitForTimeout(2000);

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

    // 等待登录表单出现
    await page.waitForSelector(
      'input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]',
      { timeout: 10000 },
    );

    // 尝试不同的用户名输入选择器
    const usernameSelectors = [
      'input[type="text"]',
      'input[placeholder*="用户名"]',
      'input[placeholder*="账号"]',
      'input[name="username"]',
      '.ant-input',
    ];

    let usernameInput = null;
    for (const selector of usernameSelectors) {
      try {
        usernameInput = await page.$(selector);
        if (usernameInput) {
          console.log(`✅ 找到用户名输入框: ${selector}`);
          break;
        }
      } catch (e) {
        continue;
      }
    }

    if (usernameInput) {
      await usernameInput.fill('admin');
      console.log('✅ 用户名已填入');
    } else {
      console.log('❌ 未找到用户名输入框');
      // 打印页面内容用于调试
      const content = await page.content();
      console.log('页面内容片段:', content.substring(0, 1000));
    }

    // 尝试不同的密码输入选择器
    const passwordSelectors = [
      'input[type="password"]',
      'input[placeholder*="密码"]',
      'input[name="password"]',
    ];

    let passwordInput = null;
    for (const selector of passwordSelectors) {
      try {
        passwordInput = await page.$(selector);
        if (passwordInput) {
          console.log(`✅ 找到密码输入框: ${selector}`);
          break;
        }
      } catch (e) {
        continue;
      }
    }

    if (passwordInput) {
      await passwordInput.fill('111111');
      console.log('✅ 密码已填入');
    } else {
      console.log('❌ 未找到密码输入框');
    }

    console.log('\n3. 点击登录按钮...');

    // 尝试不同的登录按钮选择器
    const loginButtonSelectors = [
      'button[type="submit"]',
      'button:has-text("登录")',
      'button:has-text("登陆")',
      'button:has-text("Login")',
      '.ant-btn-primary',
      'button.login-btn',
    ];

    let loginButton = null;
    for (const selector of loginButtonSelectors) {
      try {
        loginButton = await page.$(selector);
        if (loginButton) {
          console.log(`✅ 找到登录按钮: ${selector}`);
          break;
        }
      } catch (e) {
        continue;
      }
    }

    if (loginButton) {
      await loginButton.click();
      console.log('✅ 登录按钮已点击');
    } else {
      console.log('❌ 未找到登录按钮');
      // 尝试按回车键登录
      await page.keyboard.press('Enter');
      console.log('✅ 尝试按回车键登录');
    }

    console.log('\n4. 等待登录完成...');
    await page.waitForTimeout(3000);

    // 检查是否成功跳转到dashboard
    const currentUrl = page.url();
    console.log('当前URL:', currentUrl);

    if (currentUrl.includes('/dashboard') || currentUrl.includes('/home')) {
      console.log('✅ 登录成功，已跳转到dashboard');
    } else {
      console.log('⚠️ 可能未成功跳转到dashboard，尝试手动导航...');
      await page.goto('http://localhost:5174/dashboard/home');
      await page.waitForTimeout(2000);
    }

    console.log('\n5. 检查dashboard页面...');

    // 等待页面加载
    await page.waitForTimeout(5000);

    // 检查页面标题和内容
    const title = await page.title();
    console.log('页面标题:', title);

    // 检查是否有错误信息
    const errorElements = await page.$$(
      'text=/401|Unauthorized|认证失败|登录失效/',
    );
    if (errorElements.length > 0) {
      console.log('❌ 发现认证错误信息');
      for (const element of errorElements) {
        const text = await element.textContent();
        console.log('错误信息:', text);
      }
    }

    // 检查localStorage中的token
    const token = await page.evaluate(
      () =>
        localStorage.getItem('token') ||
        localStorage.getItem('accessToken') ||
        localStorage.getItem('authToken'),
    );
    console.log(
      'LocalStorage中的token:',
      token ? `${token.substring(0, 20)}...` : '无token',
    );

    // 检查sessionStorage中的token
    const sessionToken = await page.evaluate(
      () =>
        sessionStorage.getItem('token') ||
        sessionStorage.getItem('accessToken') ||
        sessionStorage.getItem('authToken'),
    );
    console.log(
      'SessionStorage中的token:',
      sessionToken ? `${sessionToken.substring(0, 20)}...` : '无token',
    );

    console.log('\n6. 监控网络请求...');

    // 触发一些可能的API请求
    await page.reload();
    await page.waitForTimeout(5000);

    // 尝试点击可能触发API请求的元素
    const clickableElements = await page.$$(
      'button, .ant-btn, [role="button"]',
    );
    if (clickableElements.length > 0) {
      console.log(
        `发现 ${clickableElements.length} 个可点击元素，尝试点击第一个...`,
      );
      try {
        await clickableElements[0].click();
        await page.waitForTimeout(2000);
      } catch (e) {
        console.log('点击元素时出错:', e.message);
      }
    }

    console.log('\n7. 获取最终页面状态...');
    const finalUrl = page.url();
    const pageContent = await page.content();

    console.log('最终URL:', finalUrl);
    console.log(
      '页面是否包含数据元素:',
      pageContent.includes('data') ||
        pageContent.includes('loading') ||
        pageContent.includes('error'),
    );

    // 检查是否有API调用失败的迹象
    if (pageContent.includes('401') || pageContent.includes('Unauthorized')) {
      console.log('❌ 页面内容显示有401认证错误');
    }

    if (
      pageContent.includes('Network Error') ||
      pageContent.includes('Failed to fetch')
    ) {
      console.log('❌ 页面内容显示有网络错误');
    }

    console.log('\n测试完成，浏览器将保持打开状态供进一步检查...');
    console.log('请手动检查开发者工具中的Network标签页');

    // 保持浏览器打开
    await page.waitForTimeout(30000);
  } catch (error) {
    console.error('测试过程中出现错误:', error);
  } finally {
    await browser.close();
  }
}

testAuthenticationFlow().catch(console.error);