gerenjizhang/test-pages.js

// 多页面测试脚本
const { chromium } = require('playwright');

async function testAllPages() {
  console.log('🚀 开始多页面测试...\n');
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  const baseUrl = 'http://localhost:5173';
  const results = [];

  // 1. 测试首页
  console.log('📄 测试1: 首页 (Dashboard)');
  try {
    await page.goto(baseUrl, { waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(2000);

    // 检查关键元素
    const title = await page.title();
    const balanceCard = await page.$('.balance-card');
    const statsGrid = await page.$('.stats-grid');

    results.push({
      page: '首页',
      status: balanceCard && statsGrid ? '✅ 通过' : '⚠️ 部分通过',
      title: title,
      hasBalance: !!balanceCard,
      hasStats: !!statsGrid
    });
    console.log(`   标题: ${title}`);
    console.log(`   余额卡片: ${balanceCard ? '✅' : '❌'}`);
    console.log(`   统计网格: ${statsGrid ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '首页', status: '❌ 失败', error: error.message });
  }

  // 2. 测试记账页面
  console.log('📄 测试2: 记账页面 (Record)');
  try {
    await page.goto(`${baseUrl}/record`, { waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(2000);

    const pageTitle = await page.$('.page-title');
    const filterBar = await page.$('.filter-bar');

    results.push({
      page: '记账',
      status: pageTitle || filterBar ? '✅ 通过' : '⚠️ 部分通过',
      hasTitle: !!pageTitle,
      hasFilter: !!filterBar
    });
    console.log(`   页面标题: ${pageTitle ? '✅' : '❌'}`);
    console.log(`   筛选栏: ${filterBar ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '记账', status: '❌ 失败', error: error.message });
  }

  // 3. 测试预算页面
  console.log('📄 测试3: 预算页面 (Budget)');
  try {
    await page.goto(`${baseUrl}/budget`, { waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(2000);

    const overviewCard = await page.$('.overview-card');
    const budgetList = await page.$('.budget-list');

    results.push({
      page: '预算',
      status: overviewCard || budgetList ? '✅ 通过' : '⚠️ 部分通过',
      hasOverview: !!overviewCard,
      hasBudget: !!budgetList
    });
    console.log(`   概览卡片: ${overviewCard ? '✅' : '❌'}`);
    console.log(`   预算列表: ${budgetList ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '预算', status: '❌ 失败', error: error.message });
  }

  // 4. 测试统计页面
  console.log('📄 测试4: 统计页面 (Statistics)');
  try {
    await page.goto(`${baseUrl}/statistics`, { waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(2000);

    const chartCards = await page.$$('.chart-card');
    const tabsContainer = await page.$('.chart-tabs');

    results.push({
      page: '统计',
      status: chartCards.length > 0 ? '✅ 通过' : '⚠️ 部分通过',
      chartCount: chartCards.length,
      hasTabs: !!tabsContainer
    });
    console.log(`   图表卡片数量: ${chartCards.length}`);
    console.log(`   图表切换标签: ${tabsContainer ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '统计', status: '❌ 失败', error: error.message });
  }

  // 5. 测试侧边栏导航
  console.log('📄 测试5: 侧边栏导航');
  try {
    const navItems = await page.$$('.sidebar-nav-item');
    results.push({
      page: '导航',
      status: navItems.length >= 4 ? '✅ 通过' : '⚠️ 部分通过',
      navCount: navItems.length
    });
    console.log(`   导航项数量: ${navItems.length}`);
    console.log(`   导航功能: ${navItems.length >= 4 ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '导航', status: '❌ 失败', error: error.message });
  }

  // 6. 测试响应式布局
  console.log('📄 测试6: 响应式布局');
  try {
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.waitForTimeout(1000);
    const sidebarDesktop = await page.$('.sidebar');
    const mainContentDesktop = await page.$('.main-content');

    await page.setViewportSize({ width: 375, height: 667 });
    await page.waitForTimeout(1000);
    const mobileHeader = await page.$('.mobile-header');
    const bottomTab = await page.$('.bottom-tab-bar');

    results.push({
      page: '响应式',
      status: (sidebarDesktop && mainContentDesktop) || (mobileHeader && bottomTab) ? '✅ 通过' : '⚠️ 部分通过',
      desktopMode: !!(sidebarDesktop && mainContentDesktop),
      mobileMode: !!(mobileHeader && bottomTab)
    });
    console.log(`   桌面模式(1920px): ${sidebarDesktop && mainContentDesktop ? '✅' : '❌'}`);
    console.log(`   移动模式(375px): ${mobileHeader && bottomTab ? '✅' : '❌'}\n`);
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '响应式', status: '❌ 失败', error: error.message });
  }

  // 7. 测试侧边栏折叠功能
  console.log('📄 测试7: 侧边栏折叠功能');
  try {
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.goto(baseUrl, { waitUntil: 'networkidle', timeout: 30000 });

    const toggleBtn = await page.$('.sidebar-toggle');
    if (toggleBtn) {
      await toggleBtn.click();
      await page.waitForTimeout(500);
      const isCollapsed = await page.$('.sidebar.collapsed');
      console.log(`   折叠功能: ${isCollapsed ? '✅' : '❌'}`);

      await toggleBtn.click();
      await page.waitForTimeout(500);
      const isExpanded = await page.$('.sidebar:not(.collapsed)');
      console.log(`   展开功能: ${isExpanded ? '✅' : '❌'}\n`);

      results.push({
        page: '折叠功能',
        status: isCollapsed && isExpanded ? '✅ 通过' : '⚠️ 部分通过',
        collapsible: !!isCollapsed,
        expandable: !!isExpanded
      });
    } else {
      console.log(`   折叠按钮: ❌ 未找到\n`);
      results.push({ page: '折叠功能', status: '❌ 失败', error: '未找到折叠按钮' });
    }
  } catch (error) {
    console.log(`   ❌ 错误: ${error.message}\n`);
    results.push({ page: '折叠功能', status: '❌ 失败', error: error.message });
  }

  // 测试总结
  console.log('='.repeat(50));
  console.log('📊 测试总结');
  console.log('='.repeat(50));

  const passed = results.filter(r => r.status.includes('通过')).length;
  const total = results.length;
  const passRate = ((passed / total) * 100).toFixed(1);

  results.forEach(r => {
    console.log(`${r.page.padEnd(10)} : ${r.status}`);
  });

  console.log('='.repeat(50));
  console.log(`总计: ${passed}/${total} 通过 (${passRate}%)`);
  console.log('='.repeat(50));

  if (parseFloat(passRate) >= 80) {
    console.log('\n🎉 测试结果：优秀！系统功能正常！');
  } else if (parseFloat(passRate) >= 60) {
    console.log('\n⚠️ 测试结果：一般，部分功能需要修复');
  } else {
    console.log('\n❌ 测试结果：不理想，需要修复关键问题');
  }

  await browser.close();
  console.log('\n✅ 测试完成！');
}

testAllPages().catch(console.error);