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>
2.8 KiB
2.8 KiB
前后端启动和测试指南
当前状态
✅ 服务器运行中
后端服务器
- 地址: http://localhost:4000
- 状态: ✅ 运行中
- 健康检查:
curl http://localhost:4000/api/health
前端服务器
- 地址: http://localhost:3000
- 状态: ✅ 运行中
- 访问: http://localhost:3000
测试 API 端点
# 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: 使用测试脚本
# 确保浏览器已安装
cd frontend
npx playwright install chromium
# 运行测试脚本
node test-pages.js
方法 2: 使用 Playwright Test
# 运行 E2E 测试
cd frontend
npx playwright test --headed --project=chromium
# 运行特定的视觉测试
npx playwright test visual-test.spec.ts --headed
方法 3: 使用 Playwright Codegen（录制测试）
# 启动代码生成器
cd frontend
npx playwright codegen http://localhost:3000
# 这将打开浏览器和 Playwright Inspector
# 你的操作将被自动转换为测试代码
测试用户流程
1. 登录流程
- 访问 http://localhost:3000
- 输入用户名和密码
- 点击登录按钮
- 跳转到仪表盘
2. 文档管理
- 创建新文档
- 搜索文档
- 删除文档
3. 待办管理
- 创建待办
- 更改状态（待办→完成）
- 筛选不同状态
4. 图片管理
- 上传图片
- 查看OCR结果
- 关联到文档/待办
使用 MCP 访问
如果你有 MCP Playwright 服务器，可以这样使用：
// 在 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% 覆盖
故障排查
前端无法启动
# 检查端口占用
netstat -ano | findstr :3000
# 更换端口
cd frontend
npm run dev -- --port 3001
后端无法启动
# 检查端口占用
netstat -ano | findstr :4000
# 检查数据库
cd backend
npx prisma db push
Playwright 浏览器未安装
cd frontend
npx playwright install
下一步
- 安装 Playwright 浏览器
- 运行完整的 E2E 测试套件
- 生成测试报告和截图