Files
ComfyUI_frontend/browser_tests/fixtures/components/BaseDialog.ts
Alexander Brown 22ff808d59 fix(browser_tests): use getByRole for interactive elements
Replace fragile CSS selectors with Playwright getByRole() for better

accessibility-based testing:

- bottomPanelShortcuts.spec.ts: button[aria-label] -> getByRole

- execution.spec.ts: .p-dialog-close-button -> getByRole

- backgroundImageUpload.spec.ts: button:has(.pi-*) -> getByRole

- nodeHelp.spec.ts: button:has(.pi-question) -> getByRole

- BaseDialog.ts: closeButton uses getByRole

- ComfyNodeSearchBox.ts: Add button uses getByRole

- Topbar.ts: close-button uses getByRole

Amp-Thread-ID: https://ampcode.com/threads/T-019c155c-92e1-76f3-b6ce-7fc3ffa11582
Co-authored-by: Amp <amp@ampcode.com>
2026-01-31 10:46:11 -08:00

32 lines
757 B
TypeScript

import type { Locator, Page } from '@playwright/test'
export class BaseDialog {
readonly root: Locator
readonly closeButton: Locator
constructor(
public readonly page: Page,
testId?: string
) {
this.root = testId ? page.getByTestId(testId) : page.locator('.p-dialog')
this.closeButton = this.root.getByRole('button', { name: 'Close' })
}
async isVisible(): Promise<boolean> {
return this.root.isVisible()
}
async waitForVisible(): Promise<void> {
await this.root.waitFor({ state: 'visible' })
}
async waitForHidden(): Promise<void> {
await this.root.waitFor({ state: 'hidden' })
}
async close(): Promise<void> {
await this.closeButton.click({ force: true })
await this.waitForHidden()
}
}