mini-starter/tests/e2e/pages/admin/dashboard.page.ts

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

export class DashboardPage {
  readonly page: Page;
  readonly pageTitle: Locator;
  readonly activeUsersCard: Locator;
  readonly systemMessagesCard: Locator;
  readonly onlineUsersCard: Locator;
  readonly userManagementCard: Locator;
  readonly systemSettingsCard: Locator;

  constructor(page: Page) {
    this.page = page;
    this.pageTitle = page.getByRole('heading', { name: '仪表盘' });
    this.activeUsersCard = page.getByText('活跃用户');
    this.systemMessagesCard = page.getByText('系统消息');
    this.onlineUsersCard = page.getByText('在线用户');
    this.userManagementCard = page.getByText('用户管理');
    this.systemSettingsCard = page.getByText('系统设置');
  }

  async expectToBeVisible(options?: { timeout?: number }) {
    await expect(this.pageTitle).toBeVisible(options);
    await expect(this.activeUsersCard).toBeVisible(options);
    await expect(this.systemMessagesCard).toBeVisible(options);
    await expect(this.onlineUsersCard).toBeVisible(options);
  }

  async navigateToUserManagement() {
    // 使用更具体的定位器来避免重复元素问题
    const userManagementCard = this.page.locator('text=用户管理').first();
    await userManagementCard.click();
    await this.page.waitForLoadState('networkidle');
  }

  async navigateToSystemSettings() {
    // 使用更具体的定位器来避免重复元素问题
    const systemSettingsCard = this.page.locator('text=系统设置').first();
    await systemSettingsCard.click();
    await this.page.waitForLoadState('networkidle');
  }

  async getActiveUsersCount(): Promise<string> {
    // 使用更可靠的定位器来获取活跃用户统计数字
    const countElement = this.page.locator('text=活跃用户').locator('xpath=following::div[contains(@class, "text-2xl")][1]');
    await expect(countElement).toBeVisible({ timeout: 10000 });
    return await countElement.textContent() || '';
  }

  async getSystemMessagesCount(): Promise<string> {
    // 使用更可靠的定位器来获取系统消息统计数字
    const countElement = this.page.locator('text=系统消息').locator('xpath=following::div[contains(@class, "text-2xl")][1]');
    await expect(countElement).toBeVisible({ timeout: 10000 });
    return await countElement.textContent() || '';
  }

  async logout() {
    // 先点击用户头像/用户名打开下拉菜单
    const userMenuButton = this.page.getByRole('button', { name: 'admin' });
    await userMenuButton.click();

    // 然后查找并点击登出按钮
    const logoutButton = this.page.getByRole('menuitem', { name: /登出|退出|Logout|Sign out/i });
    await logoutButton.click();
    await this.page.waitForLoadState('networkidle');
  }

  clone(newPage: Page): DashboardPage {
    return new DashboardPage(newPage);
  }
}