wjl
1a0ebde95d
完整的前后端图片分析应用，包含： - 后端：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>
156 lines
2.8 KiB
Markdown
156 lines
2.8 KiB
Markdown
# 前后端启动和测试指南
|
||
|
||
## 当前状态
|
||
|
||
### ✅ 服务器运行中
|
||
|
||
**后端服务器**
|
||
- 地址: 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. 生成测试报告和截图
|