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