# 前后端启动和测试指南

## 当前状态

### ✅ 服务器运行中

**后端服务器**
- 地址: http://localhost:4000
- 状态: ✅ 运行中
- 健康检查: `curl http://localhost:4000/api/health`

**前端服务器**
- 地址: http://localhost:3000
- 状态: ✅ 运行中
- 访问: http://localhost:3000

### 测试 API 端点

```bash
# 1. 健康检查
curl http://localhost:4000/api/health

# 2. 注册用户
curl -X POST http://localhost:4000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"username":"testuser","password":"password123"}'

# 3. 登录
curl -X POST http://localhost:4000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"testuser","password":"password123"}'
```

## 使用 Playwright 访问测试

### 方法 1: 使用测试脚本

```bash
# 确保浏览器已安装
cd frontend
npx playwright install chromium

# 运行测试脚本
node test-pages.js
```

### 方法 2: 使用 Playwright Test

```bash
# 运行 E2E 测试
cd frontend
npx playwright test --headed --project=chromium

# 运行特定的视觉测试
npx playwright test visual-test.spec.ts --headed
```

### 方法 3: 使用 Playwright Codegen（录制测试）

```bash
# 启动代码生成器
cd frontend
npx playwright codegen http://localhost:3000

# 这将打开浏览器和 Playwright Inspector
# 你的操作将被自动转换为测试代码
```

## 测试用户流程

### 1. 登录流程
1. 访问 http://localhost:3000
2. 输入用户名和密码
3. 点击登录按钮
4. 跳转到仪表盘

### 2. 文档管理
1. 创建新文档
2. 搜索文档
3. 删除文档

### 3. 待办管理
1. 创建待办
2. 更改状态（待办→完成）
3. 筛选不同状态

### 4. 图片管理
1. 上传图片
2. 查看OCR结果
3. 关联到文档/待办

## 使用 MCP 访问

如果你有 MCP Playwright 服务器，可以这样使用：

```typescript
// 在 MCP 中访问页面
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // 访问登录页面
  await page.goto('http://localhost:3000');

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

  await browser.close();
})();
```

## 单元测试结果

```
✅ 47 个单元测试全部通过
✅ 代码覆盖率 89.73%
- 组件测试: 100% 覆盖
- 服务测试: 86% 覆盖
```

## 故障排查

### 前端无法启动
```bash
# 检查端口占用
netstat -ano | findstr :3000

# 更换端口
cd frontend
npm run dev -- --port 3001
```

### 后端无法启动
```bash
# 检查端口占用
netstat -ano | findstr :4000

# 检查数据库
cd backend
npx prisma db push
```

### Playwright 浏览器未安装
```bash
cd frontend
npx playwright install
```

## 下一步

1. 安装 Playwright 浏览器
2. 运行完整的 E2E 测试套件
3. 生成测试报告和截图