Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-20 14:30:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

expand node search box V2 e2e coverage

Browse Source 
- extend search v2 fixtures
 - add additional tests
 - add data-testid for targeting elements
 - rework tests to work with new menu UI
This commit is contained in:
pythongosssss
2026-03-27 07:47:11 -07:00
parent c00e285768
commit 711371d9c5
7 changed files with 326 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser_tests/fixtures/ComfyPage.ts
View File

@@ -216,7 +216,7 @@ export class ComfyPage {
this.workflowUploadInput = page.locator('#comfy-file-input')
this.searchBox = new ComfyNodeSearchBox(page)
this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
this.searchBoxV2 = new ComfyNodeSearchBoxV2(this)
this.menu = new ComfyMenu(page)
this.actionbar = new ComfyActionbar(page)
this.templates = new ComfyTemplates(page)

43
browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts
View File

@@ -1,4 +1,4 @@
import type { Locator, Page } from '@playwright/test'
import type { Locator } from '@playwright/test'
import type { ComfyPage } from '../ComfyPage'
@@ -8,13 +8,18 @@ export class ComfyNodeSearchBoxV2 {
readonly filterSearch: Locator
readonly results: Locator
readonly filterOptions: Locator
readonly filterChips: Locator
readonly noResults: Locator
constructor(readonly page: Page) {
constructor(private comfyPage: ComfyPage) {
const page = comfyPage.page
this.dialog = page.getByRole('search')
this.input = this.dialog.getByRole('combobox')
this.filterSearch = this.dialog.getByRole('textbox', { name: 'Search' })
this.results = this.dialog.getByTestId('result-item')
this.filterOptions = this.dialog.getByTestId('filter-option')
this.filterChips = this.dialog.getByTestId('filter-chip')
this.noResults = this.dialog.getByTestId('no-results')
}
categoryButton(categoryId: string): Locator {
@@ -25,7 +30,37 @@ export class ComfyNodeSearchBoxV2 {
return this.dialog.getByRole('button', { name })
}
async reload(comfyPage: ComfyPage) {
await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
async applyTypeFilter(
filterName: 'Input' | 'Output',
typeName: string
): Promise<void> {
await this.filterBarButton(filterName).click()
await this.filterOptions.first().waitFor({ state: 'visible' })
await this.filterSearch.fill(typeName)
await this.filterOptions.filter({ hasText: typeName }).first().click()
// Close the popover by clicking the trigger button again
await this.filterBarButton(filterName).click()
await this.filterOptions.first().waitFor({ state: 'hidden' })
}
async removeFilterChip(index: number = 0): Promise<void> {
await this.filterChips.nth(index).getByTestId('chip-delete').click()
}
async getResultCount(): Promise<number> {
await this.results.first().waitFor({ state: 'visible' })
return this.results.count()
}
async open(): Promise<void> {
await this.comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
await this.input.waitFor({ state: 'visible' })
}
async enableV2Search(): Promise<void> {
await this.comfyPage.settings.setSetting(
'Comfy.NodeSearchBoxImpl',
'default'
)
}
}

6
browser_tests/fixtures/helpers/NodeOperationsHelper.ts
View File

@@ -24,6 +24,12 @@ export class NodeOperationsHelper {
})
}
async getLinkCount(): Promise<number> {
return await this.page.evaluate(() => {
return window.app?.rootGraph?.links?.size ?? 0
})
}
async getSelectedGraphNodesCount(): Promise<number> {
return await this.page.evaluate(() => {
return (

24
browser_tests/tests/nodeSearchBoxV2.spec.ts
View File

@@ -5,8 +5,7 @@ import {
test.describe('Node search box V2', { tag: '@node' }, () => {
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
await comfyPage.searchBoxV2.enableV2Search()
await comfyPage.settings.setSetting(
'Comfy.LinkRelease.Action',
'search box'
@@ -15,15 +14,13 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
'Comfy.LinkRelease.ActionShift',
'search box'
)
await comfyPage.searchBoxV2.reload(comfyPage)
})
test('Can open search and add node', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
await expect(searchBoxV2.results.first()).toBeVisible()
@@ -39,8 +36,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
const { searchBoxV2 } = comfyPage
const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
// Default results should be visible without typing
await expect(searchBoxV2.results.first()).toBeVisible()
@@ -61,10 +57,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
'KSampler'
])
await searchBoxV2.reload(comfyPage)
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.filterBarButton('Bookmarked').click()
@@ -77,8 +70,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
}) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.categoryButton('sampling').click()
@@ -92,8 +84,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
test('Can filter by input type via filter bar', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
// Click "Input" filter chip in the filter bar
await searchBoxV2.filterBarButton('Input').click()
@@ -121,8 +112,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
const { searchBoxV2 } = comfyPage
const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
const results = searchBoxV2.results

320
browser_tests/tests/nodeSearchBoxV2Extended.spec.ts
View File

@@ -5,8 +5,7 @@ import {
test.describe('Node search box V2 extended', { tag: '@node' }, () => {
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
await comfyPage.searchBoxV2.enableV2Search()
await comfyPage.settings.setSetting(
'Comfy.LinkRelease.Action',
'search box'
@@ -15,13 +14,12 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
'Comfy.LinkRelease.ActionShift',
'search box'
)
await comfyPage.searchBoxV2.reload(comfyPage)
})
test('Double-click on empty canvas opens search', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await comfyPage.page.mouse.dblclick(200, 200, { delay: 5 })
await expect(searchBoxV2.input).toBeVisible()
await expect(searchBoxV2.dialog).toBeVisible()
})
@@ -32,8 +30,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
const { searchBoxV2 } = comfyPage
const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
await expect(searchBoxV2.results.first()).toBeVisible()
@@ -45,29 +42,43 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
expect(newCount).toBe(initialCount)
})
test('Search clears when reopening', async ({ comfyPage }) => {
test('Reopening search after Enter has no persisted state', async ({
comfyPage
}) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
await expect(searchBoxV2.results.first()).toBeVisible()
await comfyPage.page.keyboard.press('Enter')
await expect(searchBoxV2.input).not.toBeVisible()
await searchBoxV2.open()
await expect(searchBoxV2.input).toHaveValue('')
await expect(searchBoxV2.filterChips).toHaveCount(0)
})
test('Reopening search after Escape has no persisted state', async ({
comfyPage
}) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
await expect(searchBoxV2.results.first()).toBeVisible()
await comfyPage.page.keyboard.press('Escape')
await expect(searchBoxV2.input).not.toBeVisible()
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await expect(searchBoxV2.input).toHaveValue('')
await expect(searchBoxV2.filterChips).toHaveCount(0)
})
test.describe('Category navigation', () => {
test('Category navigation updates results', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
await searchBoxV2.categoryButton('sampling').click()
await expect(searchBoxV2.results.first()).toBeVisible()
@@ -85,59 +96,270 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
test('Filter chip removal restores results', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await expect(searchBoxV2.input).toBeVisible()
await searchBoxV2.open()
// Record initial result text for comparison
await expect(searchBoxV2.results.first()).toBeVisible()
const unfilteredResults = await searchBoxV2.results.allTextContents()
// Search first to get a result set below the 64-item cap
await searchBoxV2.input.fill('Load')
const unfilteredCount = await searchBoxV2.getResultCount()
// Apply Input filter with MODEL type
await searchBoxV2.filterBarButton('Input').click()
await expect(searchBoxV2.filterOptions.first()).toBeVisible()
await searchBoxV2.filterSearch.fill('MODEL')
await searchBoxV2.filterOptions
.filter({ hasText: 'MODEL' })
.first()
.click()
// Verify filter chip appeared and results changed
const filterChip = searchBoxV2.dialog.locator(
'[data-testid="filter-chip"]'
)
await expect(filterChip).toBeVisible()
await expect(searchBoxV2.results.first()).toBeVisible()
const filteredResults = await searchBoxV2.results.allTextContents()
expect(filteredResults).not.toEqual(unfilteredResults)
await searchBoxV2.applyTypeFilter('Input', 'MODEL')
await expect(searchBoxV2.filterChips.first()).toBeVisible()
const filteredCount = await searchBoxV2.getResultCount()
expect(filteredCount).not.toBe(unfilteredCount)
// Remove filter by clicking the chip delete button
await filterChip.getByTestId('chip-delete').click()
await searchBoxV2.removeFilterChip()
// Filter chip should be removed
await expect(filterChip).not.toBeVisible()
await expect(searchBoxV2.results.first()).toBeVisible()
// Filter chip should be removed and count restored
await expect(searchBoxV2.filterChips).toHaveCount(0)
const restoredCount = await searchBoxV2.getResultCount()
expect(restoredCount).toBe(unfilteredCount)
})
})
test.describe('Keyboard navigation', () => {
test('ArrowUp on first item keeps first selected', async ({
test.describe('Link release', () => {
test('Link release opens search with pre-applied type filter', async ({
comfyPage
}) => {
const { searchBoxV2 } = comfyPage
await comfyPage.canvasOps.doubleClick()
await comfyPage.canvasOps.disconnectEdge()
await expect(searchBoxV2.input).toBeVisible()
// disconnectEdge pulls a CLIP link - should have a filter chip
await expect(searchBoxV2.filterChips).toHaveCount(1)
await expect(searchBoxV2.filterChips.first()).toContainText('CLIP')
})
test('Link release auto-connects added node', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
const nodeCountBefore = await comfyPage.nodeOps.getGraphNodesCount()
const linkCountBefore = await comfyPage.nodeOps.getLinkCount()
await comfyPage.canvasOps.disconnectEdge()
await expect(searchBoxV2.input).toBeVisible()
// Search for a node that accepts CLIP input and select it
await searchBoxV2.input.fill('CLIP Text Encode')
await expect(searchBoxV2.results.first()).toBeVisible()
await comfyPage.page.keyboard.press('Enter')
await expect(searchBoxV2.input).not.toBeVisible()
// A new node should have been added and auto-connected
const nodeCountAfter = await comfyPage.nodeOps.getGraphNodesCount()
expect(nodeCountAfter).toBe(nodeCountBefore + 1)
const linkCountAfter = await comfyPage.nodeOps.getLinkCount()
expect(linkCountAfter).toBe(linkCountBefore)
})
})
test.describe('Filter combinations', () => {
test('Output type filter filters results', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
// Search first so both counts use the search service path
await searchBoxV2.input.fill('Load')
const unfilteredCount = await searchBoxV2.getResultCount()
await searchBoxV2.applyTypeFilter('Output', 'IMAGE')
await expect(searchBoxV2.filterChips).toHaveCount(1)
const filteredCount = await searchBoxV2.getResultCount()
expect(filteredCount).not.toBe(unfilteredCount)
})
test('Multiple type filters (Input + Output) narrows results', async ({
comfyPage
}) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.applyTypeFilter('Input', 'MODEL')
await expect(searchBoxV2.filterChips).toHaveCount(1)
const singleFilterCount = await searchBoxV2.getResultCount()
await searchBoxV2.applyTypeFilter('Output', 'LATENT')
await expect(searchBoxV2.filterChips).toHaveCount(2)
const dualFilterCount = await searchBoxV2.getResultCount()
expect(dualFilterCount).toBeLessThan(singleFilterCount)
})
test('Root filter + search query narrows results', async ({
comfyPage
}) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
// Search without root filter
await searchBoxV2.input.fill('Sampler')
const unfilteredCount = await searchBoxV2.getResultCount()
// Apply Comfy root filter on top of search
await searchBoxV2.filterBarButton('Comfy').click()
const filteredCount = await searchBoxV2.getResultCount()
// Root filter should narrow or maintain the result set
expect(filteredCount).toBeLessThan(unfilteredCount)
expect(filteredCount).toBeGreaterThan(0)
})
test('Root filter + category selection', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
// Click "Comfy" root filter
await searchBoxV2.filterBarButton('Comfy').click()
const comfyCount = await searchBoxV2.getResultCount()
// Under root filter, categories are prefixed (e.g. comfy/sampling)
await searchBoxV2.categoryButton('comfy/sampling').click()
const comfySamplingCount = await searchBoxV2.getResultCount()
expect(comfySamplingCount).toBeLessThan(comfyCount)
})
})
test.describe('Category sidebar', () => {
test('Category tree expand and collapse', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
// Click a parent category to expand it
const samplingBtn = searchBoxV2.categoryButton('sampling')
await samplingBtn.click()
// Look for subcategories (e.g. sampling/custom_sampling)
const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
await expect(subcategory).toBeVisible()
// Click sampling again to collapse
await samplingBtn.click()
await expect(subcategory).not.toBeVisible()
})
test('Subcategory narrows results to subset', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
// Select parent category
await searchBoxV2.categoryButton('sampling').click()
const parentCount = await searchBoxV2.getResultCount()
// Select subcategory
const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
await expect(subcategory).toBeVisible()
await subcategory.click()
const childCount = await searchBoxV2.getResultCount()
expect(childCount).toBeLessThan(parentCount)
})
test('Most relevant resets category filter', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
const defaultCount = await searchBoxV2.getResultCount()
// Select a category
await searchBoxV2.categoryButton('sampling').click()
const samplingCount = await searchBoxV2.getResultCount()
expect(samplingCount).not.toBe(defaultCount)
// Click "Most relevant" to reset
await searchBoxV2.categoryButton('most-relevant').click()
const resetCount = await searchBoxV2.getResultCount()
expect(resetCount).toBe(defaultCount)
})
})
test.describe('Search behavior', () => {
test('Click on result item adds node', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
await searchBoxV2.open()
await searchBoxV2.input.fill('KSampler')
const results = searchBoxV2.results
await expect(results.first()).toBeVisible()
await expect(searchBoxV2.results.first()).toBeVisible()
// First result should be selected by default
await expect(results.first()).toHaveAttribute('aria-selected', 'true')
await searchBoxV2.results.first().click()
await expect(searchBoxV2.input).not.toBeVisible()
// ArrowUp on first item should keep first selected
await comfyPage.page.keyboard.press('ArrowUp')
await expect(results.first()).toHaveAttribute('aria-selected', 'true')
const newCount = await comfyPage.nodeOps.getGraphNodesCount()
expect(newCount).toBe(initialCount + 1)
})
test('Search narrows results progressively', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.input.fill('S')
const count1 = await searchBoxV2.getResultCount()
await searchBoxV2.input.fill('Sa')
const count2 = await searchBoxV2.getResultCount()
await searchBoxV2.input.fill('Sampler')
const count3 = await searchBoxV2.getResultCount()
expect(count2).toBeLessThan(count1)
expect(count3).toBeLessThan(count2)
})
test('No results shown for nonsensical query', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.input.fill('zzzxxxyyy_nonexistent_node')
await expect(searchBoxV2.noResults).toBeVisible()
await expect(searchBoxV2.results).toHaveCount(0)
})
})
test.describe('Filter chip interaction', () => {
test('Multiple filter chips displayed', async ({ comfyPage }) => {
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.applyTypeFilter('Input', 'MODEL')
await searchBoxV2.applyTypeFilter('Output', 'LATENT')
await expect(searchBoxV2.filterChips).toHaveCount(2)
await expect(searchBoxV2.filterChips.first()).toContainText('MODEL')
await expect(searchBoxV2.filterChips.nth(1)).toContainText('LATENT')
})
})
test.describe('Settings-driven behavior', () => {
test('Node ID name shown when setting enabled', async ({ comfyPage }) => {
await comfyPage.settings.setSetting(
'Comfy.NodeSearchBoxImpl.ShowIdName',
true
)
const { searchBoxV2 } = comfyPage
await searchBoxV2.open()
await searchBoxV2.input.fill('VAE Decode')
await expect(searchBoxV2.results.first()).toBeVisible()
const firstResult = searchBoxV2.results.first()
const idBadge = firstResult.getByTestId('node-id-badge')
await expect(idBadge).toBeVisible()
await expect(idBadge).toContainText('VAEDecode')
})
})
})

1
src/components/searchbox/v2/NodeSearchContent.vue
View File

@@ -84,6 +84,7 @@
</div>
<div
v-if="displayedResults.length === 0"
data-testid="no-results"
class="px-4 py-8 text-center text-muted-foreground"
>
{{ $t('g.noResults') }}

1
src/components/searchbox/v2/NodeSearchListItem.vue
View File

@@ -14,6 +14,7 @@
/>
<span
v-if="showIdName"
data-testid="node-id-badge"
class="shrink-0 rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
v-html="highlightQuery(nodeDef.name, currentQuery)"
/>