[Refactor] Re-organize browser_tests directory (#3105)

browser_tests/tests/actionbar.spec.ts

@@ -0,0 +1,126 @@
+import type { Response } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+
+import type { StatusWsMessage } from '../../src/schemas/apiSchema.ts'
+import { comfyPageFixture } from '../fixtures/ComfyPage.ts'
+import { webSocketFixture } from '../fixtures/ws.ts'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+test.describe('Actionbar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  /**
+   * This test ensures that the autoqueue change mode can only queue one change at a time
+   */
+  test('Does not auto-queue multiple changes at a time', async ({
+    comfyPage,
+    ws
+  }) => {
+    // Enable change auto-queue mode
+    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
+    expect(await queueOpts.getMode()).toBe('disabled')
+    await queueOpts.setMode('change')
+    await comfyPage.nextFrame()
+    expect(await queueOpts.getMode()).toBe('change')
+    await comfyPage.actionbar.queueButton.toggleOptions()
+
+    // Intercept the prompt queue endpoint
+    let promptNumber = 0
+    comfyPage.page.route('**/api/prompt', async (route, req) => {
+      await new Promise((r) => setTimeout(r, 100))
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          prompt_id: promptNumber,
+          number: ++promptNumber,
+          node_errors: {},
+          // Include the request data to validate which prompt was queued so we can validate the width
+          __request: req.postDataJSON()
+        })
+      })
+    })
+
+    // Start watching for a message to prompt
+    const requestPromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+    // Find and set the width on the latent node
+    const triggerChange = async (value: number) => {
+      return await comfyPage.page.evaluate((value) => {
+        const node = window['app'].graph._nodes.find(
+          (n) => n.type === 'EmptyLatentImage'
+        )
+        node.widgets[0].value = value
+        window[
+          'app'
+        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
+      }, value)
+    }
+
+    // Trigger a status websocket message
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
+            }
+          }
+        }
+      } as StatusWsMessage)
+    }
+
+    // Extract the width from the queue response
+    const getQueuedWidth = async (resp: Promise<Response>) => {
+      const obj = await (await resp).json()
+      return obj['__request']['prompt']['5']['inputs']['width']
+    }
+
+    // Trigger a bunch of changes
+    const START = 32
+    const END = 64
+    for (let i = START; i <= END; i += 8) {
+      await triggerChange(i)
+    }
+
+    // Ensure the queued width is the first value
+    expect(
+      await getQueuedWidth(requestPromise),
+      'the first queued prompt should be the first change width'
+    ).toBe(START)
+
+    // Ensure that no other changes are queued
+    await expect(
+      comfyPage.page.waitForResponse('**/api/prompt', { timeout: 250 })
+    ).rejects.toThrow()
+    expect(
+      promptNumber,
+      'only 1 prompt should have been queued even though there were multiple changes'
+    ).toBe(1)
+
+    // Trigger a status update so auto-queue re-runs
+    await triggerStatus(1)
+    await triggerStatus(0)
+
+    // Ensure the queued width is the last queued value
+    expect(
+      await getQueuedWidth(comfyPage.page.waitForResponse('**/api/prompt')),
+      'last queued prompt width should be the last change'
+    ).toBe(END)
+    expect(promptNumber, 'queued prompt count should be 2').toBe(2)
+  })
+
+  test('Can dock actionbar into top menu', async ({ comfyPage }) => {
+    await comfyPage.page.dragAndDrop(
+      '.actionbar .drag-handle',
+      '.comfyui-menu',
+      {
+        targetPosition: { x: 0, y: 0 }
+      }
+    )
+    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+  })
+})

browser_tests/tests/browserTabTitle.spec.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Browser tab title', () => {
+  test.describe('Beta Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Can display workflow name', async ({ comfyPage }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
+      })
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+    })
+
+    // Failing on CI
+    // Cannot reproduce locally
+    test.skip('Can display workflow name with unsaved changes', async ({
+      comfyPage
+    }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
+      })
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+
+      await comfyPage.menu.topbar.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
+
+      const textBox = comfyPage.widgetTextBox
+      await textBox.fill('Hello World')
+      await comfyPage.clickEmptySpace()
+      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
+
+      // Delete the saved workflow for cleanup.
+      await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.delete()
+      })
+    })
+  })
+
+  test.describe('Legacy Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Can display default title', async ({ comfyPage }) => {
+      expect(await comfyPage.page.title()).toBe('ComfyUI')
+    })
+  })
+})

browser_tests/tests/changeTracker.spec.ts

@@ -0,0 +1,167 @@
+import {
+  ComfyPage,
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+async function beforeChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitBeforeChange()
+  })
+}
+async function afterChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitAfterChange()
+  })
+}
+
+test.describe('Change Tracker', () => {
+  test.describe('Undo/Redo', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.setupWorkflowsDirectory({})
+    })
+
+    test('Can undo multiple operations', async ({ comfyPage }) => {
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      // Save, confirm no errors & workflow modified flag removed
+      await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
+      expect(await comfyPage.getToastErrorCount()).toBe(0)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      const node = (await comfyPage.getFirstNodeRef())!
+      await node.click('title')
+      await node.click('collapse')
+      await expect(node).toBeCollapsed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(2)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeBypassed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(1)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeCollapsed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(2)
+    })
+  })
+
+  test('Can group multiple change actions into a single transaction', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    expect(node).toBeTruthy()
+    await expect(node).not.toBeCollapsed()
+    await expect(node).not.toBeBypassed()
+
+    // Make changes outside set
+    // Bypass + collapse node
+    await node.click('title')
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // Undo, undo, ensure both changes undone
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).toBeCollapsed()
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+
+    // Prevent clicks registering a double-click
+    await comfyPage.clickEmptySpace()
+    await node.click('title')
+
+    // Run again, but within a change transaction
+    await beforeChange(comfyPage)
+
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // End transaction
+    await afterChange(comfyPage)
+
+    // Ensure undo reverts both changes
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+  })
+
+  test('Can nest multiple change transactions without adding undo steps', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    const bypassAndPin = async () => {
+      await beforeChange(comfyPage)
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      await comfyPage.page.keyboard.press('KeyP')
+      await comfyPage.nextFrame()
+      await expect(node).toBePinned()
+      await afterChange(comfyPage)
+    }
+
+    const collapse = async () => {
+      await beforeChange(comfyPage)
+      await node.click('collapse', { moveMouseToEmptyArea: true })
+      await expect(node).toBeCollapsed()
+      await afterChange(comfyPage)
+    }
+
+    const multipleChanges = async () => {
+      await beforeChange(comfyPage)
+      // Call other actions that uses begin/endChange
+      await node.click('title')
+      await collapse()
+      await bypassAndPin()
+      await afterChange(comfyPage)
+    }
+
+    await multipleChanges()
+
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBePinned()
+    await expect(node).not.toBeCollapsed()
+
+    await comfyPage.ctrlY()
+    await expect(node).toBeBypassed()
+    await expect(node).toBePinned()
+    await expect(node).toBeCollapsed()
+  })
+
+  test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.page.evaluate(() => {
+      window['app'].graph.extra.foo = 'bar'
+    })
+    // Click empty space to trigger a change detection.
+    await comfyPage.clickEmptySpace()
+    expect(await comfyPage.getUndoQueueSize()).toBe(1)
+  })
+
+  test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.pan({ x: 10, y: 10 })
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+  })
+})

