From 7f2454efecb170c52dfcb32f5ae29c34bc3bb82a Mon Sep 17 00:00:00 2001 From: Alexander Brown <448862+DrJKL@users.noreply.github.com> Date: Sat, 31 Jan 2026 10:52:41 -0800 Subject: [PATCH] fix(browser_tests): replace .nth() with semantic selectors - Remove unused saveButton selector from ComfyMenu - Replace widgetTextBox .nth(1) with node-scoped selector - Replace .nth(3) toast selector with .p-toast-message filter - Replace .nth(1) category selector with getByTestId - Replace .nth(1) node selector with getNodeInFolder() helper - Add nodeSelector(), folderSelector(), getNodeInFolder() methods - Add saveButton and nodeLibrary TestIds to selectors.ts Amp-Thread-ID: https://ampcode.com/threads/T-019c155c-92e1-76f3-b6ce-7fc3ffa11582 Co-authored-by: Amp --- browser_tests/fixtures/ComfyPage.ts | 9 ++++----- .../fixtures/components/SidebarTab.ts | 14 ++++++++++++++ browser_tests/fixtures/selectors.ts | 7 ++++++- .../tests/sidebar/nodeLibrary.spec.ts | 5 ++--- browser_tests/tests/useSettingSearch.spec.ts | 19 ++++++++----------- .../tests/versionMismatchWarnings.spec.ts | 7 +++---- 6 files changed, 37 insertions(+), 24 deletions(-) diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts index a974096b1..311669554 100644 --- a/browser_tests/fixtures/ComfyPage.ts +++ b/browser_tests/fixtures/ComfyPage.ts @@ -56,15 +56,11 @@ class ComfyMenu { public readonly sideToolbar: Locator public readonly propertiesPanel: ComfyPropertiesPanel public readonly themeToggleButton: Locator - public readonly saveButton: Locator constructor(public readonly page: Page) { this.sideToolbar = page.getByTestId(TestIds.sidebar.toolbar) this.themeToggleButton = page.getByTestId(TestIds.sidebar.themeToggle) this.propertiesPanel = new ComfyPropertiesPanel(page) - this.saveButton = page - .locator('button[title="Save the current workflow"]') - .nth(0) } get buttons() { @@ -202,7 +198,10 @@ export class ComfyPage { this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188' this.canvas = page.locator('#graph-canvas') this.selectionToolbox = page.locator('.selection-toolbox') - this.widgetTextBox = page.getByPlaceholder('text').nth(1) + this.widgetTextBox = page + .locator('[data-node-id]') + .first() + .getByPlaceholder('text') this.resetViewButton = page.getByRole('button', { name: 'Reset View' }) this.queueButton = page.getByRole('button', { name: 'Queue Prompt' }) this.runButton = page diff --git a/browser_tests/fixtures/components/SidebarTab.ts b/browser_tests/fixtures/components/SidebarTab.ts index 401b43e26..b74362fce 100644 --- a/browser_tests/fixtures/components/SidebarTab.ts +++ b/browser_tests/fixtures/components/SidebarTab.ts @@ -84,6 +84,20 @@ export class NodeLibrarySidebarTab extends SidebarTab { `[data-testid="node-tree-leaf"][data-node-name="${nodeName}"]` ) } + + nodeSelector(nodeName: string): string { + return `[data-testid="node-tree-leaf"][data-node-name="${nodeName}"]` + } + + folderSelector(folderName: string): string { + return `[data-testid="node-tree-folder"][data-folder-name="${folderName}"]` + } + + getNodeInFolder(nodeName: string, folderName: string) { + return this.getFolder(folderName) + .locator('xpath=ancestor::li') + .locator(`[data-testid="node-tree-leaf"][data-node-name="${nodeName}"]`) + } } export class WorkflowsSidebarTab extends SidebarTab { diff --git a/browser_tests/fixtures/selectors.ts b/browser_tests/fixtures/selectors.ts index 4feabd7dc..2bf312e9c 100644 --- a/browser_tests/fixtures/selectors.ts +++ b/browser_tests/fixtures/selectors.ts @@ -27,7 +27,11 @@ export const TestIds = { about: 'about-panel' }, topbar: { - queueButton: 'queue-button' + queueButton: 'queue-button', + saveButton: 'save-workflow-button' + }, + nodeLibrary: { + bookmarksSection: 'node-library-bookmarks-section' } } as const @@ -40,3 +44,4 @@ export type TestIdValue = | (typeof TestIds.canvas)[keyof typeof TestIds.canvas] | (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs] | (typeof TestIds.topbar)[keyof typeof TestIds.topbar] + | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary] diff --git a/browser_tests/tests/sidebar/nodeLibrary.spec.ts b/browser_tests/tests/sidebar/nodeLibrary.spec.ts index 7d94df549..b5ad059b1 100644 --- a/browser_tests/tests/sidebar/nodeLibrary.spec.ts +++ b/browser_tests/tests/sidebar/nodeLibrary.spec.ts @@ -183,9 +183,8 @@ test.describe('Node library sidebar', () => { ]) const tab = comfyPage.menu.nodeLibraryTab await tab.getFolder('sampling').click() - await comfyPage.page - .locator(tab.nodeSelector('KSampler (Advanced)')) - .nth(1) + await tab + .getNodeInFolder('KSampler (Advanced)', 'sampling') .locator('.bookmark-button') .click() expect( diff --git a/browser_tests/tests/useSettingSearch.spec.ts b/browser_tests/tests/useSettingSearch.spec.ts index aa3481408..845f656f5 100644 --- a/browser_tests/tests/useSettingSearch.spec.ts +++ b/browser_tests/tests/useSettingSearch.spec.ts @@ -109,19 +109,16 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => { const settingsDialog = comfyPage.page.locator('.settings-container') await expect(settingsDialog).toBeVisible() - // Get categories and click on different ones - const categories = comfyPage.page.locator( - '.settings-sidebar .p-listbox-option' + // Click on a specific category (Appearance) to verify category switching + const appearanceCategory = comfyPage.page.getByTestId( + 'settings-tab-Appearance' ) - const categoryCount = await categories.count() + await appearanceCategory.click() - if (categoryCount > 1) { - // Click on the second category - await categories.nth(1).click() - - // Verify the category is selected - await expect(categories.nth(1)).toHaveClass(/p-listbox-option-selected/) - } + // Verify the category is selected by checking if its parent option has the selected class + await expect(appearanceCategory.locator('xpath=ancestor::li')).toHaveClass( + /p-listbox-option-selected/ + ) }) test('settings content area is visible', async ({ comfyPage }) => { diff --git a/browser_tests/tests/versionMismatchWarnings.spec.ts b/browser_tests/tests/versionMismatchWarnings.spec.ts index 15c55873f..c5f6e2c12 100644 --- a/browser_tests/tests/versionMismatchWarnings.spec.ts +++ b/browser_tests/tests/versionMismatchWarnings.spec.ts @@ -103,10 +103,9 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => { await comfyPage.setup() // Locate the warning toast and dismiss it - const warningToast = comfyPage.page - .locator('div') - .filter({ hasText: 'Version Compatibility' }) - .nth(3) + const warningToast = comfyPage.page.locator('.p-toast-message').filter({ + hasText: 'Version Compatibility' + }) await warningToast.waitFor({ state: 'visible' }) const dismissButton = warningToast.getByRole('button', { name: 'Close' }) await dismissButton.click()