cfc/tests/e2e/admin-panel.spec.js

/**
 * ================================================================
 * 场景：后台管理全流程 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 });
  });

});