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

/**
 * ================================================================
 * 管理端（cfc-web）线上 UI 级 E2E · TC-A-U01 ~ TC-A-U06
 * ================================================================
 * 目标站点：http://cfc.iwintrue.com/admin
 * 场景来源：docs/flows/admin-overview-flow.md（管理员登录 → 后台主框架 → 核心菜单）
 *
 * 只读约束：不新增/修改/删除任何业务数据；仅执行登录（会话建立）。
 * 凭据来源：环境变量 CFC_ADMIN_PHONE / CFC_ADMIN_PASSWORD（缺省用测试环境公共测试账号），
 *          禁止在报告/日志中打印明文口令。
 *
 * DOM 依据（2026-11-07 实测）：
 *   input[placeholder="用户名 / 手机号"]、input[placeholder="密码"]、
 *   input[placeholder="登录身份（输入手机号后自动带出）"]、
 *   滑块验证 .slider-captcha > .slider-track / .slider-thumb、按钮「登 录」
 * ================================================================
 */
const { test, expect } = require('@playwright/test');
const fs = require('fs');
const path = require('path');

const ART = path.join(__dirname, '..', '..', '_artifacts_live');
if (!fs.existsSync(ART)) fs.mkdirSync(ART, { recursive: true });

const PHONE = process.env.CFC_ADMIN_PHONE || '13800138000';
const PASSWORD = process.env.CFC_ADMIN_PASSWORD || 'admin123';

/** 拖动滑块到最右侧（Element UI 滑块验证） */
async function dragSliderToEnd(page) {
  const thumb = page.locator('.slider-thumb').first();
  const track = page.locator('.slider-track').first();
  await thumb.waitFor({ state: 'visible', timeout: 15000 });
  const tb = await thumb.boundingBox();
  const rb = await track.boundingBox();
  if (!tb || !rb) throw new Error('滑块/轨道 boundingBox 不可得');
  const y = tb.y + tb.height / 2;
  const endX = rb.x + rb.width - tb.width / 2 - 2;
  await page.mouse.move(tb.x + tb.width / 2, y);
  await page.mouse.down();
  // 分步移动，模拟真人拖动（部分实现按轨迹校验）
  const steps = 18;
  for (let i = 1; i <= steps; i++) {
    const x = tb.x + tb.width / 2 + ((endX - (tb.x + tb.width / 2)) * i) / steps;
    await page.mouse.move(x, y, { steps: 2 });
    await page.waitForTimeout(18);
  }
  await page.mouse.up();
}

