gym-manage/gym-manage-web/e2e/pages/MemberManagementPage.ts

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

export class MemberManagementPage {
  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('/members');

      await this.page.waitForLoadState('networkidle');

      await this.table.waitFor({ state: 'visible', timeout: 10000 });

      await expect(this.page).toHaveURL(/.*members/);

      console.log('会员管理页面加载完成');
    } catch (error) {
      await this.page.screenshot({ path: `test-results/member-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 fillMemberForm(memberData: {
    name: string;
    phone: string;
    email: string;
    gender: string;
  }) {
    const dialog = this.page.locator('.el-dialog');

    const inputs = dialog.locator('input');

    // 姓名
    const nameInput = dialog.locator('.el-form-item').filter({ hasText: '姓名' }).locator('input');
    if (await nameInput.count() > 0) {
      await nameInput.fill(memberData.name);
    } else if (await inputs.count() > 0) {
      await inputs.first().fill(memberData.name);
    }

    // 手机号
    const phoneInput = dialog.locator('.el-form-item').filter({ hasText: '手机' }).locator('input');
    if (await phoneInput.count() > 0) {
      await phoneInput.fill(memberData.phone);
    } else if (await inputs.count() > 1) {
      await inputs.nth(1).fill(memberData.phone);
    }

    // 邮箱
    const emailInput = dialog.locator('.el-form-item').filter({ hasText: '邮箱' }).locator('input');
    if (await emailInput.count() > 0) {
      await emailInput.fill(memberData.email);
    } else if (await inputs.count() > 2) {
      await inputs.nth(2).fill(memberData.email);
    }

    // 性别（下拉选择）
    if (memberData.gender) {
      const genderSelect = dialog.locator('.el-form-item').filter({ hasText: '性别' }).locator('.el-select');
      if (await genderSelect.count() > 0) {
        await genderSelect.click();
        await this.page.waitForTimeout(500);

        const genderText = memberData.gender === '1' || memberData.gender === '男' ? '男' : '女';
        const dropdown = this.page.locator('.el-select-dropdown');
        if (await dropdown.count() > 0) {
          const options = dropdown.locator('.el-select-dropdown__item');
          const optionCount = await options.count();

          for (let i = 0; i < optionCount; i++) {
            const optionText = await options.nth(i).textContent();
            if (optionText && optionText.includes(genderText)) {
              await options.nth(i).click();
              break;
            }
          }
        }

        await this.page.waitForTimeout(300);
      }
    }
  }

  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 editMember(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 deleteMember(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 getMemberCount(): Promise<number> {
    return await this.table.locator('tbody tr').count();
  }

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

  async clickEditOnFirstRow(): Promise<void> {
    await this.editMember(1);
  }

  async fillEditForm(newNickname: string, gender: string): Promise<void> {
    await this.fillMemberForm({ name: newNickname, phone: '', email: '', gender });
  }

  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 containsText(text: string): Promise<boolean> {
    return await this.table.getByText(text).count() > 0;
  }
}