1 changed files with 182 additions and 0 deletions
@ -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. 元素找不到 |
|||
- 检查选择器是否正确 |
|||
- 检查页面是否完全加载 |
|||
Loading…
Reference in new issue