diff --git a/frontend/react-shadcn/pc/tests/EXECUTION_GUIDE.md b/frontend/react-shadcn/pc/tests/EXECUTION_GUIDE.md new file mode 100644 index 0000000..27dc763 --- /dev/null +++ b/frontend/react-shadcn/pc/tests/EXECUTION_GUIDE.md @@ -0,0 +1,182 @@ +# Playwright MCP 测试执行手册 + +## 前置准备 + +### 1. 启动后端服务 + +```bash +cd backend +go run main.go +``` + +后端服务将在 http://localhost:8888 运行。 + +### 2. 启动前端开发服务器 + +```bash +cd frontend/react-shadcn/pc +npm run dev +``` + +前端将在 http://localhost:5173 运行。 + +### 3. 验证 MCP Playwright 配置 + +确保 Claude Code 已配置 Playwright MCP 工具。 + +## 测试执行步骤 + +### 测试 1: 登录页面 + +**目标:** 验证登录页面功能和流程 + +**步骤:** + +1. **导航到登录页** + ``` + mcp__plugin_playwright_playwright__browser_navigate + url: http://localhost:5173/login + ``` + +2. **验证页面元素** + ``` + mcp__plugin_playwright_playwright__browser_snapshot + ``` + 验证包含: BASE, 管理面板登录, 邮箱地址, 密码, 登录 + +3. **测试错误凭证** + - 输入邮箱: wrong@example.com + - 输入密码: wrongpassword + - 点击登录 + - 验证错误信息显示 + +4. **测试正确凭证** + - 输入邮箱: admin@example.com + - 输入密码: password123 + - 点击登录 + - 验证跳转到仪表板 + +### 测试 2: 仪表板页面 + +**目标:** 验证仪表板数据展示 + +**步骤:** + +1. **确保已登录**(有 token) + +2. **导航到仪表板** + ``` + mcp__plugin_playwright_playwright__browser_navigate + url: http://localhost:5173/dashboard + ``` + +3. **验证统计卡片** + - 总用户数: 1,234 + - 活跃用户: 856 + - 系统负载: 32% + - 数据库状态: 正常 + +4. **验证用户增长趋势图表** + +5. **验证最近活动列表** + +### 测试 3: 用户管理页面 + +**目标:** 验证用户 CRUD 操作 + +**步骤:** + +1. **导航到用户管理** + ``` + mcp__plugin_playwright_playwright__browser_navigate + url: http://localhost:5173/users + ``` + +2. **验证用户列表表格** + - 表头: ID, 用户名, 邮箱, 手机号, 创建时间, 操作 + +3. **测试搜索功能** + - 输入关键词: admin + - 验证过滤结果 + +4. **测试创建用户** + - 点击"添加用户" + - 填写表单: 用户名, 邮箱, 密码, 手机号 + - 点击"创建" + - 验证新用户出现在列表 + +5. **测试编辑用户** + - 点击编辑按钮 + - 修改信息 + - 点击保存 + +6. **测试删除用户** + - 点击删除按钮 + - 确认对话框点击确定 + - 验证用户被移除 + +### 测试 4: 设置页面 + +**目标:** 验证设置页面功能 + +**步骤:** + +1. **导航到设置** + ``` + mcp__plugin_playwright_playwright__browser_navigate + url: http://localhost:5173/settings + ``` + +2. **验证设置分类** + - 个人设置 + - 通知设置 + - 安全设置 + - 外观设置 + +3. **测试开关控件** + - 邮件通知开关 + - 系统消息开关 + - 深色模式开关 + +### 测试 5: 导航和路由保护 + +**目标:** 验证导航和权限控制 + +**步骤:** + +1. **测试侧边栏导航** + - 点击首页 → 验证仪表板 + - 点击用户管理 → 验证用户列表 + - 点击设置 → 验证设置页面 + +2. **测试未登录访问** + - 清除 localStorage + - 直接访问 /dashboard + - 验证重定向到登录页 + +3. **测试登出功能** + - 点击退出登录 + - 验证重定向到登录页 + +## 测试报告 + +执行完成后,检查: +- 所有页面是否加载正常 +- 所有表单是否能正常提交 +- 所有按钮是否能正常点击 +- 所有弹窗是否能正常打开/关闭 +- 路由保护是否正常工作 + +## 常见问题 + +### 1. 页面加载超时 +- 检查前端开发服务器是否运行 +- 检查网络连接 + +### 2. 登录失败 +- 检查后端服务是否运行 +- 检查 API 端点配置 + +### 3. 元素找不到 +- 检查选择器是否正确 +- 检查页面是否完全加载