browser_tests/tests/colorPalette.spec.ts

@@ -0,0 +1,280 @@
+import { expect } from '@playwright/test'
+
+import type { Palette } from '../../src/schemas/colorPaletteSchema'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+const customColorPalettes: Record<string, Palette> = {
+  obsidian: {
+    version: 102,
+    id: 'obsidian',
+    name: 'Obsidian',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=',
+        CLEAR_BACKGROUND_COLOR: '#222222',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  },
+  obsidian_dark: {
+    version: 102,
+    id: 'obsidian_dark',
+    name: 'Obsidian Dark',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==',
+        CLEAR_BACKGROUND_COLOR: '#000',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  },
+  // A custom light theme with fg color red
+  light_red: {
+    id: 'light_red',
+    name: 'Light Red',
+    light_theme: true,
+    colors: {
+      node_slot: {},
+      litegraph_base: {},
+      comfy_base: {
+        'fg-color': '#ff0000'
+      }
+    }
+  }
+}
+
+test.describe('Color Palette', () => {
+  test('Can show custom color palette', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.setup()
+
+    await comfyPage.loadWorkflow('every_node_color')
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark-all-colors.png'
+    )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-light-red.png'
+    )
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
+  })
+
+  test('Can add custom color palette', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate((p) => {
+      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
+    }, customColorPalettes.obsidian_dark)
+    expect(await comfyPage.getToastErrorCount()).toBe(0)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
+    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+  })
+})
+
+test.describe('Node Color Adjustments', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('every_node_color')
+  })
+
+  test('should adjust opacity via node opacity setting', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.page.waitForTimeout(128)
+
+    // Drag mouse to force canvas to redraw
+    await comfyPage.page.mouse.move(0, 0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
+
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.page.waitForTimeout(128)
+
+    await comfyPage.page.mouse.move(8, 8)
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
+  })
+
+  test('should persist color adjustments when changing themes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.2)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'arc')
+    await comfyPage.nextFrame()
+    await comfyPage.page.mouse.move(0, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-opacity-0.2-arc-theme.png'
+    )
+  })
+
+  test('should not serialize color adjustments in workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
+    const workflow = await comfyPage.page.evaluate(() => {
+      return localStorage.getItem('workflow')
+    })
+    for (const node of JSON.parse(workflow ?? '{}').nodes) {
+      if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
+      if (node.color) expect(node.color).not.toMatch(/hsla/)
+    }
+  })
+
+  test('should lighten node colors when switching to light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('node-lightened-colors.png')
+  })
+
+  test.describe('Context menu color adjustments', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
+      const node = await comfyPage.getFirstNodeRef()
+      await node?.clickContextMenuOption('Colors')
+    })
+
+    test('should persist color adjustments when changing custom node colors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("red")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-changed.png'
+      )
+    })
+
+    test('should persist color adjustments when removing custom node color', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("No color")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-removed.png'
+      )
+    })
+  })
+})

browser_tests/tests/commands.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Keybindings', () => {
+  test('Should execute command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      window['foo'] = true
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should execute async command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve) =>
+        setTimeout(() => {
+          window['foo'] = true
+          resolve()
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should handle command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      throw new Error('Test error')
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+  })
+
+  test('Should handle async command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve, reject) =>
+        setTimeout(() => {
+          reject(new Error('Test error'))
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+  })
+})

browser_tests/tests/copyPaste.spec.ts

