diff --git a/browser_tests/fixtures/components/PropertiesPanel.ts b/browser_tests/fixtures/components/PropertiesPanel.ts index 05782495e..b5fde90e9 100644 --- a/browser_tests/fixtures/components/PropertiesPanel.ts +++ b/browser_tests/fixtures/components/PropertiesPanel.ts @@ -30,18 +30,23 @@ export class PropertiesPanel { async promoteWidget(widgetName: string) { await this.ensureOpen() - // Click on Advanced Inputs to expand it - const advancedInputsButton = this.root - .getByRole('button') - .filter({ hasText: /advanced inputs/i }) - await advancedInputsButton.click() - - // Find the widget row and click the more options button + // Check if widget is already visible in Advanced Inputs section const widgetRow = this.root .locator('[class*="widget-item"], [class*="input-item"]') .filter({ hasText: widgetName }) .first() + const isAdvancedExpanded = await widgetRow.isVisible() + if (!isAdvancedExpanded) { + // Click on Advanced Inputs to expand it + const advancedInputsButton = this.root + .getByRole('button') + .filter({ hasText: /advanced inputs/i }) + await advancedInputsButton.click() + await widgetRow.waitFor({ state: 'visible', timeout: 5000 }) + } + + // Find and click the more options button const moreButton = widgetRow.locator('button').filter({ has: this.page.locator('[class*="lucide--more-vertical"]') }) @@ -51,18 +56,16 @@ export class PropertiesPanel { await this.page.getByText('Show input').click() // Close and reopen panel to refresh the UI state - await this.page.getByLabel('Toggle properties panel').click() - await this.page.getByLabel('Toggle properties panel').click() + await this.close() + await this.ensureOpen() } async demoteWidget(widgetName: string) { await this.ensureOpen() // Check if INPUTS section content is already visible - const inputsContent = this.root.locator('div').filter({ - hasText: new RegExp(`^${widgetName}$`) - }) - const isInputsExpanded = await inputsContent.first().isVisible() + const widgetRow = this.root.locator('span').getByText(widgetName).first() + const isInputsExpanded = await widgetRow.isVisible() if (!isInputsExpanded) { // Click on INPUTS section to expand it (where promoted widgets appear) @@ -72,17 +75,11 @@ export class PropertiesPanel { await inputsButton.click() } - // Find the widget row and click the more options button - const widgetRow = this.root - .locator('div') - .filter({ hasText: new RegExp(`^${widgetName}$`) }) - .first() - await widgetRow.waitFor({ state: 'visible', timeout: 5000 }) - // Find the more options button (the vertical dots icon button) + // Find the more options button in the widget-item-header const moreButton = widgetRow - .locator('..') + .locator('xpath=ancestor::*[contains(@class, "widget-item-header")]') .locator('button') .filter({ has: this.page.locator('[class*="more-vertical"], [class*="lucide"]') diff --git a/browser_tests/tests/dynamicWidgetsSubgraph.spec.ts b/browser_tests/tests/dynamicWidgetsSubgraph.spec.ts index b5f101334..416999e9b 100644 --- a/browser_tests/tests/dynamicWidgetsSubgraph.spec.ts +++ b/browser_tests/tests/dynamicWidgetsSubgraph.spec.ts @@ -266,7 +266,7 @@ test.describe('Dynamic Combo Widgets in Subgraphs', () => { subgraphWidgetName('dynamic_combo') ) await comboWidget!.setValue('two') - await comfyPage.page.waitForTimeout(500) + await comfyPage.nextFrame() expect(await reloadedSubgraph.getWidgets()).toEqual([ widget('dynamic_combo', true, 'two'), @@ -285,7 +285,7 @@ test.describe('Dynamic Combo Widgets in Subgraphs', () => { await comfyPage.nextFrame() const subgraphNode = await testNode.convertToSubgraph() - await comfyPage.page.waitForTimeout(500) + await comfyPage.nextFrame() await subgraphNode.click('title') await comfyPage.nextFrame()