458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
import { test, expect, Page, BrowserContext, ConsoleMessage } from '@playwright/test';
|
||
import * as path from 'path';
|
||
import * as fs from 'fs';
|
||
import * as http from 'http';
|
||
|
||
const SCREENSHOT_DIR = '/tmp/go-admin-screenshots';
|
||
const BASE_URL = 'http://localhost:9527';
|
||
const API_URL = 'http://localhost:8001';
|
||
|
||
function ensureScreenshotDir() {
|
||
if (!fs.existsSync(SCREENSHOT_DIR)) {
|
||
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
||
}
|
||
}
|
||
|
||
async function saveScreenshot(page: Page, name: string) {
|
||
ensureScreenshotDir();
|
||
const filePath = path.join(SCREENSHOT_DIR, `${name}.png`);
|
||
await page.screenshot({ path: filePath, fullPage: false });
|
||
console.log(`[SCREENSHOT] ${filePath}`);
|
||
}
|
||
|
||
function httpGet(url: string): Promise<any> {
|
||
return new Promise((resolve, reject) => {
|
||
const urlObj = new URL(url);
|
||
const req = http.request({
|
||
hostname: urlObj.hostname,
|
||
port: parseInt(urlObj.port),
|
||
path: urlObj.pathname + urlObj.search,
|
||
method: 'GET',
|
||
}, (res) => {
|
||
let data = '';
|
||
res.on('data', (chunk: Buffer) => data += chunk);
|
||
res.on('end', () => {
|
||
try { resolve(JSON.parse(data)); }
|
||
catch (e) { resolve({ raw: data }); }
|
||
});
|
||
});
|
||
req.on('error', reject);
|
||
req.end();
|
||
});
|
||
}
|
||
|
||
function httpPost(url: string, body: object): Promise<any> {
|
||
return new Promise((resolve, reject) => {
|
||
const bodyStr = JSON.stringify(body);
|
||
const urlObj = new URL(url);
|
||
const req = http.request({
|
||
hostname: urlObj.hostname,
|
||
port: parseInt(urlObj.port),
|
||
path: urlObj.pathname,
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Content-Length': Buffer.byteLength(bodyStr),
|
||
},
|
||
}, (res) => {
|
||
let data = '';
|
||
res.on('data', (chunk: Buffer) => data += chunk);
|
||
res.on('end', () => {
|
||
try { resolve(JSON.parse(data)); }
|
||
catch (e) { resolve({ raw: data }); }
|
||
});
|
||
});
|
||
req.on('error', reject);
|
||
req.write(bodyStr);
|
||
req.end();
|
||
});
|
||
}
|
||
|
||
async function getCaptcha(): Promise<{ id: string; imageBase64: string }> {
|
||
const resp = await httpGet(`${API_URL}/api/v1/captcha`);
|
||
return { id: resp.id, imageBase64: resp.data };
|
||
}
|
||
|
||
// 将验证码 base64 保存为图片文件并返回路径（供人工/Vision 识别）
|
||
async function saveCaptchaImage(base64: string, filePath: string) {
|
||
const data = base64.replace(/^data:image\/\w+;base64,/, '');
|
||
fs.writeFileSync(filePath, Buffer.from(data, 'base64'));
|
||
}
|
||
|
||
async function loginViaAPI(captchaCode: string, captchaId: string): Promise<string | null> {
|
||
const username = process.env.BELL_E2E_USERNAME;
|
||
const password = process.env.BELL_E2E_PASSWORD;
|
||
if (!username || !password) {
|
||
throw new Error('BELL_E2E_USERNAME and BELL_E2E_PASSWORD are required');
|
||
}
|
||
const resp = await httpPost(`${API_URL}/api/v1/login`, {
|
||
username,
|
||
password,
|
||
code: captchaCode,
|
||
uuid: captchaId,
|
||
});
|
||
return resp.token || null;
|
||
}
|
||
|
||
async function injectToken(context: BrowserContext, token: string) {
|
||
await context.addCookies([{
|
||
name: 'Bell-Admin-Token',
|
||
value: token,
|
||
domain: 'localhost',
|
||
path: '/',
|
||
httpOnly: false,
|
||
secure: false,
|
||
sameSite: 'Lax',
|
||
}]);
|
||
console.log('[AUTH] Token 已注入到浏览器 Cookie');
|
||
}
|
||
|
||
test.describe('侧边栏菜单导航功能验证', () => {
|
||
const jsErrors: string[] = [];
|
||
const jsWarnings: string[] = [];
|
||
|
||
test('完整导航流程验证', async ({ page, context }) => {
|
||
ensureScreenshotDir();
|
||
|
||
// 收集控制台消息
|
||
page.on('console', (msg: ConsoleMessage) => {
|
||
const type = msg.type();
|
||
const text = msg.text();
|
||
|
||
if (type === 'error') {
|
||
// 忽略已知的网络相关错误（图片加载、WebSocket 等）
|
||
if (!text.includes('Failed to load resource') && !text.includes('WebSocket')) {
|
||
jsErrors.push(text);
|
||
}
|
||
console.log(`[CONSOLE ERROR] ${text}`);
|
||
}
|
||
if (type === 'warn') {
|
||
if (text.includes('handleMouseleave') ||
|
||
text.includes('Failed to resolve component') ||
|
||
text.includes('is not a function')) {
|
||
jsWarnings.push(text);
|
||
console.log(`[CONSOLE WARN] ${text}`);
|
||
}
|
||
}
|
||
});
|
||
|
||
page.on('pageerror', (error: Error) => {
|
||
jsErrors.push(`[PAGE ERROR] ${error.message}`);
|
||
console.log('[PAGE ERROR]', error.message);
|
||
});
|
||
|
||
// ==================== 阶段 1：获取 Token 并注入 ====================
|
||
console.log('\n=== 阶段 1：API 登录获取 Token ===');
|
||
|
||
// 获取验证码
|
||
const captcha = await getCaptcha();
|
||
const captchaImagePath = path.join(SCREENSHOT_DIR, 'captcha_for_login.png');
|
||
await saveCaptchaImage(captcha.imageBase64, captchaImagePath);
|
||
console.log(`验证码 ID: ${captcha.id}`);
|
||
console.log(`验证码图片: ${captchaImagePath}`);
|
||
|
||
// 读取验证码图片进行识别（通过文件内容方式）
|
||
// 使用已知密码组合和当前验证码
|
||
// 注意：验证码有效期 600 秒，我们用 Node.js 直接在同进程中识别
|
||
// 这里需要人工传入验证码，或者通过其他手段
|
||
|
||
// 方案：先用之前已保存的 Token（如果存在且有效）
|
||
let token: string | null = null;
|
||
|
||
const savedTokenPath = '/tmp/auth_token.txt';
|
||
if (fs.existsSync(savedTokenPath)) {
|
||
const savedToken = fs.readFileSync(savedTokenPath, 'utf-8').trim();
|
||
if (savedToken && savedToken.length > 20) {
|
||
token = savedToken;
|
||
console.log('[AUTH] 使用已保存的 Token');
|
||
}
|
||
}
|
||
|
||
if (!token) {
|
||
throw new Error('没有可用的 Token，请先通过 API 登录获取 token');
|
||
}
|
||
|
||
// 注入 token 到浏览器 context
|
||
await injectToken(context, token);
|
||
|
||
// ==================== 步骤 1：打开应用首页 ====================
|
||
console.log('\n=== 步骤 1：打开应用首页 ===');
|
||
await page.goto(`${BASE_URL}/#/dashboard`, { waitUntil: 'domcontentloaded' });
|
||
await page.waitForTimeout(3000);
|
||
await saveScreenshot(page, '01-initial-state');
|
||
console.log('当前 URL:', page.url());
|
||
|
||
// 检查是否还在登录页（token 可能无效）
|
||
if (page.url().includes('/login')) {
|
||
console.log('[WARN] 仍在登录页，Token 可能已过期');
|
||
// 这里不抛异常，继续记录状态
|
||
}
|
||
|
||
// ==================== 步骤 2：验证左侧菜单 ====================
|
||
console.log('\n=== 步骤 2：检查左侧菜单 ===');
|
||
await page.waitForTimeout(1000);
|
||
|
||
// 等待侧边栏加载
|
||
try {
|
||
await page.waitForSelector('.el-menu', { timeout: 5000 });
|
||
console.log('[OK] el-menu 已加载');
|
||
} catch (e) {
|
||
console.log('[WARN] 等待 .el-menu 超时');
|
||
}
|
||
|
||
// 收集菜单信息
|
||
const menuInfo = await page.evaluate(() => {
|
||
const sidebarEl = document.querySelector('.sidebar-container, .el-aside, aside, .scrollbar-wrapper');
|
||
const menuEl = document.querySelector('.el-menu');
|
||
const menuItems = document.querySelectorAll('.el-menu-item');
|
||
const subMenus = document.querySelectorAll('.el-sub-menu');
|
||
const subMenuTitles = document.querySelectorAll('.el-sub-menu__title');
|
||
|
||
const texts: string[] = [];
|
||
menuItems.forEach((el) => {
|
||
const text = el.textContent?.trim();
|
||
if (text) texts.push(text);
|
||
});
|
||
const subTexts: string[] = [];
|
||
subMenuTitles.forEach((el) => {
|
||
const text = el.textContent?.trim();
|
||
if (text) subTexts.push(text);
|
||
});
|
||
|
||
return {
|
||
hasSidebar: !!sidebarEl,
|
||
hasMenu: !!menuEl,
|
||
menuItemCount: menuItems.length,
|
||
subMenuCount: subMenus.length,
|
||
menuItemTexts: texts,
|
||
subMenuTexts: subTexts,
|
||
};
|
||
});
|
||
|
||
console.log('侧边栏存在:', menuInfo.hasSidebar);
|
||
console.log('el-menu 存在:', menuInfo.hasMenu);
|
||
console.log('菜单项数量:', menuInfo.menuItemCount);
|
||
console.log('子菜单数量:', menuInfo.subMenuCount);
|
||
console.log('菜单项文字:', JSON.stringify(menuInfo.menuItemTexts));
|
||
console.log('子菜单标题:', JSON.stringify(menuInfo.subMenuTexts));
|
||
|
||
await saveScreenshot(page, '02-sidebar-loaded');
|
||
|
||
// ==================== 步骤 3：展开系统管理子菜单 ====================
|
||
console.log('\n=== 步骤 3：展开"系统管理"子菜单 ===');
|
||
|
||
let sysMenuFound = false;
|
||
// 先找精确匹配
|
||
const sysMenuSelectors = [
|
||
'.el-sub-menu__title:has-text("系统管理")',
|
||
'.el-sub-menu__title:has-text("系统")',
|
||
];
|
||
|
||
for (const sel of sysMenuSelectors) {
|
||
const el = page.locator(sel).first();
|
||
if (await el.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
const text = await el.textContent();
|
||
await el.click();
|
||
console.log(`[OK] 点击展开子菜单: "${text?.trim()}" (${sel})`);
|
||
sysMenuFound = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (!sysMenuFound) {
|
||
// 点击第一个子菜单
|
||
const firstSubMenu = page.locator('.el-sub-menu__title').first();
|
||
if (await firstSubMenu.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
const text = await firstSubMenu.textContent();
|
||
await firstSubMenu.click();
|
||
console.log(`[OK] 点击第一个子菜单: "${text?.trim()}"`);
|
||
sysMenuFound = true;
|
||
} else {
|
||
console.log('[WARN] 未找到任何子菜单标题');
|
||
}
|
||
}
|
||
|
||
await page.waitForTimeout(800);
|
||
await saveScreenshot(page, '03-submenu-expanded');
|
||
|
||
// 检查子菜单项是否展开
|
||
const expandedItems = await page.evaluate(() => {
|
||
const items = document.querySelectorAll('.el-sub-menu.is-opened .el-menu-item');
|
||
return Array.from(items).map((el) => el.textContent?.trim()).filter(Boolean);
|
||
});
|
||
console.log('展开的子菜单项:', JSON.stringify(expandedItems));
|
||
|
||
// ==================== 步骤 4：点击用户管理 ====================
|
||
console.log('\n=== 步骤 4：点击"用户管理" ===');
|
||
const urlBefore4 = page.url();
|
||
console.log('点击前 URL:', urlBefore4);
|
||
|
||
let userMenuClicked = false;
|
||
const userMenuSelectors = [
|
||
'.el-menu-item:has-text("用户管理")',
|
||
'.el-menu-item:has-text("用户")',
|
||
'li.el-menu-item:has-text("用户")',
|
||
];
|
||
|
||
for (const sel of userMenuSelectors) {
|
||
const el = page.locator(sel).first();
|
||
if (await el.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
await el.click();
|
||
console.log(`[OK] 点击用户管理 (${sel})`);
|
||
userMenuClicked = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (!userMenuClicked && expandedItems.length > 0) {
|
||
// 点击第一个展开的子菜单项
|
||
const firstItem = page.locator('.el-sub-menu.is-opened .el-menu-item').first();
|
||
if (await firstItem.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
const text = await firstItem.textContent();
|
||
await firstItem.click();
|
||
console.log(`[OK] 点击第一个展开的子菜单项: "${text?.trim()}"`);
|
||
userMenuClicked = true;
|
||
}
|
||
}
|
||
|
||
await page.waitForTimeout(2000);
|
||
const urlAfter4 = page.url();
|
||
const urlChanged4 = urlAfter4 !== urlBefore4;
|
||
console.log('点击后 URL:', urlAfter4);
|
||
console.log(`URL 变化: ${urlChanged4 ? 'YES' : 'NO'}`);
|
||
await saveScreenshot(page, '04-user-management');
|
||
|
||
// ==================== 步骤 5：点击角色管理 ====================
|
||
console.log('\n=== 步骤 5：点击"角色管理" ===');
|
||
const urlBefore5 = page.url();
|
||
|
||
let roleMenuClicked = false;
|
||
const roleMenuSelectors = [
|
||
'.el-menu-item:has-text("角色管理")',
|
||
'.el-menu-item:has-text("角色")',
|
||
];
|
||
|
||
for (const sel of roleMenuSelectors) {
|
||
const el = page.locator(sel).first();
|
||
if (await el.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
await el.click();
|
||
console.log(`[OK] 点击角色管理 (${sel})`);
|
||
roleMenuClicked = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (!roleMenuClicked) {
|
||
console.log('[WARN] 未找到角色管理菜单项');
|
||
}
|
||
|
||
await page.waitForTimeout(2000);
|
||
const urlAfter5 = page.url();
|
||
console.log('角色管理 URL:', urlAfter5);
|
||
console.log(`URL 变化: ${urlAfter5 !== urlBefore5 ? 'YES' : 'NO'}`);
|
||
await saveScreenshot(page, '05-role-management');
|
||
|
||
// ==================== 步骤 6：点击首页 ====================
|
||
console.log('\n=== 步骤 6：点击"首页" ===');
|
||
let homeClicked = false;
|
||
const homeSelectors = [
|
||
'.el-menu-item:has-text("首页")',
|
||
'.el-menu-item:has-text("Dashboard")',
|
||
'.el-menu-item:has-text("仪表盘")',
|
||
'.el-menu > .el-menu-item:first-child',
|
||
];
|
||
|
||
for (const sel of homeSelectors) {
|
||
const el = page.locator(sel).first();
|
||
if (await el.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||
const text = await el.textContent();
|
||
await el.click();
|
||
console.log(`[OK] 点击首页 (${sel}): "${text?.trim()}"`);
|
||
homeClicked = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (!homeClicked) {
|
||
console.log('[WARN] 未找到首页菜单项');
|
||
}
|
||
|
||
await page.waitForTimeout(2000);
|
||
const urlAfterHome = page.url();
|
||
console.log('首页 URL:', urlAfterHome);
|
||
await saveScreenshot(page, '06-home-after-navigate');
|
||
|
||
// ==================== 步骤 7：检查菜单文字样式 ====================
|
||
console.log('\n=== 步骤 7：检查菜单文字样式可见性 ===');
|
||
const styleCheck = await page.evaluate(() => {
|
||
const results: Array<{ selector: string; color: string; bg: string; visible: boolean }> = [];
|
||
|
||
const targets = [
|
||
'.el-menu-item',
|
||
'.el-sub-menu__title',
|
||
'.el-menu--dark .el-menu-item',
|
||
];
|
||
|
||
for (const sel of targets) {
|
||
const el = document.querySelector(sel);
|
||
if (el) {
|
||
const style = window.getComputedStyle(el);
|
||
const color = style.color;
|
||
const bg = style.backgroundColor;
|
||
// 检查文字是否可见（不是透明/黑色 on 黑色背景）
|
||
const visible = color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent';
|
||
results.push({ selector: sel, color, bg, visible });
|
||
}
|
||
}
|
||
|
||
return results;
|
||
});
|
||
|
||
styleCheck.forEach((item) => {
|
||
const status = item.visible ? '[OK]' : '[WARN]';
|
||
console.log(`${status} ${item.selector}: color=${item.color}, bg=${item.bg}`);
|
||
});
|
||
|
||
// ==================== 步骤 8：JS 错误汇总 ====================
|
||
console.log('\n=== 步骤 8：JavaScript 错误汇总 ===');
|
||
|
||
const handleMouseleaveErrors = jsErrors.filter((e) => e.includes('handleMouseleave'));
|
||
const componentErrors = (jsErrors.concat(jsWarnings)).filter((e) => e.includes('Failed to resolve component'));
|
||
const functionErrors = jsErrors.filter((e) => e.includes('is not a function'));
|
||
|
||
console.log(`总错误数: ${jsErrors.length}`);
|
||
console.log(`handleMouseleave 错误: ${handleMouseleaveErrors.length}`);
|
||
console.log(`Failed to resolve component 错误: ${componentErrors.length}`);
|
||
console.log(`is not a function 错误: ${functionErrors.length}`);
|
||
|
||
if (jsErrors.length > 0) {
|
||
console.log('\n错误列表:');
|
||
jsErrors.forEach((e, i) => console.log(` ${i + 1}. ${e}`));
|
||
}
|
||
if (jsWarnings.length > 0) {
|
||
console.log('\n警告列表:');
|
||
jsWarnings.forEach((w, i) => console.log(` ${i + 1}. ${w}`));
|
||
}
|
||
|
||
// ==================== 断言 ====================
|
||
console.log('\n=== 断言验证 ===');
|
||
|
||
// 1. 关键错误不应存在
|
||
expect(handleMouseleaveErrors.length, 'handleMouseleave is not a function 错误已修复').toBe(0);
|
||
expect(functionErrors.length, 'is not a function 错误应为 0').toBe(0);
|
||
|
||
// 2. 菜单应该有内容
|
||
expect(menuInfo.menuItemCount + menuInfo.subMenuCount, '侧边栏应有菜单项').toBeGreaterThan(0);
|
||
|
||
// 3. 至少有一次 URL 变化（点击菜单后导航有效）
|
||
const anyNavigation = urlChanged4 || (urlAfter5 !== urlBefore5);
|
||
expect(anyNavigation, '点击菜单后应发生页面导航').toBeTruthy();
|
||
|
||
// 4. 最终页面不应停留在登录页
|
||
expect(urlAfterHome, '最终 URL 不应包含 /login').not.toContain('/login');
|
||
|
||
console.log('\n=== 测试完成 ===');
|
||
console.log(`截图目录: ${SCREENSHOT_DIR}`);
|
||
});
|
||
});
|