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() {
    await this.userManagementCard.click();
    await this.page.waitForLoadState('networkidle');
  }

  async navigateToSystemSettings() {
    await this.systemSettingsCard.click();
    await this.page.waitForLoadState('networkidle');
  }

  async getActiveUsersCount(): Promise<string> {
    return await this.activeUsersCard.locator('xpath=following-sibling::div//div[contains(@class, "text-2xl")]').textContent() || '';
  }

  async getSystemMessagesCount(): Promise<string> {
    return await this.systemMessagesCard.locator('xpath=following-sibling::div//div[contains(@class, "text-2xl")]').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);
  }
}