telegram-management-system/frontend-vben/debug-api-response.js

import { chromium } from 'playwright';

async function debugApiResponse() {
  const browser = await chromium.launch({ headless: false, slowMo: 500 });
  const context = await browser.newContext();
  const page = await context.newPage();

  // 监听控制台日志和错误
  page.on('console', (msg) => {
    console.log(`🖥️ Console [${msg.type()}]: ${msg.text()}`);
  });

  page.on('pageerror', (error) => {
    console.log(`❌ 页面错误: ${error.message}`);
  });

  // 监听网络请求和响应
  page.on('request', (request) => {
    if (request.url().includes('/api/auth/login')) {
      console.log(`🔵 登录API请求:`, {
        url: request.url(),
        method: request.method(),
        headers: request.headers(),
        postData: request.postData(),
      });
    }
  });

  page.on('response', async (response) => {
    if (response.url().includes('/api/auth/login')) {
      console.log(`🟢 登录API响应:`, {
        url: response.url(),
        status: response.status(),
        headers: response.headers(),
      });

      try {
        const responseText = await response.text();
        console.log(`📄 响应内容:`, responseText);

        // 尝试解析JSON
        try {
          const responseJson = JSON.parse(responseText);
          console.log(`📋 解析后的JSON:`, responseJson);
        } catch (e) {
          console.log(`❌ JSON解析失败: ${e.message}`);
        }
      } catch (e) {
        console.log(`❌ 获取响应内容失败: ${e.message}`);
      }
    }
  });

  try {
    console.log('🚀 调试API响应...');

    await page.goto('http://localhost:5173/auth/login');
    await page.waitForTimeout(2000);

    console.log('📝 填写表单...');
    await page.fill('input[name="username"]', 'admin');
    await page.fill('input[name="password"]', '111111');

    console.log('🖱️ 点击登录...');

    // 在页面中直接执行登录逻辑，查看详细错误
    const loginResult = await page.evaluate(async () => {
      try {
        // 手动触发登录API调用
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            username: 'admin',
            password: '111111',
          }),
        });

        const responseText = await response.text();
        console.log('手动API调用响应:', responseText);

        let responseJson;
        try {
          responseJson = JSON.parse(responseText);
        } catch (e) {
          return {
            error: 'JSON解析失败',
            responseText: responseText,
            status: response.status,
          };
        }

        return {
          success: true,
          status: response.status,
          data: responseJson,
        };
      } catch (error) {
        console.error('手动API调用失败:', error);
        return {
          error: error.message,
        };
      }
    });

    console.log('📊 手动API调用结果:', loginResult);

    // 现在点击实际的登录按钮
    await page.click('button:has-text("登录")');

    // 等待并观察页面变化
    await page.waitForTimeout(3000);

    // 检查是否有错误消息显示
    const errorElements = await page.$$(
      '.ant-message-error, .error-message, [class*="error"]',
    );
    if (errorElements.length > 0) {
      console.log('🔍 发现错误元素:');
      for (const element of errorElements) {
        const text = await element.textContent();
        if (text && text.trim()) {
          console.log(`   错误信息: ${text}`);
        }
      }
    }

    // 检查页面状态
    const currentUrl = page.url();
    console.log(`📍 最终URL: ${currentUrl}`);

    await page.waitForTimeout(10000);
  } catch (error) {
    console.error('❌ 调试失败:', error);
  }

  await browser.close();
}

debugApiResponse().catch(console.error);