PicAnalysis/frontend/e2e/visual-test.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Visual Tests - 前端界面访问', () => {
  test('访问登录页面并截图', async ({ page }) => {
    await page.goto('http://localhost:3000');

    // 等待页面加载
    await page.waitForLoadState('networkidle');

    // 截图
    await page.screenshot({ path: 'screenshots/login-page.png' });

    // 验证页面元素
    await expect(page.locator('h1')).toContainText('图片分析系统');
    await expect(page.locator('text=登录以继续')).toBeVisible();
    await expect(page.locator('input[label="用户名"]')).toBeVisible();
    await expect(page.locator('input[label="密码"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();
    await expect(page.locator('text=立即注册')).toBeVisible();
  });

  test('测试登录流程', async ({ page }) => {
    // Mock 登录 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',
            },
          },
        }),
      });
    });

    // Mock 文档 API
    await page.route('**/api/documents**', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          data: [],
          count: 0,
        }),
      });
    });

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

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

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

    await page.goto('http://localhost:3000');

    // 填写登录表单
    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.screenshot({ path: 'screenshots/dashboard.png', fullPage: true });

    // 验证仪表盘元素
    await expect(page.locator('h2')).toContainText('仪表盘');
    await expect(page.locator('text=文档总数')).toBeVisible();
    await expect(page.locator('text=待办任务')).toBeVisible();
    await expect(page.locator('text=已完成')).toBeVisible();
  });

  test('访问文档页面', async ({ page }) => {
    // 设置已登录状态
    await page.goto('http://localhost:3000/dashboard');
    await page.evaluate(() => {
      localStorage.setItem('auth-storage', JSON.stringify({
        state: {
          user: { id: '1', username: 'test' },
          token: 'test-token',
          isAuthenticated: true,
        },
        version: 0,
      }));
      localStorage.setItem('auth_token', 'test-token');
    });

    // Mock API
    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.goto('http://localhost:3000/documents');
    await page.waitForLoadState('networkidle');

    // 截图文档页面
    await page.screenshot({ path: 'screenshots/documents.png', fullPage: true });

    // 验证文档页面
    await expect(page.locator('h1')).toContainText('文档管理');
    await expect(page.locator('text=示例文档')).toBeVisible();
  });

  test('访问待办页面', async ({ page }) => {
    // 设置已登录状态
    await page.goto('http://localhost:3000/dashboard');
    await page.evaluate(() => {
      localStorage.setItem('auth-storage', JSON.stringify({
        state: {
          user: { id: '1', username: 'test' },
          token: 'test-token',
          isAuthenticated: true,
        },
        version: 0,
      }));
      localStorage.setItem('auth_token', 'test-token');
    });

    // Mock API
    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: [],
        }),
      });
    });

    await page.goto('http://localhost:3000/todos');
    await page.waitForLoadState('networkidle');

    // 截图待办页面
    await page.screenshot({ path: 'screenshots/todos.png', fullPage: true });

    // 验证待办页面
    await expect(page.locator('h1')).toContainText('待办事项');
    await expect(page.locator('text=完成项目文档')).toBeVisible();
    await expect(page.locator('text=高')).toBeVisible();
  });

  test('访问图片页面', async ({ page }) => {
    // 设置已登录状态
    await page.goto('http://localhost:3000/dashboard');
    await page.evaluate(() => {
      localStorage.setItem('auth-storage', JSON.stringify({
        state: {
          user: { id: '1', username: 'test' },
          token: 'test-token',
          isAuthenticated: true,
        },
        version: 0,
      }));
      localStorage.setItem('auth_token', 'test-token');
    });

    // Mock API
    await page.route('**/api/images**', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          data: [
            {
              id: '1',
              file_path: 'https://via.placeholder.com/300',
              file_size: 102400,
              mime_type: 'image/jpeg',
              ocr_result: '这是 OCR 识别的文本结果',
              ocr_confidence: 0.95,
              processing_status: 'completed',
              quality_score: 0.9,
              error_message: null,
              created_at: '2024-01-01T00:00:00Z',
              updated_at: '2024-01-01T00:00:00Z',
              user_id: '1',
              document_id: null,
            },
          ],
          count: 1,
        }),
      });
    });

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

    await page.goto('http://localhost:3000/images');
    await page.waitForLoadState('networkidle');

    // 截图图片页面
    await page.screenshot({ path: 'screenshots/images.png', fullPage: true });

    // 验证图片页面
    await expect(page.locator('h1')).toContainText('图片管理');
    await expect(page.locator('text=上传图片')).toBeVisible();
    await expect(page.locator('text=屏幕截图')).toBeVisible();
    await expect(page.locator('text=这是 OCR 识别的文本结果')).toBeVisible();
  });
});