user-management.page.ts 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. import { Page, Locator, expect } from '@playwright/test';
  2. export class UserManagementPage {
  3. readonly page: Page;
  4. readonly pageTitle: Locator;
  5. readonly createUserButton: Locator;
  6. readonly searchInput: Locator;
  7. readonly searchButton: Locator;
  8. readonly userTable: Locator;
  9. readonly editButtons: Locator;
  10. readonly deleteButtons: Locator;
  11. readonly pagination: Locator;
  12. constructor(page: Page) {
  13. this.page = page;
  14. this.pageTitle = page.getByRole('heading', { name: '用户管理' });
  15. this.createUserButton = page.getByRole('button', { name: '创建用户' });
  16. this.searchInput = page.getByPlaceholder('搜索用户名、昵称或邮箱...');
  17. this.searchButton = page.getByRole('button', { name: '搜索' });
  18. this.userTable = page.locator('table');
  19. this.editButtons = page.locator('button').filter({ hasText: '编辑' });
  20. this.deleteButtons = page.locator('button').filter({ hasText: '删除' });
  21. this.pagination = page.locator('[data-testid="pagination"]');
  22. }
  23. async goto() {
  24. // 直接导航到用户管理页面
  25. await this.page.goto('/admin/users');
  26. await this.page.waitForLoadState('networkidle');
  27. // 等待页面完全加载
  28. await this.page.waitForTimeout(5000);
  29. await this.expectToBeVisible();
  30. }
  31. async expectToBeVisible() {
  32. // 等待页面完全加载
  33. await this.page.waitForSelector('text=用户管理', { state: 'visible', timeout: 10000 });
  34. await expect(this.pageTitle).toBeVisible();
  35. await expect(this.createUserButton).toBeVisible();
  36. await expect(this.userTable).toBeVisible();
  37. }
  38. async searchUsers(keyword: string) {
  39. await this.searchInput.fill(keyword);
  40. await this.searchButton.click();
  41. await this.page.waitForLoadState('networkidle');
  42. }
  43. async createUser(userData: {
  44. username: string;
  45. password: string;
  46. nickname?: string;
  47. email?: string;
  48. phone?: string;
  49. name?: string;
  50. }) {
  51. await this.createUserButton.click();
  52. // 填写用户表单
  53. await this.page.getByLabel('用户名').fill(userData.username);
  54. await this.page.getByLabel('密码').fill(userData.password);
  55. if (userData.nickname) {
  56. await this.page.getByLabel('昵称').fill(userData.nickname);
  57. }
  58. if (userData.email) {
  59. await this.page.getByLabel('邮箱').fill(userData.email);
  60. }
  61. if (userData.phone) {
  62. await this.page.getByLabel('手机号').fill(userData.phone);
  63. }
  64. if (userData.name) {
  65. await this.page.getByLabel('真实姓名').fill(userData.name);
  66. }
  67. // 提交表单
  68. await this.page.getByRole('button', { name: '创建用户' }).click();
  69. await this.page.waitForLoadState('networkidle');
  70. }
  71. async getUserCount(): Promise<number> {
  72. const rows = await this.userTable.locator('tbody tr').count();
  73. return rows;
  74. }
  75. async getUserByUsername(username: string): Promise<Locator | null> {
  76. const userRow = this.userTable.locator('tbody tr').filter({ hasText: username }).first();
  77. return (await userRow.count()) > 0 ? userRow : null;
  78. }
  79. async editUser(username: string, updates: {
  80. nickname?: string;
  81. email?: string;
  82. phone?: string;
  83. name?: string;
  84. }) {
  85. const userRow = await this.getUserByUsername(username);
  86. if (!userRow) throw new Error(`User ${username} not found`);
  87. await userRow.locator('button').filter({ hasText: '编辑' }).click();
  88. // 更新字段
  89. if (updates.nickname) {
  90. await this.page.getByLabel('昵称').fill(updates.nickname);
  91. }
  92. if (updates.email) {
  93. await this.page.getByLabel('邮箱').fill(updates.email);
  94. }
  95. if (updates.phone) {
  96. await this.page.getByLabel('手机号').fill(updates.phone);
  97. }
  98. if (updates.name) {
  99. await this.page.getByLabel('真实姓名').fill(updates.name);
  100. }
  101. // 提交更新
  102. await this.page.getByRole('button', { name: '更新用户' }).click();
  103. await this.page.waitForLoadState('networkidle');
  104. }
  105. async deleteUser(username: string) {
  106. const userRow = await this.getUserByUsername(username);
  107. if (!userRow) throw new Error(`User ${username} not found`);
  108. await userRow.locator('button').filter({ hasText: '删除' }).click();
  109. await this.page.getByRole('button', { name: '删除' }).click();
  110. await this.page.waitForLoadState('networkidle');
  111. }
  112. async expectUserExists(username: string) {
  113. const userRow = await this.getUserByUsername(username);
  114. await expect(userRow).not.toBeNull();
  115. }
  116. async expectUserNotExists(username: string) {
  117. const userRow = await this.getUserByUsername(username);
  118. await expect(userRow).toBeNull();
  119. }
  120. }