@@ -0,0 +1,117 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Copy Paste', () => {
+  test('Can copy and paste node', async ({ comfyPage }) => {
+    await comfyPage.clickEmptyLatentNode()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+    await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png')
+  })
+
+  test('Can copy and paste node with link', async ({ comfyPage }) => {
+    await comfyPage.clickTextEncodeNode1()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.page.keyboard.press('Control+Shift+V')
+    await expect(comfyPage.canvas).toHaveScreenshot('copied-node-with-link.png')
+  })
+
+  test('Can copy and paste text', async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    const originalString = await textBox.inputValue()
+    await textBox.selectText()
+    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV(null)
+    const resultString = await textBox.inputValue()
+    expect(resultString).toBe(originalString + originalString)
+  })
+
+  test('Can copy and paste widget value', async ({ comfyPage }) => {
+    // Copy width value (512) from empty latent node to KSampler's seed.
+    // KSampler's seed
+    await comfyPage.canvas.click({
+      position: {
+        x: 1005,
+        y: 281
+      }
+    })
+    await comfyPage.ctrlC(null)
+    // Empty latent node's width
+    await comfyPage.canvas.click({
+      position: {
+        x: 718,
+        y: 643
+      }
+    })
+    await comfyPage.ctrlV(null)
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
+  })
+
+  /**
+   * https://github.com/Comfy-Org/ComfyUI_frontend/issues/98
+   */
+  test('Paste in text area with node previously copied', async ({
+    comfyPage
+  }) => {
+    await comfyPage.clickEmptyLatentNode()
+    await comfyPage.ctrlC(null)
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.inputValue()
+    await textBox.selectText()
+    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV(null)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'paste-in-text-area-with-node-previously-copied.png'
+    )
+  })
+
+  test('Copy text area does not copy node', async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.inputValue()
+    await textBox.selectText()
+    await comfyPage.ctrlC(null)
+    // Unfocus textbox.
+    await comfyPage.page.mouse.click(10, 10)
+    await comfyPage.ctrlV(null)
+    await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png')
+  })
+
+  test('Copy node by dragging + alt', async ({ comfyPage }) => {
+    // TextEncodeNode1
+    await comfyPage.page.mouse.move(618, 191)
+    await comfyPage.page.keyboard.down('Alt')
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.page.mouse.up()
+    await comfyPage.page.keyboard.up('Alt')
+    await expect(comfyPage.canvas).toHaveScreenshot('drag-copy-copied-node.png')
+  })
+
+  test('Can undo paste multiple nodes as single action', async ({
+    comfyPage
+  }) => {
+    const initialCount = await comfyPage.getGraphNodesCount()
+    expect(initialCount).toBeGreaterThan(1)
+    await comfyPage.canvas.click()
+    await comfyPage.ctrlA()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+
+    const pasteCount = await comfyPage.getGraphNodesCount()
+    expect(pasteCount).toBe(initialCount * 2)
+
+    await comfyPage.ctrlZ()
+    const undoCount = await comfyPage.getGraphNodesCount()
+    expect(undoCount).toBe(initialCount)
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -0,0 +1,311 @@
+import { Locator, expect } from '@playwright/test'
+
+import type { Keybinding } from '../../src/schemas/keyBindingSchema'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Load workflow warning', () => {
+  test('Should display a warning when loading a workflow with missing nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_nodes')
+
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    await expect(missingNodesWarning).toBeVisible()
+  })
+})
+
+test('Does not report warning on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+  await comfyPage.loadWorkflow('missing_nodes')
+  await comfyPage.closeDialog()
+
+  // Make a change to the graph
+  await comfyPage.doubleClickCanvas()
+  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+
+  // Undo and redo the change
+  await comfyPage.ctrlZ()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await comfyPage.ctrlY()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+})
+
+test.describe('Execution error', () => {
+  test('Should display an error message when an execution error occurs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    // Wait for the element with the .comfy-execution-error selector to be visible
+    const executionError = comfyPage.page.locator('.comfy-error-report')
+    await expect(executionError).toBeVisible()
+  })
+
+  test('Can display Issue Report form', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.getByLabel('Help Fix This').click()
+    const issueReportForm = comfyPage.page.getByText(
+      'Submit Error Report (Optional)'
+    )
+    await expect(issueReportForm).toBeVisible()
+  })
+})
+
+test.describe('Missing models warning', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', true)
+    await comfyPage.page.evaluate((url: string) => {
+      return fetch(`${url}/api/devtools/cleanup_fake_model`)
+    }, comfyPage.url)
+  })
+
+  test('Should display a warning when missing models are found', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should display a warning when missing models are found in node properties', async ({
+    comfyPage
+  }) => {
+    // Load workflow that has a node with models metadata at the node level
+    await comfyPage.loadWorkflow('missing_models_from_node_properties')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should not display a warning when no missing models are found', async ({
+    comfyPage
+  }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'text_encoders',
+          folders: ['ComfyUI/models/text_encoders']
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models/text_encoders',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
+  })
+
+  // Flaky test after parallelization
+  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
+  test.skip('Should download missing model when clicking download button', async ({
+    comfyPage
+  }) => {
+    // The fake_model.safetensors is served by
+    // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = comfyPage.page.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await downloadButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
+  })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
+})
+
+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(
+      (el) => el.clientHeight > 30
+    )
+    expect(isUsableHeight).toBeTruthy()
+  })
+
+  test('Can open settings with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.press(',')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
+    const settingsLocator = comfyPage.page.locator('.settings-container')
+    await expect(settingsLocator).toBeVisible()
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(settingsLocator).not.toBeVisible()
+  })
+
+  test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
+    const maxSpeed = 2.5
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
+    await test.step('Setting should persist', async () => {
+      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
+    })
+  })
+
+  test('Should persist keybinding setting', async ({ comfyPage }) => {
+    // Open the settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    await comfyPage.page.waitForSelector('.settings-container')
+
+    // Open the keybinding tab
+    await comfyPage.page.getByLabel('Keybinding').click()
+    await comfyPage.page.waitForSelector(
+      '[placeholder="Search Keybindings..."]'
+    )
+
+    // Focus the 'New Blank Workflow' row
+    const newBlankWorkflowRow = comfyPage.page.locator('tr', {
+      has: comfyPage.page.getByRole('cell', { name: 'New Blank Workflow' })
+    })
+    await newBlankWorkflowRow.click()
+
+    // Click edit button
+    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
+    await editKeybindingButton.click()
+
+    // Set new keybinding
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    await input.press('Alt+n')
+
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/api/settings/Comfy.Keybinding.NewBindings'
+    )
+
+    // Save keybinding
+    const saveButton = comfyPage.page
+      .getByLabel('New Blank Workflow')
+      .getByLabel('Save')
+    await saveButton.click()
+
+    const request = await requestPromise
+    const expectedSetting: Keybinding = {
+      commandId: 'Comfy.NewBlankWorkflow',
+      combo: {
+        key: 'n',
+        ctrl: false,
+        alt: true,
+        shift: false
+      }
+    }
+    expect(request.postData()).toContain(JSON.stringify(expectedSetting))
+  })
+})
+
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
+  })
+})

browser_tests/tests/domWidget.spec.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('DOM Widget', () => {
+  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('collapsed_multiline')
+
+    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
+  })
+
+  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
+    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
+    const firstMultiline = multilineTextAreas.first()
+    const lastMultiline = multilineTextAreas.last()
+
+    await expect(firstMultiline).toBeVisible()
+    await expect(lastMultiline).toBeVisible()
+
+    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    for (const node of nodes) {
+      await node.click('collapse')
+    }
+    await expect(firstMultiline).not.toBeVisible()
+    await expect(lastMultiline).not.toBeVisible()
+  })
+})

browser_tests/tests/extensionAPI.spec.ts

