telegram-management-system/frontend-vben/inspect-page.js

import { chromium } from 'playwright';

async function inspectPage() {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500,
  });

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

  try {
    console.log('🚀 访问登录页面...');
    await page.goto('http://localhost:5173/auth/login');
    await page.waitForTimeout(5000);

    console.log('📄 获取页面基本信息...');
    const pageInfo = await page.evaluate(() => {
      return {
        title: document.title,
        url: window.location.href,
        readyState: document.readyState,
        bodyExists: !!document.body,
        bodyHTML: document.body
          ? document.body.innerHTML.substring(0, 500)
          : 'No body',
        inputElements: document.querySelectorAll('input').length,
        buttonElements: document.querySelectorAll('button').length,
        formElements: document.querySelectorAll('form').length,
      };
    });

    console.log('页面信息:', pageInfo);

    console.log('🔍 查找输入元素...');
    const inputs = await page.$$('input');
    console.log(`找到 ${inputs.length} 个input元素`);

    for (let i = 0; i < inputs.length; i++) {
      const type = await inputs[i].getAttribute('type');
      const placeholder = await inputs[i].getAttribute('placeholder');
      const name = await inputs[i].getAttribute('name');
      const id = await inputs[i].getAttribute('id');
      console.log(
        `Input ${i}: type="${type}", placeholder="${placeholder}", name="${name}", id="${id}"`,
      );
    }

    console.log('🔍 查找按钮元素...');
    const buttons = await page.$$('button');
    console.log(`找到 ${buttons.length} 个button元素`);

    for (let i = 0; i < buttons.length; i++) {
      const text = await buttons[i].textContent();
      const type = await buttons[i].getAttribute('type');
      const className = await buttons[i].getAttribute('class');
      console.log(
        `Button ${i}: text="${text}", type="${type}", class="${className}"`,
      );
    }

    // 检查是否有错误信息
    const errorElements = await page.$$(
      '.error, .ant-form-item-explain-error, [role="alert"]',
    );
    if (errorElements.length > 0) {
      console.log('⚠️ 发现错误信息:');
      for (let i = 0; i < errorElements.length; i++) {
        const text = await errorElements[i].textContent();
        console.log(`Error ${i}: ${text}`);
      }
    }

    // 检查控制台错误
    console.log('🖥️ 页面控制台信息...');
    await page.evaluate(() => {
      console.log('页面控制台测试');
      console.error('页面控制台错误测试');
    });

    console.log('⏰ 保持浏览器打开30秒供手动检查...');
    await page.waitForTimeout(30000);
  } catch (error) {
    console.error('❌ 测试失败:', error);
  }

  await browser.close();
}

inspectPage().catch(console.error);