be5d5ede90
refactor: 重构后端查询逻辑和API响应处理 fix: 修复用户角色更新和文件上传问题 test: 添加前端性能测试脚本和E2E测试用例 chore: 更新依赖版本和配置文件 docs: 添加环境检查脚本和测试文档 style: 统一表格标签样式和路由命名 perf: 优化前端页面加载速度和响应时间
128 lines
4.5 KiB
TypeScript
128 lines
4.5 KiB
TypeScript
import { Page, Locator } from '@playwright/test';
|
|
|
|
export class UserManagementPage {
|
|
readonly page: Page;
|
|
readonly table: Locator;
|
|
readonly createUserButton: Locator;
|
|
readonly searchInput: Locator;
|
|
readonly searchButton: Locator;
|
|
readonly successMessage: Locator;
|
|
readonly pagination: Locator;
|
|
readonly nextPageButton: Locator;
|
|
readonly prevPageButton: Locator;
|
|
|
|
constructor(page: Page) {
|
|
this.page = page;
|
|
this.table = page.locator('.el-table').first();
|
|
this.createUserButton = page.getByRole('button', { name: '新增用户' }).or(page.locator('button:has-text("新增用户")'));
|
|
this.searchInput = page.locator('input[placeholder*="搜索"]').or(page.locator('input[name*="keyword"]'));
|
|
this.searchButton = page.getByRole('button', { name: '搜索' }).or(page.locator('button:has-text("搜索")'));
|
|
this.successMessage = page.locator('.el-message--success').or(page.locator('.success-message'));
|
|
this.pagination = page.locator('.el-pagination').or(page.locator('.pagination'));
|
|
this.nextPageButton = page.locator('.el-pagination .btn-next').or(page.locator('.pagination .next-page'));
|
|
this.prevPageButton = page.locator('.el-pagination .btn-prev').or(page.locator('.pagination .prev-page'));
|
|
}
|
|
|
|
async goto() {
|
|
await this.page.goto('/users');
|
|
await this.page.waitForLoadState('networkidle');
|
|
}
|
|
|
|
async clickCreateUser() {
|
|
await this.createUserButton.click();
|
|
await this.page.waitForTimeout(500);
|
|
}
|
|
|
|
async fillUserForm(userData: {
|
|
username: string;
|
|
nickname?: string;
|
|
email: string;
|
|
phone?: string;
|
|
password: string;
|
|
confirmPassword?: string;
|
|
}) {
|
|
const dialog = this.page.locator('.el-dialog');
|
|
await dialog.locator('input').first().fill(userData.username);
|
|
if (userData.nickname) {
|
|
await dialog.locator('input').nth(1).fill(userData.nickname);
|
|
}
|
|
await dialog.locator('input[type="password"]').fill(userData.password);
|
|
await dialog.locator('input').nth(3).fill(userData.email);
|
|
if (userData.phone) {
|
|
const phoneInput = dialog.locator('input[placeholder*="手机号"]');
|
|
if (await phoneInput.count() > 0) {
|
|
await phoneInput.fill(userData.phone);
|
|
} else {
|
|
const phoneSelect = dialog.locator('.el-select');
|
|
if (await phoneSelect.count() > 0) {
|
|
await phoneSelect.first().click();
|
|
await this.page.waitForTimeout(300);
|
|
const selectInput = this.page.locator('.el-select-dropdown__input');
|
|
if (await selectInput.count() > 0) {
|
|
await selectInput.fill(userData.phone);
|
|
await this.page.waitForTimeout(300);
|
|
}
|
|
await this.page.keyboard.press('Enter');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async submitForm() {
|
|
await this.page.getByRole('button', { name: '确定' }).or(this.page.locator('button:has-text("确定")')).click();
|
|
}
|
|
|
|
async editUser(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 deleteUser(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() {
|
|
await this.page.getByRole('button', { name: '确定' }).or(this.page.locator('.confirm-dialog .confirm-button')).click();
|
|
}
|
|
|
|
async search(keyword: string) {
|
|
await this.searchInput.fill(keyword);
|
|
await this.searchButton.click();
|
|
}
|
|
|
|
async nextPage() {
|
|
await this.nextPageButton.click();
|
|
}
|
|
|
|
async prevPage() {
|
|
await this.prevPageButton.click();
|
|
}
|
|
|
|
async getCurrentPage(): Promise<string> {
|
|
return await this.page.locator('.el-pagination .el-pager li.active').or(this.page.locator('.pagination .current-page')).textContent() || '1';
|
|
}
|
|
|
|
async getUserCount(): Promise<number> {
|
|
return await this.table.locator('tbody tr').count();
|
|
}
|
|
|
|
async getUserName(rowNumber: number): Promise<string | null> {
|
|
return await this.table.locator(`tbody tr:nth-child(${rowNumber}) td:first-child`).textContent();
|
|
}
|
|
|
|
async containsText(text: string): Promise<boolean> {
|
|
return await this.table.getByText(text).count() > 0;
|
|
}
|
|
|
|
async isSuccessMessageVisible(): Promise<boolean> {
|
|
try {
|
|
return await this.successMessage.isVisible({ timeout: 3000 });
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async reload() {
|
|
await this.page.reload();
|
|
}
|
|
}
|