@@ -0,0 +1,342 @@
+import { expect } from '@playwright/test'
+
+import { SettingParams } from '../../src/types/settingTypes'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Topbar commands', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'foo',
+            label: 'foo-command',
+            function: () => {
+              window['foo'] = true
+            }
+          }
+        ],
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
+      })
+    })
+
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should not allow register command defined in other extension', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerCommand('foo', () => alert(1))
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
+      })
+    })
+
+    const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
+    expect(await menuItem.count()).toBe(0)
+  })
+
+  test('Should allow registering keybindings', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      app.registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'TestCommand',
+            function: () => {
+              window['TestCommand'] = true
+            }
+          }
+        ],
+        keybindings: [
+          {
+            combo: { key: 'k' },
+            commandId: 'TestCommand'
+          }
+        ]
+      })
+    })
+
+    await comfyPage.page.keyboard.press('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+
+  test.describe('Settings', () => {
+    test('Should allow adding settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'TestSetting',
+              name: 'Test Setting',
+              type: 'text',
+              defaultValue: 'Hello, world!',
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+      // onChange is called when the setting is first added
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, world!')
+
+      await comfyPage.setSetting('TestSetting', 'Hello, universe!')
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, universe!')
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test('Should allow setting boolean settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'Comfy.TestSetting',
+              name: 'Test Setting',
+              type: 'boolean',
+              defaultValue: false,
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(false)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(true)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test.describe('Passing through attrs to setting components', () => {
+      const testCases: Array<{
+        config: Partial<SettingParams>
+        selector: string
+      }> = [
+        {
+          config: {
+            type: 'boolean',
+            defaultValue: true
+          },
+          selector: '.p-toggleswitch.p-component'
+        },
+        {
+          config: {
+            type: 'number',
+            defaultValue: 10
+          },
+          selector: '.p-inputnumber input'
+        },
+        {
+          config: {
+            type: 'slider',
+            defaultValue: 10
+          },
+          selector: '.p-slider.p-component'
+        },
+        {
+          config: {
+            type: 'combo',
+            defaultValue: 'foo',
+            options: ['foo', 'bar', 'baz']
+          },
+          selector: '.p-select.p-component'
+        },
+        {
+          config: {
+            type: 'text',
+            defaultValue: 'Hello'
+          },
+          selector: '.p-inputtext'
+        },
+        {
+          config: {
+            type: 'color',
+            defaultValue: '#000000'
+          },
+          selector: '.p-colorpicker-preview'
+        }
+      ] as const
+
+      for (const { config, selector } of testCases) {
+        test(`${config.type} component should respect disabled attr`, async ({
+          comfyPage
+        }) => {
+          await comfyPage.page.evaluate((config) => {
+            window['app'].registerExtension({
+              name: 'TestExtension1',
+              settings: [
+                {
+                  id: 'Comfy.TestSetting',
+                  name: 'Test',
+                  // The `disabled` attr is common to all settings components
+                  attrs: { disabled: true },
+                  ...config
+                }
+              ]
+            })
+          }, config)
+
+          await comfyPage.settingDialog.open()
+          const component = comfyPage.settingDialog.root
+            .getByText('TestSetting Test')
+            .locator(selector)
+
+          const isDisabled = await component.evaluate((el) =>
+            el.tagName === 'INPUT'
+              ? (el as HTMLInputElement).disabled
+              : el.classList.contains('p-disabled')
+          )
+          expect(isDisabled).toBe(true)
+        })
+      }
+    })
+  })
+
+  test.describe('About panel', () => {
+    test('Should allow adding badges', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          aboutPageBadges: [
+            {
+              label: 'Test Badge',
+              url: 'https://example.com',
+              icon: 'pi pi-box'
+            }
+          ]
+        })
+      })
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.goToAboutPanel()
+      const badge = comfyPage.page.locator('.about-badge').last()
+      expect(badge).toBeDefined()
+      expect(await badge.textContent()).toContain('Test Badge')
+    })
+  })
+
+  test.describe('Dialog', () => {
+    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .prompt({
+            title: 'Test Prompt',
+            message: 'Test Prompt Message'
+          })
+          .then((value: string) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.fillPromptDialog('Hello, world!')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(
+        'Hello, world!'
+      )
+    })
+
+    test('Should allow showing a confirmation dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('confirm')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
+    })
+
+    test('Should allow dismissing a dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['value'] = 'foo'
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('reject')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBeNull()
+    })
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should allow adding commands to selection toolbox', async ({
+      comfyPage
+    }) => {
+      // Register an extension with a selection toolbox command
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          commands: [
+            {
+              id: 'test.selection.command',
+              label: 'Test Command',
+              icon: 'pi pi-star',
+              function: () => {
+                window['selectionCommandExecuted'] = true
+              }
+            }
+          ],
+          getSelectionToolboxCommands: () => ['test.selection.command']
+        })
+      })
+
+      await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+
+      // Click the command button in the selection toolbox
+      const toolboxButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-star)'
+      )
+      await toolboxButton.click()
+
+      // Verify the command was executed
+      expect(
+        await comfyPage.page.evaluate(() => window['selectionCommandExecuted'])
+      ).toBe(true)
+    })
+  })
+})

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Graph Canvas Menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Set link render mode to spline to make sure it's not affected by other tests'
+    // side effects.
+    await comfyPage.setSetting('Comfy.LinkRenderMode', 2)
+  })
+
+  test('Can toggle link visibility', async ({ comfyPage }) => {
+    // Note: `Comfy.Graph.CanvasMenu` is disabled in comfyPage setup.
+    // so no cleanup is needed.
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
+
+    const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-hidden-links.png'
+    )
+    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
+      return window['LiteGraph'].HIDDEN_LINK
+    })
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).toBe(
+      hiddenLinkRenderMode
+    )
+
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-visible-links.png'
+    )
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe(
+      hiddenLinkRenderMode
+    )
+  })
+})

browser_tests/tests/groupNode.spec.ts

