fix: browser test fixes for flaky selectors and missing setup

- SidebarTab: Use placeholder selector instead of test ID for search input
- KeyboardHelper: Remove redundant canvas fallback (null is valid)
- groupNode: Use variable for category name instead of hardcoded string
- nodeLibrary: Ensure tab is open before filling search input
- subgraph: Reload workflow after page reload to restore state
- useSettingSearch: Use role selector and simplify selected class assertion

Amp-Thread-ID: https://ampcode.com/threads/T-019c18c2-667a-7179-bb2d-86f35cd1d7b0
Co-authored-by: Amp <amp@ampcode.com>

browser_tests/fixtures/components/SidebarTab.ts

@@ -39,9 +39,7 @@ export class NodeLibrarySidebarTab extends SidebarTab {
   }
 
   get nodeLibrarySearchBoxInput() {
-    return this.page
-      .getByTestId(TestIds.sidebar.nodeLibrarySearch)
-      .locator('input')
+    return this.page.getByPlaceholder('Search Nodes...')
   }
 
   get nodeLibraryTree() {

browser_tests/fixtures/helpers/KeyboardHelper.ts

@@ -20,26 +20,26 @@ export class KeyboardHelper {
   }
 
   async selectAll(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('KeyA', locator ?? this.canvas)
+    await this.ctrlSend('KeyA', locator)
   }
 
   async bypass(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('KeyB', locator ?? this.canvas)
+    await this.ctrlSend('KeyB', locator)
   }
 
   async undo(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('KeyZ', locator ?? this.canvas)
+    await this.ctrlSend('KeyZ', locator)
   }
 
   async redo(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('KeyY', locator ?? this.canvas)
+    await this.ctrlSend('KeyY', locator)
   }
 
   async moveUp(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('ArrowUp', locator ?? this.canvas)
+    await this.ctrlSend('ArrowUp', locator)
   }
 
   async moveDown(locator?: Locator | null): Promise<void> {
-    await this.ctrlSend('ArrowDown', locator ?? this.canvas)
+    await this.ctrlSend('ArrowDown', locator)
   }
 }

browser_tests/tests/groupNode.spec.ts

@@ -29,7 +29,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     test('Is added to node library sidebar', async ({
       comfyPage: _comfyPage
     }) => {
-      expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
+      expect(await libraryTab.getFolder(groupNodeCategory).count()).toBe(1)
     })
 
     test('Can be added to canvas using node library sidebar', async ({

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -385,6 +385,7 @@ test.describe('Node library sidebar', () => {
     ])
 
     const tab = comfyPage.menu.nodeLibraryTab
+    await tab.open()
     await tab.nodeLibrarySearchBoxInput.fill('KSampler')
     await expect(tab.getNode('KSampler (Advanced)')).toHaveCount(2)
   })

browser_tests/tests/subgraph.spec.ts

@@ -781,6 +781,8 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       // Reload the page
       await comfyPage.page.reload()
       await comfyPage.setup()
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
 
       // Navigate into subgraph
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')

browser_tests/tests/useSettingSearch.spec.ts

@@ -121,15 +121,13 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
     await expect(settingsDialog).toBeVisible()
 
     // Click on a specific category (Appearance) to verify category switching
-    const appearanceCategory = comfyPage.page.getByTestId(
-      'settings-tab-Appearance'
-    )
+    const appearanceCategory = comfyPage.page.getByRole('option', {
+      name: 'Appearance'
+    })
     await appearanceCategory.click()
 
-    // 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/
-    )
+    // Verify the category is selected
+    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
   })
 
   test('settings content area is visible', async ({ comfyPage }) => {