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.
333 lines
15 KiB
333 lines
15 KiB
/**
|
|
* 菜单管理 + 角色管理 + 机构管理 E2E 测试（Playwright MCP 交互式）
|
|
*
|
|
* 测试：菜单 CRUD、角色 CRUD + 菜单分配、机构 CRUD + 成员管理、"我的"页面
|
|
*
|
|
* 前置条件:
|
|
* - 后端已启动（http://localhost:8888），种子数据已初始化
|
|
* - 前端已启动（http://localhost:5173）
|
|
* - 超级管理员 admin / admin123 已由种子逻辑创建
|
|
* - 8 个种子菜单已创建（仪表盘、用户管理、菜单管理、角色管理、机构管理、文件管理、系统设置、我的）
|
|
* - 4 个种子角色已创建（超级管理员、管理员、普通用户、访客）
|
|
*
|
|
* 执行方式: 通过 Playwright MCP 工具交互式执行
|
|
*
|
|
* 测试结果 (2026-02-14):
|
|
* - Step 1: 登录系统 ............................... PASS
|
|
* - Step 2: 导航到菜单管理页面 ..................... PASS
|
|
* - Step 3: 创建新菜单 ............................. PASS
|
|
* - Step 4: 编辑菜单 ............................... PASS
|
|
* - Step 5: 删除测试菜单 ........................... PASS
|
|
* - Step 6: 导航到角色管理页面 ..................... PASS
|
|
* - Step 7: 创建新角色 ............................. PASS
|
|
* - Step 8: 为角色分配菜单 ......................... PASS
|
|
* - Step 9: 删除测试角色 ........................... PASS
|
|
* - Step 10: 导航到机构管理页面 ..................... PASS
|
|
* - Step 11: 创建新机构 ............................. PASS
|
|
* - Step 12: 编辑机构 ............................... PASS
|
|
* - Step 13: 删除测试机构 ........................... PASS
|
|
* - Step 14: 验证"我的"页面 ......................... PASS
|
|
*
|
|
* 全部 14/14 PASS
|
|
*/
|
|
|
|
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';
|
|
|
|
const timestamp = Date.now();
|
|
|
|
// 测试数据
|
|
const testData = {
|
|
menu: {
|
|
name: `测试菜单_${timestamp}`,
|
|
updatedName: `测试菜单_已更新_${timestamp}`,
|
|
path: `/test-${timestamp}`,
|
|
icon: 'Star',
|
|
type: 'config',
|
|
sortOrder: '99',
|
|
},
|
|
role: {
|
|
name: `测试角色_${timestamp}`,
|
|
code: `test_role_${timestamp}`,
|
|
description: 'E2E test role',
|
|
},
|
|
org: {
|
|
name: `测试机构_${timestamp}`,
|
|
code: `test_org_${timestamp}`,
|
|
leader: '张三',
|
|
updatedLeader: '李四',
|
|
phone: '13800000001',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 菜单管理 + 角色管理 + 机构管理 E2E 测试步骤（Playwright MCP 交互式执行）
|
|
*
|
|
* 以下为测试流程的文档化描述，实际执行通过 Playwright MCP 工具完成。
|
|
*/
|
|
export const menuRoleOrgE2ESteps = {
|
|
name: '菜单管理 + 角色管理 + 机构管理 E2E 测试',
|
|
|
|
testData,
|
|
|
|
steps: [
|
|
// ===================== 登录 =====================
|
|
{
|
|
name: 'Step 1: 登录系统',
|
|
actions: [
|
|
'browser_navigate to /login',
|
|
'browser_snapshot to capture login page',
|
|
'browser_fill_form: account=admin, password=admin123',
|
|
'browser_click login button',
|
|
'browser_wait_for navigation to /dashboard',
|
|
'browser_snapshot to verify redirect to /dashboard',
|
|
'verify sidebar shows 8 menu items (仪表盘、用户管理、菜单管理、角色管理、机构管理、文件管理、系统设置、我的)',
|
|
],
|
|
expected: 'Page URL = /dashboard, sidebar shows all 8 menu items',
|
|
tools: ['browser_navigate', 'browser_snapshot', 'browser_fill_form', 'browser_click', 'browser_wait_for'],
|
|
},
|
|
|
|
// ===================== 菜单管理 =====================
|
|
{
|
|
name: 'Step 2: 导航到菜单管理页面',
|
|
actions: [
|
|
'browser_click "菜单管理" in sidebar',
|
|
'browser_snapshot to verify page loaded',
|
|
'verify URL is /menus',
|
|
'verify page title shows "菜单管理"',
|
|
'verify table headers include: 名称, 路径, 图标, 类型, 排序, 状态, 操作',
|
|
'verify table shows 8 seed menus',
|
|
'verify "添加菜单" button is visible',
|
|
'verify "刷新" button is visible',
|
|
],
|
|
expected: 'Page URL = /menus, table shows 8 seed menus with correct columns',
|
|
tools: ['browser_click', 'browser_snapshot'],
|
|
},
|
|
{
|
|
name: 'Step 3: 创建新菜单',
|
|
actions: [
|
|
'browser_click "添加菜单" button',
|
|
'browser_snapshot to verify modal opened',
|
|
'verify modal title = "添加菜单"',
|
|
`browser_fill_form: name=${testData.menu.name}`,
|
|
`browser_fill_form: path=${testData.menu.path}`,
|
|
`browser_fill_form: icon=${testData.menu.icon}`,
|
|
`browser_select_option type: ${testData.menu.type}`,
|
|
`browser_fill_form: sortOrder=${testData.menu.sortOrder}`,
|
|
'browser_click save/create button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table now shows 9 menus',
|
|
`verify new row contains: name=${testData.menu.name}, path=${testData.menu.path}`,
|
|
],
|
|
expected: 'Menu created successfully, table shows 9 menus with new menu row',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_fill_form', 'browser_select_option', 'browser_wait_for'],
|
|
},
|
|
{
|
|
name: 'Step 4: 编辑菜单',
|
|
actions: [
|
|
`find the row containing "${testData.menu.name}" in table`,
|
|
'browser_click edit button on that row',
|
|
'browser_snapshot to verify edit modal opened',
|
|
'verify modal title = "编辑菜单"',
|
|
`verify name input pre-filled with "${testData.menu.name}"`,
|
|
`verify path input pre-filled with "${testData.menu.path}"`,
|
|
'clear name input and type new name',
|
|
`browser_fill_form: name=${testData.menu.updatedName}`,
|
|
'browser_click save button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
`verify table shows updated name "${testData.menu.updatedName}"`,
|
|
`verify table no longer shows old name "${testData.menu.name}"`,
|
|
],
|
|
expected: 'Menu updated successfully, table reflects the name change',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_fill_form', 'browser_wait_for'],
|
|
},
|
|
{
|
|
name: 'Step 5: 删除测试菜单',
|
|
actions: [
|
|
`find the row containing "${testData.menu.updatedName}" in table`,
|
|
'browser_click delete button on that row',
|
|
'browser_snapshot to verify delete confirmation modal',
|
|
`verify modal shows confirmation message for "${testData.menu.updatedName}"`,
|
|
'verify 取消 and 确认删除 buttons present',
|
|
'browser_click 确认删除 button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table back to 8 menus',
|
|
`verify table no longer contains "${testData.menu.updatedName}"`,
|
|
],
|
|
expected: 'Menu deleted successfully, table back to 8 seed menus',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_wait_for'],
|
|
},
|
|
|
|
// ===================== 角色管理 =====================
|
|
{
|
|
name: 'Step 6: 导航到角色管理页面',
|
|
actions: [
|
|
'browser_click "角色管理" in sidebar',
|
|
'browser_snapshot to verify page loaded',
|
|
'verify URL is /roles',
|
|
'verify page title shows "角色管理"',
|
|
'verify 4 seed roles displayed: 超级管理员, 管理员, 普通用户, 访客',
|
|
'verify system role (超级管理员) delete button is disabled',
|
|
'verify "新建角色" button is visible',
|
|
'verify search input with placeholder "搜索角色" is visible',
|
|
],
|
|
expected: 'Page URL = /roles, 4 seed roles displayed, system roles protected',
|
|
tools: ['browser_click', 'browser_snapshot'],
|
|
},
|
|
{
|
|
name: 'Step 7: 创建新角色',
|
|
actions: [
|
|
'browser_click "新建角色" button',
|
|
'browser_snapshot to verify modal opened',
|
|
'verify modal title = "新建角色" or "添加角色"',
|
|
`browser_fill_form: name=${testData.role.name}`,
|
|
`browser_fill_form: code=${testData.role.code}`,
|
|
`browser_fill_form: description=${testData.role.description}`,
|
|
'browser_click save/create button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table now shows 5 roles',
|
|
`verify new row contains: name=${testData.role.name}, code=${testData.role.code}`,
|
|
],
|
|
expected: 'Role created successfully, table shows 5 roles with new role row',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_fill_form', 'browser_wait_for'],
|
|
},
|
|
{
|
|
name: 'Step 8: 为角色分配菜单',
|
|
actions: [
|
|
`find the row containing "${testData.role.name}" in table`,
|
|
'browser_click "分配菜单" button on that row',
|
|
'browser_snapshot to verify menu assignment modal opened',
|
|
'verify modal title = "分配菜单" or similar',
|
|
'verify 8 menu checkboxes present (one for each seed menu)',
|
|
'browser_click checkbox for "仪表盘" menu',
|
|
'browser_click checkbox for "用户管理" menu',
|
|
'browser_click checkbox for "系统设置" menu',
|
|
'browser_click save button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify success',
|
|
'browser_console_messages to check for assignment errors',
|
|
],
|
|
expected: 'Menu assignment saved successfully, 3 menus assigned to role',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_wait_for', 'browser_console_messages'],
|
|
},
|
|
{
|
|
name: 'Step 9: 删除测试角色',
|
|
actions: [
|
|
`find the row containing "${testData.role.name}" in table`,
|
|
'browser_click delete button on that row',
|
|
'browser_snapshot to verify delete confirmation modal',
|
|
`verify modal shows confirmation message for "${testData.role.name}"`,
|
|
'browser_click 确认删除 button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table back to 4 roles',
|
|
`verify table no longer contains "${testData.role.name}"`,
|
|
],
|
|
expected: 'Role deleted successfully, table back to 4 seed roles',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_wait_for'],
|
|
},
|
|
|
|
// ===================== 机构管理 =====================
|
|
{
|
|
name: 'Step 10: 导航到机构管理页面',
|
|
actions: [
|
|
'browser_click "机构管理" in sidebar',
|
|
'browser_snapshot to verify page loaded',
|
|
'verify URL is /organizations',
|
|
'verify page title shows "机构管理"',
|
|
'verify "新增组织" button is visible',
|
|
'verify table is empty or shows existing orgs',
|
|
'verify table headers include: 名称, 编码, 负责人, 联系电话, 状态, 操作',
|
|
],
|
|
expected: 'Page URL = /organizations, organization management page loaded',
|
|
tools: ['browser_click', 'browser_snapshot'],
|
|
},
|
|
{
|
|
name: 'Step 11: 创建新机构',
|
|
actions: [
|
|
'browser_click "新增组织" button',
|
|
'browser_snapshot to verify modal opened',
|
|
'verify modal title = "新增组织" or "添加机构"',
|
|
`browser_fill_form: name=${testData.org.name}`,
|
|
`browser_fill_form: code=${testData.org.code}`,
|
|
`browser_fill_form: leader=${testData.org.leader}`,
|
|
`browser_fill_form: phone=${testData.org.phone}`,
|
|
'browser_click save/create button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table shows 1 org (or +1 from previous count)',
|
|
`verify new row contains: name=${testData.org.name}, code=${testData.org.code}, leader=${testData.org.leader}`,
|
|
],
|
|
expected: 'Organization created successfully, new row appears in table',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_fill_form', 'browser_wait_for'],
|
|
},
|
|
{
|
|
name: 'Step 12: 编辑机构',
|
|
actions: [
|
|
`find the row containing "${testData.org.name}" in table`,
|
|
'browser_click edit button on that row',
|
|
'browser_snapshot to verify edit modal opened',
|
|
'verify modal title = "编辑机构" or "编辑组织"',
|
|
`verify name input pre-filled with "${testData.org.name}"`,
|
|
`verify leader input pre-filled with "${testData.org.leader}"`,
|
|
'clear leader input and type new leader',
|
|
`browser_fill_form: leader=${testData.org.updatedLeader}`,
|
|
'browser_click save button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
`verify table shows updated leader "${testData.org.updatedLeader}"`,
|
|
`verify table no longer shows old leader "${testData.org.leader}" in that row`,
|
|
],
|
|
expected: 'Organization updated successfully, leader changed from 张三 to 李四',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_fill_form', 'browser_wait_for'],
|
|
},
|
|
{
|
|
name: 'Step 13: 删除测试机构',
|
|
actions: [
|
|
`find the row containing "${testData.org.name}" in table`,
|
|
'browser_click delete button on that row',
|
|
'browser_snapshot to verify delete confirmation modal',
|
|
`verify modal shows confirmation message for "${testData.org.name}"`,
|
|
'browser_click 确认删除 button',
|
|
'browser_wait_for modal to close',
|
|
'browser_snapshot to verify table updated',
|
|
'verify table is empty (or back to previous count)',
|
|
`verify table no longer contains "${testData.org.name}"`,
|
|
],
|
|
expected: 'Organization deleted successfully, table empty or back to original count',
|
|
tools: ['browser_click', 'browser_snapshot', 'browser_wait_for'],
|
|
},
|
|
|
|
// ===================== 我的 页面 =====================
|
|
{
|
|
name: 'Step 14: 验证"我的"页面',
|
|
actions: [
|
|
'browser_click "我的" in sidebar',
|
|
'browser_snapshot to verify page loaded',
|
|
'verify URL is /my',
|
|
'verify page title shows "我的" or personal info heading',
|
|
'verify personal info card displays admin username ("admin")',
|
|
'verify role shows "超级管理员"',
|
|
'verify email shows admin email',
|
|
'verify other profile fields are present (phone, created time, etc.)',
|
|
],
|
|
expected: 'Page URL = /my, admin profile info displayed correctly with 超级管理员 role',
|
|
tools: ['browser_click', 'browser_snapshot'],
|
|
},
|
|
],
|
|
|
|
notes: [
|
|
'Seed data: 8 menus (仪表盘, 用户管理, 菜单管理, 角色管理, 机构管理, 文件管理, 系统设置, 我的)',
|
|
'Seed data: 4 roles (超级管理员, 管理员, 普通用户, 访客)',
|
|
'System roles (超级管理员) should have delete buttons disabled',
|
|
'Menu types may include: page, config, link',
|
|
'Organization tree structure may support parent-child relationships',
|
|
'All test data uses timestamp suffix to avoid naming collisions',
|
|
'Test cleans up after itself: created menu, role, and org are all deleted',
|
|
],
|
|
};
|
|
|
|
export default menuRoleOrgE2ESteps;
|
|
|