@@ -0,0 +1,326 @@
+import { expect } from '@playwright/test'
+
+import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+
+test.describe('Group Node', () => {
+  test.describe('Node library sidebar', () => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    const groupNodeCategory = 'group nodes>workflow'
+    const groupNodeBookmarkName = `workflow>${groupNodeName}`
+    let libraryTab
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      libraryTab = comfyPage.menu.nodeLibraryTab
+      await comfyPage.convertAllNodesToGroupNode(groupNodeName)
+      await libraryTab.open()
+    })
+
+    test('Is added to node library sidebar', async ({ comfyPage }) => {
+      expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
+    })
+
+    test('Can be added to canvas using node library sidebar', async ({
+      comfyPage
+    }) => {
+      const initialNodeCount = await comfyPage.getGraphNodesCount()
+
+      // Add group node from node library sidebar
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab.getNode(groupNodeName).click()
+
+      // Verify the node is added to the canvas
+      expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
+    })
+
+    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .click()
+
+      // Verify the node is added to the bookmarks tab
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([groupNodeBookmarkName])
+      // Verify the bookmark node with the same name is added to the tree
+      expect(await libraryTab.getNode(groupNodeName).count()).not.toBe(0)
+
+      // Unbookmark the node
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .first()
+        .click()
+
+      // Verify the node is removed from the bookmarks tab
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toHaveLength(0)
+    })
+
+    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .click()
+      await comfyPage.page.hover('.p-tree-node-label.tree-explorer-node-label')
+      expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(
+        true
+      )
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .first()
+        .click()
+    })
+  })
+  // The 500ms fixed delay on the search results is causing flakiness
+  // Potential solution: add a spinner state when the search is in progress,
+  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
+  // does not have a v-model on the query, so we cannot observe the raw
+  // query update, and thus cannot set the spinning state between the raw query
+  // update and the debounced search update.
+  test.skip('Can be added to canvas using search', async ({ comfyPage }) => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    await comfyPage.convertAllNodesToGroupNode(groupNodeName)
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.nextFrame()
+    await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'group-node-copy-added-from-search.png'
+    )
+  })
+
+  test('Displays tooltip on title hover', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.convertAllNodesToGroupNode('Group Node')
+    await comfyPage.page.mouse.move(47, 173)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
+  })
+
+  test('Manage group opens with the correct group selected', async ({
+    comfyPage
+  }) => {
+    const makeGroup = async (name, type1, type2) => {
+      const node1 = (await comfyPage.getNodeRefsByType(type1))[0]
+      const node2 = (await comfyPage.getNodeRefsByType(type2))[0]
+      await node1.click('title')
+      await node2.click('title', {
+        modifiers: ['Shift']
+      })
+      return await node2.convertToGroupNode(name)
+    }
+
+    const group1 = await makeGroup(
+      'g1',
+      'CLIPTextEncode',
+      'CheckpointLoaderSimple'
+    )
+    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
+
+    const manage1 = await group1.manageGroupNode()
+    await comfyPage.nextFrame()
+    expect(await manage1.getSelectedNodeType()).toBe('g1')
+    await manage1.close()
+    await expect(manage1.root).not.toBeVisible()
+
+    const manage2 = await group2.manageGroupNode()
+    expect(await manage2.getSelectedNodeType()).toBe('g2')
+  })
+
+  test('Preserves hidden input configuration when containing duplicate node types', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('group_node_identical_nodes_hidden_inputs')
+    await comfyPage.nextFrame()
+
+    const groupNodeId = 19
+    const groupNodeName = 'two_VAE_decode'
+
+    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
+      const {
+        extra: { groupNodes }
+      } = window['app'].graph
+      const { nodes } = groupNodes[nodeName]
+      return nodes.reduce((acc: number, node) => {
+        return acc + node.inputs.length
+      }, 0)
+    }, groupNodeName)
+
+    const visibleInputCount = await comfyPage.page.evaluate((id) => {
+      const node = window['app'].graph.getNodeById(id)
+      return node.inputs.length
+    }, groupNodeId)
+
+    // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
+    expect(totalInputCount).toBe(4)
+
+    // Verify there are 2 visible inputs (2 have been hidden in config)
+    expect(visibleInputCount).toBe(2)
+  })
+
+  test('Reconnects inputs after configuration changed via manage dialog save', async ({
+    comfyPage
+  }) => {
+    const expectSingleNode = async (type: string) => {
+      const nodes = await comfyPage.getNodeRefsByType(type)
+      expect(nodes).toHaveLength(1)
+      return nodes[0]
+    }
+    const latent = await expectSingleNode('EmptyLatentImage')
+    const sampler = await expectSingleNode('KSampler')
+    // Remove existing link
+    const samplerInput = await sampler.getInput(0)
+    await samplerInput.removeLinks()
+    // Group latent + sampler
+    await latent.click('title', {
+      modifiers: ['Shift']
+    })
+    await sampler.click('title', {
+      modifiers: ['Shift']
+    })
+    const groupNode = await sampler.convertToGroupNode()
+    // Connect node to group
+    const ckpt = await expectSingleNode('CheckpointLoaderSimple')
+    const input = await ckpt.connectOutput(0, groupNode, 0)
+    expect(await input.getLinkCount()).toBe(1)
+    // Modify the group node via manage dialog
+    const manage = await groupNode.manageGroupNode()
+    await manage.selectNode('KSampler')
+    await manage.changeTab('Inputs')
+    await manage.setLabel('model', 'test')
+    await manage.save()
+    await manage.close()
+    // Ensure the link is still present
+    expect(await input.getLinkCount()).toBe(1)
+  })
+
+  test('Loads from a workflow using the legacy path separator ("/")', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('legacy_group_node')
+    expect(await comfyPage.getGraphNodesCount()).toBe(1)
+    await expect(
+      comfyPage.page.locator('.comfy-missing-nodes')
+    ).not.toBeVisible()
+  })
+
+  test.describe('Copy and paste', () => {
+    let groupNode: NodeReference | null
+    const WORKFLOW_NAME = 'group_node_v1.3.3'
+    const GROUP_NODE_CATEGORY = 'group nodes>workflow'
+    const GROUP_NODE_PREFIX = 'workflow>'
+    const GROUP_NODE_NAME = 'group_node' // Node name in given workflow
+    const GROUP_NODE_TYPE = `${GROUP_NODE_PREFIX}${GROUP_NODE_NAME}`
+
+    const isRegisteredLitegraph = async (comfyPage: ComfyPage) => {
+      return await comfyPage.page.evaluate((nodeType: string) => {
+        return !!window['LiteGraph'].registered_node_types[nodeType]
+      }, GROUP_NODE_TYPE)
+    }
+
+    const isRegisteredNodeDefStore = async (comfyPage: ComfyPage) => {
+      const groupNodesFolderCt = await comfyPage.menu.nodeLibraryTab
+        .getFolder(GROUP_NODE_CATEGORY)
+        .count()
+      return groupNodesFolderCt === 1
+    }
+
+    const verifyNodeLoaded = async (
+      comfyPage: ComfyPage,
+      expectedCount: number
+    ) => {
+      expect(await comfyPage.getNodeRefsByType(GROUP_NODE_TYPE)).toHaveLength(
+        expectedCount
+      )
+      expect(await isRegisteredLitegraph(comfyPage)).toBe(true)
+      expect(await isRegisteredNodeDefStore(comfyPage)).toBe(true)
+    }
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.loadWorkflow(WORKFLOW_NAME)
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      groupNode = await comfyPage.getFirstNodeRef()
+      if (!groupNode)
+        throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)
+      await groupNode.copy()
+    })
+
+    test('Copies and pastes group node within the same workflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.ctrlV()
+      await verifyNodeLoaded(comfyPage, 2)
+    })
+
+    test('Copies and pastes group node after clearing workflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.menu.topbar.triggerTopbarCommand([
+        'Edit',
+        'Clear Workflow'
+      ])
+      await comfyPage.ctrlV()
+      await verifyNodeLoaded(comfyPage, 1)
+    })
+
+    test('Copies and pastes group node into a newly created blank workflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+      await comfyPage.ctrlV()
+      await verifyNodeLoaded(comfyPage, 1)
+    })
+
+    test('Copies and pastes group node across different workflows', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('default')
+      await comfyPage.ctrlV()
+      await verifyNodeLoaded(comfyPage, 1)
+    })
+
+    test('Serializes group node after copy and paste across workflows', async ({
+      comfyPage
+    }) => {
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+      await comfyPage.ctrlV()
+      const currentGraphState = await comfyPage.page.evaluate(() =>
+        window['app'].graph.serialize()
+      )
+
+      await test.step('Load workflow containing a group node pasted from a different workflow', async () => {
+        await comfyPage.page.evaluate(
+          (workflow) => window['app'].loadGraphData(workflow),
+          currentGraphState
+        )
+        await comfyPage.nextFrame()
+        await verifyNodeLoaded(comfyPage, 1)
+      })
+    })
+  })
+
+  test.describe('Keybindings', () => {
+    test('Convert to group node, no selection', async ({ comfyPage }) => {
+      expect(await comfyPage.getVisibleToastCount()).toBe(0)
+      await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
+      expect(await comfyPage.getVisibleToastCount()).toBe(1)
+    })
+    test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
+      expect(await comfyPage.getVisibleToastCount()).toBe(0)
+      await comfyPage.clickTextEncodeNode1()
+      await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
+      expect(await comfyPage.getVisibleToastCount()).toBe(1)
+    })
+  })
+})

