novalon-manage-system/novalon-manage-web/e2e/pages/UserManagementPage.ts

import { Page, Locator, expect } from '@playwright/test';

export class UserManagementPage {
  readonly page: Page;
  readonly table: Locator;
  readonly createUserButton: Locator;
  readonly refreshButton: Locator;
  readonly successMessage: Locator;
  readonly errorMessage: Locator;
  readonly pagination: Locator;

  constructor(page: Page) {
    this.page = page;
    this.table = page.locator('.ant-table').first();
    this.createUserButton = page.getByRole('button', { name: '新增用户' });
    this.refreshButton = page.getByRole('button', { name: '刷新' });
    this.successMessage = page.locator('.ant-message-success');
    this.errorMessage = page.locator('.ant-message-error');
    this.pagination = page.locator('.ant-pagination');
  }

  async goto() {
    await this.page.goto('/users');
    await this.page.waitForLoadState('networkidle');
    await this.table.waitFor({ state: 'visible', timeout: 15000 }).catch(() => {});
    await expect(this.page).toHaveURL(/.*users/);
  }

  async waitForTableReady() {
    await this.table.waitFor({ state: 'visible', timeout: 10000 });
    await this.page.waitForFunction(
      () => document.querySelectorAll('.ant-table-tbody > tr').length > 0,
      { timeout: 5000 }
    ).catch(() => {});
  }

  async clickCreateUser() {
    await this.createUserButton.click();
    await this.page.waitForTimeout(500);
  }

  async fillUserForm(userData: {
    username?: string;
    password?: string;
    nickname?: string;
    email?: string;
    phone?: string;
    status?: string;
  }) {
    const modal = this.page.locator('.ant-modal').filter({ hasText: /新增用户|编辑用户/ });

    if (userData.username) {
      await modal.locator('.ant-form-item').filter({ hasText: '用户名' }).locator('input').fill(userData.username);
    }
    if (userData.password) {
      await modal.locator('.ant-form-item').filter({ hasText: '密码' }).locator('input[type="password"]').fill(userData.password);
    }
    if (userData.nickname) {
      await modal.locator('.ant-form-item').filter({ hasText: '昵称' }).locator('input').fill(userData.nickname);
    }
    if (userData.email) {
      await modal.locator('.ant-form-item').filter({ hasText: '邮箱' }).locator('input').fill(userData.email);
    }
    if (userData.phone) {
      await modal.locator('.ant-form-item').filter({ hasText: '手机' }).locator('input').fill(userData.phone);
    }
    if (userData.status) {
      const statusFormItem = modal.locator('.ant-form-item').filter({ hasText: '状态' }).locator('.ant-select');
      if (await statusFormItem.count() > 0) {
        await statusFormItem.click();
        await this.page.waitForTimeout(300);
        const statusText = userData.status === 'ACTIVE' ? '正常' : '禁用';
        await this.page.locator('.ant-select-dropdown').locator('.ant-select-item').filter({ hasText: statusText }).first().click();
      }
    }
  }

  async submitForm() {
    const modal = this.page.locator('.ant-modal').filter({ hasText: /新增用户|编辑用户/ });
    await modal.getByRole('button', { name: /确\s*定/ }).click();
    await this.page.waitForTimeout(1000);
  }

  async cancelForm() {
    const modal = this.page.locator('.ant-modal').filter({ hasText: /新增用户|编辑用户/ });
    await modal.getByRole('button', { name: /取\s*消/ }).click();
  }

  async editUser(rowNumber: number) {
    const row = this.table.locator('tbody tr').nth(rowNumber - 1);
    await row.locator('.ant-btn').filter({ has: this.page.locator('.anticon-edit') }).click();
    await this.page.waitForTimeout(500);
  }

  async deleteUser(rowNumber: number) {
    const row = this.table.locator('tbody tr').nth(rowNumber - 1);
    await row.locator('.ant-btn').filter({ has: this.page.locator('.anticon-delete') }).click();
    await this.page.waitForTimeout(300);
  }

  async confirmDelete() {
    await this.page.locator('.ant-popconfirm').getByRole('button', { name: /确\s*定/ }).click();
    await this.page.waitForTimeout(1000);
  }

  async cancelDelete() {
    await this.page.locator('.ant-popconfirm').getByRole('button', { name: /取\s*消/ }).click();
  }

  async waitForSuccessMessage(timeout = 10000): Promise<boolean> {
    try {
      await this.successMessage.waitFor({ state: 'visible', timeout });
      return true;
    } catch {
      return false;
    }
  }

  async getUserCount(): Promise<number> {
    return this.table.locator('tbody tr').count();
  }

  async getTableCellText(rowNumber: number, colIndex: number): Promise<string | null> {
    const row = this.table.locator('tbody tr').nth(rowNumber - 1);
    return row.locator('td').nth(colIndex).textContent();
  }

  async containsText(text: string): Promise<boolean> {
    return this.table.getByText(text).count() > 0;
  }

  async reload() {
    await this.refreshButton.click();
    await this.page.waitForLoadState('networkidle');
  }
}