mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-30 12:59:55 +00:00
1038 lines
35 KiB
TypeScript
1038 lines
35 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from './fixtures/ComfyPage'
|
|
|
|
test.describe('Menu', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
|
|
})
|
|
|
|
// Skip reason: Flaky.
|
|
test.skip('Toggle theme', async ({ comfyPage }) => {
|
|
test.setTimeout(30000)
|
|
|
|
expect(await comfyPage.menu.getThemeId()).toBe('dark')
|
|
|
|
await comfyPage.menu.toggleTheme()
|
|
|
|
expect(await comfyPage.menu.getThemeId()).toBe('light')
|
|
|
|
// Theme id should persist after reload.
|
|
await comfyPage.setup()
|
|
expect(await comfyPage.menu.getThemeId()).toBe('light')
|
|
|
|
await comfyPage.menu.toggleTheme()
|
|
|
|
expect(await comfyPage.menu.getThemeId()).toBe('dark')
|
|
})
|
|
|
|
test('Can register sidebar tab', async ({ comfyPage }) => {
|
|
const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
|
|
(el) => el.children.length
|
|
)
|
|
|
|
await comfyPage.page.evaluate(async () => {
|
|
window['app'].extensionManager.registerSidebarTab({
|
|
id: 'search',
|
|
icon: 'pi pi-search',
|
|
title: 'search',
|
|
tooltip: 'search',
|
|
type: 'custom',
|
|
render: (el) => {
|
|
el.innerHTML = '<div>Custom search tab</div>'
|
|
}
|
|
})
|
|
})
|
|
await comfyPage.nextFrame()
|
|
|
|
const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
|
|
(el) => el.children.length
|
|
)
|
|
expect(newChildrenCount).toBe(initialChildrenCount + 1)
|
|
})
|
|
|
|
test.describe('Node library sidebar', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {})
|
|
// Open the sidebar
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.open()
|
|
})
|
|
|
|
test('Node preview and drag to canvas', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('sampling').click()
|
|
|
|
// Hover over a node to display the preview
|
|
const nodeSelector = '.p-tree-node-leaf'
|
|
await comfyPage.page.hover(nodeSelector)
|
|
|
|
// Verify the preview is displayed
|
|
const previewVisible = await comfyPage.page.isVisible(
|
|
'.node-lib-node-preview'
|
|
)
|
|
expect(previewVisible).toBe(true)
|
|
|
|
const count = await comfyPage.getGraphNodesCount()
|
|
// Drag the node onto the canvas
|
|
const canvasSelector = '#graph-canvas'
|
|
|
|
// Get the bounding box of the canvas element
|
|
const canvasBoundingBox = (await comfyPage.page
|
|
.locator(canvasSelector)
|
|
.boundingBox())!
|
|
|
|
// Calculate the center position of the canvas
|
|
const targetPosition = {
|
|
x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
|
|
y: canvasBoundingBox.y + canvasBoundingBox.height / 2
|
|
}
|
|
|
|
await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector, {
|
|
targetPosition
|
|
})
|
|
|
|
// Verify the node is added to the canvas
|
|
expect(await comfyPage.getGraphNodesCount()).toBe(count + 1)
|
|
})
|
|
|
|
test('Bookmark node', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('sampling').click()
|
|
|
|
// Bookmark the node
|
|
await tab
|
|
.getNode('KSampler (Advanced)')
|
|
.locator('.bookmark-button')
|
|
.click()
|
|
|
|
// Verify the bookmark is added to the bookmarks tab
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['KSamplerAdvanced'])
|
|
// Verify the bookmark node with the same name is added to the tree.
|
|
expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
|
|
|
|
// Hover on the bookmark node to display the preview
|
|
await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
|
|
expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(
|
|
true
|
|
)
|
|
})
|
|
|
|
test('Ignores unrecognized node', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo'])
|
|
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
expect(await tab.getFolder('sampling').count()).toBe(1)
|
|
expect(await tab.getNode('foo').count()).toBe(0)
|
|
})
|
|
|
|
test('Displays empty bookmarks folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
expect(await tab.getFolder('foo').count()).toBe(1)
|
|
})
|
|
|
|
test('Can add new bookmark folder', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.newFolderButton.click()
|
|
await comfyPage.page.keyboard.press('Enter')
|
|
expect(await tab.getFolder('New Folder').count()).toBe(1)
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['New Folder/'])
|
|
})
|
|
|
|
test('Can add nested bookmark folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('New Folder').click()
|
|
await comfyPage.page.keyboard.type('bar')
|
|
await comfyPage.page.keyboard.press('Enter')
|
|
|
|
expect(await tab.getFolder('bar').count()).toBe(1)
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['foo/', 'foo/bar/'])
|
|
})
|
|
|
|
test('Can delete bookmark folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('Delete').click()
|
|
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual([])
|
|
})
|
|
|
|
test('Can rename bookmark folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page
|
|
.locator('.p-contextmenu-item-label:has-text("Rename")')
|
|
.click()
|
|
await comfyPage.page.keyboard.insertText('bar')
|
|
await comfyPage.page.keyboard.press('Enter')
|
|
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['bar/'])
|
|
})
|
|
|
|
test('Can add bookmark by dragging node to bookmark folder', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('sampling').click()
|
|
await comfyPage.page.dragAndDrop(
|
|
tab.nodeSelector('KSampler (Advanced)'),
|
|
tab.folderSelector('foo')
|
|
)
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['foo/', 'foo/KSamplerAdvanced'])
|
|
})
|
|
|
|
test('Can add bookmark by clicking bookmark button', async ({
|
|
comfyPage
|
|
}) => {
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('sampling').click()
|
|
await tab
|
|
.getNode('KSampler (Advanced)')
|
|
.locator('.bookmark-button')
|
|
.click()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['KSamplerAdvanced'])
|
|
})
|
|
|
|
test('Can unbookmark node (Top level bookmark)', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
|
|
'KSamplerAdvanced'
|
|
])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab
|
|
.getNode('KSampler (Advanced)')
|
|
.locator('.bookmark-button')
|
|
.click()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual([])
|
|
})
|
|
|
|
test('Can unbookmark node (Library node bookmark)', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
|
|
'KSamplerAdvanced'
|
|
])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('sampling').click()
|
|
await comfyPage.page
|
|
.locator(tab.nodeSelector('KSampler (Advanced)'))
|
|
.nth(1)
|
|
.locator('.bookmark-button')
|
|
.click()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual([])
|
|
})
|
|
test('Can customize icon', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('Customize').click()
|
|
await comfyPage.page
|
|
.locator('.icon-field .p-selectbutton > *:nth-child(2)')
|
|
.click()
|
|
await comfyPage.page
|
|
.locator('.color-field .p-selectbutton > *:nth-child(2)')
|
|
.click()
|
|
await comfyPage.page.getByLabel('Confirm').click()
|
|
await comfyPage.nextFrame()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
|
|
).toEqual({
|
|
'foo/': {
|
|
icon: 'pi-folder',
|
|
color: '#007bff'
|
|
}
|
|
})
|
|
})
|
|
// If color is left as default, it should not be saved
|
|
test('Can customize icon (default field)', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('Customize').click()
|
|
await comfyPage.page
|
|
.locator('.icon-field .p-selectbutton > *:nth-child(2)')
|
|
.click()
|
|
await comfyPage.page.getByLabel('Confirm').click()
|
|
await comfyPage.nextFrame()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
|
|
).toEqual({
|
|
'foo/': {
|
|
icon: 'pi-folder'
|
|
}
|
|
})
|
|
})
|
|
|
|
test('Can customize bookmark color after interacting with color options', async ({
|
|
comfyPage
|
|
}) => {
|
|
// Open customization dialog
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('Customize').click()
|
|
|
|
// Click a color option multiple times
|
|
const customColorOption = comfyPage.page.locator(
|
|
'.p-togglebutton-content > .pi-palette'
|
|
)
|
|
await customColorOption.click()
|
|
await customColorOption.click()
|
|
|
|
// Use the color picker
|
|
await comfyPage.page
|
|
.getByLabel('Customize Folder')
|
|
.getByRole('textbox')
|
|
.click()
|
|
await comfyPage.page.locator('.p-colorpicker-color-background').click()
|
|
|
|
// Finalize the customization
|
|
await comfyPage.page
|
|
.locator('.icon-field .p-selectbutton > *:nth-child(2)')
|
|
.click()
|
|
await comfyPage.page.getByLabel('Confirm').click()
|
|
await comfyPage.nextFrame()
|
|
|
|
// Verify the color selection is saved
|
|
const setting = await comfyPage.getSetting(
|
|
'Comfy.NodeLibrary.BookmarksCustomization'
|
|
)
|
|
await expect(setting).toHaveProperty(['foo/', 'color'])
|
|
await expect(setting['foo/'].color).not.toBeNull()
|
|
await expect(setting['foo/'].color).not.toBeUndefined()
|
|
await expect(setting['foo/'].color).not.toBe('')
|
|
})
|
|
|
|
test('Can rename customized bookmark folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
|
|
'foo/': {
|
|
icon: 'pi-folder',
|
|
color: '#007bff'
|
|
}
|
|
})
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page
|
|
.locator('.p-contextmenu-item-label:has-text("Rename")')
|
|
.click()
|
|
await comfyPage.page.keyboard.insertText('bar')
|
|
await comfyPage.page.keyboard.press('Enter')
|
|
await comfyPage.nextFrame()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual(['bar/'])
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
|
|
).toEqual({
|
|
'bar/': {
|
|
icon: 'pi-folder',
|
|
color: '#007bff'
|
|
}
|
|
})
|
|
})
|
|
|
|
test('Can delete customized bookmark folder', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
|
|
'foo/': {
|
|
icon: 'pi-folder',
|
|
color: '#007bff'
|
|
}
|
|
})
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.getFolder('foo').click({ button: 'right' })
|
|
await comfyPage.page.getByLabel('Delete').click()
|
|
await comfyPage.nextFrame()
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
|
|
).toEqual([])
|
|
expect(
|
|
await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
|
|
).toEqual({})
|
|
})
|
|
|
|
test('Can filter nodes in both trees', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
|
|
'foo/',
|
|
'foo/KSamplerAdvanced',
|
|
'KSampler'
|
|
])
|
|
|
|
const tab = comfyPage.menu.nodeLibraryTab
|
|
await tab.nodeLibrarySearchBoxInput.fill('KSampler')
|
|
// Node search box is debounced and may take some time to update.
|
|
await comfyPage.page.waitForTimeout(1000)
|
|
expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
|
|
})
|
|
})
|
|
|
|
test.describe('Workflows sidebar', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Sidebar'
|
|
)
|
|
|
|
// Open the sidebar
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
})
|
|
|
|
test.afterEach(async ({ comfyPage }) => {
|
|
await comfyPage.setupWorkflowsDirectory({})
|
|
})
|
|
|
|
test('Can create new blank workflow', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json'
|
|
])
|
|
|
|
await tab.newBlankWorkflowButton.click()
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json',
|
|
'*Unsaved Workflow (2).json'
|
|
])
|
|
})
|
|
|
|
test('Can show top level saved workflows', async ({ comfyPage }) => {
|
|
await comfyPage.setupWorkflowsDirectory({
|
|
'workflow1.json': 'default.json',
|
|
'workflow2.json': 'default.json'
|
|
})
|
|
await comfyPage.setup()
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
|
|
expect.arrayContaining(['workflow1.json', 'workflow2.json'])
|
|
)
|
|
})
|
|
|
|
test('Can duplicate workflow', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
|
|
|
|
expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
|
|
expect.arrayContaining(['workflow1.json'])
|
|
)
|
|
|
|
await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1.json',
|
|
'*workflow1 (Copy).json'
|
|
])
|
|
|
|
await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1.json',
|
|
'*workflow1 (Copy).json',
|
|
'*workflow1 (Copy) (2).json'
|
|
])
|
|
|
|
await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1.json',
|
|
'*workflow1 (Copy).json',
|
|
'*workflow1 (Copy) (2).json',
|
|
'*workflow1 (Copy) (3).json'
|
|
])
|
|
})
|
|
|
|
test('Can open workflow after insert', async ({ comfyPage }) => {
|
|
await comfyPage.setupWorkflowsDirectory({
|
|
'workflow1.json': 'single_ksampler.json'
|
|
})
|
|
await comfyPage.setup()
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
await comfyPage.executeCommand('Comfy.LoadDefaultWorkflow')
|
|
const originalNodeCount = (await comfyPage.getNodes()).length
|
|
|
|
await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
|
|
await comfyPage.nextFrame()
|
|
expect((await comfyPage.getNodes()).length).toEqual(originalNodeCount + 1)
|
|
|
|
await tab.getPersistedItem('workflow1.json').click()
|
|
await comfyPage.nextFrame()
|
|
expect((await comfyPage.getNodes()).length).toEqual(1)
|
|
})
|
|
|
|
test('Can rename nested workflow from opened workflow item', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setupWorkflowsDirectory({
|
|
foo: {
|
|
'bar.json': 'default.json'
|
|
}
|
|
})
|
|
await comfyPage.setup()
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
// Switch to the parent folder
|
|
await tab.getPersistedItem('foo').click()
|
|
await comfyPage.page.waitForTimeout(300)
|
|
// Switch to the nested workflow
|
|
await tab.getPersistedItem('bar').click()
|
|
await comfyPage.page.waitForTimeout(300)
|
|
|
|
const openedWorkflow = tab.getOpenedItem('foo/bar')
|
|
await tab.renameWorkflow(openedWorkflow, 'foo/baz')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json',
|
|
'foo/baz.json'
|
|
])
|
|
})
|
|
|
|
test('Can save workflow as', async ({ comfyPage }) => {
|
|
await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
|
|
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
|
|
})
|
|
|
|
test('Exported workflow does not contain localized slot names', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.loadWorkflow('default')
|
|
const exportedWorkflow = await comfyPage.getExportedWorkflow({
|
|
api: false
|
|
})
|
|
expect(exportedWorkflow).toBeDefined()
|
|
for (const node of exportedWorkflow.nodes) {
|
|
for (const slot of node.inputs) {
|
|
expect(slot.localized_name).toBeUndefined()
|
|
expect(slot.label).toBeUndefined()
|
|
}
|
|
for (const slot of node.outputs) {
|
|
expect(slot.localized_name).toBeUndefined()
|
|
expect(slot.label).toBeUndefined()
|
|
}
|
|
}
|
|
})
|
|
|
|
test('Can export same workflow with different locales', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.loadWorkflow('default')
|
|
|
|
// Setup download listener before triggering the export
|
|
const downloadPromise = comfyPage.page.waitForEvent('download')
|
|
await comfyPage.menu.topbar.exportWorkflow('exported_default.json')
|
|
|
|
// Wait for the download and get the file content
|
|
const download = await downloadPromise
|
|
expect(download.suggestedFilename()).toBe('exported_default.json')
|
|
|
|
// Get the exported workflow content
|
|
const downloadedContent = await comfyPage.getExportedWorkflow({
|
|
api: false
|
|
})
|
|
|
|
await comfyPage.setSetting('Comfy.Locale', 'zh')
|
|
await comfyPage.setup()
|
|
|
|
const downloadedContentZh = await comfyPage.getExportedWorkflow({
|
|
api: false
|
|
})
|
|
|
|
// Compare the exported workflow with the original
|
|
expect(downloadedContent).toBeDefined()
|
|
expect(downloadedContent).toEqual(downloadedContentZh)
|
|
})
|
|
|
|
test('Can save workflow as with same name', async ({ comfyPage }) => {
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['workflow5.json'])
|
|
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
|
|
await comfyPage.confirmDialog.click('overwrite')
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['workflow5.json'])
|
|
})
|
|
|
|
test('Can save temporary workflow with unmodified name', async ({
|
|
comfyPage
|
|
}) => {
|
|
expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
|
|
// Should not trigger the overwrite dialog
|
|
expect(
|
|
await comfyPage.page.locator('.comfy-modal-content:visible').count()
|
|
).toBe(0)
|
|
|
|
expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
|
|
})
|
|
|
|
test('Can overwrite other workflows with save as', async ({
|
|
comfyPage
|
|
}) => {
|
|
const topbar = comfyPage.menu.topbar
|
|
await topbar.saveWorkflow('workflow1.json')
|
|
await topbar.saveWorkflowAs('workflow2.json')
|
|
await comfyPage.nextFrame()
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['workflow1.json', 'workflow2.json'])
|
|
expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
|
|
'workflow2.json'
|
|
)
|
|
|
|
await topbar.saveWorkflowAs('workflow1.json')
|
|
await comfyPage.confirmDialog.click('overwrite')
|
|
// The old workflow1.json should be deleted and the new one should be saved.
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['workflow2.json', 'workflow1.json'])
|
|
expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
|
|
'workflow1.json'
|
|
)
|
|
})
|
|
|
|
test('Does not report warning when switching between opened workflows', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.loadWorkflow('missing_nodes')
|
|
await comfyPage.closeDialog()
|
|
|
|
// Load blank workflow
|
|
await comfyPage.menu.workflowsTab.open()
|
|
await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
|
|
|
|
// Switch back to the missing_nodes workflow
|
|
await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
|
|
|
|
await expect(
|
|
comfyPage.page.locator('.comfy-missing-nodes')
|
|
).not.toBeVisible()
|
|
})
|
|
|
|
test('Can close saved-workflows from the open workflows section', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.menu.topbar.saveWorkflow(
|
|
`tempWorkflow-${test.info().title}`
|
|
)
|
|
const closeButton = comfyPage.page.locator(
|
|
'.comfyui-workflows-open .close-workflow-button'
|
|
)
|
|
await closeButton.click()
|
|
expect(
|
|
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
).toEqual(['*Unsaved Workflow.json'])
|
|
})
|
|
|
|
test('Can close saved workflow with command', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
|
|
await comfyPage.executeCommand('Workspace.CloseWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json'
|
|
])
|
|
})
|
|
|
|
test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.Workflow.ConfirmDelete', false)
|
|
|
|
const { topbar, workflowsTab } = comfyPage.menu
|
|
|
|
const filename = 'workflow18.json'
|
|
await topbar.saveWorkflow(filename)
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
|
|
|
|
await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.clickContextMenuItem('Delete')
|
|
|
|
await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json'
|
|
])
|
|
})
|
|
|
|
test('Can delete workflows', async ({ comfyPage }) => {
|
|
const { topbar, workflowsTab } = comfyPage.menu
|
|
|
|
const filename = 'workflow18.json'
|
|
await topbar.saveWorkflow(filename)
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
|
|
|
|
await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
|
|
await comfyPage.clickContextMenuItem('Delete')
|
|
|
|
await comfyPage.confirmDialog.click('delete')
|
|
|
|
await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow.json'
|
|
])
|
|
})
|
|
|
|
test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
|
|
await comfyPage.setupWorkflowsDirectory({
|
|
'workflow1.json': 'default.json'
|
|
})
|
|
await comfyPage.setup()
|
|
await comfyPage.menu.workflowsTab.open()
|
|
|
|
const nodeCount = await comfyPage.getGraphNodesCount()
|
|
|
|
// Get the bounding box of the canvas element
|
|
const canvasBoundingBox = (await comfyPage.page
|
|
.locator('#graph-canvas')
|
|
.boundingBox())!
|
|
|
|
// Calculate the center position of the canvas
|
|
const targetPosition = {
|
|
x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
|
|
y: canvasBoundingBox.y + canvasBoundingBox.height / 2
|
|
}
|
|
|
|
await comfyPage.page.dragAndDrop(
|
|
'.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
|
|
'#graph-canvas',
|
|
{ targetPosition }
|
|
)
|
|
// Wait for the workflow to be inserted
|
|
await comfyPage.page.waitForTimeout(200)
|
|
expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
|
|
})
|
|
})
|
|
|
|
test.describe('Workflows topbar tabs', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
await comfyPage.setupWorkflowsDirectory({})
|
|
})
|
|
|
|
test('Can show opened workflows', async ({ comfyPage }) => {
|
|
expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
|
|
'Unsaved Workflow'
|
|
])
|
|
})
|
|
|
|
test('Can close saved-workflow tabs', async ({ comfyPage }) => {
|
|
const workflowName = `tempWorkflow-${test.info().title}`
|
|
await comfyPage.menu.topbar.saveWorkflow(workflowName)
|
|
expect(await comfyPage.menu.topbar.getTabNames()).toEqual([workflowName])
|
|
await comfyPage.menu.topbar.closeWorkflowTab(workflowName)
|
|
await comfyPage.nextFrame()
|
|
expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
|
|
'Unsaved Workflow'
|
|
])
|
|
})
|
|
})
|
|
|
|
test.describe('Topbar submmenus', () => {
|
|
test('@mobile Items fully visible on mobile screen width', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.menu.topbar.openSubmenuMobile()
|
|
const topLevelMenuItem = comfyPage.page
|
|
.locator('a.p-menubar-item-link')
|
|
.first()
|
|
const isTextCutoff = await topLevelMenuItem.evaluate((el) => {
|
|
return el.scrollWidth > el.clientWidth
|
|
})
|
|
expect(isTextCutoff).toBe(false)
|
|
})
|
|
|
|
test('Displays keybinding next to item', async ({ comfyPage }) => {
|
|
const workflowMenuItem = comfyPage.menu.topbar.getMenuItem('Workflow')
|
|
await workflowMenuItem.click()
|
|
const exportTag = comfyPage.page.locator('.keybinding-tag', {
|
|
hasText: 'Ctrl + s'
|
|
})
|
|
expect(await exportTag.count()).toBe(1)
|
|
})
|
|
|
|
test('Can catch error when executing command', async ({ comfyPage }) => {
|
|
await comfyPage.page.evaluate(() => {
|
|
window['app'].registerExtension({
|
|
name: 'TestExtension1',
|
|
commands: [
|
|
{
|
|
id: 'foo',
|
|
label: 'foo-command',
|
|
function: () => {
|
|
throw new Error('foo!')
|
|
}
|
|
}
|
|
],
|
|
menuCommands: [
|
|
{
|
|
path: ['ext'],
|
|
commands: ['foo']
|
|
}
|
|
]
|
|
})
|
|
})
|
|
await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
|
|
expect(await comfyPage.getVisibleToastCount()).toBe(1)
|
|
})
|
|
})
|
|
|
|
// Only test 'Top' to reduce test time.
|
|
// ['Bottom', 'Top']
|
|
;['Top'].forEach(async (position) => {
|
|
test(`Can migrate deprecated menu positions (${position})`, async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setSetting('Comfy.UseNewMenu', position)
|
|
expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
|
|
})
|
|
|
|
test(`Can migrate deprecated menu positions on initial load (${position})`, async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setSetting('Comfy.UseNewMenu', position)
|
|
await comfyPage.setup()
|
|
expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
|
|
})
|
|
})
|
|
})
|
|
|
|
test.describe.skip('Queue sidebar', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
|
|
})
|
|
|
|
test('can display tasks', async ({ comfyPage }) => {
|
|
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
|
})
|
|
|
|
test('can display tasks after closing then opening', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.close()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
|
})
|
|
|
|
test.describe('Virtual scroll', () => {
|
|
const layouts = [
|
|
{ description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
|
|
{ description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
|
|
{ description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
|
|
]
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage
|
|
.setupHistory()
|
|
.withTask(['example.webp'])
|
|
.repeat(50)
|
|
.setupRoutes()
|
|
})
|
|
|
|
layouts.forEach(({ description, width, rows, cols }) => {
|
|
const preRenderedRows = 1
|
|
const preRenderedTasks = preRenderedRows * cols * 2
|
|
const visibleTasks = rows * cols
|
|
const expectRenderLimit = visibleTasks + preRenderedTasks
|
|
|
|
test.describe(description, () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.menu.queueTab.setTabWidth(width)
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
})
|
|
|
|
test('should not render items outside of view', async ({
|
|
comfyPage
|
|
}) => {
|
|
const renderedCount =
|
|
await comfyPage.menu.queueTab.visibleTasks.count()
|
|
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
|
})
|
|
|
|
test('should teardown items after scrolling away', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.menu.queueTab.scrollTasks('down')
|
|
const renderedCount =
|
|
await comfyPage.menu.queueTab.visibleTasks.count()
|
|
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
|
})
|
|
|
|
test('should re-render items after scrolling away then back', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.menu.queueTab.scrollTasks('down')
|
|
await comfyPage.menu.queueTab.scrollTasks('up')
|
|
const renderedCount =
|
|
await comfyPage.menu.queueTab.visibleTasks.count()
|
|
expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
test.describe('Expand tasks', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
// 2-item batch and 3-item batch -> 3 additional items when expanded
|
|
await comfyPage
|
|
.setupHistory()
|
|
.withTask(['example.webp', 'example.webp', 'example.webp'])
|
|
.withTask(['example.webp', 'example.webp'])
|
|
.setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
})
|
|
|
|
test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
|
|
const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
|
|
await comfyPage.menu.queueTab.expandTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
|
|
initialCount + 3
|
|
)
|
|
})
|
|
|
|
test('can collapse flat tasks', async ({ comfyPage }) => {
|
|
const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
|
|
await comfyPage.menu.queueTab.expandTasks()
|
|
await comfyPage.menu.queueTab.collapseTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
|
|
initialCount
|
|
)
|
|
})
|
|
})
|
|
|
|
test.describe('Clear tasks', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage
|
|
.setupHistory()
|
|
.withTask(['example.webp'])
|
|
.repeat(6)
|
|
.setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
})
|
|
|
|
test('can clear all tasks', async ({ comfyPage }) => {
|
|
await comfyPage.menu.queueTab.clearTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
|
|
expect(
|
|
await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
|
|
).toBe(true)
|
|
})
|
|
|
|
test('can load new tasks after clearing all', async ({ comfyPage }) => {
|
|
await comfyPage.menu.queueTab.clearTasks()
|
|
await comfyPage.menu.queueTab.close()
|
|
await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
|
|
})
|
|
})
|
|
|
|
test.describe('Gallery', () => {
|
|
const firstImage = 'example.webp'
|
|
const secondImage = 'image32x32.webp'
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage
|
|
.setupHistory()
|
|
.withTask([secondImage])
|
|
.withTask([firstImage])
|
|
.setupRoutes()
|
|
await comfyPage.menu.queueTab.open()
|
|
await comfyPage.menu.queueTab.waitForTasks()
|
|
await comfyPage.menu.queueTab.openTaskPreview(0)
|
|
})
|
|
|
|
test('displays gallery image after opening task preview', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.nextFrame()
|
|
expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
|
|
})
|
|
|
|
test('maintains active gallery item when new tasks are added', async ({
|
|
comfyPage
|
|
}) => {
|
|
// Add a new task while the gallery is still open
|
|
const newImage = 'image64x64.webp'
|
|
comfyPage.setupHistory().withTask([newImage])
|
|
await comfyPage.menu.queueTab.triggerTasksUpdate()
|
|
await comfyPage.page.waitForTimeout(500)
|
|
const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
|
|
await newTask.waitFor({ state: 'visible' })
|
|
// The active gallery item should still be the initial image
|
|
expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
|
|
})
|
|
|
|
test.describe('Gallery navigation', () => {
|
|
const paths: {
|
|
description: string
|
|
path: ('Right' | 'Left')[]
|
|
end: string
|
|
}[] = [
|
|
{ description: 'Right', path: ['Right'], end: secondImage },
|
|
{ description: 'Left', path: ['Right', 'Left'], end: firstImage },
|
|
{ description: 'Left wrap', path: ['Left'], end: secondImage },
|
|
{ description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
|
|
]
|
|
|
|
paths.forEach(({ description, path, end }) => {
|
|
test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
|
|
for (const direction of path)
|
|
await comfyPage.page.keyboard.press(`Arrow${direction}`, {
|
|
delay: 256
|
|
})
|
|
await comfyPage.nextFrame()
|
|
expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|