mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
412 lines
13 KiB
TypeScript
412 lines
13 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture } from '../fixtures/ComfyPage'
|
|
import { PerformanceMonitor } from '../helpers/performanceMonitor'
|
|
|
|
const test = comfyPageFixture
|
|
|
|
const BLUE_COLOR = 'rgb(51, 51, 85)'
|
|
const RED_COLOR = 'rgb(85, 51, 51)'
|
|
|
|
test.describe('Selection Toolbox', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
|
|
})
|
|
|
|
test('@perf shows selection toolbox', async ({ comfyPage }) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'show-selection-toolbox'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// By default, selection toolbox should be enabled
|
|
expect(
|
|
await comfyPage.page.locator('.selection-overlay-container').isVisible()
|
|
).toBe(false)
|
|
|
|
// Select multiple nodes
|
|
await perfMonitor.measureOperation('select-multiple-nodes', async () => {
|
|
await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
|
|
})
|
|
|
|
// Selection toolbox should be visible with multiple nodes selected
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container')
|
|
).toBeVisible()
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container.show-border')
|
|
).toBeVisible()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf shows at correct position when node is pasted', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'node-paste-position'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
await perfMonitor.measureOperation('load-workflow', async () => {
|
|
await comfyPage.loadWorkflow('single_ksampler')
|
|
})
|
|
|
|
await perfMonitor.measureOperation('select-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
await perfMonitor.measureOperation('copy-node', async () => {
|
|
await comfyPage.ctrlC()
|
|
})
|
|
|
|
await perfMonitor.measureOperation('position-mouse', async () => {
|
|
await comfyPage.page.mouse.move(100, 100)
|
|
})
|
|
|
|
await perfMonitor.measureOperation('paste-node', async () => {
|
|
await comfyPage.ctrlV()
|
|
})
|
|
|
|
const overlayContainer = comfyPage.page.locator(
|
|
'.selection-overlay-container'
|
|
)
|
|
await expect(overlayContainer).toBeVisible()
|
|
|
|
// Verify the absolute position
|
|
const boundingBox = await overlayContainer.boundingBox()
|
|
expect(boundingBox).not.toBeNull()
|
|
// 10px offset for the pasted node
|
|
expect(Math.round(boundingBox!.x)).toBeCloseTo(90, -1) // Allow ~10px tolerance
|
|
// 30px offset of node title height
|
|
expect(Math.round(boundingBox!.y)).toBeCloseTo(60, -1)
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
// Skip because fails with vue widget nodes (reason not investigated)
|
|
test.skip('@perf hide when select and drag happen at the same time', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'hide-toolbox-during-drag'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
await perfMonitor.measureOperation('load-workflow', async () => {
|
|
await comfyPage.loadWorkflow('single_ksampler')
|
|
})
|
|
|
|
let node: any
|
|
let nodePos: any
|
|
await perfMonitor.measureOperation('get-node-position', async () => {
|
|
node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
|
|
nodePos = await node.getPosition()
|
|
})
|
|
|
|
// Drag on the title of the node
|
|
await perfMonitor.measureOperation('start-drag', async () => {
|
|
await comfyPage.page.mouse.move(nodePos.x + 100, nodePos.y - 15)
|
|
await comfyPage.page.mouse.down()
|
|
})
|
|
|
|
await perfMonitor.measureOperation('drag-to-position', async () => {
|
|
await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
|
|
})
|
|
|
|
await comfyPage.nextFrame()
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container')
|
|
).not.toBeVisible()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf shows border only with multiple selections', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'border-multiple-selections'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Select single node
|
|
await perfMonitor.measureOperation('select-single-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
// Selection overlay should be visible but without border
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container')
|
|
).toBeVisible()
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container.show-border')
|
|
).not.toBeVisible()
|
|
|
|
// Select multiple nodes
|
|
await perfMonitor.measureOperation('select-multiple-nodes', async () => {
|
|
await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
|
|
})
|
|
|
|
// Selection overlay should show border with multiple selections
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container.show-border')
|
|
).toBeVisible()
|
|
|
|
// Deselect to single node
|
|
await perfMonitor.measureOperation('deselect-to-single', async () => {
|
|
await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
})
|
|
|
|
// Border should be hidden again
|
|
await expect(
|
|
comfyPage.page.locator('.selection-overlay-container.show-border')
|
|
).not.toBeVisible()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf displays bypass button in toolbox when nodes are selected', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'bypass-button-display'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// A group + a KSampler node
|
|
await perfMonitor.measureOperation('load-workflow', async () => {
|
|
await comfyPage.loadWorkflow('single_group')
|
|
})
|
|
|
|
// Select group + node should show bypass button
|
|
await perfMonitor.measureOperation('select-all-nodes', async () => {
|
|
await comfyPage.page.focus('canvas')
|
|
await comfyPage.page.keyboard.press('Control+A')
|
|
})
|
|
|
|
await expect(
|
|
comfyPage.page.locator(
|
|
'.selection-toolbox *[data-testid="bypass-button"]'
|
|
)
|
|
).toBeVisible()
|
|
|
|
// Deselect node (Only group is selected) should hide bypass button
|
|
await perfMonitor.measureOperation('select-single-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
await expect(
|
|
comfyPage.page.locator(
|
|
'.selection-toolbox *[data-testid="bypass-button"]'
|
|
)
|
|
).not.toBeVisible()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test.describe('Color Picker', () => {
|
|
test('@perf displays color picker button and allows color selection', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'color-picker-selection'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Select a node
|
|
await perfMonitor.measureOperation('select-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
// Color picker button should be visible
|
|
const colorPickerButton = comfyPage.page.locator(
|
|
'.selection-toolbox .pi-circle-fill'
|
|
)
|
|
await expect(colorPickerButton).toBeVisible()
|
|
|
|
// Click color picker button
|
|
await perfMonitor.measureOperation('open-color-picker', async () => {
|
|
await colorPickerButton.click()
|
|
})
|
|
|
|
// Color picker dropdown should be visible
|
|
const colorPickerDropdown = comfyPage.page.locator(
|
|
'.color-picker-container'
|
|
)
|
|
await expect(colorPickerDropdown).toBeVisible()
|
|
|
|
// Select a color (e.g., blue)
|
|
await perfMonitor.measureOperation('select-color', async () => {
|
|
const blueColorOption = colorPickerDropdown.locator(
|
|
'i[data-testid="blue"]'
|
|
)
|
|
await blueColorOption.click()
|
|
})
|
|
|
|
// Dropdown should close after selection
|
|
await expect(colorPickerDropdown).not.toBeVisible()
|
|
|
|
// Node should have the selected color class/style
|
|
// Note: Exact verification method depends on how color is applied to nodes
|
|
const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
|
|
expect(selectedNode.getProperty('color')).not.toBeNull()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test.skip('@perf color picker shows current color of selected nodes', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'color-picker-current-color'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Select multiple nodes
|
|
await perfMonitor.measureOperation('select-multiple-nodes', async () => {
|
|
await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
|
|
})
|
|
|
|
const colorPickerButton = comfyPage.page.locator(
|
|
'.selection-toolbox .pi-circle-fill'
|
|
)
|
|
|
|
// Initially should show default color
|
|
await expect(colorPickerButton).not.toHaveAttribute('color')
|
|
|
|
// Click color picker and select a color
|
|
await perfMonitor.measureOperation('open-color-picker', async () => {
|
|
await colorPickerButton.click()
|
|
})
|
|
|
|
await perfMonitor.measureOperation('select-red-color', async () => {
|
|
const redColorOption = comfyPage.page.locator(
|
|
'.color-picker-container i[data-testid="red"]'
|
|
)
|
|
await redColorOption.click()
|
|
})
|
|
|
|
// Button should now show the selected color
|
|
await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf color picker shows mixed state for differently colored selections', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'color-picker-mixed-state'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Select first node and color it
|
|
await perfMonitor.measureOperation('color-first-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
await comfyPage.page
|
|
.locator('.selection-toolbox .pi-circle-fill')
|
|
.click()
|
|
await comfyPage.page
|
|
.locator('.color-picker-container i[data-testid="blue"]')
|
|
.click()
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
// Select second node and color it differently
|
|
await perfMonitor.measureOperation('color-second-node', async () => {
|
|
await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
await comfyPage.page
|
|
.locator('.selection-toolbox .pi-circle-fill')
|
|
.click()
|
|
await comfyPage.page
|
|
.locator('.color-picker-container i[data-testid="red"]')
|
|
.click()
|
|
})
|
|
|
|
// Select both nodes
|
|
await perfMonitor.measureOperation('select-both-nodes', async () => {
|
|
await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
|
|
})
|
|
|
|
// Color picker should show null/mixed state
|
|
const colorPickerButton = comfyPage.page.locator(
|
|
'.selection-toolbox .pi-circle-fill'
|
|
)
|
|
await expect(colorPickerButton).not.toHaveAttribute('color')
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test.skip('@perf color picker shows correct color when selecting pre-colored node', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'color-picker-pre-colored'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// First color a node
|
|
await perfMonitor.measureOperation('color-node-blue', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
await comfyPage.page
|
|
.locator('.selection-toolbox .pi-circle-fill')
|
|
.click()
|
|
await comfyPage.page
|
|
.locator('.color-picker-container i[data-testid="blue"]')
|
|
.click()
|
|
})
|
|
|
|
// Clear selection
|
|
await perfMonitor.measureOperation('clear-selection', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
// Re-select the node
|
|
await perfMonitor.measureOperation('reselect-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
})
|
|
|
|
// Color picker button should show the correct color
|
|
const colorPickerButton = comfyPage.page.locator(
|
|
'.selection-toolbox .pi-circle-fill'
|
|
)
|
|
await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
|
|
test('@perf colorization via color picker can be undone', async ({
|
|
comfyPage
|
|
}) => {
|
|
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
|
const testName = 'color-picker-undo'
|
|
|
|
await perfMonitor.startMonitoring(testName)
|
|
|
|
// Select a node and color it
|
|
await perfMonitor.measureOperation('color-node', async () => {
|
|
await comfyPage.selectNodes(['KSampler'])
|
|
await comfyPage.page
|
|
.locator('.selection-toolbox .pi-circle-fill')
|
|
.click()
|
|
await comfyPage.page
|
|
.locator('.color-picker-container i[data-testid="blue"]')
|
|
.click()
|
|
})
|
|
|
|
// Undo the colorization
|
|
await perfMonitor.measureOperation('undo-operation', async () => {
|
|
await comfyPage.page.keyboard.press('Control+Z')
|
|
await comfyPage.nextFrame()
|
|
})
|
|
|
|
// Node should be uncolored again
|
|
const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
|
|
expect(await selectedNode.getProperty('color')).toBeUndefined()
|
|
|
|
await perfMonitor.finishMonitoring(testName)
|
|
})
|
|
})
|
|
})
|