PicAnalysis/frontend/test-pages.js

const playwright = require('playwright');

(async () => {
  console.log('🚀 启动 Playwright 测试...\n');

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

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

  // 模拟 API 响应
  await page.route('**/api/auth/login', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        data: {
          token: 'test-token',
          user: {
            id: '1',
            username: 'testuser',
            email: 'test@example.com',
            created_at: '2024-01-01',
            updated_at: '2024-01-01'
          }
        }
      })
    });
  });

  await page.route('**/api/documents**', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        data: [
          {
            id: '1',
            title: '示例文档',
            content: '这是一个示例文档，用于演示文档管理功能。',
            created_at: '2024-01-01T00:00:00Z',
            updated_at: '2024-01-01T00:00:00Z',
            user_id: '1',
            category_id: null
          }
        ],
        count: 1
      })
    });
  });

  await page.route('**/api/todos**', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        data: [
          {
            id: '1',
            title: '完成项目文档',
            description: '编写完整的项目文档',
            priority: 'high',
            status: 'pending',
            created_at: '2024-01-01T00:00:00Z',
            updated_at: '2024-01-01T00:00:00Z',
            user_id: '1',
            document_id: null,
            category_id: null,
            due_date: null,
            completed_at: null,
            confirmed_at: null
          }
        ]
      })
    });
  });

  await page.route('**/api/todos/pending', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        data: [
          {
            id: '1',
            title: '完成项目文档',
            description: '编写完整的项目文档',
            priority: 'high',
            status: 'pending',
            created_at: '2024-01-01T00:00:00Z',
            updated_at: '2024-01-01T00:00:00Z',
            user_id: '1',
            document_id: null,
            category_id: null,
            due_date: null,
            completed_at: null,
            confirmed_at: null
          }
        ]
      })
    });
  });

  await page.route('**/api/todos/completed', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        success: true,
        data: []
      })
    });
  });

  try {
    // 1. 访问登录页面
    console.log('📄 访问登录页面...');
    await page.goto('http://localhost:3000');
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'screenshots/01-login.png' });
    console.log('✅ 登录页面截图完成');

    // 2. 执行登录
    console.log('\n🔐 执行登录操作...');
    await page.fill('input[label="用户名"]', 'testuser');
    await page.fill('input[label="密码"]', 'password123');
    await page.click('button[type="submit"]');

    // 等待跳转
    await page.waitForURL('**/dashboard', { timeout: 5000 });
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'screenshots/02-dashboard.png', fullPage: true });
    console.log('✅ 登录成功，仪表盘截图完成');

    // 3. 访问文档页面
    console.log('\n📄 访问文档页面...');
    await page.click('text=文档');
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'screenshots/03-documents.png', fullPage: true });
    console.log('✅ 文档页面截图完成');

    // 4. 访问待办页面
    console.log('\n📋 访问待办页面...');
    await page.click('text=待办');
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'screenshots/04-todos.png', fullPage: true });
    console.log('✅ 待办页面截图完成');

    // 5. 访问图片页面
    console.log('\n🖼️ 访问图片页面...');
    await page.click('text=图片');
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: 'screenshots/05-images.png', fullPage: true });
    console.log('✅ 图片页面截图完成');

    console.log('\n✨ 所有测试和截图完成！');
    console.log('\n📁 截图已保存到 screenshots/ 目录');
    console.log('  - 01-login.png: 登录页面');
    console.log('  - 02-dashboard.png: 仪表盘');
    console.log('  - 03-documents.png: 文档管理');
    console.log('  - 04-todos.png: 待办事项');
    console.log('  - 05-images.png: 图片管理');

  } catch (error) {
    console.error('❌ 测试过程中出错:', error.message);
  } finally {
    await browser.close();
  }
})();