269 lines
9.4 KiB
TypeScript
269 lines
9.4 KiB
TypeScript
import { Page, Locator, expect } from '@playwright/test';
|
|
|
|
export class GroupCourseManagementPage {
|
|
readonly page: Page;
|
|
readonly table: Locator;
|
|
readonly createButton: Locator;
|
|
readonly searchInput: Locator;
|
|
readonly searchButton: Locator;
|
|
readonly successMessage: Locator;
|
|
|
|
constructor(page: Page) {
|
|
this.page = page;
|
|
this.table = page.locator('.el-table').first();
|
|
this.createButton = page.getByRole('button', { name: '新增团课' }).or(page.locator('button:has-text("新增团课")'));
|
|
this.searchInput = page.locator('input[placeholder*="搜索课程"]').or(page.locator('input[placeholder*="搜索"]'));
|
|
this.searchButton = page.getByRole('button', { name: '搜索' }).or(page.locator('button:has-text("搜索")'));
|
|
this.successMessage = page.locator('.el-message--success').or(page.locator('.success-message'));
|
|
}
|
|
|
|
async goto() {
|
|
try {
|
|
console.log('导航到团课管理页面...');
|
|
await this.page.goto('/courses');
|
|
|
|
await this.page.waitForURL('**/courses', { timeout: 30000 });
|
|
await this.page.waitForLoadState('networkidle');
|
|
|
|
await this.table.waitFor({ state: 'visible', timeout: 15000 });
|
|
|
|
await expect(this.page).toHaveURL(/.*courses/);
|
|
|
|
console.log('团课管理页面加载完成');
|
|
} catch (error) {
|
|
await this.page.screenshot({ path: `test-results/group-course-management-error-${Date.now()}.png` });
|
|
|
|
console.error('导航到团课管理页面失败:', error);
|
|
|
|
throw new Error(`导航到团课管理页面失败: ${error instanceof Error ? error.message : String(error)}`);
|
|
}
|
|
}
|
|
|
|
async waitForTableReady() {
|
|
await this.table.waitFor({ state: 'visible', timeout: 10000 });
|
|
|
|
await this.page.waitForFunction(
|
|
() => {
|
|
const rows = document.querySelectorAll('.el-table__body-wrapper tbody tr');
|
|
return rows.length > 0;
|
|
},
|
|
{ timeout: 5000 }
|
|
).catch(() => {
|
|
console.log('表格没有数据，继续执行');
|
|
});
|
|
}
|
|
|
|
async clickCreate() {
|
|
await this.createButton.click();
|
|
await this.page.waitForTimeout(500);
|
|
}
|
|
|
|
async fillCourseForm(courseData: {
|
|
name?: string;
|
|
courseName?: string;
|
|
typeId?: string;
|
|
coachId?: string;
|
|
startTime?: string;
|
|
endTime?: string;
|
|
duration?: number;
|
|
location?: string;
|
|
maxMembers?: number | string;
|
|
description?: string;
|
|
}) {
|
|
// Normalize property names from spec to POM
|
|
const name = courseData.name || courseData.courseName || '';
|
|
const startTime = courseData.startTime || '';
|
|
const endTime = courseData.endTime || courseData.startTime || '';
|
|
const location = courseData.location || '';
|
|
const maxMembers = String(courseData.maxMembers || '30');
|
|
const typeId = courseData.typeId;
|
|
const coachId = courseData.coachId;
|
|
|
|
const dialog = this.page.locator('.el-dialog');
|
|
|
|
// 课程名称
|
|
const nameInput = dialog.locator('.el-form-item').filter({ hasText: '课程名称' }).locator('input');
|
|
if (await nameInput.count() > 0) {
|
|
await nameInput.fill(name);
|
|
} else {
|
|
await dialog.locator('input').first().fill(name);
|
|
}
|
|
|
|
// 课程类型（下拉选择）
|
|
const typeSelect = dialog.locator('.el-form-item').filter({ hasText: '课程类型' }).locator('.el-select');
|
|
if (await typeSelect.count() > 0) {
|
|
await typeSelect.click();
|
|
await this.page.waitForTimeout(500);
|
|
|
|
const dropdown = this.page.locator('.el-select-dropdown:not(.is-hidden)').or(this.page.locator('.el-popper:not([style*="display: none"])'));
|
|
await dropdown.first().waitFor({ state: 'visible', timeout: 5000 }).catch(() => {
|
|
console.log('课程类型下拉框未显示，使用body层级定位');
|
|
});
|
|
const options = this.page.locator('.el-select-dropdown__item').or(this.page.locator('.el-popper .el-select-dropdown__item'));
|
|
const visibleOptions = options.locator('visible=true');
|
|
const optionCount = await visibleOptions.count();
|
|
|
|
if (optionCount > 0) {
|
|
if (typeId) {
|
|
for (let i = 0; i < optionCount; i++) {
|
|
const optionText = await visibleOptions.nth(i).textContent();
|
|
if (optionText && optionText.includes(typeId)) {
|
|
await visibleOptions.nth(i).click();
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
await visibleOptions.first().click();
|
|
}
|
|
}
|
|
|
|
await this.page.waitForTimeout(300);
|
|
}
|
|
|
|
// 教练（下拉选择）
|
|
const coachSelect = dialog.locator('.el-form-item').filter({ hasText: '教练' }).locator('.el-select');
|
|
if (await coachSelect.count() > 0) {
|
|
await coachSelect.click();
|
|
await this.page.waitForTimeout(500);
|
|
|
|
const options = this.page.locator('.el-select-dropdown__item').or(this.page.locator('.el-popper .el-select-dropdown__item'));
|
|
const visibleOptions = options.locator('visible=true');
|
|
const optionCount = await visibleOptions.count();
|
|
|
|
if (optionCount > 0) {
|
|
if (coachId) {
|
|
for (let i = 0; i < optionCount; i++) {
|
|
const optionText = await visibleOptions.nth(i).textContent();
|
|
if (optionText && optionText.includes(coachId)) {
|
|
await visibleOptions.nth(i).click();
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
await visibleOptions.first().click();
|
|
}
|
|
}
|
|
|
|
await this.page.waitForTimeout(300);
|
|
}
|
|
|
|
// 开始时间（日期时间选择器）
|
|
const startTimeInput = dialog.locator('.el-form-item').filter({ hasText: '开始时间' }).locator('input');
|
|
if (await startTimeInput.count() > 0) {
|
|
await startTimeInput.click();
|
|
await this.page.waitForTimeout(300);
|
|
await startTimeInput.fill(startTime);
|
|
await this.page.waitForTimeout(300);
|
|
}
|
|
|
|
// 结束时间（日期时间选择器）
|
|
const endTimeInput = dialog.locator('.el-form-item').filter({ hasText: '结束时间' }).locator('input');
|
|
if (await endTimeInput.count() > 0) {
|
|
await endTimeInput.click();
|
|
await this.page.waitForTimeout(300);
|
|
await endTimeInput.fill(endTime);
|
|
await this.page.waitForTimeout(300);
|
|
}
|
|
|
|
// 上课地点
|
|
const locationInput = dialog.locator('.el-form-item').filter({ hasText: '地点' }).or(dialog.locator('.el-form-item').filter({ hasText: '上课地点' })).locator('input');
|
|
if (await locationInput.count() > 0) {
|
|
await locationInput.fill(location);
|
|
}
|
|
|
|
// 人数上限
|
|
const maxMembersInput = dialog.locator('.el-form-item').filter({ hasText: '人数' }).or(dialog.locator('.el-form-item').filter({ hasText: '上限' })).locator('input');
|
|
if (await maxMembersInput.count() > 0) {
|
|
await maxMembersInput.fill(maxMembers);
|
|
}
|
|
}
|
|
|
|
async submitForm() {
|
|
const dialog = this.page.locator('.el-dialog');
|
|
const submitButton = dialog.getByRole('button', { name: '确定' }).or(dialog.locator('button:has-text("确定")'));
|
|
|
|
await submitButton.click();
|
|
|
|
await this.page.waitForTimeout(1000);
|
|
}
|
|
|
|
async waitForSuccessMessage(timeout: number = 10000): Promise<boolean> {
|
|
try {
|
|
const message = this.page.locator('.el-message--success').or(this.page.locator('.el-message'));
|
|
await message.waitFor({ state: 'visible', timeout });
|
|
return true;
|
|
} catch (error) {
|
|
console.log('等待成功消息超时，检查是否有错误消息');
|
|
|
|
try {
|
|
const errorMessage = this.page.locator('.el-message--error').or(this.page.locator('.el-message--warning'));
|
|
if (await errorMessage.count() > 0) {
|
|
const errorText = await errorMessage.first().textContent();
|
|
console.log('发现错误消息:', errorText);
|
|
}
|
|
} catch (e) {
|
|
console.log('没有发现错误消息');
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async editCourse(rowNumber: number) {
|
|
await this.table.locator(`tbody tr:nth-child(${rowNumber})`).getByRole('button', { name: '编辑' }).or(this.page.locator(`tbody tr:nth-child(${rowNumber}) .edit-button`)).click();
|
|
}
|
|
|
|
async deleteCourse(rowNumber: number) {
|
|
await this.table.locator(`tbody tr:nth-child(${rowNumber})`).getByRole('button', { name: '删除' }).or(this.page.locator(`tbody tr:nth-child(${rowNumber}) .delete-button`)).click();
|
|
}
|
|
|
|
async confirmDelete() {
|
|
const confirmDialog = this.page.locator('.el-message-box');
|
|
await confirmDialog.getByRole('button', { name: '确定' }).or(confirmDialog.locator('button:has-text("确定")')).click();
|
|
}
|
|
|
|
async search(keyword: string) {
|
|
await this.searchInput.fill(keyword);
|
|
await this.searchButton.click();
|
|
}
|
|
|
|
async isSuccessMessageVisible(): Promise<boolean> {
|
|
try {
|
|
return await this.successMessage.isVisible({ timeout: 3000 });
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async clickAdd(): Promise<void> {
|
|
await this.clickCreate();
|
|
}
|
|
|
|
async waitForDialogClose(): Promise<void> {
|
|
await this.page.waitForTimeout(1000);
|
|
await this.page.locator('.el-dialog').waitFor({ state: 'hidden', timeout: 10000 }).catch(() => {
|
|
console.log('对话框可能已关闭或不存在');
|
|
});
|
|
}
|
|
|
|
async clickEditOnFirstRow(): Promise<void> {
|
|
await this.editCourse(1);
|
|
}
|
|
|
|
async clickDeleteOnFirstRow(): Promise<void> {
|
|
await this.deleteCourse(1);
|
|
}
|
|
|
|
async getCourseCount(): Promise<number> {
|
|
return await this.table.locator('tbody tr').count();
|
|
}
|
|
|
|
async getTableRowCount(): Promise<number> {
|
|
return await this.table.locator('tbody tr').count();
|
|
}
|
|
|
|
async containsText(text: string): Promise<boolean> {
|
|
return await this.table.getByText(text).count() > 0;
|
|
}
|
|
}
|