browser_tests/tests/interaction.spec.ts

@@ -0,0 +1,680 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Item Interaction', () => {
+  test('Can select/delete all items', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('mixed_graph_items')
+    await comfyPage.canvas.press('Control+a')
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-all.png')
+    await comfyPage.canvas.press('Delete')
+    await expect(comfyPage.canvas).toHaveScreenshot('deleted-all.png')
+  })
+
+  test('Can pin/unpin items with keyboard shortcut', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('mixed_graph_items')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('pinned-all.png')
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('unpinned-all.png')
+  })
+})
+
+test.describe('Node Interaction', () => {
+  test('Can enter prompt', async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('Hello World')
+    await expect(textBox).toHaveValue('Hello World')
+    await textBox.fill('Hello World 2')
+    await expect(textBox).toHaveValue('Hello World 2')
+  })
+
+  test.describe('Node Selection', () => {
+    const multiSelectModifiers = ['Control', 'Shift', 'Meta'] as const
+
+    multiSelectModifiers.forEach((modifier) => {
+      test(`Can add multiple nodes to selection using ${modifier}+Click`, async ({
+        comfyPage
+      }) => {
+        const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+        for (const node of clipNodes) {
+          await node.click('title', { modifiers: [modifier] })
+        }
+        const selectedNodeCount = await comfyPage.getSelectedGraphNodesCount()
+        expect(selectedNodeCount).toBe(clipNodes.length)
+      })
+    })
+
+    test('@2x Can highlight selected', async ({ comfyPage }) => {
+      await expect(comfyPage.canvas).toHaveScreenshot('default.png')
+      await comfyPage.clickTextEncodeNode1()
+      await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
+      await comfyPage.clickTextEncodeNode2()
+      await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
+    })
+
+    test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
+      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+      const clipNode1Pos = await clipNodes[0].getPosition()
+      const clipNode2Pos = await clipNodes[1].getPosition()
+      const offset = 64
+      await comfyPage.page.keyboard.down('Meta')
+      await comfyPage.dragAndDrop(
+        {
+          x: Math.min(clipNode1Pos.x, clipNode2Pos.x) - offset,
+          y: Math.min(clipNode1Pos.y, clipNode2Pos.y) - offset
+        },
+        {
+          x: Math.max(clipNode1Pos.x, clipNode2Pos.x) + offset,
+          y: Math.max(clipNode1Pos.y, clipNode2Pos.y) + offset
+        }
+      )
+      await comfyPage.page.keyboard.up('Meta')
+      expect(await comfyPage.getSelectedGraphNodesCount()).toBe(
+        clipNodes.length
+      )
+    })
+  })
+
+  test('Can drag node', async ({ comfyPage }) => {
+    await comfyPage.dragNode2()
+    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
+  })
+
+  test.describe('Edge Interaction', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.LinkRelease.Action', 'no action')
+      await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
+    })
+
+    test('Can disconnect/connect edge', async ({ comfyPage }) => {
+      await comfyPage.disconnectEdge()
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.connectEdge()
+      // Move mouse to empty area to avoid slot highlight.
+      await comfyPage.moveMouseToEmptyArea()
+      // Litegraph renders edge with a slight offset.
+      await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+        maxDiffPixels: 50
+      })
+    })
+
+    test('Can move link', async ({ comfyPage }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputSlot,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
+    })
+
+    // Shift drag copy link regressed. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/2941
+    test.skip('Can copy link by shift-drag existing link', async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.page.keyboard.down('Shift')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputLinkPath,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      await comfyPage.page.keyboard.up('Shift')
+      await expect(comfyPage.canvas).toHaveScreenshot('copied-link.png')
+    })
+
+    test('Auto snap&highlight when dragging link over node', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting('Comfy.Node.AutoSnapLinkToSlot', true)
+      await comfyPage.setSetting('Comfy.Node.SnapHighlightsNode', true)
+
+      await comfyMouse.move(comfyPage.clipTextEncodeNode1InputSlot)
+      await comfyMouse.drag(comfyPage.clipTextEncodeNode2InputSlot)
+      await expect(comfyPage.canvas).toHaveScreenshot('snapped-highlighted.png')
+    })
+  })
+
+  test('Can adjust widget value', async ({ comfyPage }) => {
+    await comfyPage.adjustWidgetValue()
+    await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png')
+  })
+
+  test('Link snap to slot', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('snap_to_slot')
+    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png')
+
+    const outputSlotPos = {
+      x: 406,
+      y: 333
+    }
+    const samplerNodeCenterPos = {
+      x: 748,
+      y: 77
+    }
+    await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png')
+  })
+
+  test('Can batch move links by drag with shift', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('batch_move_links')
+    await expect(comfyPage.canvas).toHaveScreenshot('batch_move_links.png')
+
+    const outputSlot1Pos = {
+      x: 304,
+      y: 127
+    }
+    const outputSlot2Pos = {
+      x: 307,
+      y: 310
+    }
+
+    await comfyPage.page.keyboard.down('Shift')
+    await comfyPage.dragAndDrop(outputSlot1Pos, outputSlot2Pos)
+    await comfyPage.page.keyboard.up('Shift')
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'batch_move_links_moved.png'
+    )
+  })
+
+  test('Can batch disconnect links with ctrl+alt+click', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointClipSlotPos = {
+      x: 332,
+      y: 508
+    }
+    await comfyPage.canvas.click({
+      modifiers: ['Control', 'Alt'],
+      position: loadCheckpointClipSlotPos
+    })
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'batch-disconnect-links-disconnected.png'
+    )
+  })
+
+  test('Can toggle dom widget node open/closed', async ({ comfyPage }) => {
+    await expect(comfyPage.canvas).toHaveScreenshot('default.png')
+    await comfyPage.clickTextEncodeNodeToggler()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'text-encode-toggled-off.png'
+    )
+    await comfyPage.delay(1000)
+    await comfyPage.clickTextEncodeNodeToggler()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'text-encode-toggled-back-open.png'
+    )
+  })
+
+  test('Can close prompt dialog with canvas click (number widget)', async ({
+    comfyPage
+  }) => {
+    const numberWidgetPos = {
+      x: 724,
+      y: 645
+    }
+    await comfyPage.canvas.click({
+      position: numberWidgetPos
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
+    // Wait for 1s so that it does not trigger the search box by double click.
+    await comfyPage.page.waitForTimeout(1000)
+    await comfyPage.canvas.click({
+      position: {
+        x: 10,
+        y: 10
+      }
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
+  })
+
+  test('Can close prompt dialog with canvas click (text widget)', async ({
+    comfyPage
+  }) => {
+    const textWidgetPos = {
+      x: 167,
+      y: 143
+    }
+    await comfyPage.loadWorkflow('single_save_image_node')
+    await comfyPage.canvas.click({
+      position: textWidgetPos
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-opened-text.png'
+    )
+    await comfyPage.page.waitForTimeout(1000)
+    await comfyPage.canvas.click({
+      position: {
+        x: 10,
+        y: 10
+      }
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-closed-text.png'
+    )
+  })
+
+  test('Can double click node title to edit', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 10
+      },
+      delay: 5
+    })
+    await comfyPage.page.keyboard.type('Hello World')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(comfyPage.canvas).toHaveScreenshot('node-title-edited.png')
+  })
+
+  test('Double click node body does not trigger edit', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 50
+      },
+      delay: 5
+    })
+    expect(await comfyPage.page.locator('.node-title-editor').count()).toBe(0)
+  })
+
+  test('Can group selected nodes', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.GroupSelectedNodes.Padding', 10)
+    await comfyPage.select2Nodes()
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.press('KeyG')
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.nextFrame()
+    // Confirm group title
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.png')
+  })
+
+  test('Can fit group to contents', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('oversized_group')
+    await comfyPage.ctrlA()
+    await comfyPage.nextFrame()
+    await comfyPage.executeCommand('Comfy.Graph.FitGroupToContents')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png')
+  })
+
+  test('Can pin/unpin nodes', async ({ comfyPage }) => {
+    await comfyPage.select2Nodes()
+    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
+    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
+  })
+
+  test('Can bypass/unbypass nodes with keyboard shortcut', async ({
+    comfyPage
+  }) => {
+    await comfyPage.select2Nodes()
+    await comfyPage.canvas.press('Control+b')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-bypassed.png')
+    await comfyPage.canvas.press('Control+b')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-unbypassed.png')
+  })
+})
+
+test.describe('Group Interaction', () => {
+  test('Can double click group title to edit', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('single_group')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 10
+      },
+      delay: 5
+    })
+    await comfyPage.page.keyboard.type('Hello World')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(comfyPage.canvas).toHaveScreenshot('group-title-edited.png')
+  })
+})
+
+test.describe('Canvas Interaction', () => {
+  test('Can zoom in/out', async ({ comfyPage }) => {
+    await comfyPage.zoom(-100)
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in.png')
+    await comfyPage.zoom(200)
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out.png')
+  })
+
+  test('Can zoom very far out', async ({ comfyPage }) => {
+    await comfyPage.zoom(100, 12)
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-very-far-out.png')
+    await comfyPage.zoom(-100, 12)
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-back-in.png')
+  })
+
+  test('Can zoom in/out with ctrl+shift+vertical-drag', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('Shift')
+    await comfyPage.dragAndDrop({ x: 10, y: 100 }, { x: 10, y: 40 })
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
+    await comfyPage.dragAndDrop({ x: 10, y: 40 }, { x: 10, y: 160 })
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out-ctrl-shift.png')
+    await comfyPage.dragAndDrop({ x: 10, y: 280 }, { x: 10, y: 220 })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'zoomed-default-ctrl-shift.png'
+    )
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.page.keyboard.up('Shift')
+  })
+
+  test('Can zoom in/out after decreasing canvas zoom speed setting', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', 1.05)
+    await comfyPage.zoom(-100, 4)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'zoomed-in-low-zoom-speed.png'
+    )
+    await comfyPage.zoom(100, 8)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'zoomed-out-low-zoom-speed.png'
+    )
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', 1.1)
+  })
+
+  test('Can zoom in/out after increasing canvas zoom speed', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', 1.5)
+    await comfyPage.zoom(-100, 4)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'zoomed-in-high-zoom-speed.png'
+    )
+    await comfyPage.zoom(100, 8)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'zoomed-out-high-zoom-speed.png'
+    )
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', 1.1)
+  })
+
+  test('Can pan', async ({ comfyPage }) => {
+    await comfyPage.pan({ x: 200, y: 200 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned.png')
+  })
+
+  test('Cursor style changes when panning', async ({ comfyPage }) => {
+    const getCursorStyle = async () => {
+      return await comfyPage.page.evaluate(() => {
+        return (
+          document.getElementById('graph-canvas')!.style.cursor || 'default'
+        )
+      })
+    }
+
+    await comfyPage.page.mouse.move(10, 10)
+    expect(await getCursorStyle()).toBe('default')
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+    // Move mouse should not alter cursor style.
+    await comfyPage.page.mouse.move(10, 20)
+    expect(await getCursorStyle()).toBe('grabbing')
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('default')
+
+    await comfyPage.page.keyboard.down('Space')
+    expect(await getCursorStyle()).toBe('grab')
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('grab')
+    await comfyPage.page.keyboard.up('Space')
+    expect(await getCursorStyle()).toBe('default')
+  })
+
+  // https://github.com/Comfy-Org/litegraph.js/pull/424
+  test('Properly resets dragging state after pan mode sequence', async ({
+    comfyPage
+  }) => {
+    const getCursorStyle = async () => {
+      return await comfyPage.page.evaluate(() => {
+        return (
+          document.getElementById('graph-canvas')!.style.cursor || 'default'
+        )
+      })
+    }
+
+    // Initial state check
+    await comfyPage.page.mouse.move(10, 10)
+    expect(await getCursorStyle()).toBe('default')
+
+    // Click and hold
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+
+    // Press space while holding click
+    await comfyPage.page.keyboard.down('Space')
+    expect(await getCursorStyle()).toBe('grabbing')
+
+    // Release click while space is still down
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('grab')
+
+    // Release space
+    await comfyPage.page.keyboard.up('Space')
+    expect(await getCursorStyle()).toBe('default')
+
+    // Move mouse - cursor should remain default
+    await comfyPage.page.mouse.move(20, 20)
+    expect(await getCursorStyle()).toBe('default')
+  })
+
+  test('Can pan when dragging a link', async ({ comfyPage, comfyMouse }) => {
+    const posSlot1 = comfyPage.clipTextEncodeNode1InputSlot
+    await comfyMouse.move(posSlot1)
+    const posEmpty = comfyPage.emptySpace
+    await comfyMouse.drag(posEmpty)
+    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link1.png')
+
+    await comfyPage.page.keyboard.down('Space')
+    await comfyMouse.mouse.move(posEmpty.x + 100, posEmpty.y + 100)
+    // Canvas should be panned.
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'panning-when-dragging-link.png'
+    )
+    await comfyPage.page.keyboard.up('Space')
+    await comfyMouse.move(posEmpty)
+    // Should be back to dragging link mode when space is released.
+    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link2.png')
+    await comfyMouse.drop()
+  })
+
+  test('Can pan very far and back', async ({ comfyPage }) => {
+    // intentionally slice the edge of where the clip text encode dom widgets are
+    await comfyPage.pan({ x: -800, y: -300 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-step-one.png')
+    await comfyPage.pan({ x: -200, y: 0 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-step-two.png')
+    await comfyPage.pan({ x: -2200, y: -2200 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-far-away.png')
+    await comfyPage.pan({ x: 2200, y: 2200 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-back-from-far.png')
+    await comfyPage.pan({ x: 200, y: 0 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-two.png')
+    await comfyPage.pan({ x: 800, y: 300 }, { x: 1000, y: 10 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-one.png')
+  })
+
+  test('@mobile Can pan with touch', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.panWithTouch({ x: 200, y: 200 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-touch.png')
+  })
+})
+
+test.describe('Widget Interaction', () => {
+  test('Undo text input', async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('')
+    await expect(textBox).toHaveValue('')
+    await textBox.fill('Hello World')
+    await expect(textBox).toHaveValue('Hello World')
+    await comfyPage.ctrlZ(null)
+    await expect(textBox).toHaveValue('')
+  })
+
+  test('Undo attention edit', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.EditAttention.Delta', 0.05)
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('1girl')
+    await expect(textBox).toHaveValue('1girl')
+    await textBox.selectText()
+    await comfyPage.ctrlArrowUp(null)
+    await expect(textBox).toHaveValue('(1girl:1.05)')
+    await comfyPage.ctrlZ(null)
+    await expect(textBox).toHaveValue('1girl')
+  })
+})
+
+test.describe('Load workflow', () => {
+  test('Can load workflow with string node id', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('string_node_id')
+    await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png')
+  })
+
+  test('Can load workflow with ("STRING",) input node', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('string_input')
+    await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
+  })
+
+  test('Restore workflow on reload (switch workflow)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
+    await comfyPage.setup({ clearStorage: false })
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
+  })
+
+  test('Restore workflow on reload (modify workflow)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    const node = (await comfyPage.getFirstNodeRef())!
+    await node.click('collapse')
+    // Wait 300ms between 2 clicks so that it is not treated as a double click
+    // by litegraph.
+    await comfyPage.page.waitForTimeout(300)
+    await comfyPage.clickEmptySpace()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'single_ksampler_modified.png'
+    )
+    await comfyPage.setup({ clearStorage: false })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'single_ksampler_modified.png'
+    )
+  })
+
+  test.describe('Restore all open workflows on reload', () => {
+    let workflowA: string
+    let workflowB: string
+
+    const generateUniqueFilename = (extension = '') =>
+      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage to persist the workflow paths before reloading
+      await comfyPage.page.waitForFunction(
+        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
+      )
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after reload', async ({
+      comfyPage
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after reload', async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      const workflowPathA = `${workflowA}.json`
+      const workflowPathB = `${workflowB}.json`
+
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowPathA, workflowPathB])
+      )
+      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
+        openWorkflows.indexOf(workflowPathB)
+      )
+      expect(activeWorkflowName).toEqual(workflowPathB)
+    })
+  })
+})
+
+test.describe('Load duplicate workflow', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('A workflow can be loaded multiple times in a row', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.menu.workflowsTab.open()
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.loadWorkflow('single_ksampler')
+    expect(await comfyPage.getGraphNodesCount()).toBe(1)
+  })
+})