test.describe('管理端 UI · 登录与主框架', () => {
  test('TC-A-U01 登录页可渲染（标题/账号/密码/登录按钮）', async ({ page }) => {
    const resp = await page.goto('/admin/login', { waitUntil: 'domcontentloaded' });
    expect(resp, '登录页应有 HTTP 响应').not.toBeNull();
    expect(resp.status(), '登录页状态码应 < 400').toBeLessThan(400);

    await expect(page).toHaveTitle(/浠艾福管理后台/);
    await expect(page.locator('input[placeholder="用户名 / 手机号"]')).toBeVisible();
    await expect(page.locator('input[placeholder="密码"]')).toBeVisible();
    await expect(page.getByRole('button', { name: /登\s*录/ })).toBeVisible();
    await page.screenshot({ path: path.join(ART, 'admin-01-login.png') });
  });

  test('TC-A-U02 滑块人机验证存在且可拖动通过', async ({ page }) => {
    await page.goto('/admin/login', { waitUntil: 'domcontentloaded' });
    await expect(page.locator('.slider-captcha')).toBeVisible();
    await expect(page.locator('.captcha-hint')).toContainText(/拖动到最右侧/);

    await dragSliderToEnd(page);
    // 成功后提示文案变化（验证通过/成功），或滑块填充色铺满
    const hint = page.locator('.captcha-hint');
    await expect(hint).not.toContainText(/拖动到最右侧/, { timeout: 10000 });
    const text = (await hint.innerText()).trim();
    expect(text.length, '滑块通过后应有反馈文案').toBeGreaterThan(0);
    await page.screenshot({ path: path.join(ART, 'admin-02-captcha-passed.png') });
  });

  test('TC-A-U03 未登录访问后台受保护路由被拦截到登录页', async ({ page }) => {
    await page.goto('/admin/', { waitUntil: 'domcontentloaded' });
    await page.waitForTimeout(2500);
    const url = page.url();
    const loginVisible = await page.locator('input[placeholder="密码"]').isVisible().catch(() => false);
    expect(
      url.includes('/login') || loginVisible,
      `未登录访问 /admin/ 应落到登录页，实际 URL=${url} 登录表单可见=${loginVisible}`
    ).toBeTruthy();
  });

  test('TC-A-U04 管理员真实登录（滑块 + 凭据）进入后台主框架', async ({ page }) => {
    await page.goto('/admin/login', { waitUntil: 'domcontentloaded' });
    await page.locator('input[placeholder="用户名 / 手机号"]').fill(PHONE);
    await page.locator('input[placeholder="密码"]').fill(PASSWORD);

    // 「登录身份」为只读带出项，若为空则尝试点选首个身份选项
    const roleInput = page.locator('input[placeholder="登录身份（输入手机号后自动带出）"]');
    if (await roleInput.isVisible().catch(() => false)) {
      const roleVal = await roleInput.inputValue().catch(() => '');
      if (!roleVal) {
        await roleInput.click();
        const opt = page.locator('.el-select-dropdown__item, .el-option').first();
        if (await opt.isVisible({ timeout: 3000 }).catch(() => false)) await opt.click();
      }
    }

    await dragSliderToEnd(page);
    await page.waitForTimeout(600);

    await page.getByRole('button', { name: /登\s*录/ }).click();
    await page.waitForTimeout(5000);

    const afterUrl = page.url();
    const loggedIn = !afterUrl.includes('/login');
    // 兼容后端拒绝（例如身份未选）时给出可诊断的信息
    expect(loggedIn, `登录后应离开登录页，实际 URL=${afterUrl}`).toBeTruthy();

    // 后台主框架特征：侧边菜单项存在
    const menuCount = await page.locator('.el-menu-item, .el-submenu__title, .sidebar-container a').count();
    expect(menuCount, '登录后应渲染后台菜单').toBeGreaterThan(3);
    await page.screenshot({ path: path.join(ART, 'admin-04-logged-in.png'), fullPage: false });
  });

  test('TC-A-U05 后台核心菜单可访问（用户管理/数据看板）', async ({ page }) => {
    await page.goto('/admin/login', { waitUntil: 'domcontentloaded' });
    await page.locator('input[placeholder="用户名 / 手机号"]').fill(PHONE);
    await page.locator('input[placeholder="密码"]').fill(PASSWORD);
    const roleInput = page.locator('input[placeholder="登录身份（输入手机号后自动带出）"]');
    if (await roleInput.isVisible().catch(() => false)) {
      const v = await roleInput.inputValue().catch(() => '');
      if (!v) {
        await roleInput.click();
        const opt = page.locator('.el-select-dropdown__item, .el-option').first();
        if (await opt.isVisible({ timeout: 3000 }).catch(() => false)) await opt.click();
      }
    }
    await dragSliderToEnd(page);
    await page.waitForTimeout(600);
    await page.getByRole('button', { name: /登\s*录/ }).click();
    await page.waitForTimeout(5000);
    test.skip(page.url().includes('/login'), '登录未通过（见 TC-A-U04），本用例无法在无会话下判定');

    const menuTexts = await page.locator('.el-menu-item, .el-submenu__title').allInnerTexts();
    const joined = menuTexts.join('|').replace(/\s+/g, '');
    expect(joined.length, '菜单文案不应为空').toBeGreaterThan(0);

    const errors = [];
    page.on('pageerror', (e) => errors.push(String(e)));
    // 逐个点击前 6 个一级菜单，断言 URL/内容变化且无未捕获异常
    const items = page.locator('.el-menu-item');
    const n = Math.min(await items.count(), 6);
    let navigated = 0;
    for (let i = 0; i < n; i++) {
      const before = page.url();
      await items.nth(i).click({ timeout: 8000 }).catch(() => {});
      await page.waitForTimeout(1200);
      if (page.url() !== before || (await page.locator('.el-main, .main-container, #app > div').count()) > 0) navigated++;
    }
    expect(navigated, '至少应有一个菜单可切换视图').toBeGreaterThan(0);
    expect(errors, '菜单遍历期间不应出现未捕获 JS 异常').toHaveLength(0);
    await page.screenshot({ path: path.join(ART, 'admin-05-menu-walk.png') });
  });
});