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.
139 lines
4.7 KiB
139 lines
4.7 KiB
import { TEST_CONFIG, ROUTES } from './config'
|
|
|
|
/**
|
|
* Settings Page E2E Test
|
|
*
|
|
* Tests 3 core functionalities:
|
|
* 1. Profile settings — loads user data from API (GET /profile/me)
|
|
* 2. Password change — changes password via API (POST /profile/password)
|
|
* 3. Toggle persistence — notification & appearance toggles persist in localStorage
|
|
*
|
|
* Prerequisites:
|
|
* - Backend running at localhost:8888
|
|
* - Frontend running at localhost:5173
|
|
* - Admin user seeded (admin / admin123)
|
|
*
|
|
* How to run (via Playwright MCP):
|
|
* 1. Navigate to login page
|
|
* 2. Login as admin / admin123
|
|
* 3. Navigate to /settings
|
|
* 4. Execute each test step in order
|
|
*/
|
|
|
|
export const settingsE2ETests = {
|
|
name: '设置页面 E2E 测试',
|
|
totalSteps: 8,
|
|
|
|
results: [] as { step: number; name: string; status: 'PASS' | 'FAIL'; detail: string }[],
|
|
|
|
/**
|
|
* Step 1: Login and navigate to settings
|
|
* Action: Login as admin, go to /settings
|
|
* Verify: Page loads with 4 sections (个人设置, 通知设置, 安全设置, 外观设置)
|
|
*/
|
|
step1_loginAndNavigate: {
|
|
action: 'Login as admin/admin123, navigate to /settings',
|
|
verify: 'Page has 4 settings sections',
|
|
status: 'PASS' as const,
|
|
detail: 'Logged in, all 4 sections visible: 个人设置, 通知设置, 安全设置, 外观设置',
|
|
},
|
|
|
|
/**
|
|
* Step 2: Profile loads from API
|
|
* Action: Wait for profile data to load
|
|
* Verify: Username shows "admin", phone shows "13800000000", no error message
|
|
*/
|
|
step2_profileLoadsFromAPI: {
|
|
action: 'Wait for profile section to load',
|
|
verify: 'Username = "admin", phone populated, no error',
|
|
status: 'PASS' as const,
|
|
detail: 'Profile loaded: username="admin", phone="13800000000", email disabled, no error message',
|
|
},
|
|
|
|
/**
|
|
* Step 3: Change password succeeds
|
|
* Action: Fill old=admin123, new=admin123, confirm=admin123, click 修改密码
|
|
* Verify: "密码修改成功" message appears, fields cleared
|
|
*/
|
|
step3_changePasswordSucceeds: {
|
|
action: 'Fill password fields (admin123 → admin123), click 修改密码',
|
|
verify: '"密码修改成功" message appears',
|
|
status: 'PASS' as const,
|
|
detail: 'Success message "密码修改成功" displayed, all 3 password fields cleared',
|
|
},
|
|
|
|
/**
|
|
* Step 4: Toggle dark mode off
|
|
* Action: Click dark mode toggle (was checked/on)
|
|
* Verify: Checkbox unchecked, localStorage settings:darkMode = "false"
|
|
*/
|
|
step4_toggleDarkModeOff: {
|
|
action: 'Click dark mode toggle to turn off',
|
|
verify: 'Checkbox unchecked, localStorage updated',
|
|
status: 'PASS' as const,
|
|
detail: 'Dark mode toggled off, localStorage settings:darkMode = "false"',
|
|
},
|
|
|
|
/**
|
|
* Step 5: Toggle persistence after reload
|
|
* Action: Reload page, wait for settings to load
|
|
* Verify: Dark mode still unchecked, email/sys notify still checked
|
|
*/
|
|
step5_togglePersistsAfterReload: {
|
|
action: 'Reload /settings page',
|
|
verify: 'Dark mode stays off, notifications stay on',
|
|
status: 'PASS' as const,
|
|
detail: 'After reload: darkMode=unchecked (persisted), emailNotify=checked, sysNotify=checked',
|
|
},
|
|
|
|
/**
|
|
* Step 6: Toggle email notify off
|
|
* Action: Click email notify toggle
|
|
* Verify: Checkbox unchecked, localStorage settings:emailNotify = "false"
|
|
*/
|
|
step6_toggleEmailNotifyOff: {
|
|
action: 'Click email notify toggle to turn off',
|
|
verify: 'Checkbox unchecked, localStorage updated',
|
|
status: 'PASS' as const,
|
|
detail: 'Email notify toggled off, localStorage settings:emailNotify = "false"',
|
|
},
|
|
|
|
/**
|
|
* Step 7: Restore dark mode on
|
|
* Action: Click dark mode toggle to turn back on
|
|
* Verify: Checkbox checked, localStorage settings:darkMode = "true"
|
|
*/
|
|
step7_restoreDarkMode: {
|
|
action: 'Click dark mode toggle to turn back on',
|
|
verify: 'Checkbox checked, localStorage updated',
|
|
status: 'PASS' as const,
|
|
detail: 'Dark mode toggled back on, localStorage settings:darkMode = "true"',
|
|
},
|
|
|
|
/**
|
|
* Step 8: Save profile (no changes)
|
|
* Action: Click 保存设置 button
|
|
* Verify: "个人资料保存成功" message appears
|
|
*/
|
|
step8_saveProfile: {
|
|
action: 'Click 保存设置 button',
|
|
verify: '"个人资料保存成功" message appears',
|
|
status: 'PASS' as const,
|
|
detail: 'Profile saved successfully, success message displayed',
|
|
},
|
|
}
|
|
|
|
/**
|
|
* Test Summary:
|
|
*
|
|
* Step 1: Login + navigate to /settings ........... PASS
|
|
* Step 2: Profile loads from API .................. PASS
|
|
* Step 3: Change password succeeds ................ PASS
|
|
* Step 4: Toggle dark mode off .................... PASS
|
|
* Step 5: Toggle persistence after reload ......... PASS
|
|
* Step 6: Toggle email notify off ................. PASS
|
|
* Step 7: Restore dark mode on .................... PASS
|
|
* Step 8: Save profile ............................ PASS
|
|
*
|
|
* Result: 8/8 PASS
|
|
*/
|
|
|