/** * ================================================================ * 场景:后台管理全流程 E2E 测试 * ================================================================ * 目标:管理员通过 cfc-web Element UI 管理后台进行用户管理、数据看板等 * 部署地址:http://cfc.iwintrue.com * * 流程步骤: * 1. 管理员查看用户列表 * 2. 管理员查看数据看板 * 3. 能量规则管理 * 4. 系统健康检查 * * 前置条件:已登录管理员账号 * ================================================================ */ const { test, expect } = require('@playwright/test'); /** * 确保已登录到管理后台 * 尝试多种可能的登录表单选择器,加长超时处理 Vue SPA 渲染 */ async function ensureLoggedIn(page) { // 先检查是否已登录(侧边栏可见) const sidebar = page.locator('.sidebar-container, .el-menu-vertical-demo, .el-aside, #app > div'); try { await sidebar.waitFor({ state: 'visible', timeout: 5000 }); return; } catch { // 未登录,继续登录流程 } // 跳转到登录页,等待完整加载 await page.goto('/admin/login', { waitUntil: 'networkidle', timeout: 30000 }); // 额外等待 Vue 渲染完成 await page.waitForTimeout(2000); // 截图保留现场(调试用) await page.screenshot({ path: 'test-artifacts/login-page.png' }).catch(() => {}); // 尝试多种输入框选择器(Element UI 版本差异) const inputSelectors = [ '.el-input__inner', 'input[type="text"]', 'input[placeholder*="账号"]', 'input[placeholder*="用户名"]', 'input[name="username"]', '.el-input input', ]; let inputFound = false; for (const sel of inputSelectors) { try { const el = page.locator(sel).first(); if (await el.isVisible({ timeout: 3000 })) { await el.fill('admin'); inputFound = true; break; } } catch { // 继续尝试下一个选择器 } } if (!inputFound) { // 兜底:直接填写可见的第一个输入框 const allInputs = page.locator('input'); const count = await allInputs.count(); if (count > 0) { await allInputs.first().fill('admin'); if (count > 1) { await allInputs.nth(1).fill('admin123'); } } } // 填写密码 const pwdInputs = page.locator('input[type="password"]'); if (await pwdInputs.count() > 0) { await pwdInputs.first().fill('admin123'); } else { // 尝试按位置填写第二个输入框 const allInputs = page.locator('input'); const count = await allInputs.count(); if (count >= 2) { await allInputs.nth(1).fill('admin123'); } } // 尝试点击登录按钮 const btnSelectors = [ '.el-button--primary', 'button[type="submit"]', '.login-btn', '.el-button:has-text("登录")', '.el-button:has-text("登 录")', ]; for (const sel of btnSelectors) { try { const btn = page.locator(sel).first(); if (await btn.isVisible({ timeout: 2000 })) { await btn.click(); break; } } catch { // 继续尝试 } } // 等待登录完成(dashboard 或侧边栏出现) try { await page.waitForURL(/\/dashboard|\/admin\//, { timeout: 20000 }); } catch { // 可能 URL 没变但页面已登录,等待侧边栏出现 await page.waitForSelector('.sidebar-container, .el-menu, .el-aside', { timeout: 15000 }); } } test.describe('【场景流程】后台管理全流程', () => { test('[场景1] 管理员查看用户列表 - 期望返回分页列表', async ({ page }) => { await ensureLoggedIn(page); await page.goto('/users', { waitUntil: 'networkidle' }); await page.waitForTimeout(2000); await page.screenshot({ path: 'test-artifacts/admin-users.png' }).catch(() => {}); // 尝试多种表格选择器 const table = page.locator('.el-table, .el-table__body, table, .el-table__header'); await expect(table.first()).toBeVisible({ timeout: 15000 }); }); test('[场景2] 管理员查看数据看板 - 期望返回统计数据', async ({ page }) => { await ensureLoggedIn(page); await page.goto('/dashboard', { waitUntil: 'networkidle' }); await page.waitForTimeout(2000); await page.screenshot({ path: 'test-artifacts/admin-dashboard.png' }).catch(() => {}); // 检查是否有统计卡片或内容区域 const content = page.locator('.el-card, .dashboard-container, .app-container, .el-main'); await expect(content.first()).toBeVisible({ timeout: 15000 }); }); test('[场景3] 管理员查看能量规则管理', async ({ page }) => { await ensureLoggedIn(page); await page.goto('/energy-rule', { waitUntil: 'networkidle' }); await page.waitForTimeout(2000); await page.screenshot({ path: 'test-artifacts/admin-energy-rule.png' }).catch(() => {}); // 检查是否有表格或内容 const table = page.locator('.el-table, .el-form, .app-container'); await expect(table.first()).toBeVisible({ timeout: 15000 }); }); test('[场景4] 系统健康检查 - 期望返回健康状态', async ({ page }) => { await ensureLoggedIn(page); await page.goto('/sys-config', { waitUntil: 'networkidle' }); await page.waitForTimeout(2000); await page.screenshot({ path: 'test-artifacts/admin-sys-config.png' }).catch(() => {}); // 检查配置页面是否加载 const content = page.locator('.el-card, .app-container, .el-form, .sys-config-page'); await expect(content.first()).toBeVisible({ timeout: 15000 }); }); });