mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 17:30:07 +00:00
[Test] [Performance] Apply perf monitor wrappers to test files (4/4) (#4127)
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
This commit is contained in:
Christian Byrne
@@ -1,35 +1,83 @@
|
||||
import { expect } from '@playwright/test'
|
||||
|
||||
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
||||
import { PerformanceMonitor } from '../helpers/performanceMonitor'
|
||||
|
||||
test.describe('Combo text widget', () => {
|
||||
test('Truncates text when resized', async ({ comfyPage }) => {
|
||||
await comfyPage.resizeLoadCheckpointNode(0.2, 1)
|
||||
test('@perf Truncates text when resized', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'combo-widget-resize-truncation'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation(
|
||||
'resize-load-checkpoint-node',
|
||||
async () => {
|
||||
await comfyPage.resizeLoadCheckpointNode(0.2, 1)
|
||||
}
|
||||
)
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'load-checkpoint-resized-min-width.png'
|
||||
)
|
||||
await comfyPage.closeMenu()
|
||||
await comfyPage.resizeKsamplerNode(0.2, 1)
|
||||
|
||||
await perfMonitor.measureOperation('close-menu', async () => {
|
||||
await comfyPage.closeMenu()
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('resize-ksampler-node', async () => {
|
||||
await comfyPage.resizeKsamplerNode(0.2, 1)
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
`ksampler-resized-min-width.png`
|
||||
)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test("Doesn't truncate when space still available", async ({ comfyPage }) => {
|
||||
await comfyPage.resizeEmptyLatentNode(0.8, 0.8)
|
||||
test("@perf Doesn't truncate when space still available", async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'combo-widget-no-truncation'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('resize-empty-latent-node', async () => {
|
||||
await comfyPage.resizeEmptyLatentNode(0.8, 0.8)
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'empty-latent-resized-80-percent.png'
|
||||
)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('Can revert to full text', async ({ comfyPage }) => {
|
||||
await comfyPage.resizeLoadCheckpointNode(0.8, 1, true)
|
||||
test('@perf Can revert to full text', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'combo-widget-revert-text'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('resize-to-original', async () => {
|
||||
await comfyPage.resizeLoadCheckpointNode(0.8, 1, true)
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('resized-to-original.png')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('should refresh combo values of optional inputs', async ({
|
||||
test('@perf should refresh combo values of optional inputs', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'combo-widget-refresh-optional-inputs'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
const getComboValues = async () =>
|
||||
comfyPage.page.evaluate(() => {
|
||||
return window['app'].graph.nodes
|
||||
@@ -38,171 +86,334 @@ test.describe('Combo text widget', () => {
|
||||
.options.values
|
||||
})
|
||||
|
||||
await comfyPage.loadWorkflow('optional_combo_input')
|
||||
const initialComboValues = await getComboValues()
|
||||
await perfMonitor.measureOperation('load-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('optional_combo_input')
|
||||
})
|
||||
|
||||
// Focus canvas
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
let initialComboValues: any
|
||||
await perfMonitor.measureOperation('get-initial-combo-values', async () => {
|
||||
initialComboValues = await getComboValues()
|
||||
})
|
||||
|
||||
// Press R to trigger refresh
|
||||
await comfyPage.page.keyboard.press('r')
|
||||
await perfMonitor.measureOperation('focus-canvas', async () => {
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
})
|
||||
|
||||
// Wait for nodes' widgets to be updated
|
||||
await comfyPage.nextFrame()
|
||||
await perfMonitor.measureOperation('trigger-refresh', async () => {
|
||||
await comfyPage.page.keyboard.press('r')
|
||||
})
|
||||
|
||||
const refreshedComboValues = await getComboValues()
|
||||
expect(refreshedComboValues).not.toEqual(initialComboValues)
|
||||
await perfMonitor.measureOperation('wait-for-update', async () => {
|
||||
await comfyPage.nextFrame()
|
||||
})
|
||||
|
||||
let refreshedComboValues: any
|
||||
await perfMonitor.measureOperation(
|
||||
'get-refreshed-combo-values',
|
||||
async () => {
|
||||
refreshedComboValues = await getComboValues()
|
||||
}
|
||||
)
|
||||
|
||||
expect(refreshedComboValues).not.toEqual(initialComboValues!)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('Should refresh combo values of nodes with v2 combo input spec', async ({
|
||||
test('@perf Should refresh combo values of nodes with v2 combo input spec', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.loadWorkflow('node_with_v2_combo_input')
|
||||
// click canvas to focus
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
// press R to trigger refresh
|
||||
await comfyPage.page.keyboard.press('r')
|
||||
// wait for nodes' widgets to be updated
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
await comfyPage.nextFrame()
|
||||
// get the combo widget's values
|
||||
const comboValues = await comfyPage.page.evaluate(() => {
|
||||
return window['app'].graph.nodes
|
||||
.find((node) => node.title === 'Node With V2 Combo Input')
|
||||
.widgets.find((widget) => widget.name === 'combo_input').options.values
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'combo-widget-v2-refresh'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-v2-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('node_with_v2_combo_input')
|
||||
})
|
||||
expect(comboValues).toEqual(['A', 'B'])
|
||||
|
||||
await perfMonitor.measureOperation('focus-canvas', async () => {
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('trigger-refresh', async () => {
|
||||
await comfyPage.page.keyboard.press('r')
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('wait-for-update', async () => {
|
||||
await comfyPage.page.mouse.click(400, 300)
|
||||
await comfyPage.nextFrame()
|
||||
})
|
||||
|
||||
let comboValues: any
|
||||
await perfMonitor.measureOperation('get-combo-values', async () => {
|
||||
comboValues = await comfyPage.page.evaluate(() => {
|
||||
return window['app'].graph.nodes
|
||||
.find((node) => node.title === 'Node With V2 Combo Input')
|
||||
.widgets.find((widget) => widget.name === 'combo_input').options
|
||||
.values
|
||||
})
|
||||
})
|
||||
|
||||
expect(comboValues!).toEqual(['A', 'B'])
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Boolean widget', () => {
|
||||
test('Can toggle', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/boolean_widget')
|
||||
test('@perf Can toggle', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'boolean-widget-toggle'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-boolean-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/boolean_widget')
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('boolean_widget.png')
|
||||
const node = (await comfyPage.getFirstNodeRef())!
|
||||
const widget = await node.getWidget(0)
|
||||
await widget.click()
|
||||
|
||||
let node: any
|
||||
await perfMonitor.measureOperation('get-node-reference', async () => {
|
||||
node = (await comfyPage.getFirstNodeRef())!
|
||||
})
|
||||
|
||||
let widget: any
|
||||
await perfMonitor.measureOperation('get-widget-reference', async () => {
|
||||
widget = await node.getWidget(0)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('toggle-boolean-widget', async () => {
|
||||
await widget.click()
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'boolean_widget_toggled.png'
|
||||
)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Slider widget', () => {
|
||||
test('Can drag adjust value', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('simple_slider')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
const node = (await comfyPage.getFirstNodeRef())!
|
||||
const widget = await node.getWidget(0)
|
||||
test('@perf Can drag adjust value', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'slider-widget-drag-value'
|
||||
|
||||
await comfyPage.page.evaluate(() => {
|
||||
const widget = window['app'].graph.nodes[0].widgets[0]
|
||||
widget.callback = (value: number) => {
|
||||
window['widgetValue'] = value
|
||||
}
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-slider-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('simple_slider')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
})
|
||||
await widget.dragHorizontal(50)
|
||||
|
||||
let node: any
|
||||
await perfMonitor.measureOperation('get-node-reference', async () => {
|
||||
node = (await comfyPage.getFirstNodeRef())!
|
||||
})
|
||||
|
||||
let widget: any
|
||||
await perfMonitor.measureOperation('get-widget-reference', async () => {
|
||||
widget = await node.getWidget(0)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('setup-widget-callback', async () => {
|
||||
await comfyPage.page.evaluate(() => {
|
||||
const widget = window['app'].graph.nodes[0].widgets[0]
|
||||
widget.callback = (value: number) => {
|
||||
window['widgetValue'] = value
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('drag-slider-widget', async () => {
|
||||
await widget.dragHorizontal(50)
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('slider_widget_dragged.png')
|
||||
|
||||
expect(
|
||||
await comfyPage.page.evaluate(() => window['widgetValue'])
|
||||
).toBeDefined()
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Number widget', () => {
|
||||
test('Can drag adjust value', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/seed_widget')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
test('@perf Can drag adjust value', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'number-widget-drag-value'
|
||||
|
||||
const node = (await comfyPage.getFirstNodeRef())!
|
||||
const widget = await node.getWidget(0)
|
||||
await comfyPage.page.evaluate(() => {
|
||||
const widget = window['app'].graph.nodes[0].widgets[0]
|
||||
widget.callback = (value: number) => {
|
||||
window['widgetValue'] = value
|
||||
}
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-seed-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/seed_widget')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
})
|
||||
await widget.dragHorizontal(50)
|
||||
|
||||
let node: any
|
||||
await perfMonitor.measureOperation('get-node-reference', async () => {
|
||||
node = (await comfyPage.getFirstNodeRef())!
|
||||
})
|
||||
|
||||
let widget: any
|
||||
await perfMonitor.measureOperation('get-widget-reference', async () => {
|
||||
widget = await node.getWidget(0)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('setup-widget-callback', async () => {
|
||||
await comfyPage.page.evaluate(() => {
|
||||
const widget = window['app'].graph.nodes[0].widgets[0]
|
||||
widget.callback = (value: number) => {
|
||||
window['widgetValue'] = value
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('drag-number-widget', async () => {
|
||||
await widget.dragHorizontal(50)
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('seed_widget_dragged.png')
|
||||
|
||||
expect(
|
||||
await comfyPage.page.evaluate(() => window['widgetValue'])
|
||||
).toBeDefined()
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Dynamic widget manipulation', () => {
|
||||
test('Auto expand node when widget is added dynamically', async ({
|
||||
test('@perf Auto expand node when widget is added dynamically', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.loadWorkflow('single_ksampler')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'dynamic-widget-addition'
|
||||
|
||||
await comfyPage.page.evaluate(() => {
|
||||
window['graph'].nodes[0].addWidget('number', 'new_widget', 10)
|
||||
window['graph'].setDirtyCanvas(true, true)
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-ksampler-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('single_ksampler')
|
||||
await comfyPage.page.waitForTimeout(300)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('add-dynamic-widget', async () => {
|
||||
await comfyPage.page.evaluate(() => {
|
||||
window['graph'].nodes[0].addWidget('number', 'new_widget', 10)
|
||||
window['graph'].setDirtyCanvas(true, true)
|
||||
})
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('ksampler_widget_added.png')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Image widget', () => {
|
||||
test('Can load image', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png')
|
||||
})
|
||||
test('@perf Can load image', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'image-widget-load'
|
||||
|
||||
test('Can drag and drop image', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
// Get position of the load image node
|
||||
const nodes = await comfyPage.getNodeRefsByType('LoadImage')
|
||||
const loadImageNode = nodes[0]
|
||||
const { x, y } = await loadImageNode.getPosition()
|
||||
|
||||
// Drag and drop image file onto the load image node
|
||||
await comfyPage.dragAndDropFile('image32x32.webp', {
|
||||
dropPosition: { x, y }
|
||||
await perfMonitor.measureOperation('load-image-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('@perf Can drag and drop image', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'image-widget-drag-drop'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-image-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
})
|
||||
|
||||
let nodes: any
|
||||
let loadImageNode: any
|
||||
let position: any
|
||||
await perfMonitor.measureOperation('get-load-image-node', async () => {
|
||||
nodes = await comfyPage.getNodeRefsByType('LoadImage')
|
||||
loadImageNode = nodes[0]
|
||||
position = await loadImageNode.getPosition()
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('drag-drop-image-file', async () => {
|
||||
await comfyPage.dragAndDropFile('image32x32.webp', {
|
||||
dropPosition: { x: position.x, y: position.y }
|
||||
})
|
||||
})
|
||||
|
||||
// Expect the image preview to change automatically
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'image_preview_drag_and_dropped.png'
|
||||
)
|
||||
|
||||
// Expect the filename combo value to be updated
|
||||
const fileComboWidget = await loadImageNode.getWidget(0)
|
||||
const filename = await fileComboWidget.getValue()
|
||||
expect(filename).toBe('image32x32.webp')
|
||||
let fileComboWidget: any
|
||||
let filename: any
|
||||
await perfMonitor.measureOperation('get-updated-filename', async () => {
|
||||
fileComboWidget = await loadImageNode.getWidget(0)
|
||||
filename = await fileComboWidget.getValue()
|
||||
})
|
||||
|
||||
expect(filename!).toBe('image32x32.webp')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('Can change image by changing the filename combo value', async ({
|
||||
test('@perf Can change image by changing the filename combo value', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
const nodes = await comfyPage.getNodeRefsByType('LoadImage')
|
||||
const loadImageNode = nodes[0]
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'image-widget-combo-change'
|
||||
|
||||
// Click the combo widget used to select the image filename
|
||||
const fileComboWidget = await loadImageNode.getWidget(0)
|
||||
await fileComboWidget.click()
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
// Select a new image filename value from the combo context menu
|
||||
const comboEntry = comfyPage.page.getByRole('menuitem', {
|
||||
name: 'image32x32.webp'
|
||||
await perfMonitor.measureOperation('load-image-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
})
|
||||
|
||||
let nodes: any
|
||||
let loadImageNode: any
|
||||
await perfMonitor.measureOperation('get-load-image-node', async () => {
|
||||
nodes = await comfyPage.getNodeRefsByType('LoadImage')
|
||||
loadImageNode = nodes[0]
|
||||
})
|
||||
|
||||
let fileComboWidget: any
|
||||
await perfMonitor.measureOperation('click-combo-widget', async () => {
|
||||
fileComboWidget = await loadImageNode.getWidget(0)
|
||||
await fileComboWidget.click()
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('select-combo-entry', async () => {
|
||||
const comboEntry = comfyPage.page.getByRole('menuitem', {
|
||||
name: 'image32x32.webp'
|
||||
})
|
||||
await comboEntry.click({ noWaitAfter: true })
|
||||
})
|
||||
await comboEntry.click({ noWaitAfter: true })
|
||||
|
||||
// Expect the image preview to change automatically
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'image_preview_changed_by_combo_value.png'
|
||||
)
|
||||
|
||||
// Expect the filename combo value to be updated
|
||||
const filename = await fileComboWidget.getValue()
|
||||
expect(filename).toBe('image32x32.webp')
|
||||
let filename: any
|
||||
await perfMonitor.measureOperation('get-updated-filename', async () => {
|
||||
filename = await fileComboWidget.getValue()
|
||||
})
|
||||
|
||||
expect(filename!).toBe('image32x32.webp')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -242,91 +453,164 @@ test.describe('Animated image widget', () => {
|
||||
)
|
||||
})
|
||||
|
||||
test('Can drag-and-drop animated webp image', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/load_animated_webp')
|
||||
test('@perf Can drag-and-drop animated webp image', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'animated-image-widget-drag-drop'
|
||||
|
||||
// Get position of the load animated webp node
|
||||
const nodes = await comfyPage.getNodeRefsByType(
|
||||
'DevToolsLoadAnimatedImageTest'
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation(
|
||||
'load-animated-webp-workflow',
|
||||
async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_animated_webp')
|
||||
}
|
||||
)
|
||||
const loadAnimatedWebpNode = nodes[0]
|
||||
const { x, y } = await loadAnimatedWebpNode.getPosition()
|
||||
|
||||
// Drag and drop image file onto the load animated webp node
|
||||
await comfyPage.dragAndDropFile('animated_webp.webp', {
|
||||
dropPosition: { x, y }
|
||||
let nodes: any
|
||||
let loadAnimatedWebpNode: any
|
||||
let position: any
|
||||
await perfMonitor.measureOperation('get-animated-webp-node', async () => {
|
||||
nodes = await comfyPage.getNodeRefsByType('DevToolsLoadAnimatedImageTest')
|
||||
loadAnimatedWebpNode = nodes[0]
|
||||
position = await loadAnimatedWebpNode.getPosition()
|
||||
})
|
||||
|
||||
// Expect the filename combo value to be updated
|
||||
const fileComboWidget = await loadAnimatedWebpNode.getWidget(0)
|
||||
const filename = await fileComboWidget.getValue()
|
||||
expect(filename).toContain('animated_webp.webp')
|
||||
await perfMonitor.measureOperation('drag-drop-animated-webp', async () => {
|
||||
await comfyPage.dragAndDropFile('animated_webp.webp', {
|
||||
dropPosition: { x: position.x, y: position.y }
|
||||
})
|
||||
})
|
||||
|
||||
let fileComboWidget: any
|
||||
let filename: any
|
||||
await perfMonitor.measureOperation('get-updated-filename', async () => {
|
||||
fileComboWidget = await loadAnimatedWebpNode.getWidget(0)
|
||||
filename = await fileComboWidget.getValue()
|
||||
})
|
||||
|
||||
expect(filename!).toContain('animated_webp.webp')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
|
||||
test('Can preview saved animated webp image', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/save_animated_webp')
|
||||
test('@perf Can preview saved animated webp image', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'animated-image-widget-save-preview'
|
||||
|
||||
// Get position of the load animated webp node
|
||||
const loadNodes = await comfyPage.getNodeRefsByType(
|
||||
'DevToolsLoadAnimatedImageTest'
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation(
|
||||
'load-save-animated-workflow',
|
||||
async () => {
|
||||
await comfyPage.loadWorkflow('widgets/save_animated_webp')
|
||||
}
|
||||
)
|
||||
const loadAnimatedWebpNode = loadNodes[0]
|
||||
const { x, y } = await loadAnimatedWebpNode.getPosition()
|
||||
|
||||
// Drag and drop image file onto the load animated webp node
|
||||
await comfyPage.dragAndDropFile('animated_webp.webp', {
|
||||
dropPosition: { x, y }
|
||||
let loadNodes: any
|
||||
let loadAnimatedWebpNode: any
|
||||
let position: any
|
||||
await perfMonitor.measureOperation('get-load-node', async () => {
|
||||
loadNodes = await comfyPage.getNodeRefsByType(
|
||||
'DevToolsLoadAnimatedImageTest'
|
||||
)
|
||||
loadAnimatedWebpNode = loadNodes[0]
|
||||
position = await loadAnimatedWebpNode.getPosition()
|
||||
})
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
// Get the SaveAnimatedWEBP node
|
||||
const saveNodes = await comfyPage.getNodeRefsByType('SaveAnimatedWEBP')
|
||||
const saveAnimatedWebpNode = saveNodes[0]
|
||||
if (!saveAnimatedWebpNode)
|
||||
throw new Error('SaveAnimatedWEBP node not found')
|
||||
await perfMonitor.measureOperation('drag-drop-animated-file', async () => {
|
||||
await comfyPage.dragAndDropFile('animated_webp.webp', {
|
||||
dropPosition: { x: position.x, y: position.y }
|
||||
})
|
||||
await comfyPage.nextFrame()
|
||||
})
|
||||
|
||||
// Simulate the graph executing
|
||||
await comfyPage.page.evaluate(
|
||||
([loadId, saveId]) => {
|
||||
// Set the output of the SaveAnimatedWEBP node to equal the loader node's image
|
||||
window['app'].nodeOutputs[saveId] = window['app'].nodeOutputs[loadId]
|
||||
},
|
||||
[loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
|
||||
)
|
||||
await comfyPage.nextFrame()
|
||||
let saveNodes: any
|
||||
let saveAnimatedWebpNode: any
|
||||
await perfMonitor.measureOperation('get-save-node', async () => {
|
||||
saveNodes = await comfyPage.getNodeRefsByType('SaveAnimatedWEBP')
|
||||
saveAnimatedWebpNode = saveNodes[0]
|
||||
if (!saveAnimatedWebpNode)
|
||||
throw new Error('SaveAnimatedWEBP node not found')
|
||||
})
|
||||
|
||||
// Wait for animation to go to next frame
|
||||
await comfyPage.page.waitForTimeout(512)
|
||||
await perfMonitor.measureOperation('simulate-graph-execution', async () => {
|
||||
await comfyPage.page.evaluate(
|
||||
([loadId, saveId]) => {
|
||||
// Set the output of the SaveAnimatedWEBP node to equal the loader node's image
|
||||
window['app'].nodeOutputs[saveId] = window['app'].nodeOutputs[loadId]
|
||||
},
|
||||
[loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
|
||||
)
|
||||
await comfyPage.nextFrame()
|
||||
})
|
||||
|
||||
// Move mouse and click on canvas to trigger render
|
||||
await comfyPage.page.mouse.click(64, 64)
|
||||
await perfMonitor.measureOperation('wait-for-animation-frame', async () => {
|
||||
await comfyPage.page.waitForTimeout(512)
|
||||
})
|
||||
|
||||
await perfMonitor.measureOperation('trigger-render', async () => {
|
||||
await comfyPage.page.mouse.click(64, 64)
|
||||
})
|
||||
|
||||
// Expect the SaveAnimatedWEBP node to have an output preview
|
||||
await expect(comfyPage.canvas).toHaveScreenshot(
|
||||
'animated_image_preview_saved_webp.png'
|
||||
)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Load audio widget', () => {
|
||||
test('Can load audio', async ({ comfyPage }) => {
|
||||
await comfyPage.loadWorkflow('widgets/load_audio_widget')
|
||||
test('@perf Can load audio', async ({ comfyPage }) => {
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'audio-widget-load'
|
||||
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
await perfMonitor.measureOperation('load-audio-workflow', async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_audio_widget')
|
||||
})
|
||||
|
||||
await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Unserialized widgets', () => {
|
||||
test('Unserialized widgets values do not mark graph as modified', async ({
|
||||
test('@perf Unserialized widgets values do not mark graph as modified', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
// Add workflow w/ LoadImage node, which contains file upload and image preview widgets (not serialized)
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
const perfMonitor = new PerformanceMonitor(comfyPage.page)
|
||||
const testName = 'unserialized-widget-modification-check'
|
||||
|
||||
// Move mouse and click to trigger the `graphEqual` check in `changeTracker.ts`
|
||||
await comfyPage.page.mouse.move(10, 10)
|
||||
await comfyPage.page.mouse.click(10, 10)
|
||||
await perfMonitor.startMonitoring(testName)
|
||||
|
||||
// Expect the graph to not be modified
|
||||
expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
|
||||
await perfMonitor.measureOperation(
|
||||
'load-image-widget-workflow',
|
||||
async () => {
|
||||
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
||||
}
|
||||
)
|
||||
|
||||
await perfMonitor.measureOperation(
|
||||
'trigger-graph-equal-check',
|
||||
async () => {
|
||||
await comfyPage.page.mouse.move(10, 10)
|
||||
await comfyPage.page.mouse.click(10, 10)
|
||||
}
|
||||
)
|
||||
|
||||
let isModified: any
|
||||
await perfMonitor.measureOperation(
|
||||
'check-workflow-modified-status',
|
||||
async () => {
|
||||
isModified = await comfyPage.isCurrentWorkflowModified()
|
||||
}
|
||||
)
|
||||
|
||||
expect(isModified!).toBe(false)
|
||||
|
||||
await perfMonitor.finishMonitoring(testName)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user