novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增e2e测试脚本，修复部分问题

Browse Source
This commit was merged in pull request #51.
This commit is contained in:
liwentao
2026-07-22 20:00:13 +08:00
parent 53d1ce6fb2
commit 4c07ec5455
105 changed files with 21700 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-web/e2e/journeys/full-flow-admin-ui.spec.ts
+270
View File
@@ -0,0 +1,270 @@
/**
* 全流程端到端测试 - 后台管理系统 UI 层
*
* 使用 Playwright 驱动浏览器操作 Element Plus 后台管理页面：
* 1. 利用auth.setup已有的登录态直接进入
* 2. 导航到团课管理
* 3. 创建新团课（无封面、张教练负责）
* 4. 验证创建成功
* 5. 保存课程ID供后续流程使用
*/
import { test, expect } from '@playwright/test';
import { GroupCourseManagementPage } from '../pages/GroupCourseManagementPage';
import { LoginPage } from '../pages/LoginPage';
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// 共享状态文件路径（供后续API测试读取）
const STATE_FILE = path.resolve(__dirname, '../../..', 'test-context-ui.json');
test.describe.serial('全流程 - 后台管理UI', () => {
let coursePage: GroupCourseManagementPage;
const timestamp = Date.now();
const courseName = `UI全流程_${timestamp.toString(36)}`;
const startDate = new Date(Date.now() + 5 * 60 * 60 * 1000);
const endDate = new Date(startDate.getTime() + 60 * 60 * 1000);
const pad = (n: number) => String(n).padStart(2, '0');
const startTimeStr = `${startDate.getFullYear()}-${pad(startDate.getMonth()+1)}-${pad(startDate.getDate())} ${pad(startDate.getHours())}:${pad(startDate.getMinutes())}:00`;
const endTimeStr = `${endDate.getFullYear()}-${pad(endDate.getMonth()+1)}-${pad(endDate.getDate())} ${pad(endDate.getHours())}:${pad(endDate.getMinutes())}:00`;
function writeState(data: Record<string, unknown>) {
try {
fs.writeFileSync(STATE_FILE, JSON.stringify(data, null, 2), 'utf-8');
console.log('[UI] 状态已写入:', STATE_FILE);
} catch (e) {
console.error('[UI] 写入状态文件失败:', e);
}
}
test.beforeEach(async ({ page }) => {
coursePage = new GroupCourseManagementPage(page);
});
test('TC-UI-001: 验证已登录状态并导航到仪表盘', async ({ page }) => {
await test.step('导航到首页（利用auth.setup的登录态）', async () => {
await page.goto('/');
await page.waitForLoadState('networkidle');
await page.waitForTimeout(2000);
const currentUrl = page.url();
console.log('[UI] 当前URL:', currentUrl);
// 如果跳转到登录页，手动登录
if (currentUrl.includes('/login')) {
console.log('[UI] 需要手动登录...');
const loginPage = new LoginPage(page);
await loginPage.usernameInput.fill('admin');
await loginPage.passwordInput.fill('Test@123');
await loginPage.loginButton.click();
await page.waitForURL(/\/(dashboard|\/)$/, { timeout: 30000 });
console.log('[UI] 手动登录完成');
} else {
console.log('[UI] 已处于登录状态');
}
await page.waitForLoadState('networkidle');
});
await test.step('保存admin token到共享状态', async () => {
const token = await page.evaluate(() => localStorage.getItem('token') || '');
writeState({
adminToken: token,
courseName: courseName,
timestamp: timestamp,
baseUrl: 'http://192.168.110.64:8084',
});
console.log('[UI] Token已保存, 长度:', token.length);
});
});
test('TC-UI-002: 导航到团课管理页面', async ({ page }) => {
await test.step('进入团课管理', async () => {
// 点击侧边栏
const sidebarLink = page.locator('.el-menu-item').filter({ hasText: '团课管理' })
.or(page.locator('span').filter({ hasText: '团课管理' }));
const count = await sidebarLink.count();
if (count > 0) {
await sidebarLink.first().click();
} else {
// 检查是否有子菜单
const subMenu = page.locator('.el-sub-menu__title').filter({ hasText: '课程' })
.or(page.locator('.el-sub-menu__title').filter({ hasText: '团课' }));
if (await subMenu.count() > 0) {
await subMenu.first().click();
await page.waitForTimeout(500);
const menuItem = page.locator('.el-menu-item').filter({ hasText: '团课管理' });
if (await menuItem.count() > 0) {
await menuItem.first().click();
}
}
}
console.log('[UI] 已点击团课管理导航');
});
await test.step('等待页面加载', async () => {
await page.waitForLoadState('networkidle');
await page.waitForTimeout(1500);
console.log('[UI] 当前URL:', page.url());
// 截图验证
await page.screenshot({ path: `test-results/course-page-${timestamp}.png` });
});
});
test('TC-UI-003: 创建团课 - 打开弹窗→填写表单→提交', async ({ page }) => {
const dialog = page.locator('.el-dialog');
await test.step('3a. 确保在团课管理页面', async () => {
if (!page.url().includes('course')) {
await page.goto('/courses');
await page.waitForLoadState('networkidle');
await page.waitForTimeout(1000);
}
});
await test.step('3b. 点击新增团课按钮打开弹窗', async () => {
let clicked = false;
const btn1 = page.getByRole('button', { name: '新增团课' });
if (await btn1.count() > 0) { await btn1.first().click(); clicked = true; }
if (!clicked) {
const btn2 = page.locator('button:has-text("新增团课")');
if (await btn2.count() > 0) { await btn2.first().click(); clicked = true; }
}
if (!clicked) {
const btn3 = page.locator('button:has-text("新增")').first();
if (await btn3.count() > 0) { await btn3.click(); clicked = true; }
}
if (!clicked) throw new Error('未找到新增团课按钮');
await page.waitForTimeout(800);
const isVisible = await dialog.isVisible().catch(() => false);
console.log('[UI] 弹窗可见:', isVisible);
await page.screenshot({ path: `test-results/dialog-${timestamp}.png` });
});
await test.step('3c. 填写课程名称', async () => {
const nameInput = dialog.locator('.el-form-item').filter({ hasText: '课程名称' }).locator('input');
if (await nameInput.count() > 0) {
await nameInput.fill(courseName);
} else {
await dialog.locator('input').first().fill(courseName);
}
console.log('[UI] 课程名称:', courseName);
});
await test.step('3d. 选择教练 - 张教练', async () => {
const coachSelect = dialog.locator('.el-form-item').filter({ hasText: '教练' }).locator('.el-select');
if (await coachSelect.count() > 0) {
await coachSelect.click();
await page.waitForTimeout(600);
const options = page.locator('.el-select-dropdown__item').locator('visible=true');
const optCount = await options.count();
let found = false;
for (let i = 0; i < optCount; i++) {
const text = await options.nth(i).textContent();
if (text && text.includes('张')) {
await options.nth(i).click();
console.log('[UI] 已选张教练:', text.trim());
found = true;
break;
}
}
if (!found && optCount > 0) { await options.first().click(); }
await page.waitForTimeout(300);
}
});
await test.step('3e. 填写开始/结束时间', async () => {
const startInput = dialog.locator('.el-form-item').filter({ hasText: '开始时间' }).locator('input');
if (await startInput.count() > 0) {
await startInput.click(); await page.waitForTimeout(300);
await startInput.fill(startTimeStr);
}
const endInput = dialog.locator('.el-form-item').filter({ hasText: '结束时间' }).locator('input');
if (await endInput.count() > 0) {
await endInput.click(); await page.waitForTimeout(300);
await endInput.fill(endTimeStr);
}
console.log('[UI] 时间:', startTimeStr, '~', endTimeStr);
});
await test.step('3f. 填写地点（无封面）', async () => {
const locInput = dialog.locator('.el-form-item').filter({ hasText: '地点' }).locator('input');
if (await locInput.count() > 0) { await locInput.fill('UI自动化测试场地'); }
console.log('[UI] 封面留空 — 无封面');
});
await test.step('3g. 点击确定提交', async () => {
const submitBtn = dialog.getByRole('button', { name: '确定' })
.or(dialog.locator('button:has-text("确定")'))
.or(dialog.locator('.el-button--primary').last());
await submitBtn.click();
console.log('[UI] 已提交');
});
await test.step('3h. 等待响应并截图', async () => {
await page.waitForTimeout(2000);
await page.screenshot({ path: `test-results/after-submit-${timestamp}.png` });
const successMsg = page.locator('.el-message--success');
if (await successMsg.count() > 0) {
console.log('[UI] 成功:', await successMsg.first().textContent());
}
});
await test.step('3h5. 处理时间冲突警告弹窗（如有）', async () => {
// 检查是否有 "时间冲突警告" 弹窗
const conflictDialog = page.locator('.el-message-box').filter({ hasText: '时间冲突警告' });
const warningDialog = page.locator('.el-overlay-message-box').filter({ hasText: '时间冲突' });
if ((await conflictDialog.count() > 0) || (await warningDialog.count() > 0)) {
console.log('[UI] 检测到时间冲突警告弹窗，尝试关闭...');
await page.screenshot({ path: `test-results/time-conflict-dialog-${timestamp}.png` });
// 点击弹窗中的确定按钮
const confirmBtn = page.locator('.el-message-box__btns button').first()
.or(page.locator('.el-overlay-message-box button:has-text("确定")'))
.or(page.locator('.el-overlay-message-box button:has-text("确认")'))
.or(page.locator('.el-message-box button:has-text("确定")'));
if (await confirmBtn.count() > 0) {
await confirmBtn.click();
console.log('[UI] 已关闭时间冲突警告弹窗');
} else {
await page.keyboard.press('Escape');
console.log('[UI] 通过Escape关闭弹窗');
}
await page.waitForTimeout(1000);
// 按 Escape 关闭可能残留的其他遮罩（如 select 下拉、modal 遮罩）
await page.keyboard.press('Escape');
await page.waitForTimeout(500);
console.log('[UI] 已按Escape清除残留遮罩');
} else {
console.log('[UI] 无时间冲突警告弹窗');
// 仍然按 Escape 以防有其他遮罩
await page.keyboard.press('Escape');
await page.waitForTimeout(300);
}
});
await test.step('3i. 搜索验证课程', async () => {
const searchInput = page.locator('input[placeholder*="搜索"]').first();
if (await searchInput.count() > 0) {
await searchInput.fill(courseName);
const searchBtn = page.locator('button:has-text("搜索")').first();
if (await searchBtn.count() > 0) await searchBtn.click();
await page.waitForTimeout(2000);
await page.screenshot({ path: `test-results/search-result-${timestamp}.png` });
console.log('[UI] 已搜索:', courseName);
}
});
console.log('[UI] ====== 后台管理UI测试完成 ======');
});
});
gym-manage-web/e2e/journeys/gym-audit-workflow.spec.ts
+66
View File
@@ -0,0 +1,66 @@
import { test, expect } from '@playwright/test';
import { CheckInManagementPage } from '../pages/CheckInManagementPage';
import { StatisticsDashboardPage } from '../pages/StatisticsDashboardPage';
test.describe('签到管理和数据统计验证', () => {
let checkInPage: CheckInManagementPage;
let statsPage: StatisticsDashboardPage;
test.beforeEach(async ({ page }) => {
checkInPage = new CheckInManagementPage(page);
statsPage = new StatisticsDashboardPage(page);
});
test('签到记录查看', async ({ page }) => {
await test.step('导航到数据统计页面', async () => {
await checkInPage.goto();
});
await test.step('验证签到统计区域可见', async () => {
await checkInPage.verifySignInDataLoaded();
console.log('签到统计区域数据已加载');
});
await test.step('获取签到数据', async () => {
const totalSignIns = await checkInPage.getTotalSignIns();
const successSignIns = await checkInPage.getSuccessSignIns();
console.log(`总签到: ${totalSignIns}, 成功: ${successSignIns}`);
});
});
test('数据统计页面数据加载验证', async ({ page }) => {
await test.step('导航到数据统计页面', async () => {
await statsPage.goto();
});
await test.step('验证统计卡片加载', async () => {
await statsPage.verifyStatCardsLoaded();
const memberCount = await statsPage.getCardValue(0);
const activeMember = await statsPage.getCardValue(1);
const bookings = await statsPage.getCardValue(2);
const violations = await statsPage.getCardValue(3);
console.log(`会员总数: ${memberCount}, 活跃会员: ${activeMember}, 预约总数: ${bookings}, 教练违规: ${violations}`);
});
await test.step('验证详细统计区域加载', async () => {
await statsPage.verifySectionCardsLoaded();
});
await test.step('切换统计区间', async () => {
await statsPage.switchRange('本周');
console.log('已切换到本周统计');
});
await test.step('验证切换区间后卡片仍可见', async () => {
await expect(statsPage.statCards.first()).toBeVisible({ timeout: 10000 });
console.log('切换区间后数据已刷新');
});
await test.step('切换到教练业绩Tab', async () => {
await statsPage.switchTab('教练业绩');
const coachTable = page.locator('.el-table');
await expect(coachTable).toBeVisible({ timeout: 10000 });
console.log('教练业绩Tab数据已加载');
});
});
});
gym-manage-web/e2e/journeys/gym-coach-workflow.spec.ts
+122
View File
@@ -0,0 +1,122 @@
import { test, expect } from '@playwright/test';
import { CoachManagementPage } from '../pages/CoachManagementPage';
test.describe.serial('教练管理完整CRUD旅程', () => {
let coachPage: CoachManagementPage;
const timestamp = Date.now();
const coachUsername = `testcoach_${timestamp}`.slice(0, 50); // 确保用户名合法
const coachNickname = `测试教练_${timestamp}`;
const coachEmail = `coach_${timestamp}@test.com`;
const coachPhone = `138${String(timestamp).slice(-8)}`;
const updatedNickname = `编辑教练_${timestamp}`;
test.beforeEach(async ({ page }) => {
coachPage = new CoachManagementPage(page);
});
test('教练列表显示', async ({ page }) => {
await test.step('导航到教练管理页面', async () => {
await coachPage.goto();
});
await test.step('验证表格显示', async () => {
await expect(coachPage.table).toBeVisible({ timeout: 10000 });
});
await test.step('验证数据加载', async () => {
const rowCount = await coachPage.getTableRowCount();
console.log(`教练列表包含 ${rowCount} 条记录`);
expect(rowCount).toBeGreaterThanOrEqual(0);
});
});
test('创建新教练', async ({ page }) => {
await test.step('导航到教练管理页面', async () => {
await coachPage.goto();
});
await test.step('点击新增教练按钮', async () => {
await coachPage.clickAdd();
});
await test.step('填写教练表单', async () => {
await coachPage.fillCoachForm({
username: coachUsername,
password: 'Test@1234',
nickname: coachNickname,
email: coachEmail,
phone: coachPhone,
});
console.log(`教练表单已填写: ${coachUsername}`);
});
await test.step('提交表单', async () => {
await coachPage.submitForm();
});
await test.step('验证创建成功', async () => {
await coachPage.waitForDialogClose();
console.log(`教练 ${coachUsername} 创建完成`);
});
});
test('编辑教练信息', async ({ page }) => {
await test.step('导航到教练管理页面', async () => {
await coachPage.goto();
});
await test.step('搜索刚创建的教练', async () => {
await coachPage.search(coachUsername);
});
await test.step('等待数据加载', async () => {
await page.waitForTimeout(500);
await expect(coachPage.table).toBeVisible({ timeout: 10000 });
});
await test.step('点击编辑按钮', async () => {
const rows = await coachPage.getTableRowCount();
if (rows > 0) {
await coachPage.clickEditOnFirstRow();
console.log('编辑弹窗已打开');
} else {
console.log('未找到刚创建的教练，跳过编辑测试');
test.skip();
}
});
await test.step('修改教练昵称和邮箱', async () => {
await coachPage.nicknameInput.clear();
await coachPage.nicknameInput.fill(updatedNickname);
console.log(`教练昵称已修改为: ${updatedNickname}`);
});
await test.step('提交表单', async () => {
await coachPage.submitForm();
});
await test.step('验证更新成功', async () => {
await coachPage.waitForDialogClose();
console.log('教练信息更新完成');
});
});
test('搜索验证', async ({ page }) => {
await test.step('导航到教练管理页面', async () => {
await coachPage.goto();
});
await test.step('搜索编辑后的教练', async () => {
await coachPage.search(coachUsername);
console.log(`搜索教练: ${coachUsername}`);
});
await test.step('验证搜索结果', async () => {
await page.waitForTimeout(500);
const rowCount = await coachPage.getTableRowCount();
console.log(`搜索结果显示 ${rowCount} 条记录`);
// 搜索结果可能为0（如果后端是全量返回+前端过滤），但至少验证页面没有崩溃
expect(rowCount).toBeGreaterThanOrEqual(0);
});
});
});
gym-manage-web/e2e/journeys/gym-course-workflow.spec.ts
+152
View File
@@ -0,0 +1,152 @@
import { test, expect } from '@playwright/test';
import { GroupCourseManagementPage } from '../pages/GroupCourseManagementPage';
test.describe.serial('团课管理完整CRUD旅程', () => {
let coursePage: GroupCourseManagementPage;
const timestamp = Date.now();
const courseName = `自动化测试团课_${timestamp}`;
const updatedCourseName = `编辑团课_${timestamp}`;
const location = `测试地点_${timestamp}`;
test.beforeEach(async ({ page }) => {
coursePage = new GroupCourseManagementPage(page);
});
test('团课列表显示', async ({ page }) => {
await test.step('导航到团课管理页面', async () => {
await coursePage.goto();
});
await test.step('验证表格显示', async () => {
await expect(coursePage.table).toBeVisible({ timeout: 10000 });
});
await test.step('验证数据加载', async () => {
const rowCount = await coursePage.getTableRowCount();
console.log(`团课列表包含 ${rowCount} 条记录`);
expect(rowCount).toBeGreaterThanOrEqual(0);
});
});
test('创建新团课', async ({ page }) => {
await test.step('导航到团课管理页面', async () => {
await coursePage.goto();
});
await test.step('点击新增团课按钮', async () => {
await coursePage.clickAdd();
});
await test.step('填写团课表单', async () => {
// 获取当前时间后2小时作为开始时间
const startDate = new Date(Date.now() + 2 * 60 * 60 * 1000);
const startTimeStr = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')} ${String(startDate.getHours()).padStart(2, '0')}:${String(startDate.getMinutes()).padStart(2, '0')}:00`;
await coursePage.fillCourseForm({
courseName: courseName,
startTime: startTimeStr,
duration: 60,
maxMembers: 30,
location: location,
description: `自动化测试创建的团课_${timestamp}`,
});
console.log(`团课表单已填写: ${courseName}`);
});
await test.step('提交表单', async () => {
await coursePage.submitForm();
});
await test.step('验证创建成功', async () => {
await coursePage.waitForDialogClose();
console.log(`团课 ${courseName} 创建完成`);
});
});
test('编辑团课信息', async ({ page }) => {
await test.step('导航到团课管理页面', async () => {
await coursePage.goto();
});
await test.step('搜索刚创建的团课', async () => {
await coursePage.search(courseName);
});
await test.step('等待数据加载', async () => {
await expect(coursePage.table).toBeVisible({ timeout: 10000 });
});
await test.step('点击编辑按钮', async () => {
const rows = await coursePage.getTableRowCount();
if (rows > 0) {
await coursePage.clickEditOnFirstRow();
console.log('编辑弹窗已打开');
} else {
console.log('未找到刚创建的团课，跳过编辑测试');
test.skip();
}
});
await test.step('修改团课信息', async () => {
// 清空并填入新课程名
const nameInput = coursePage.page.locator('.el-dialog').getByPlaceholder('请输入课程名称');
await nameInput.clear();
await nameInput.fill(updatedCourseName);
console.log(`团课名称已修改为: ${updatedCourseName}`);
});
await test.step('提交表单', async () => {
await coursePage.submitForm();
});
await test.step('验证更新成功', async () => {
await coursePage.waitForDialogClose();
console.log('团课信息更新完成');
});
});
test('删除团课', async ({ page }) => {
await test.step('导航到团课管理页面', async () => {
await coursePage.goto();
});
await test.step('搜索编辑后的团课', async () => {
await coursePage.search(updatedCourseName);
});
await test.step('等待数据加载', async () => {
await expect(coursePage.table).toBeVisible({ timeout: 10000 });
});
await test.step('点击删除按钮', async () => {
const rows = await coursePage.getTableRowCount();
if (rows > 0) {
await coursePage.clickDeleteOnFirstRow();
console.log('删除确认对话框已打开');
} else {
// 尝试用原始名称搜索
await coursePage.search(courseName);
await page.waitForTimeout(500);
const retryRows = await coursePage.getTableRowCount();
if (retryRows > 0) {
await coursePage.clickDeleteOnFirstRow();
console.log('删除确认对话框已打开（使用原始名称搜索）');
} else {
console.log('未找到可删除的团课，跳过删除测试');
test.skip();
}
}
});
await test.step('确认删除', async () => {
await coursePage.confirmDelete();
console.log('删除确认完成');
});
await test.step('验证删除成功', async () => {
const messageBox = page.locator('.el-message-box');
await expect(messageBox).not.toBeVisible({ timeout: 5000 });
console.log('团课已删除');
});
});
});
gym-manage-web/e2e/journeys/gym-member-workflow.spec.ts
+86
View File
@@ -0,0 +1,86 @@
import { test, expect } from '@playwright/test';
import { MemberManagementPage } from '../pages/MemberManagementPage';
test.describe.serial('会员管理完整CRUD旅程', () => {
let memberPage: MemberManagementPage;
const timestamp = Date.now();
const searchKeyword = `会员_${timestamp}`;
test.beforeEach(async ({ page }) => {
memberPage = new MemberManagementPage(page);
});
test('会员列表显示 + 搜索', async ({ page }) => {
await test.step('导航到会员管理页面', async () => {
await memberPage.goto();
});
await test.step('验证表格显示', async () => {
await expect(memberPage.table).toBeVisible({ timeout: 10000 });
});
await test.step('验证数据加载', async () => {
const rowCount = await memberPage.getTableRowCount();
console.log(`会员列表包含 ${rowCount} 条记录`);
expect(rowCount).toBeGreaterThanOrEqual(0);
});
await test.step('搜索会员', async () => {
await memberPage.search('测试');
console.log('会员搜索完成');
});
});
test('编辑会员信息', async ({ page }) => {
await test.step('导航到会员管理页面', async () => {
await memberPage.goto();
});
await test.step('等待数据加载', async () => {
await expect(memberPage.table).toBeVisible({ timeout: 10000 });
});
await test.step('点击第一个会员的编辑按钮', async () => {
const rows = await memberPage.getTableRowCount();
if (rows > 0) {
await memberPage.clickEditOnFirstRow();
console.log('编辑弹窗已打开');
} else {
console.log('当前没有会员记录，跳过编辑测试');
test.skip();
}
});
await test.step('修改会员信息', async () => {
const newNickname = `编辑昵称_${timestamp}`;
await memberPage.fillEditForm(newNickname, '女');
console.log(`昵称已修改为: ${newNickname}`);
});
await test.step('提交表单', async () => {
await memberPage.submitForm();
});
await test.step('验证更新成功', async () => {
await memberPage.waitForDialogClose();
console.log('会员信息更新完成');
});
});
test('搜索验证编辑后的会员', async ({ page }) => {
await test.step('导航到会员管理页面', async () => {
await memberPage.goto();
});
await test.step('按昵称搜索', async () => {
await memberPage.search(`编辑昵称_${timestamp}`);
console.log('搜索编辑后的会员');
});
await test.step('验证搜索结果显示', async () => {
const rowCount = await memberPage.getTableRowCount();
console.log(`搜索结果显示 ${rowCount} 条记录`);
expect(rowCount).toBeGreaterThanOrEqual(0);
});
});
});