refactor: setting dialog

browser_tests/fixtures/components/SettingDialog.ts

@@ -9,12 +9,12 @@ export class SettingDialog {
   ) {}
 
   get root() {
-    return this.page.locator('div.settings-container')
+    return this.page.locator('[data-testid="settings-dialog"]')
   }
 
   async open() {
     await this.comfyPage.executeCommand('Comfy.ShowSettingsDialog')
-    await this.page.waitForSelector('div.settings-container')
+    await this.page.waitForSelector('[data-testid="settings-dialog"]')
   }
 
   /**
@@ -23,9 +23,7 @@ export class SettingDialog {
    * @param value - The value to set
    */
   async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').fill(value)
   }
 
@@ -34,15 +32,15 @@ export class SettingDialog {
    * @param id - The id of the setting
    */
   async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
     await settingInputDiv.locator('input').click()
   }
 
   async goToAboutPanel() {
-    const aboutButton = this.page.locator('li[aria-label="About"]')
+    const aboutButton = this.root.locator('nav [role="button"]', {
+      hasText: 'About'
+    })
     await aboutButton.click()
-    await this.page.waitForSelector('div.about-container')
+    await this.page.waitForSelector('.about-container')
   }
 }

browser_tests/tests/dialog.spec.ts

@@ -232,9 +232,13 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await expect(settingsDialog).toBeVisible()
+    const contentArea = settingsDialog.locator('main')
+    await expect(contentArea).toBeVisible()
+    const isUsableHeight = await contentArea.evaluate(
       (el) => el.clientHeight > 30
     )
     expect(isUsableHeight).toBeTruthy()
@@ -244,7 +248,9 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(settingsLocator).not.toBeVisible()
@@ -261,10 +267,15 @@ test.describe('Settings', () => {
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
+    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
 
     // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await settingsDialog
+      .locator('nav [role="button"]', { hasText: 'Keybinding' })
+      .click()
     await comfyPage.page.waitForSelector(
       '[placeholder="Search Keybindings..."]'
     )

browser_tests/tests/subgraph.spec.ts

@@ -794,7 +794,7 @@ test.describe('Subgraph Operations', () => {
 
       // Open settings dialog using hotkey
       await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
         state: 'visible'
       })
 
@@ -804,7 +804,7 @@ test.describe('Subgraph Operations', () => {
 
       // Dialog should be closed
       await expect(
-        comfyPage.page.locator('.settings-container')
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
       ).not.toBeVisible()
 
       // Should still be in subgraph

browser_tests/tests/useSettingSearch.spec.ts

@@ -41,16 +41,15 @@ test.describe('Settings Search functionality', () => {
   })
 
   test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await expect(searchBox).toBeVisible()
 
-    // Verify search box has the correct placeholder
     await expect(searchBox).toHaveAttribute(
       'placeholder',
       expect.stringContaining('Search')
@@ -58,226 +57,198 @@ test.describe('Settings Search functionality', () => {
   })
 
   test('search box is functional and accepts input', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('Comfy')
 
-    // Verify the input was accepted
     await expect(searchBox).toHaveValue('Comfy')
   })
 
   test('search box clears properly', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('test')
     await expect(searchBox).toHaveValue('test')
 
-    // Clear the search box
     await searchBox.clear()
     await expect(searchBox).toHaveValue('')
   })
 
   test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Check that the sidebar has categories
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
+    const categories = settingsDialog.locator('nav [role="button"]')
     expect(await categories.count()).toBeGreaterThan(0)
 
-    // Check that at least one category is visible
     await expect(categories.first()).toBeVisible()
   })
 
   test('can select different categories in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Get categories and click on different ones
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
+    const categories = settingsDialog.locator('nav [role="button"]')
     const categoryCount = await categories.count()
 
     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/)
+      await expect(categories.nth(1)).toHaveClass(
+        /bg-interface-menu-component-surface-selected/
+      )
     }
   })
 
   test('settings content area is visible', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Check that the content area is visible
-    const contentArea = comfyPage.page.locator('.settings-content')
+    const contentArea = settingsDialog.locator('main')
     await expect(contentArea).toBeVisible()
-
-    // Check that tab panels are visible
-    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
-    await expect(tabPanels).toBeVisible()
   })
 
   test('search functionality affects UI state', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-
-    // Type in search box
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('graph')
 
-    // Verify that the search input is handled
     await expect(searchBox).toHaveValue('graph')
   })
 
   test('settings dialog can be closed', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Close with escape key
     await comfyPage.page.keyboard.press('Escape')
 
-    // Verify dialog is closed
     await expect(settingsDialog).not.toBeVisible()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Type rapidly in search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('a')
     await searchBox.fill('ab')
     await searchBox.fill('abc')
     await searchBox.fill('abcd')
 
-    // Verify final value
     await expect(searchBox).toHaveValue('abcd')
   })
 
   test('search excludes hidden settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')
 
-    // Should show visible setting but not hidden setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')
   })
 
   test('search excludes deprecated settings from results', async ({
     comfyPage
   }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')
 
-    // Should show visible setting but not deprecated setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')
   })
 
   test('search shows visible settings but excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
     await searchBox.fill('Test')
 
-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const contentArea = settingsDialog.locator('main')
 
-    // Should only show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
 
-    // Should not show hidden or deprecated settings
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')
   })
 
   test('search by setting name excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    // Open settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
 
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    const searchBox = settingsDialog.locator('input[placeholder*="Search"]')
+    const contentArea = settingsDialog.locator('main')
 
-    // Search specifically for hidden setting by name
     await searchBox.clear()
     await searchBox.fill('Hidden')
 
-    // Should not show the hidden setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(contentArea).not.toContainText('Test Hidden Setting')
 
-    // Search specifically for deprecated setting by name
     await searchBox.clear()
     await searchBox.fill('Deprecated')
 
-    // Should not show the deprecated setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(contentArea).not.toContainText('Test Deprecated Setting')
 
-    // Search for visible setting by name - should work
     await searchBox.clear()
     await searchBox.fill('Visible')
 
-    // Should show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(contentArea).toContainText('Test Visible Setting')
   })
 })