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.
182 lines
7.9 KiB
182 lines
7.9 KiB
import { TEST_CONFIG, ROUTES } from './config'
|
|
|
|
/**
|
|
* 文件管理 E2E 测试（Playwright MCP 交互式）
|
|
*
|
|
* Tests the file management module:
|
|
* 1. Super admin login
|
|
* 2. Navigate to file management page
|
|
* 3. Verify page initial state (upload area, filters, empty table)
|
|
* 4. Upload file via "选择文件" button
|
|
* 5. Edit file metadata (rename, change category)
|
|
* 6. Preview file (shows details + download link)
|
|
* 7. Delete file with confirmation dialog
|
|
* 8. Verify file list is empty after delete
|
|
*
|
|
* Prerequisites:
|
|
* - Backend running at localhost:8888 (with file storage configured)
|
|
* - 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 /files
|
|
* 4. Execute each test step in order
|
|
*
|
|
* Bug fixes verified:
|
|
* - "选择文件" button was unresponsive due to hidden input using display:none
|
|
* Fix: Changed to absolute positioning with opacity:0, added type="button"
|
|
* - Login page did not show error for wrong password
|
|
* Fix: AuthContext.login() now throws when response.success is false
|
|
*/
|
|
|
|
export const fileManagementE2ETests = {
|
|
name: '文件管理 E2E 测试',
|
|
totalSteps: 8,
|
|
|
|
/**
|
|
* Step 1: Super admin login
|
|
* Action: Navigate to /login, enter admin/admin123, submit
|
|
* Verify: Redirected to authenticated page, sidebar shows admin
|
|
*/
|
|
step1_login: {
|
|
action: 'Navigate to /login, fill admin/admin123, click login button',
|
|
verify: 'Redirected to authenticated page, sidebar shows admin with super_admin role',
|
|
status: 'PASS' as const,
|
|
detail: 'Logged in as admin, sidebar shows "admin" with role "super_admin"',
|
|
},
|
|
|
|
/**
|
|
* Step 2: Navigate to file management page
|
|
* Action: Click "文件管理" in sidebar
|
|
* Verify: URL = /files, file management page loaded
|
|
*/
|
|
step2_navigateToFiles: {
|
|
action: 'Click "文件管理" link in sidebar',
|
|
verify: 'URL is /files, page title shows "文件管理"',
|
|
status: 'PASS' as const,
|
|
detail: 'Navigated to /files, page heading "文件管理" and subtitle "上传与管理系统文件" visible',
|
|
},
|
|
|
|
/**
|
|
* Step 3: Verify page initial state
|
|
* Action: Snapshot the file management page
|
|
* Verify: Upload area, filters, table with correct columns, empty state
|
|
*/
|
|
step3_verifyInitialState: {
|
|
action: 'Capture page snapshot',
|
|
verify: 'Upload area with drag-drop zone, category selector, "公开" checkbox, "选择文件" button, search input, category/type filters, table columns: 文件名/分类/大小/类型/状态/上传时间/操作, empty table shows "暂无文件"',
|
|
status: 'PASS' as const,
|
|
detail: 'All UI elements present: upload zone, category combobox (默认/头像/文档/媒体), 公开 checkbox, 选择文件 button, search textbox, category filter (全部分类/默认/头像/文档/媒体), type filter (全部类型/图片/视频/PDF), table with 7 columns, "暂无文件" shown in empty state',
|
|
},
|
|
|
|
/**
|
|
* Step 4: Upload file via "选择文件" button
|
|
* Action: Click "选择文件", select test-upload.txt via file chooser
|
|
* Verify: File appears in table with correct metadata
|
|
*
|
|
* Bug fix verified: Only 1 file chooser opens (was 4 before fix)
|
|
* Fix: input changed from className="hidden" to absolute positioning with opacity:0
|
|
* Button added type="button" to prevent form submission
|
|
*/
|
|
step4_uploadFile: {
|
|
action: 'Click "选择文件" button, select test-upload.txt file',
|
|
verify: 'File chooser opens (exactly 1), file uploaded, appears in table',
|
|
status: 'PASS' as const,
|
|
detail: 'Clicked "选择文件" → 1 file chooser opened (bug fixed). Uploaded test-upload.txt (44 B). Table shows: 文件列表 (1), row: test-upload.txt | default | 44 B | plain | 私有 | 2026/2/14',
|
|
},
|
|
|
|
/**
|
|
* Step 5: Edit file metadata
|
|
* Action: Click "编辑" button, change name and category, save
|
|
* Verify: Modal opens with file info, changes saved, table updated
|
|
*/
|
|
step5_editFile: {
|
|
action: 'Click "编辑" button → change filename to "test-upload-edited.txt", category to "文档" → click "保存"',
|
|
verify: 'Edit modal opens with current file info, changes saved, table row updated',
|
|
status: 'PASS' as const,
|
|
detail: 'Edit modal: title "编辑文件信息", textbox "文件名"=test-upload.txt, combobox "分类"=默认, checkbox "公开文件". Changed name to "test-upload-edited.txt", category to "文档". After save: table shows test-upload-edited.txt | document | 44 B | plain | 私有',
|
|
},
|
|
|
|
/**
|
|
* Step 6: Preview file
|
|
* Action: Click "预览" button on the file row
|
|
* Verify: Preview modal shows file details and download link
|
|
*/
|
|
step6_previewFile: {
|
|
action: 'Click "预览" button on test-upload-edited.txt row',
|
|
verify: 'Preview modal shows file icon, name, size, type, download link, and metadata grid',
|
|
status: 'PASS' as const,
|
|
detail: 'Preview modal: title "test-upload-edited.txt", file icon, name, "44 B · text/plain", "下载文件" link with token URL, metadata grid: 大小=44 B, 类型=text/plain, 分类=document, 上传=2026-02-14 17:06:15',
|
|
},
|
|
|
|
/**
|
|
* Step 7: Delete file with confirmation
|
|
* Action: Click "删除" button, confirm in dialog
|
|
* Verify: Confirmation dialog appears, file removed after confirm
|
|
*/
|
|
step7_deleteFile: {
|
|
action: 'Click "删除" button → confirm in deletion dialog',
|
|
verify: 'Confirmation dialog shows file name and warning, file removed after confirm',
|
|
status: 'PASS' as const,
|
|
detail: 'Delete dialog: title "确认删除", message "确定要删除文件 test-upload-edited.txt 吗？", warning "文件将从存储中删除，此操作不可恢复。", buttons "取消"/"确认删除". After confirm: file removed',
|
|
},
|
|
|
|
/**
|
|
* Step 8: Verify empty state after delete
|
|
* Action: Check table state after deletion
|
|
* Verify: Table shows "暂无文件", file count is 0
|
|
*/
|
|
step8_verifyEmptyAfterDelete: {
|
|
action: 'Verify table state after file deletion',
|
|
verify: 'File list count is 0, table shows "暂无文件"',
|
|
status: 'PASS' as const,
|
|
detail: 'After deletion: heading shows "文件列表 (0)", table body shows single row "暂无文件"',
|
|
},
|
|
}
|
|
|
|
/**
|
|
* Login Error Display E2E Test (bonus - tested alongside file management)
|
|
*
|
|
* Bug: Login page did not show error message when entering wrong password.
|
|
* Root cause: AuthContext.login() didn't throw when response.success was false.
|
|
* Fix: Added else branch to throw new Error(response.message || '登录失败')
|
|
*
|
|
* Verification:
|
|
* - Entered admin / wrongpassword on login page
|
|
* - Red alert banner displayed: "用户不存在或密码错误"
|
|
* - User stays on login page (not redirected)
|
|
*
|
|
* Status: PASS
|
|
*/
|
|
export const loginErrorDisplayTest = {
|
|
name: '登录错误提示测试',
|
|
status: 'PASS' as const,
|
|
detail: 'Entered wrong password "wrongpassword" → red alert with role="alert" shows "用户不存在或密码错误", user stays on /login page',
|
|
}
|
|
|
|
/**
|
|
* Test Summary:
|
|
*
|
|
* File Management:
|
|
* Step 1: Super admin login ......................... PASS
|
|
* Step 2: Navigate to file management ............... PASS
|
|
* Step 3: Verify page initial state ................. PASS
|
|
* Step 4: Upload file via button (bug fix) .......... PASS
|
|
* Step 5: Edit file metadata ........................ PASS
|
|
* Step 6: Preview file .............................. PASS
|
|
* Step 7: Delete file with confirmation ............. PASS
|
|
* Step 8: Verify empty state after delete ........... PASS
|
|
*
|
|
* Login Error Display (bonus):
|
|
* Wrong password error message ...................... PASS
|
|
*
|
|
* Result: 8/8 PASS (+ 1 bonus PASS)
|
|
*
|
|
* Bug Fixes Verified:
|
|
* 1. "选择文件" button unresponsive → Fixed: hidden input changed from display:none
|
|
* to absolute+opacity:0, Button added type="button" (FileManagementPage.tsx)
|
|
* 2. Login wrong password no error → Fixed: AuthContext.login() throws on
|
|
* response.success=false (AuthContext.tsx)
|
|
*/
|
|
|