feat: 初始化 PicAnalysis 项目
完整的前后端图片分析应用，包含： - 后端：Express + Prisma + SQLite，101个单元测试全部通过 - 前端：React + TypeScript + Vite，47个单元测试，89.73%覆盖率 - E2E测试：Playwright 测试套件 - MCP集成：Playwright MCP配置完成并测试通过 功能模块： - 用户认证（JWT） - 文档管理（CRUD） - 待办管理（三态工作流） - 图片管理（上传、截图、OCR） 测试覆盖： - 后端单元测试：101/101 ✅ - 前端单元测试：47/47 ✅ - E2E测试：通过 ✅ - MCP Playwright测试：通过 ✅ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
321
frontend/e2e/visual-test.spec.ts
Normal file
321
frontend/e2e/visual-test.spec.ts
Normal file
@@ -0,0 +1,321 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user