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 <amp@ampcode.com>

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

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 {

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]

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
+    await tab
-      .locator(tab.nodeSelector('KSampler (Advanced)'))
+      .getNodeInFolder('KSampler (Advanced)', 'sampling')
-      .nth(1)
       .locator('.bookmark-button')
       .click()
     expect(

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
+    // Click on a specific category (Appearance) to verify category switching
-    const categories = comfyPage.page.locator(
+    const appearanceCategory = comfyPage.page.getByTestId(
-      '.settings-sidebar .p-listbox-option'
+      'settings-tab-Appearance'
     )
-    const categoryCount = await categories.count()
+    await appearanceCategory.click()
 
-    if (categoryCount > 1) {
+    // Verify the category is selected by checking if its parent option has the selected class
-      // Click on the second category
+    await expect(appearanceCategory.locator('xpath=ancestor::li')).toHaveClass(
-      await categories.nth(1).click()
+      /p-listbox-option-selected/
-
+    )
-      // Verify the category is selected
-      await expect(categories.nth(1)).toHaveClass(/p-listbox-option-selected/)
-    }
   })
 
   test('settings content area is visible', async ({ comfyPage }) => {

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
+    const warningToast = comfyPage.page.locator('.p-toast-message').filter({
-      .locator('div')
+      hasText: 'Version Compatibility'
-      .filter({ hasText: 'Version Compatibility' })
+    })
-      .nth(3)
     await warningToast.waitFor({ state: 'visible' })
     const dismissButton = warningToast.getByRole('button', { name: 'Close' })
     await dismissButton.click()