import { Page } from '@playwright/test'; import { BasePage } from './base-page'; import { FormHelper } from '../helpers/form-helper'; import { TableHelper } from '../helpers/table-helper'; import { ScreenshotHelper } from '../helpers/screenshot-helper'; import { testLogger } from '../core/test-logger'; export class RoleManagementPage extends BasePage { private formHelper: FormHelper; private tableHelper: TableHelper; private screenshotHelper: ScreenshotHelper; private readonly selectors = { roleTable: '.role-table', addRoleButton: 'button:has-text("新增")', editButton: 'button:has-text("编辑")', deleteButton: 'button:has-text("删除")', searchInput: 'input[placeholder*="搜索"]', searchButton: 'button:has-text("查询")', resetButton: 'button:has-text("重置")', modal: '.ant-modal', modalTitle: '.ant-modal-title', modalConfirmButton: '.ant-modal-confirm-btn', modalCancelButton: '.ant-modal-cancel-btn', successMessage: '.ant-message-success', errorMessage: '.ant-message-error', roleForm: '.role-form', roleNameInput: 'input[name="roleName"]', roleKeyInput: 'input[name="roleKey"]', roleSortInput: 'input[name="roleSort"]', statusSelect: 'select[name="status"]', remarkInput: 'textarea[name="remark"]', permissionTree: '.permission-tree', permissionCheckbox: '.ant-tree-checkbox' }; constructor(page: Page) { super(page); this.formHelper = new FormHelper(page); this.tableHelper = new TableHelper(page); this.screenshotHelper = new ScreenshotHelper(page); } async navigate(): Promise { testLogger.info('导航到角色管理页面'); await super.navigate('/system/role'); } async waitForLoad(): Promise { testLogger.info('等待角色管理页面加载'); try { await this.page.waitForSelector(this.selectors.roleTable, { state: 'visible', timeout: this.timeout.default }); testLogger.info('角色管理页面加载完成'); } catch (error) { testLogger.error('角色管理页面加载超时', error as Error); await this.screenshotHelper.takeScreenshot('role-management-load-error'); throw error; } } async clickAddRole(): Promise { testLogger.info('点击新增角色按钮'); try { await this.page.waitForSelector(this.selectors.addRoleButton, { state: 'visible', timeout: this.timeout.element }); await this.page.click(this.selectors.addRoleButton); await this.page.waitForSelector(this.selectors.modal, { state: 'visible', timeout: this.timeout.element }); testLogger.info('新增角色对话框已打开'); } catch (error) { testLogger.error('点击新增角色按钮失败', error as Error); await this.screenshotHelper.takeScreenshot('click-add-role-error'); throw error; } } async clickEditRole(rowIndex: number): Promise { testLogger.info(`点击编辑角色按钮,行索引: ${rowIndex}`); try { const editButtons = this.page.locator(this.selectors.editButton); await editButtons.nth(rowIndex).waitFor({ state: 'visible', timeout: this.timeout.element }); await editButtons.nth(rowIndex).click(); await this.page.waitForSelector(this.selectors.modal, { state: 'visible', timeout: this.timeout.element }); testLogger.info('编辑角色对话框已打开'); } catch (error) { testLogger.error(`点击编辑角色按钮失败,行索引: ${rowIndex}`, error as Error); await this.screenshotHelper.takeScreenshot(`click-edit-role-${rowIndex}-error`); throw error; } } async clickDeleteRole(rowIndex: number): Promise { testLogger.info(`点击删除角色按钮,行索引: ${rowIndex}`); try { const deleteButtons = this.page.locator(this.selectors.deleteButton); await deleteButtons.nth(rowIndex).waitFor({ state: 'visible', timeout: this.timeout.element }); await deleteButtons.nth(rowIndex).click(); testLogger.info('删除确认对话框已打开'); } catch (error) { testLogger.error(`点击删除角色按钮失败,行索引: ${rowIndex}`, error as Error); await this.screenshotHelper.takeScreenshot(`click-delete-role-${rowIndex}-error`); throw error; } } async confirmDelete(): Promise { testLogger.info('确认删除角色'); try { await this.page.waitForSelector(this.selectors.modalConfirmButton, { state: 'visible', timeout: this.timeout.element }); await this.page.click(this.selectors.modalConfirmButton); await this.page.waitForSelector(this.selectors.modal, { state: 'hidden', timeout: this.timeout.element }); testLogger.info('角色删除确认成功'); } catch (error) { testLogger.error('确认删除角色失败', error as Error); await this.screenshotHelper.takeScreenshot('confirm-delete-error'); throw error; } } async searchRole(keyword: string): Promise { testLogger.info(`搜索角色,关键词: ${keyword}`); try { await this.page.waitForSelector(this.selectors.searchInput, { state: 'visible', timeout: this.timeout.element }); await this.page.fill(this.selectors.searchInput, keyword); await this.page.click(this.selectors.searchButton); await this.page.waitForLoadState('networkidle', { timeout: this.timeout.network }); testLogger.info('角色搜索完成'); } catch (error) { testLogger.error(`搜索角色失败,关键词: ${keyword}`, error as Error); await this.screenshotHelper.takeScreenshot('search-role-error'); throw error; } } async getSuccessMessage(): Promise { testLogger.debug('获取成功消息'); try { const successElement = this.page.locator(this.selectors.successMessage); await successElement.waitFor({ state: 'visible', timeout: this.timeout.element }); const message = await successElement.textContent(); testLogger.debug(`成功消息: ${message}`); return message || ''; } catch (error) { testLogger.error('获取成功消息失败', error as Error); return ''; } } async getErrorMessage(): Promise { testLogger.debug('获取错误消息'); try { const errorElement = this.page.locator(this.selectors.errorMessage); await errorElement.waitFor({ state: 'visible', timeout: this.timeout.element }); const message = await errorElement.textContent(); testLogger.debug(`错误消息: ${message}`); return message || ''; } catch (error) { testLogger.error('获取错误消息失败', error as Error); return ''; } } async getRoleCount(): Promise { testLogger.debug('获取角色数量'); try { const count = await this.tableHelper.getRowCount(this.selectors.roleTable); testLogger.debug(`角色数量: ${count}`); return count; } catch (error) { testLogger.error('获取角色数量失败', error as Error); return 0; } } }