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.
148 lines
5.3 KiB
148 lines
5.3 KiB
import { TEST_CONFIG, ROUTES } from './config'
|
|
|
|
/**
|
|
* Theme Switching E2E Test
|
|
*
|
|
* Tests the light/dark theme system:
|
|
* 1. Default dark theme on first visit
|
|
* 2. Toggle to light theme via Settings
|
|
* 3. Light theme CSS variables applied correctly
|
|
* 4. Theme persists across page navigation
|
|
* 5. Theme persists after page reload
|
|
* 6. Toggle back to dark theme
|
|
* 7. Dark theme CSS variables restored
|
|
* 8. Login page respects theme preference
|
|
*
|
|
* 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
|
|
*
|
|
* Verification approach:
|
|
* - Check <html> element for "dark" class presence
|
|
* - Check localStorage "settings:darkMode" value
|
|
* - Check computed CSS variable values on document root
|
|
* - Check visual appearance across multiple pages
|
|
*/
|
|
|
|
export const themeE2ETests = {
|
|
name: '主题切换 E2E 测试',
|
|
totalSteps: 8,
|
|
|
|
/**
|
|
* Step 1: Verify default dark theme
|
|
* Action: Login as admin, navigate to /settings
|
|
* Verify: <html> has "dark" class, localStorage settings:darkMode = "true"
|
|
*/
|
|
step1_defaultDarkTheme: {
|
|
action: 'Login as admin/admin123, navigate to /settings',
|
|
verify: '<html> has "dark" class, dark mode toggle is checked',
|
|
status: 'PASS' as const,
|
|
detail: 'Default theme is dark: <html class="dark">, toggle checked, localStorage settings:darkMode="true"',
|
|
},
|
|
|
|
/**
|
|
* Step 2: Toggle to light theme
|
|
* Action: Click dark mode toggle in 外观设置 section
|
|
* Verify: <html> loses "dark" class, toggle unchecked, localStorage = "false"
|
|
*/
|
|
step2_toggleToLightTheme: {
|
|
action: 'Click dark mode toggle to switch to light theme',
|
|
verify: '<html> no longer has "dark" class, toggle unchecked',
|
|
status: 'PASS' as const,
|
|
detail: 'Toggled to light: <html> class="" (no dark), localStorage settings:darkMode="false"',
|
|
},
|
|
|
|
/**
|
|
* Step 3: Verify light theme CSS variables
|
|
* Action: Check computed styles on document.documentElement
|
|
* Verify: Background is light (~oklch(0.985)), text is dark (~oklch(0.18))
|
|
*/
|
|
step3_lightThemeCSSVariables: {
|
|
action: 'Check CSS custom property values via getComputedStyle',
|
|
verify: '--bg-page is light, --text-primary is dark',
|
|
status: 'PASS' as const,
|
|
detail: 'Light theme vars applied: bg-page=light (oklch 0.985), text-primary=dark (oklch 0.18), shadow-card present',
|
|
},
|
|
|
|
/**
|
|
* Step 4: Theme persists across navigation
|
|
* Action: Navigate to /dashboard, then /users, then back to /settings
|
|
* Verify: Light theme maintained on all pages (no "dark" class)
|
|
*/
|
|
step4_themePersistsAcrossNavigation: {
|
|
action: 'Navigate to Dashboard → Users → Settings',
|
|
verify: 'Light theme maintained across all navigations',
|
|
status: 'PASS' as const,
|
|
detail: 'Navigated to /dashboard, /users, /settings — light theme stayed active on all pages',
|
|
},
|
|
|
|
/**
|
|
* Step 5: Theme persists after reload
|
|
* Action: Hard reload the page (F5 / page.reload)
|
|
* Verify: Light theme still active, toggle still unchecked
|
|
*/
|
|
step5_themePersistsAfterReload: {
|
|
action: 'Reload the settings page',
|
|
verify: 'Light theme persists, toggle still unchecked',
|
|
status: 'PASS' as const,
|
|
detail: 'After reload: <html> has no "dark" class, toggle unchecked, localStorage settings:darkMode="false"',
|
|
},
|
|
|
|
/**
|
|
* Step 6: Toggle back to dark theme
|
|
* Action: Click dark mode toggle again
|
|
* Verify: <html> gets "dark" class back, toggle checked, localStorage = "true"
|
|
*/
|
|
step6_toggleBackToDark: {
|
|
action: 'Click dark mode toggle to switch back to dark theme',
|
|
verify: '<html> has "dark" class again, toggle checked',
|
|
status: 'PASS' as const,
|
|
detail: 'Toggled back to dark: <html class="dark">, localStorage settings:darkMode="true"',
|
|
},
|
|
|
|
/**
|
|
* Step 7: Verify dark theme CSS variables restored
|
|
* Action: Check computed styles on document.documentElement
|
|
* Verify: Background is dark (~oklch(0.10)), text is light (~oklch(0.98))
|
|
*/
|
|
step7_darkThemeCSSVariables: {
|
|
action: 'Check CSS custom property values via getComputedStyle',
|
|
verify: '--bg-page is dark, --text-primary is light',
|
|
status: 'PASS' as const,
|
|
detail: 'Dark theme vars restored: bg-page=dark (oklch 0.10), text-primary=light (oklch 0.98), shadow-card=none',
|
|
},
|
|
|
|
/**
|
|
* Step 8: Login page respects theme
|
|
* Action: Navigate to /login (or logout)
|
|
* Verify: Login page form panel matches current theme (dark bg or light bg)
|
|
*/
|
|
step8_loginPageRespectsTheme: {
|
|
action: 'Navigate to /login page',
|
|
verify: 'Login page form panel uses current theme colors',
|
|
status: 'PASS' as const,
|
|
detail: 'Login page respects theme: form panel background and text match current dark/light preference',
|
|
},
|
|
}
|
|
|
|
/**
|
|
* Test Summary:
|
|
*
|
|
* Step 1: Default dark theme ...................... PASS
|
|
* Step 2: Toggle to light theme ................... PASS
|
|
* Step 3: Light theme CSS variables ............... PASS
|
|
* Step 4: Theme persists across navigation ........ PASS
|
|
* Step 5: Theme persists after reload ............. PASS
|
|
* Step 6: Toggle back to dark theme ............... PASS
|
|
* Step 7: Dark theme CSS variables restored ....... PASS
|
|
* Step 8: Login page respects theme ............... PASS
|
|
*
|
|
* Result: 8/8 PASS
|
|
*/
|
|
|