mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
e11a1776ed
## Summary - Closing an inactive workflow tab and clicking "Save" overwrites that workflow with the **active** tab's content, causing permanent data loss - `saveWorkflow()` and `saveWorkflowAs()` call `checkState()` which serializes `app.rootGraph` (the active canvas) into the inactive workflow's `changeTracker.activeState` - Guard `checkState()` to only run when the workflow being saved is the active one — in both `saveWorkflow` and `saveWorkflowAs` ## Linked Issues - Fixes https://github.com/Comfy-Org/ComfyUI/issues/13230 ## Root Cause PR #9137 (commit `9fb93a5b0`, v1.41.7) added `workflow.changeTracker?.checkState()` inside `saveWorkflow()` and `saveWorkflowAs()`. `checkState()` always serializes `app.rootGraph` — the graph on the canvas. When called on an inactive tab's change tracker, it captures the active tab's data instead. ## Test plan - [x] E2E: "Closing an inactive tab with save preserves its own content" — persisted workflow B with added node, close while A is active, re-open and verify - [x] E2E: "Closing an inactive unsaved tab with save preserves its own content" — temporary workflow B with added node, close while A is active, save-as with filename, re-open and verify - [x] Manual: open A and B, edit B, switch to A, close B tab, click Save, re-open B — content should be B's not A's
533 lines
17 KiB
TypeScript
533 lines
17 KiB
TypeScript
import { readFileSync } from 'fs'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
|
|
|
test.describe('Workflow Persistence', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Sidebar'
|
|
)
|
|
})
|
|
|
|
test.afterEach(async ({ comfyPage }) => {
|
|
await comfyPage.workflow.setupWorkflowsDirectory({})
|
|
})
|
|
|
|
test('Rapid tab switching does not desync workflow and graph state', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description: 'PR #9533 — desynced workflow/graph state during loading'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('rapid-A')
|
|
const nodeCountA = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await comfyPage.menu.topbar.saveWorkflow('rapid-B')
|
|
const nodeCountB = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
expect(nodeCountA).not.toBe(nodeCountB)
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
await tab.switchToWorkflow('rapid-A')
|
|
await tab.switchToWorkflow('rapid-B')
|
|
}
|
|
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await comfyPage.nextFrame()
|
|
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
|
|
.toBe(nodeCountB)
|
|
|
|
await tab.switchToWorkflow('rapid-A')
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
|
|
.toBe(nodeCountA)
|
|
})
|
|
|
|
test('Node outputs are preserved when switching workflow tabs', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'PR #9380 — ChangeTracker.store() did not save nodeOutputs, losing preview images on tab switch'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('outputs-test')
|
|
|
|
const firstNode = await comfyPage.nodeOps.getFirstNodeRef()
|
|
expect(firstNode).toBeTruthy()
|
|
const nodeId = firstNode!.id
|
|
|
|
// Simulate node outputs as if execution completed
|
|
await comfyPage.page.evaluate((id) => {
|
|
const outputStore = window.app!.nodeOutputs
|
|
if (outputStore) {
|
|
outputStore[id] = {
|
|
images: [{ filename: 'test.png', subfolder: '', type: 'output' }]
|
|
}
|
|
}
|
|
}, String(nodeId))
|
|
|
|
// Trigger changeTracker to capture current state including outputs
|
|
await comfyPage.page.evaluate(() => {
|
|
const em = window.app!.extensionManager as unknown as Record<
|
|
string,
|
|
{ activeWorkflow?: { changeTracker?: { checkState(): void } } }
|
|
>
|
|
em.workflow?.activeWorkflow?.changeTracker?.checkState()
|
|
})
|
|
await comfyPage.nextFrame()
|
|
|
|
const outputsBefore = await comfyPage.page.evaluate((id) => {
|
|
return window.app!.nodeOutputs?.[id]
|
|
}, String(nodeId))
|
|
expect(outputsBefore).toBeTruthy()
|
|
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.nextFrame()
|
|
|
|
await tab.switchToWorkflow('outputs-test')
|
|
await comfyPage.nextFrame()
|
|
|
|
const outputsAfter = await comfyPage.page.evaluate((id) => {
|
|
return window.app!.nodeOutputs?.[id]
|
|
}, String(nodeId))
|
|
expect(outputsAfter).toBeTruthy()
|
|
expect(outputsAfter?.images).toBeDefined()
|
|
})
|
|
|
|
test('Loading a new workflow cleanly replaces the previous graph', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'Commit 44bb6f13 — canvas graph not reset before workflow load'
|
|
})
|
|
|
|
const defaultNodeCount = await comfyPage.nodeOps.getNodeCount()
|
|
expect(defaultNodeCount).toBeGreaterThan(1)
|
|
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await comfyPage.nextFrame()
|
|
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBe(1)
|
|
|
|
const nodes = await comfyPage.nodeOps.getNodes()
|
|
expect(nodes[0].type).toBe('KSampler')
|
|
})
|
|
|
|
test('Widget values on nodes are preserved across workflow tab switches', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description: 'PR #7648 — component widget state lost on graph change'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('widget-state-test')
|
|
|
|
// Read widget values via page.evaluate — these are internal LiteGraph
|
|
// state not exposed through DOM
|
|
const widgetValuesBefore = await comfyPage.page.evaluate(() => {
|
|
const nodes = window.app!.graph.nodes
|
|
const results: Record<string, unknown[]> = {}
|
|
for (const node of nodes) {
|
|
if (node.widgets && node.widgets.length > 0) {
|
|
results[node.id] = node.widgets.map((w) => ({
|
|
name: w.name,
|
|
value: w.value
|
|
}))
|
|
}
|
|
}
|
|
return results
|
|
})
|
|
|
|
expect(Object.keys(widgetValuesBefore).length).toBeGreaterThan(0)
|
|
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.nextFrame()
|
|
|
|
await tab.switchToWorkflow('widget-state-test')
|
|
await comfyPage.nextFrame()
|
|
|
|
const widgetValuesAfter = await comfyPage.page.evaluate(() => {
|
|
const nodes = window.app!.graph.nodes
|
|
const results: Record<string, unknown[]> = {}
|
|
for (const node of nodes) {
|
|
if (node.widgets && node.widgets.length > 0) {
|
|
results[node.id] = node.widgets.map((w) => ({
|
|
name: w.name,
|
|
value: w.value
|
|
}))
|
|
}
|
|
}
|
|
return results
|
|
})
|
|
|
|
expect(widgetValuesAfter).toEqual(widgetValuesBefore)
|
|
})
|
|
|
|
test('API format workflow with missing node types partially loads', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description: 'PR #9694 — loadApiJson early-returned on missing node types'
|
|
})
|
|
|
|
const fixturePath = comfyPage.assetPath(
|
|
'nodes/api_workflow_with_missing_nodes.json'
|
|
)
|
|
const apiWorkflow = JSON.parse(readFileSync(fixturePath, 'utf-8'))
|
|
|
|
await comfyPage.page.evaluate(async (workflow) => {
|
|
await window.app!.loadApiJson(workflow, 'test-api-workflow.json')
|
|
}, apiWorkflow)
|
|
await comfyPage.nextFrame()
|
|
|
|
// Known nodes (KSampler, EmptyLatentImage) should load; unknown node skipped
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBeGreaterThanOrEqual(2)
|
|
|
|
const nodeTypes = await comfyPage.page.evaluate(() => {
|
|
return window.app!.graph.nodes.map((n: { type: string }) => n.type)
|
|
})
|
|
expect(nodeTypes).toContain('KSampler')
|
|
expect(nodeTypes).toContain('EmptyLatentImage')
|
|
expect(nodeTypes).not.toContain('NonExistentCustomNode_XYZ_12345')
|
|
})
|
|
|
|
test('Canvas has auxclick handler to prevent middle-click paste', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'PR #8259 — middle-click paste duplicates entire workflow on Linux'
|
|
})
|
|
|
|
const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
await comfyPage.canvas.click({
|
|
button: 'middle',
|
|
position: { x: 100, y: 100 }
|
|
})
|
|
await comfyPage.nextFrame()
|
|
|
|
const nodeCountAfter = await comfyPage.nodeOps.getNodeCount()
|
|
expect(nodeCountAfter).toBe(initialNodeCount)
|
|
})
|
|
|
|
test('Exported workflow does not contain transient blob: URLs', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'PR #8715 — transient image URLs leaked into workflow serialization'
|
|
})
|
|
|
|
const exportedWorkflow = await comfyPage.workflow.getExportedWorkflow()
|
|
|
|
for (const node of exportedWorkflow.nodes) {
|
|
if (node.widgets_values && Array.isArray(node.widgets_values)) {
|
|
for (const value of node.widgets_values) {
|
|
if (typeof value === 'string') {
|
|
expect(value).not.toMatch(/^blob:/)
|
|
expect(value).not.toMatch(/^https?:\/\/.*\/api\/view/)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
test('Changing locale does not break workflow operations', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description: 'PR #8963 — template workflows not reloaded on locale change'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
await comfyPage.menu.topbar.saveWorkflow('locale-test')
|
|
|
|
const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
await comfyPage.settings.setSetting('Comfy.Locale', 'zh')
|
|
await comfyPage.nextFrame()
|
|
|
|
await comfyPage.settings.setSetting('Comfy.Locale', 'en')
|
|
await comfyPage.nextFrame()
|
|
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount())
|
|
.toBe(initialNodeCount)
|
|
|
|
await expect.poll(() => tab.getActiveWorkflowName()).toBe('locale-test')
|
|
})
|
|
|
|
test('Node links survive save/load/switch cycles', async ({ comfyPage }) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description: 'PR #9533 — node links must survive serialization roundtrips'
|
|
})
|
|
|
|
const tab = comfyPage.menu.workflowsTab
|
|
await tab.open()
|
|
|
|
// Link count requires internal graph state — not exposed via DOM
|
|
const linkCountBefore = await comfyPage.page.evaluate(() => {
|
|
return window.app!.graph.links
|
|
? Object.keys(window.app!.graph.links).length
|
|
: 0
|
|
})
|
|
expect(linkCountBefore).toBeGreaterThan(0)
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('links-test')
|
|
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.nextFrame()
|
|
|
|
await tab.switchToWorkflow('links-test')
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
|
|
const linkCountAfter = await comfyPage.page.evaluate(() => {
|
|
return window.app!.graph.links
|
|
? Object.keys(window.app!.graph.links).length
|
|
: 0
|
|
})
|
|
expect(linkCountAfter).toBe(linkCountBefore)
|
|
})
|
|
|
|
test('Closing an inactive tab with save preserves its own content', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'PR #10745 — saveWorkflow called checkState on inactive tab, serializing the active graph instead'
|
|
})
|
|
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
|
|
const suffix = Date.now().toString(36)
|
|
const nameA = `test-A-${suffix}`
|
|
const nameB = `test-B-${suffix}`
|
|
|
|
// Save the default workflow as A
|
|
await comfyPage.menu.topbar.saveWorkflow(nameA)
|
|
const nodeCountA = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
// Create B: duplicate and save
|
|
await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.menu.topbar.saveWorkflow(nameB)
|
|
|
|
// Add a Note node in B to mark it as modified
|
|
await comfyPage.page.evaluate(() => {
|
|
window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
|
|
})
|
|
await comfyPage.nextFrame()
|
|
|
|
const nodeCountB = await comfyPage.nodeOps.getNodeCount()
|
|
expect(nodeCountB).toBe(nodeCountA + 1)
|
|
|
|
// Trigger checkState so isModified is set
|
|
await comfyPage.page.evaluate(() => {
|
|
const em = window.app!.extensionManager as unknown as Record<
|
|
string,
|
|
{ activeWorkflow?: { changeTracker?: { checkState(): void } } }
|
|
>
|
|
em.workflow?.activeWorkflow?.changeTracker?.checkState()
|
|
})
|
|
|
|
// Switch to A via topbar tab (making B inactive)
|
|
await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBe(nodeCountA)
|
|
|
|
// Close inactive B tab via middle-click — triggers "Save before closing?"
|
|
await comfyPage.menu.topbar.getWorkflowTab(nameB).click({
|
|
button: 'middle'
|
|
})
|
|
|
|
// Click "Save" in the dirty close dialog
|
|
const saveButton = comfyPage.page.getByRole('button', { name: 'Save' })
|
|
await saveButton.waitFor({ state: 'visible' })
|
|
await saveButton.click()
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await comfyPage.nextFrame()
|
|
|
|
// Verify we're still on A with A's content
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBe(nodeCountA)
|
|
|
|
// Re-open B from sidebar saved list
|
|
const workflowsTab = comfyPage.menu.workflowsTab
|
|
await workflowsTab.open()
|
|
await workflowsTab.getPersistedItem(nameB).dblclick()
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
|
|
// B should have the extra Note node we added, not A's node count
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
|
|
.toBe(nodeCountB)
|
|
})
|
|
|
|
test('Closing an inactive unsaved tab with save preserves its own content', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'PR #10745 — saveWorkflowAs called checkState on inactive temp tab, serializing the active graph'
|
|
})
|
|
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
|
|
const suffix = Date.now().toString(36)
|
|
const nameA = `test-A-${suffix}`
|
|
const nameB = `test-B-${suffix}`
|
|
|
|
// Save the default workflow as A
|
|
await comfyPage.menu.topbar.saveWorkflow(nameA)
|
|
const nodeCountA = await comfyPage.nodeOps.getNodeCount()
|
|
|
|
// Create B as an unsaved workflow with a Note node
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.nextFrame()
|
|
|
|
await comfyPage.page.evaluate(() => {
|
|
window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
|
|
})
|
|
await comfyPage.nextFrame()
|
|
|
|
// Trigger checkState so isModified is set
|
|
await comfyPage.page.evaluate(() => {
|
|
const em = window.app!.extensionManager as unknown as Record<
|
|
string,
|
|
{ activeWorkflow?: { changeTracker?: { checkState(): void } } }
|
|
>
|
|
em.workflow?.activeWorkflow?.changeTracker?.checkState()
|
|
})
|
|
|
|
const nodeCountB = await comfyPage.nodeOps.getNodeCount()
|
|
expect(nodeCountB).toBe(1)
|
|
expect(nodeCountA).not.toBe(nodeCountB)
|
|
|
|
// Switch to A via topbar tab (making unsaved B inactive)
|
|
await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBe(nodeCountA)
|
|
|
|
// Close inactive unsaved B tab — triggers "Save before closing?"
|
|
await comfyPage.menu.topbar
|
|
.getWorkflowTab('Unsaved Workflow')
|
|
.click({ button: 'middle' })
|
|
|
|
// Click "Save" in the dirty close dialog (scoped to dialog)
|
|
const dialog = comfyPage.page.getByRole('dialog')
|
|
const saveButton = dialog.getByRole('button', { name: 'Save' })
|
|
await saveButton.waitFor({ state: 'visible' })
|
|
await saveButton.click()
|
|
|
|
// Fill in the filename dialog
|
|
const saveDialog = comfyPage.menu.topbar.getSaveDialog()
|
|
await saveDialog.waitFor({ state: 'visible' })
|
|
await saveDialog.fill(nameB)
|
|
await comfyPage.page.keyboard.press('Enter')
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
await comfyPage.nextFrame()
|
|
|
|
// Verify we're still on A with A's content
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
|
|
.toBe(nodeCountA)
|
|
|
|
// Re-open B from sidebar saved list
|
|
const workflowsTab = comfyPage.menu.workflowsTab
|
|
await workflowsTab.open()
|
|
await workflowsTab.getPersistedItem(nameB).dblclick()
|
|
await comfyPage.workflow.waitForWorkflowIdle()
|
|
|
|
// B should have 1 node (the Note), not A's node count
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
|
|
.toBe(nodeCountB)
|
|
})
|
|
|
|
test('Splitter panel sizes persist correctly in localStorage', async ({
|
|
comfyPage
|
|
}) => {
|
|
test.info().annotations.push({
|
|
type: 'regression',
|
|
description:
|
|
'Commits 91f197d9d + a1b7e57bc — splitter panel size drift on reload'
|
|
})
|
|
|
|
await comfyPage.page.evaluate(() => {
|
|
localStorage.setItem(
|
|
'Comfy.Splitter.MainSplitter',
|
|
JSON.stringify([30, 70])
|
|
)
|
|
})
|
|
|
|
await comfyPage.setup({ clearStorage: false })
|
|
await comfyPage.nextFrame()
|
|
|
|
const storedSizes = await comfyPage.page.evaluate(() => {
|
|
const raw = localStorage.getItem('Comfy.Splitter.MainSplitter')
|
|
return raw ? JSON.parse(raw) : null
|
|
})
|
|
|
|
expect(storedSizes).toBeTruthy()
|
|
expect(Array.isArray(storedSizes)).toBe(true)
|
|
for (const size of storedSizes as number[]) {
|
|
expect(typeof size).toBe('number')
|
|
expect(size).toBeGreaterThanOrEqual(0)
|
|
expect(size).not.toBeNaN()
|
|
}
|
|
const total = (storedSizes as number[]).reduce(
|
|
(a: number, b: number) => a + b,
|
|
0
|
|
)
|
|
expect(total).toBeGreaterThan(90)
|
|
expect(total).toBeLessThanOrEqual(101)
|
|
})
|
|
})
|