mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
8c9328c1b2
## Summary Add eslint-plugin-playwright as an oxlint JS plugin scoped to browser_tests/, enforcing Playwright best practices at lint time. ## Changes - **What**: Configure eslint-plugin-playwright@2.10.1 via oxlint's alpha `jsPlugins` field (`.oxlintrc.json` override scoped to `browser_tests/**/*.ts`). 18 recommended rules + `prefer-native-locators` + `require-to-pass-timeout` at error severity. All 173 initial violations resolved (config, auto-fix, manual fixes). `no-force-option` set to off — 28 violations need triage (canvas overlay workarounds vs unnecessary force) in a dedicated PR. - **Dependencies**: `eslint-plugin-playwright@^2.10.1` (devDependency, required by oxlint jsPlugins at runtime) ## Review Focus - `.oxlintrc.json` override structure — this is the first use of oxlint's JS plugins alpha feature in this repo - Manual fixes in spec files: `waitForSelector` → `locator.waitFor`, deprecated page methods → locator equivalents, `toPass()` timeout additions - Compound CSS selectors replaced with `.and()` (Playwright native locator composition) to avoid `prefer-native-locators` suppressions - Lint script changes in `package.json` to include `browser_tests/` in oxlint targets --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com>
1443 lines
48 KiB
TypeScript
1443 lines
48 KiB
TypeScript
import type { Locator } from '@playwright/test'
|
|
import { expect } from '@playwright/test'
|
|
import type { Position } from '@vueuse/core'
|
|
|
|
import {
|
|
comfyPageFixture as test,
|
|
testComfySnapToGridGridSize
|
|
} from '@e2e/fixtures/ComfyPage'
|
|
import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
|
|
import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
|
|
import { TestIds } from '@e2e/fixtures/selectors'
|
|
import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
|
|
import type { WorkspaceStore } from '@e2e/types/globals'
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
|
|
// Wait for the legacy menu to appear and canvas to settle after layout shift.
|
|
await comfyPage.page.locator('.comfy-menu').waitFor({ state: 'visible' })
|
|
await comfyPage.nextFrame()
|
|
})
|
|
|
|
test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
|
|
test('Can select/delete all items', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('groups/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.workflow.loadWorkflow('groups/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.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
for (const node of clipNodes) {
|
|
await node.click('title', { modifiers: [modifier] })
|
|
}
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(clipNodes.length)
|
|
})
|
|
})
|
|
|
|
test(
|
|
'@2x Can highlight selected',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await expect(comfyPage.canvas).toHaveScreenshot('default.png')
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.textEncodeNode1
|
|
})
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.textEncodeNode2
|
|
})
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
|
|
}
|
|
)
|
|
|
|
const dragSelectNodes = async (
|
|
comfyPage: ComfyPage,
|
|
clipNodes: NodeReference[]
|
|
) => {
|
|
const clipNode1Pos = await clipNodes[0].getPosition()
|
|
const clipNode2Pos = await clipNodes[1].getPosition()
|
|
const offset = 64
|
|
await comfyPage.page.keyboard.down('Meta')
|
|
await comfyPage.canvasOps.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')
|
|
}
|
|
|
|
test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
|
|
const clipNodes =
|
|
await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
await dragSelectNodes(comfyPage, clipNodes)
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(clipNodes.length)
|
|
})
|
|
|
|
test('Can move selected nodes using the Comfy.Canvas.MoveSelectedNodes.{Up|Down|Left|Right} commands', async ({
|
|
comfyPage
|
|
}) => {
|
|
const clipNodes =
|
|
await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
const getPositions = () =>
|
|
Promise.all(clipNodes.map((node) => node.getPosition()))
|
|
const testDirection = async ({
|
|
direction,
|
|
expectedPosition
|
|
}: {
|
|
direction: string
|
|
expectedPosition: (originalPosition: Position) => Position
|
|
}) => {
|
|
const originalPositions = await getPositions()
|
|
await dragSelectNodes(comfyPage, clipNodes)
|
|
await comfyPage.command.executeCommand(
|
|
`Comfy.Canvas.MoveSelectedNodes.${direction}`
|
|
)
|
|
await comfyPage.canvas.press(`Control+Arrow${direction}`)
|
|
const newPositions = await getPositions()
|
|
expect(newPositions).toEqual(originalPositions.map(expectedPosition))
|
|
}
|
|
await testDirection({
|
|
direction: 'Down',
|
|
expectedPosition: (originalPosition) => ({
|
|
...originalPosition,
|
|
y: originalPosition.y + testComfySnapToGridGridSize
|
|
})
|
|
})
|
|
await testDirection({
|
|
direction: 'Right',
|
|
expectedPosition: (originalPosition) => ({
|
|
...originalPosition,
|
|
x: originalPosition.x + testComfySnapToGridGridSize
|
|
})
|
|
})
|
|
await testDirection({
|
|
direction: 'Up',
|
|
expectedPosition: (originalPosition) => ({
|
|
...originalPosition,
|
|
y: originalPosition.y - testComfySnapToGridGridSize
|
|
})
|
|
})
|
|
await testDirection({
|
|
direction: 'Left',
|
|
expectedPosition: (originalPosition) => ({
|
|
...originalPosition,
|
|
x: originalPosition.x - testComfySnapToGridGridSize
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
test('Can drag node', { tag: '@screenshot' }, async ({ comfyPage }) => {
|
|
await comfyPage.nodeOps.dragTextEncodeNode2()
|
|
// Move mouse away to avoid hover highlight on the node at the drop position.
|
|
await comfyPage.canvasOps.moveMouseToEmptyArea()
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png', {
|
|
maxDiffPixels: 50
|
|
})
|
|
})
|
|
|
|
test.describe('Node Duplication', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
// Pin this suite to the legacy canvas path so Alt+drag exercises
|
|
// LGraphCanvas, not the Vue node drag handler.
|
|
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
|
|
await comfyPage.nextFrame()
|
|
})
|
|
|
|
test('Can duplicate a regular node via Alt+drag', async ({ comfyPage }) => {
|
|
const before = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
expect(
|
|
before,
|
|
'Expected exactly 2 CLIPTextEncode nodes in default graph'
|
|
).toHaveLength(2)
|
|
|
|
const target = before[0]
|
|
const pos = await target.getPosition()
|
|
const src = { x: pos.x + 16, y: pos.y + 16 }
|
|
|
|
await comfyPage.page.mouse.move(src.x, src.y)
|
|
await comfyPage.page.keyboard.down('Alt')
|
|
try {
|
|
await comfyPage.page.mouse.down()
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.mouse.move(src.x + 120, src.y + 80, { steps: 20 })
|
|
await comfyPage.page.mouse.up()
|
|
await comfyPage.nextFrame()
|
|
} finally {
|
|
await comfyPage.page.keyboard.up('Alt')
|
|
}
|
|
await comfyPage.canvasOps.moveMouseToEmptyArea()
|
|
|
|
await expect
|
|
.poll(
|
|
async () =>
|
|
(await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')).length
|
|
)
|
|
.toBe(3)
|
|
expect(await target.exists()).toBe(true)
|
|
})
|
|
})
|
|
|
|
test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.LinkRelease.Action',
|
|
'no action'
|
|
)
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.LinkRelease.ActionShift',
|
|
'no action'
|
|
)
|
|
})
|
|
|
|
// Test both directions of edge connection.
|
|
;[{ reverse: false }, { reverse: true }].forEach(({ reverse }) => {
|
|
test(`Can disconnect/connect edge ${reverse ? 'reverse' : 'normal'}`, async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.canvasOps.disconnectEdge()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
|
|
await comfyPage.canvasOps.connectEdge({ reverse })
|
|
// Move mouse to empty area to avoid slot highlight.
|
|
await comfyPage.canvasOps.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.canvasOps.dragAndDrop(
|
|
DefaultGraphPositions.clipTextEncodeNode1InputSlot,
|
|
DefaultGraphPositions.emptySpace
|
|
)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
DefaultGraphPositions.clipTextEncodeNode2InputSlot,
|
|
DefaultGraphPositions.clipTextEncodeNode1InputSlot
|
|
)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
|
|
})
|
|
|
|
test('Can copy link by shift-drag existing link', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
DefaultGraphPositions.clipTextEncodeNode1InputSlot,
|
|
DefaultGraphPositions.emptySpace
|
|
)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
|
|
await comfyPage.page.keyboard.down('Shift')
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
DefaultGraphPositions.clipTextEncodeNode2InputLinkPath,
|
|
DefaultGraphPositions.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.settings.setSetting('Comfy.Node.AutoSnapLinkToSlot', true)
|
|
await comfyPage.settings.setSetting('Comfy.Node.SnapHighlightsNode', true)
|
|
await comfyPage.nextFrame()
|
|
|
|
await comfyMouse.move(DefaultGraphPositions.clipTextEncodeNode1InputSlot)
|
|
await comfyMouse.drag(DefaultGraphPositions.clipTextEncodeNode2InputSlot)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('snapped-highlighted.png')
|
|
})
|
|
})
|
|
|
|
test(
|
|
'Can adjust widget value',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.nodeOps.adjustEmptyLatentWidth()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'adjusted-widget-value.png'
|
|
)
|
|
}
|
|
)
|
|
|
|
test('Link snap to slot', { tag: '@screenshot' }, async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('links/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.canvasOps.dragAndDrop(outputSlotPos, samplerNodeCenterPos)
|
|
|
|
await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png')
|
|
})
|
|
|
|
test(
|
|
'Can batch move links by drag with shift',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('links/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.canvasOps.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',
|
|
{ tag: '@screenshot' },
|
|
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',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
// Find the node whose collapse toggler matches the hardcoded position.
|
|
// getNodeRefsByType order is non-deterministic, so identify by proximity.
|
|
const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
const togglerPos = DefaultGraphPositions.textEncodeNodeToggler
|
|
let targetNode = nodes[0]
|
|
let minDist = Infinity
|
|
for (const n of nodes) {
|
|
const pos = await n.getPosition()
|
|
const dist = Math.hypot(pos.x - togglerPos.x, pos.y - togglerPos.y)
|
|
if (dist < minDist) {
|
|
minDist = dist
|
|
targetNode = n
|
|
}
|
|
}
|
|
|
|
await expect(comfyPage.canvas).toHaveScreenshot('default.png')
|
|
await comfyPage.canvas.click({
|
|
position: togglerPos
|
|
})
|
|
await expect.poll(() => targetNode.isCollapsed()).toBe(true)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'text-encode-toggled-off.png'
|
|
)
|
|
// Wait for the double-click window (300ms) to expire so the next
|
|
// click at the same position isn't interpreted as a double-click.
|
|
await expect
|
|
.poll(() =>
|
|
comfyPage.page.evaluate(() => {
|
|
const pointer = window.app!.canvas.pointer
|
|
if (!pointer.eLastDown) return true
|
|
return performance.now() - pointer.eLastDown.timeStamp > 300
|
|
})
|
|
)
|
|
.toBe(true)
|
|
await comfyPage.canvas.click({
|
|
position: togglerPos
|
|
})
|
|
await expect.poll(() => targetNode.isCollapsed()).toBe(false)
|
|
// Move mouse away to avoid hover highlight differences.
|
|
await comfyPage.canvasOps.moveMouseToEmptyArea()
|
|
await comfyPage.nextFrame()
|
|
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
|
|
})
|
|
const legacyPrompt = comfyPage.page.locator('.graphdialog')
|
|
await expect(legacyPrompt).toBeVisible()
|
|
// LiteGraph's graphdialog has a 256ms dismiss guard (Date.now() - clickTime > 256).
|
|
// Retry the canvas click until the dialog actually closes.
|
|
await expect(async () => {
|
|
await comfyPage.canvas.click({
|
|
position: {
|
|
x: 10,
|
|
y: 10
|
|
}
|
|
})
|
|
await expect(legacyPrompt).toBeHidden({ timeout: 500 })
|
|
}).toPass({ timeout: 5000 })
|
|
})
|
|
|
|
test('Can close prompt dialog with canvas click (text widget)', async ({
|
|
comfyPage
|
|
}) => {
|
|
const textWidgetPos = {
|
|
x: 167,
|
|
y: 143
|
|
}
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_save_image_node')
|
|
await comfyPage.canvas.click({
|
|
position: textWidgetPos
|
|
})
|
|
const legacyPrompt = comfyPage.page.locator('.graphdialog')
|
|
await expect(legacyPrompt).toBeVisible()
|
|
// LiteGraph's graphdialog has a 256ms dismiss guard (Date.now() - clickTime > 256).
|
|
// Retry the canvas click until the dialog actually closes.
|
|
await expect(async () => {
|
|
await comfyPage.canvas.click({
|
|
position: {
|
|
x: 10,
|
|
y: 10
|
|
}
|
|
})
|
|
await expect(legacyPrompt).toBeHidden({ timeout: 500 })
|
|
}).toPass({ timeout: 5000 })
|
|
})
|
|
|
|
test(
|
|
'Can double click node title to edit',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('nodes/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.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await comfyPage.canvas.dblclick({
|
|
position: {
|
|
x: 50,
|
|
y: 50
|
|
},
|
|
delay: 5
|
|
})
|
|
await expect(comfyPage.page.locator('.node-title-editor')).toHaveCount(0)
|
|
})
|
|
|
|
test(
|
|
'Can group selected nodes',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.GroupSelectedNodes.Padding',
|
|
10
|
|
)
|
|
await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
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',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('groups/oversized_group')
|
|
await expect
|
|
.poll(() =>
|
|
comfyPage.page.evaluate(() => {
|
|
const group = window.app!.graph.groups[0]
|
|
return group ? [group.size[0], group.size[1]] : null
|
|
})
|
|
)
|
|
.not.toBeNull()
|
|
|
|
const initialGroupSize = await comfyPage.page.evaluate(() => {
|
|
const group = window.app!.graph.groups[0]
|
|
return group ? [group.size[0], group.size[1]] : null
|
|
})
|
|
|
|
await comfyPage.keyboard.selectAll()
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.command.executeCommand('Comfy.Graph.FitGroupToContents')
|
|
await expect
|
|
.poll(() =>
|
|
comfyPage.page.evaluate(() => {
|
|
const group = window.app!.graph.groups[0]
|
|
return group ? [group.size[0], group.size[1]] : null
|
|
})
|
|
)
|
|
.not.toEqual(initialGroupSize)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'group-fit-to-contents.png'
|
|
)
|
|
}
|
|
)
|
|
|
|
test('Can pin/unpin nodes', { tag: '@screenshot' }, async ({ comfyPage }) => {
|
|
await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
const nodeRef = (
|
|
await comfyPage.nodeOps.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
|
|
)[0]
|
|
|
|
await comfyPage.command.executeCommand(
|
|
'Comfy.Canvas.ToggleSelectedNodes.Pin'
|
|
)
|
|
await expect.poll(() => nodeRef.isPinned()).toBe(true)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
|
|
await comfyPage.command.executeCommand(
|
|
'Comfy.Canvas.ToggleSelectedNodes.Pin'
|
|
)
|
|
await expect.poll(() => nodeRef.isPinned()).toBe(false)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
|
|
})
|
|
|
|
test(
|
|
'Can bypass/unbypass nodes with keyboard shortcut',
|
|
{ tag: '@screenshot' },
|
|
async ({ comfyPage }) => {
|
|
await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
const nodeRef = (
|
|
await comfyPage.nodeOps.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
|
|
)[0]
|
|
|
|
await comfyPage.canvas.press('Control+b')
|
|
await expect.poll(() => nodeRef.isBypassed()).toBe(true)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('nodes-bypassed.png')
|
|
await comfyPage.canvas.press('Control+b')
|
|
await expect.poll(() => nodeRef.isBypassed()).toBe(false)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('nodes-unbypassed.png')
|
|
}
|
|
)
|
|
})
|
|
|
|
test.describe('Group Interaction', { tag: '@screenshot' }, () => {
|
|
test('Can double click group title to edit', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('groups/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', { tag: '@screenshot' }, () => {
|
|
test('Can zoom in/out', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.zoom(-100)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in.png')
|
|
await comfyPage.canvasOps.zoom(200)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out.png')
|
|
})
|
|
|
|
test('Can zoom very far out', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.zoom(100, 12)
|
|
await expect(comfyPage.canvas).toHaveScreenshot('zoomed-very-far-out.png')
|
|
await comfyPage.canvasOps.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.canvasOps.dragAndDrop({ x: 10, y: 100 }, { x: 10, y: 40 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
|
|
await comfyPage.canvasOps.dragAndDrop({ x: 10, y: 40 }, { x: 10, y: 160 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out-ctrl-shift.png')
|
|
await comfyPage.canvasOps.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.settings.setSetting('Comfy.Graph.ZoomSpeed', 1.05)
|
|
await comfyPage.canvasOps.zoom(-100, 4)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'zoomed-in-low-zoom-speed.png'
|
|
)
|
|
await comfyPage.canvasOps.zoom(100, 8)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'zoomed-out-low-zoom-speed.png'
|
|
)
|
|
await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', 1.1)
|
|
})
|
|
|
|
test('Can zoom in/out after increasing canvas zoom speed', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', 1.5)
|
|
await comfyPage.canvasOps.zoom(-100, 4)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'zoomed-in-high-zoom-speed.png'
|
|
)
|
|
await comfyPage.canvasOps.zoom(100, 8)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'zoomed-out-high-zoom-speed.png'
|
|
)
|
|
await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', 1.1)
|
|
})
|
|
|
|
test('Can pan', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.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)
|
|
await expect.poll(() => getCursorStyle()).toBe('default')
|
|
await comfyPage.page.mouse.down()
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
// Move mouse should not alter cursor style.
|
|
await comfyPage.page.mouse.move(10, 20)
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
await comfyPage.page.mouse.up()
|
|
await expect.poll(() => getCursorStyle()).toBe('default')
|
|
|
|
await comfyPage.page.keyboard.down('Space')
|
|
await expect.poll(() => getCursorStyle()).toBe('grab')
|
|
await comfyPage.page.mouse.down()
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
await comfyPage.page.mouse.up()
|
|
await expect.poll(() => getCursorStyle()).toBe('grab')
|
|
await comfyPage.page.keyboard.up('Space')
|
|
await expect.poll(() => 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)
|
|
await expect.poll(() => getCursorStyle()).toBe('default')
|
|
|
|
// Click and hold
|
|
await comfyPage.page.mouse.down()
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
|
|
// Press space while holding click
|
|
await comfyPage.page.keyboard.down('Space')
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
|
|
// Release click while space is still down
|
|
await comfyPage.page.mouse.up()
|
|
await expect.poll(() => getCursorStyle()).toBe('grab')
|
|
|
|
// Release space
|
|
await comfyPage.page.keyboard.up('Space')
|
|
await expect.poll(() => getCursorStyle()).toBe('default')
|
|
|
|
// Move mouse - cursor should remain default
|
|
await comfyPage.page.mouse.move(20, 20)
|
|
await expect.poll(() => getCursorStyle()).toBe('default')
|
|
})
|
|
|
|
test('Can pan when dragging a link', async ({ comfyPage, comfyMouse }) => {
|
|
const posSlot1 = DefaultGraphPositions.clipTextEncodeNode1InputSlot
|
|
await comfyMouse.move(posSlot1)
|
|
const posEmpty = DefaultGraphPositions.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.canvasOps.pan({ x: -800, y: -300 }, { x: 1000, y: 10 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('panned-step-one.png')
|
|
await comfyPage.canvasOps.pan({ x: -200, y: 0 }, { x: 1000, y: 10 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('panned-step-two.png')
|
|
await comfyPage.canvasOps.pan({ x: -2200, y: -2200 }, { x: 1000, y: 10 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('panned-far-away.png')
|
|
await comfyPage.canvasOps.pan({ x: 2200, y: 2200 }, { x: 1000, y: 10 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('panned-back-from-far.png')
|
|
await comfyPage.canvasOps.pan({ x: 200, y: 0 }, { x: 1000, y: 10 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-two.png')
|
|
await comfyPage.canvasOps.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.canvasOps.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.keyboard.undo(null)
|
|
await expect(textBox).toHaveValue('')
|
|
})
|
|
|
|
test('Undo attention edit', async ({ comfyPage }) => {
|
|
await comfyPage.settings.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.keyboard.moveUp(null)
|
|
await expect(textBox).toHaveValue('(1girl:1.05)')
|
|
await comfyPage.keyboard.undo(null)
|
|
await expect(textBox).toHaveValue('1girl')
|
|
})
|
|
})
|
|
|
|
test.describe('Load workflow', { tag: '@screenshot' }, () => {
|
|
test('Can load workflow with string node id', async ({ comfyPage }) => {
|
|
await comfyPage.workflow.loadWorkflow('nodes/string_node_id')
|
|
await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png')
|
|
})
|
|
|
|
test('Can load workflow with ("STRING",) input node', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.workflow.loadWorkflow('inputs/string_input')
|
|
await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
|
|
})
|
|
|
|
test('Creates initial workflow tab when persistence is disabled', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting('Comfy.Workflow.Persist', false)
|
|
await comfyPage.setup()
|
|
|
|
await expect
|
|
.poll(() =>
|
|
comfyPage.page.evaluate(() => {
|
|
return (window.app!.extensionManager as WorkspaceStore).workflow
|
|
.openWorkflows.length
|
|
})
|
|
)
|
|
.toBeGreaterThanOrEqual(1)
|
|
})
|
|
|
|
test('Restore workflow on reload (switch workflow)', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.workflow.loadWorkflow('nodes/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.workflow.loadWorkflow('nodes/single_ksampler')
|
|
const node = (await comfyPage.nodeOps.getFirstNodeRef())!
|
|
await node.click('collapse')
|
|
await comfyPage.canvasOps.clickEmptySpace()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'single_ksampler_modified.png'
|
|
)
|
|
// Wait for V2 persistence debounce to save the modified workflow
|
|
const start = Date.now()
|
|
await comfyPage.page.waitForFunction((since) => {
|
|
for (let i = 0; i < window.localStorage.length; i++) {
|
|
const key = window.localStorage.key(i)
|
|
if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
|
|
const json = window.localStorage.getItem(key)
|
|
if (!json) continue
|
|
try {
|
|
const index = JSON.parse(json)
|
|
if (typeof index.updatedAt === 'number' && index.updatedAt >= since) {
|
|
return true
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
return false
|
|
}, start)
|
|
await comfyPage.setup({ clearStorage: false })
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'single_ksampler_modified.png'
|
|
)
|
|
})
|
|
|
|
const generateUniqueFilename = (extension = '') =>
|
|
`${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
|
|
|
|
test.describe('Restore all open workflows on reload', () => {
|
|
let workflowA: string
|
|
let workflowB: string
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
|
|
|
workflowA = generateUniqueFilename()
|
|
await comfyPage.menu.topbar.saveWorkflow(workflowA)
|
|
workflowB = generateUniqueFilename()
|
|
await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
|
|
await comfyPage.menu.topbar.saveWorkflow(workflowB)
|
|
|
|
// Wait for sessionStorage to persist the workflow paths before reloading
|
|
// V2 persistence uses sessionStorage with client-scoped keys
|
|
await comfyPage.page.waitForFunction(() => {
|
|
for (let i = 0; i < window.sessionStorage.length; i++) {
|
|
const key = window.sessionStorage.key(i)
|
|
if (key?.startsWith('Comfy.Workflow.OpenPaths:')) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
})
|
|
await comfyPage.setup({ clearStorage: false })
|
|
})
|
|
|
|
test('Restores topbar workflow tabs after reload', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
|
|
await expect
|
|
.poll(() => comfyPage.menu.topbar.getTabNames())
|
|
.toEqual(expect.arrayContaining([workflowA, workflowB]))
|
|
|
|
await expect
|
|
.poll(async () => {
|
|
const tabs = await comfyPage.menu.topbar.getTabNames()
|
|
return (
|
|
tabs.indexOf(workflowA) < tabs.indexOf(workflowB) &&
|
|
tabs.indexOf(workflowA) >= 0
|
|
)
|
|
})
|
|
.toBe(true)
|
|
|
|
await expect(comfyPage.menu.topbar.getActiveTab()).toContainText(
|
|
workflowB
|
|
)
|
|
})
|
|
|
|
test('Restores sidebar workflows after reload', async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Sidebar'
|
|
)
|
|
await comfyPage.menu.workflowsTab.open()
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(expect.arrayContaining([workflowA, workflowB]))
|
|
await expect
|
|
.poll(async () => {
|
|
const ws = await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
return ws.indexOf(workflowA) < ws.indexOf(workflowB)
|
|
})
|
|
.toBe(true)
|
|
await expect(comfyPage.menu.workflowsTab.activeWorkflowLabel).toHaveText(
|
|
workflowB
|
|
)
|
|
})
|
|
})
|
|
|
|
test.describe('Restore workflow tabs after browser restart', () => {
|
|
let workflowA: string
|
|
let workflowB: string
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
|
|
|
workflowA = generateUniqueFilename()
|
|
await comfyPage.menu.topbar.saveWorkflow(workflowA)
|
|
workflowB = generateUniqueFilename()
|
|
await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
|
|
await comfyPage.menu.topbar.saveWorkflow(workflowB)
|
|
|
|
// Wait for localStorage fallback pointers to be written
|
|
await comfyPage.page.waitForFunction(() => {
|
|
for (let i = 0; i < window.localStorage.length; i++) {
|
|
const key = window.localStorage.key(i)
|
|
if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
})
|
|
|
|
// Simulate browser restart: clear sessionStorage (lost on close)
|
|
// but keep localStorage (survives browser restart)
|
|
await comfyPage.page.evaluate(() => {
|
|
sessionStorage.clear()
|
|
})
|
|
await comfyPage.setup({ clearStorage: false })
|
|
})
|
|
|
|
test('Restores topbar workflow tabs after browser restart', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
// Wait for both restored tabs to render (localStorage fallback is async)
|
|
await expect(
|
|
comfyPage.page.locator('.workflow-tabs .workflow-label', {
|
|
hasText: workflowA
|
|
})
|
|
).toBeVisible()
|
|
|
|
await expect
|
|
.poll(async () => {
|
|
const tabs = await comfyPage.menu.topbar.getTabNames()
|
|
return (
|
|
tabs.includes(workflowA) &&
|
|
tabs.includes(workflowB) &&
|
|
tabs.indexOf(workflowA) < tabs.indexOf(workflowB)
|
|
)
|
|
})
|
|
.toBe(true)
|
|
|
|
await expect(comfyPage.menu.topbar.getActiveTab()).toContainText(
|
|
workflowB
|
|
)
|
|
})
|
|
|
|
test('Restores sidebar workflows after browser restart', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Sidebar'
|
|
)
|
|
await comfyPage.menu.workflowsTab.open()
|
|
await expect
|
|
.poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
|
|
.toEqual(expect.arrayContaining([workflowA, workflowB]))
|
|
await expect
|
|
.poll(async () => {
|
|
const ws = await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
|
return ws.indexOf(workflowA) < ws.indexOf(workflowB)
|
|
})
|
|
.toBe(true)
|
|
await expect(comfyPage.menu.workflowsTab.activeWorkflowLabel).toHaveText(
|
|
workflowB
|
|
)
|
|
})
|
|
})
|
|
|
|
test('Auto fit view after loading workflow', async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.EnableWorkflowViewRestore',
|
|
false
|
|
)
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler_fit.png')
|
|
})
|
|
})
|
|
|
|
test.describe('Load duplicate workflow', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
|
})
|
|
|
|
test('A workflow can be loaded multiple times in a row', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await comfyPage.menu.workflowsTab.open()
|
|
await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
|
|
await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
|
|
await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
|
|
})
|
|
})
|
|
|
|
test.describe('Viewport settings', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Workflow.WorkflowTabsPosition',
|
|
'Topbar'
|
|
)
|
|
|
|
await comfyPage.workflow.setupWorkflowsDirectory({})
|
|
})
|
|
|
|
test('Keeps viewport settings when changing tabs', async ({
|
|
comfyPage,
|
|
comfyMouse
|
|
}) => {
|
|
const changeTab = async (tab: Locator) => {
|
|
await tab.click()
|
|
await comfyPage.nextFrame()
|
|
await comfyMouse.move(DefaultGraphPositions.emptySpace)
|
|
|
|
// If tooltip is visible, wait for it to hide
|
|
await expect(
|
|
comfyPage.page.locator('.workflow-popover-fade')
|
|
).toHaveCount(0)
|
|
}
|
|
|
|
// Screenshot the canvas element
|
|
await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
|
|
|
|
const toggleButton = comfyPage.page.getByTestId(
|
|
TestIds.canvas.toggleMinimapButton
|
|
)
|
|
await toggleButton.click()
|
|
await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
|
|
|
|
await comfyPage.menu.topbar.saveWorkflow('Workflow A')
|
|
await comfyPage.nextFrame()
|
|
|
|
// Save workflow as a new file, then zoom out before screen shot
|
|
await comfyPage.menu.topbar.saveWorkflowAs('Workflow B')
|
|
|
|
await comfyPage.nextFrame()
|
|
const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
|
|
await changeTab(tabA)
|
|
|
|
const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
|
|
|
|
const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
|
|
await changeTab(tabB)
|
|
|
|
await comfyMouse.move(DefaultGraphPositions.emptySpace)
|
|
for (let i = 0; i < 4; i++) {
|
|
await comfyMouse.wheel(0, 60)
|
|
}
|
|
|
|
await comfyPage.nextFrame()
|
|
const screenshotB = (await comfyPage.canvas.screenshot()).toString('base64')
|
|
|
|
// Ensure that the screenshots are different due to zoom level
|
|
expect(screenshotB).not.toBe(screenshotA)
|
|
|
|
// Go back to Workflow A
|
|
await changeTab(tabA)
|
|
expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
|
|
screenshotA
|
|
)
|
|
|
|
// And back to Workflow B
|
|
await changeTab(tabB)
|
|
expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
|
|
screenshotB
|
|
)
|
|
})
|
|
})
|
|
|
|
test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
|
|
test.describe('Legacy Mode', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Canvas.NavigationMode',
|
|
'legacy'
|
|
)
|
|
})
|
|
|
|
test('Left-click drag in empty area should pan canvas', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
{ x: 50, y: 50 },
|
|
{ x: 150, y: 150 }
|
|
)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-left-drag-pan.png'
|
|
)
|
|
})
|
|
|
|
test('Middle-click drag should pan canvas', async ({ comfyPage }) => {
|
|
await comfyPage.page.mouse.move(50, 50)
|
|
await comfyPage.page.mouse.down({ button: 'middle' })
|
|
await comfyPage.page.mouse.move(150, 150)
|
|
await comfyPage.page.mouse.up({ button: 'middle' })
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-middle-drag-pan.png'
|
|
)
|
|
})
|
|
|
|
test('Mouse wheel should zoom in/out', async ({ comfyPage }) => {
|
|
await comfyPage.page.mouse.move(400, 300)
|
|
await comfyPage.page.mouse.wheel(0, -120)
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-wheel-zoom-in.png'
|
|
)
|
|
|
|
await comfyPage.page.mouse.wheel(0, 240)
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-wheel-zoom-out.png'
|
|
)
|
|
})
|
|
|
|
test('Left-click on node should not pan canvas', async ({ comfyPage }) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.textEncodeNode1
|
|
})
|
|
await comfyPage.nextFrame()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(1)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-click-node-select.png'
|
|
)
|
|
})
|
|
})
|
|
|
|
test.describe('Standard Mode', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Canvas.NavigationMode',
|
|
'standard'
|
|
)
|
|
})
|
|
|
|
test('Left-click drag in empty area should select nodes', async ({
|
|
comfyPage
|
|
}) => {
|
|
const clipNodes =
|
|
await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
const clipNode1Pos = await clipNodes[0].getPosition()
|
|
const clipNode2Pos = await clipNodes[1].getPosition()
|
|
const offset = 64
|
|
|
|
await comfyPage.canvasOps.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 expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(clipNodes.length)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-left-drag-select.png'
|
|
)
|
|
})
|
|
|
|
test('Middle-click drag should pan canvas', async ({ comfyPage }) => {
|
|
await comfyPage.page.mouse.move(50, 50)
|
|
await comfyPage.page.mouse.down({ button: 'middle' })
|
|
await comfyPage.page.mouse.move(150, 150)
|
|
await comfyPage.page.mouse.up({ button: 'middle' })
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-middle-drag-pan.png'
|
|
)
|
|
})
|
|
|
|
test('Ctrl + mouse wheel should zoom in/out', async ({ comfyPage }) => {
|
|
await comfyPage.page.mouse.move(400, 300)
|
|
await comfyPage.page.keyboard.down('Control')
|
|
await comfyPage.page.mouse.wheel(0, -120)
|
|
await comfyPage.page.keyboard.up('Control')
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-ctrl-wheel-zoom-in.png'
|
|
)
|
|
|
|
await comfyPage.page.keyboard.down('Control')
|
|
await comfyPage.page.mouse.wheel(0, 240)
|
|
await comfyPage.page.keyboard.up('Control')
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-ctrl-wheel-zoom-out.png'
|
|
)
|
|
})
|
|
|
|
test('Left-click on node should select node (not start selection box)', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.textEncodeNode1
|
|
})
|
|
await comfyPage.nextFrame()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(1)
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-click-node-select.png'
|
|
)
|
|
})
|
|
|
|
test('Space + left-click drag should pan canvas', async ({ comfyPage }) => {
|
|
// Click canvas to focus it
|
|
await comfyPage.canvas.click()
|
|
await comfyPage.nextFrame()
|
|
|
|
await comfyPage.page.keyboard.down('Space')
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
{ x: 50, y: 50 },
|
|
{ x: 150, y: 150 }
|
|
)
|
|
await comfyPage.page.keyboard.up('Space')
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-space-drag-pan.png'
|
|
)
|
|
})
|
|
|
|
test('Space key overrides default left-click behavior', async ({
|
|
comfyPage
|
|
}) => {
|
|
const clipNodes =
|
|
await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
|
|
const clipNode1Pos = await clipNodes[0].getPosition()
|
|
const offset = 64
|
|
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
{
|
|
x: clipNode1Pos.x - offset,
|
|
y: clipNode1Pos.y - offset
|
|
},
|
|
{
|
|
x: clipNode1Pos.x + offset,
|
|
y: clipNode1Pos.y + offset
|
|
}
|
|
)
|
|
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBeGreaterThan(0)
|
|
|
|
await comfyPage.canvasOps.clickEmptySpace()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(0)
|
|
|
|
await comfyPage.page.keyboard.down('Space')
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
{
|
|
x: clipNode1Pos.x - offset,
|
|
y: clipNode1Pos.y - offset
|
|
},
|
|
{
|
|
x: clipNode1Pos.x + offset,
|
|
y: clipNode1Pos.y + offset
|
|
}
|
|
)
|
|
await comfyPage.page.keyboard.up('Space')
|
|
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
|
|
.toBe(0)
|
|
})
|
|
})
|
|
|
|
test('Shift + mouse wheel should pan canvas horizontally', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Canvas.MouseWheelScroll',
|
|
'panning'
|
|
)
|
|
|
|
await comfyPage.canvas.click()
|
|
await comfyPage.nextFrame()
|
|
|
|
await expect(comfyPage.canvas).toHaveScreenshot('standard-initial.png')
|
|
|
|
await comfyPage.page.mouse.move(400, 300)
|
|
|
|
await comfyPage.page.keyboard.down('Shift')
|
|
await comfyPage.page.mouse.wheel(0, 120)
|
|
await comfyPage.page.keyboard.up('Shift')
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-shift-wheel-pan-right.png'
|
|
)
|
|
|
|
await comfyPage.page.keyboard.down('Shift')
|
|
await comfyPage.page.mouse.wheel(0, -240)
|
|
await comfyPage.page.keyboard.up('Shift')
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-shift-wheel-pan-left.png'
|
|
)
|
|
|
|
await comfyPage.page.keyboard.down('Shift')
|
|
await comfyPage.page.mouse.wheel(0, 120)
|
|
await comfyPage.page.keyboard.up('Shift')
|
|
await comfyPage.nextFrame()
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'standard-shift-wheel-pan-center.png'
|
|
)
|
|
})
|
|
|
|
test.describe('Edge Cases', () => {
|
|
test('Multiple modifier keys work correctly in legacy mode', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Canvas.NavigationMode',
|
|
'legacy'
|
|
)
|
|
|
|
await comfyPage.page.keyboard.down('Alt')
|
|
await comfyPage.page.keyboard.down('Shift')
|
|
await comfyPage.canvasOps.dragAndDrop(
|
|
{ x: 50, y: 50 },
|
|
{ x: 150, y: 150 }
|
|
)
|
|
await comfyPage.page.keyboard.up('Shift')
|
|
await comfyPage.page.keyboard.up('Alt')
|
|
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'legacy-alt-shift-drag.png'
|
|
)
|
|
})
|
|
|
|
test('Cursor changes appropriately in different modes', async ({
|
|
comfyPage
|
|
}) => {
|
|
const getCursorStyle = async () => {
|
|
return await comfyPage.page.evaluate(() => {
|
|
return (
|
|
document.getElementById('graph-canvas')!.style.cursor || 'default'
|
|
)
|
|
})
|
|
}
|
|
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.Canvas.NavigationMode',
|
|
'legacy'
|
|
)
|
|
await comfyPage.page.mouse.move(50, 50)
|
|
await comfyPage.page.mouse.down()
|
|
await expect.poll(() => getCursorStyle()).toBe('grabbing')
|
|
await comfyPage.page.mouse.up()
|
|
})
|
|
})
|
|
})
|