browser_tests/tests/keybindings.spec.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Keybindings', () => {
+  test('Should not trigger non-modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k' }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('k')
+    await expect(textBox).toHaveValue('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      undefined
+    )
+  })
+
+  test('Should not trigger modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k', ctrl: true }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('q')
+    await textBox.press('Control+k')
+    await expect(textBox).toHaveValue('q')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+
+  test('Should not trigger keybinding reserved by text input when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'Ctrl+v' }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.press('Control+v')
+    await expect(textBox).toBeFocused()
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      undefined
+    )
+  })
+})

browser_tests/tests/litegraphEvent.spec.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+function listenForEvent(): Promise<Event> {
+  return new Promise<Event>((resolve) => {
+    document.addEventListener('litegraph:canvas', (e) => resolve(e), {
+      once: true
+    })
+  })
+}
+
+test.describe('Canvas Event', () => {
+  test('Emit litegraph:canvas empty-release', async ({ comfyPage }) => {
+    const eventPromise = comfyPage.page.evaluate(listenForEvent)
+    const disconnectPromise = comfyPage.disconnectEdge()
+    const event = await eventPromise
+    await disconnectPromise
+
+    expect(event).not.toBeNull()
+    // No further check on event content as the content is dropped by
+    // playwright for some reason.
+    // See https://github.com/microsoft/playwright/issues/31580
+  })
+
+  test('Emit litegraph:canvas empty-double-click', async ({ comfyPage }) => {
+    const eventPromise = comfyPage.page.evaluate(listenForEvent)
+    const doubleClickPromise = comfyPage.doubleClickCanvas()
+    const event = await eventPromise
+    await doubleClickPromise
+
+    expect(event).not.toBeNull()
+    // No further check on event content as the content is dropped by
+    // playwright for some reason.
+    // See https://github.com/microsoft/playwright/issues/31580
+  })
+})

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Load Workflow in Media', () => {
+  ;[
+    'workflow.webp',
+    'edited_workflow.webp',
+    'no_workflow.webp',
+    'large_workflow.webp',
+    'workflow.webm'
+  ].forEach(async (fileName) => {
+    test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
+      await comfyPage.dragAndDropFile(fileName)
+      await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+    })
+  })
+})