mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
8b1cf594d1
## Summary - Move error red border from TopMenuSection/ComfyActionbar to ErrorOverlay - Add error indicator (outline + StatusBadge dot) on right side panel toggle button when errors are present, the panel/overlay are closed, and the errors tab setting is enabled - Replace technical group titles (e.g. "Missing Node Packs") with user-friendly i18n messages in ErrorOverlay - Dynamically change action button label based on single error type (e.g. "Show missing nodes" instead of "See Errors") - Remove unused `hasAnyError` prop from ComfyActionbar - Fix `type="secondary"` → `variant="secondary"` on panel toggle button - Pre-wire `missing_media` error type support for #10309 - Migrate ErrorOverlay E2E selectors from `getByText`/`getByRole` to `data-testid` - Update E2E screenshot snapshots affected by TopMenuSection error state design changes ## Test plan - [x] Trigger execution error → verify red border on ErrorOverlay, no red border on TopMenuSection/ComfyActionbar - [x] With errors and right side panel closed → verify red outline + dot on panel toggle button - [x] Open right side panel or error overlay → verify indicator disappears - [x] Disable `Comfy.RightSidePanel.ShowErrorsTab` → verify no indicator even with errors - [x] Load workflow with only missing nodes → verify "Show missing nodes" button label and friendly message - [x] Load workflow with only missing models → verify "Show missing models" button label and count message - [x] Load workflow with mixed errors → verify "See Errors" fallback label - [x] E2E: `pnpm test:browser:local -- --grep "Error overlay"` ## Screenshots <img width="498" height="381" alt="스크린샷 2026-03-26 230252" src="https://github.com/user-attachments/assets/034f0f3f-e6a1-4617-b8f6-cd4c145e3a47" /> <img width="550" height="303" alt="스크린샷 2026-03-26 230525" src="https://github.com/user-attachments/assets/2958914b-0ff0-461b-a6ea-7f2811bf33c2" /> <img width="551" height="87" alt="스크린샷 2026-03-26 230318" src="https://github.com/user-attachments/assets/396e9cb1-667e-44c4-83fe-ab113b313d16" /> --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Dante <bunggl@naver.com>
377 lines
12 KiB
TypeScript
377 lines
12 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
|
|
import { TestIds } from '../../fixtures/selectors'
|
|
|
|
test.describe('Workflows sidebar', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Sidebar'
|
|
)
|
|
|
|
// Open the sidebar
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
})
|
|
|
|
test.afterEach(async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({})
|
|
})
|
|
|
|
test('Can create new blank workflow', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
|
|
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow',
|
|
'*Unsaved Workflow (2)'
|
|
])
|
|
})
|
|
|
|
test('Can show top level saved workflows', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({
|
|
'workflow1.json': 'default.json',
|
|
'workflow2.json': 'default.json'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
|
|
expect.arrayContaining(['workflow1', 'workflow2'])
|
|
)
|
|
})
|
|
|
|
test('Can duplicate workflow', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow1')
|
|
|
|
expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
|
|
expect.arrayContaining(['workflow1'])
|
|
)
|
|
|
|
await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1',
|
|
'*workflow1 (Copy)'
|
|
])
|
|
|
|
await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1',
|
|
'*workflow1 (Copy)',
|
|
'*workflow1 (Copy) (2)'
|
|
])
|
|
|
|
await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow1',
|
|
'*workflow1 (Copy)',
|
|
'*workflow1 (Copy) (2)',
|
|
'*workflow1 (Copy) (3)'
|
|
])
|
|
})
|
|
|
|
test('Can open workflow after insert', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({
|
|
'workflow1.json': 'nodes/single_ksampler.json'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
|
|
const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
await tab.insertWorkflow(tab.getPersistedItem('workflow1'))
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount())
|
|
.toEqual(originalNodeCount + 1)
|
|
|
|
await tab.getPersistedItem('workflow1').click()
|
|
await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
|
|
})
|
|
|
|
test('Can rename nested workflow from opened workflow item', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({
|
|
foo: {
|
|
'bar.json': 'default.json'
|
|
}
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
// Switch to the parent folder
|
|
await tab.getPersistedItem('foo').click()
|
|
// Switch to the nested workflow
|
|
await tab.getPersistedItem('bar').click()
|
|
|
|
const openedWorkflow = tab.getOpenedItem('foo/bar')
|
|
await tab.renameWorkflow(openedWorkflow, 'foo/baz')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow',
|
|
'foo/baz'
|
|
])
|
|
})
|
|
|
|
test('Can save workflow as', async ({ comfyPage }) => {
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow3')
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(['*Unsaved Workflow', 'workflow3'])
|
|
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow4')
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(['*Unsaved Workflow', 'workflow3', 'workflow4'])
|
|
})
|
|
|
|
test('Exported workflow does not contain localized slot names', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.workflow.loadWorkflow('default')
|
|
const exportedWorkflow = await comfyPage.workflow.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.workflow.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.workflow.getExportedWorkflow({
|
|
api: false
|
|
})
|
|
|
|
await comfyPage.settings.setSetting('Comfy.Locale', 'zh')
|
|
await comfyPage.setup()
|
|
|
|
const downloadedContentZh = await comfyPage.workflow.getExportedWorkflow({
|
|
api: false
|
|
})
|
|
|
|
// Compare the exported workflow with the original
|
|
delete downloadedContent.id
|
|
delete downloadedContentZh.id
|
|
expect(downloadedContent).toBeDefined()
|
|
expect(downloadedContent).toEqual(downloadedContentZh)
|
|
})
|
|
|
|
test('Can save workflow as with same name', async ({ comfyPage }) => {
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow5')
|
|
expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow5'
|
|
])
|
|
|
|
await comfyPage.menu.topbar.saveWorkflowAs('workflow5')
|
|
await comfyPage.confirmDialog.click('overwrite')
|
|
expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'workflow5'
|
|
])
|
|
})
|
|
|
|
test('Can save temporary workflow with unmodified name', async ({
|
|
comfyPage
|
|
}) => {
|
|
expect(await comfyPage.workflow.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.workflow.isCurrentWorkflowModified()).toBe(false)
|
|
})
|
|
|
|
test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
|
|
const topbar = comfyPage.menu.topbar
|
|
await topbar.saveWorkflow('workflow1')
|
|
await topbar.saveWorkflowAs('workflow2')
|
|
await comfyPage.nextFrame()
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(['workflow1', 'workflow2'])
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
|
|
.toEqual('workflow2')
|
|
|
|
await topbar.saveWorkflowAs('workflow1')
|
|
await comfyPage.confirmDialog.click('overwrite')
|
|
// The old workflow1 should be deleted and the new one should be saved.
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(['workflow2', 'workflow1'])
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
|
|
.toEqual('workflow1')
|
|
})
|
|
|
|
test('Reports missing nodes warning again when switching back to workflow', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.RightSidePanel.ShowErrorsTab',
|
|
true
|
|
)
|
|
await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
|
|
|
|
const errorOverlay = comfyPage.page.getByTestId(
|
|
TestIds.dialogs.errorOverlay
|
|
)
|
|
await expect(errorOverlay).toBeVisible()
|
|
|
|
// Dismiss the error overlay
|
|
await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
|
|
await expect(errorOverlay).not.toBeVisible()
|
|
|
|
// Load blank workflow
|
|
await comfyPage.menu.workflowsTab.open()
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
|
|
// Switch back to the missing_nodes workflow — overlay should reappear
|
|
// so users can install missing node packs without a page reload
|
|
await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
|
|
|
|
await expect(errorOverlay).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'
|
|
])
|
|
})
|
|
|
|
test('Can close saved workflow with command', async ({ comfyPage }) => {
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await comfyPage.menu.topbar.saveWorkflow('workflow1')
|
|
await comfyPage.command.executeCommand('Workspace.CloseWorkflow')
|
|
expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
|
|
})
|
|
|
|
test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.Workflow.ConfirmDelete', false)
|
|
|
|
const { topbar, workflowsTab } = comfyPage.menu
|
|
|
|
const filename = 'workflow18'
|
|
await topbar.saveWorkflow(filename)
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
|
|
|
|
await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.contextMenu.clickMenuItem('Delete')
|
|
await comfyPage.nextFrame()
|
|
|
|
await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow'
|
|
])
|
|
})
|
|
|
|
test('Can delete workflows', async ({ comfyPage }) => {
|
|
const { topbar, workflowsTab } = comfyPage.menu
|
|
|
|
const filename = 'workflow18'
|
|
await topbar.saveWorkflow(filename)
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
|
|
|
|
await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
|
|
await comfyPage.contextMenu.clickMenuItem('Delete')
|
|
await comfyPage.nextFrame()
|
|
|
|
await comfyPage.confirmDialog.click('delete')
|
|
|
|
await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
|
|
expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
|
|
'*Unsaved Workflow'
|
|
])
|
|
})
|
|
|
|
test('Can duplicate workflow from context menu', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({
|
|
'workflow1.json': 'default.json'
|
|
})
|
|
|
|
const { workflowsTab } = comfyPage.menu
|
|
await workflowsTab.open()
|
|
|
|
await workflowsTab.getPersistedItem('workflow1').click({ button: 'right' })
|
|
await comfyPage.contextMenu.clickMenuItem('Duplicate')
|
|
await expect
|
|
.poll(() => workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(['*Unsaved Workflow', '*workflow1 (Copy)'])
|
|
})
|
|
|
|
test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({
|
|
'workflow1.json': 'default.json'
|
|
})
|
|
|
|
await comfyPage.menu.workflowsTab.open()
|
|
|
|
// Wait for workflow to appear in Browse section after sync
|
|
const workflowItem =
|
|
comfyPage.menu.workflowsTab.getPersistedItem('workflow1')
|
|
await expect(workflowItem).toBeVisible({ timeout: 3000 })
|
|
|
|
const nodeCount = await comfyPage.nodeOps.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")',
|
|
'#graph-canvas',
|
|
{ targetPosition }
|
|
)
|
|
|
|
// Wait for nodes to be inserted after drag-drop with retryable assertion
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 3000 })
|
|
.toBe(nodeCount * 2)
|
|
})
|
|
})
|