diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts b/browser_tests/tests/graphCanvasMenu.spec.ts index e8994e4f0..be58a8a56 100644 --- a/browser_tests/tests/graphCanvasMenu.spec.ts +++ b/browser_tests/tests/graphCanvasMenu.spec.ts @@ -1,6 +1,7 @@ import { expect } from '@playwright/test' import { comfyPageFixture as test } from '../fixtures/ComfyPage' +import { PerformanceMonitor } from '../helpers/performanceMonitor' test.describe('Graph Canvas Menu', () => { test.beforeEach(async ({ comfyPage }) => { @@ -9,14 +10,28 @@ test.describe('Graph Canvas Menu', () => { await comfyPage.setSetting('Comfy.LinkRenderMode', 2) }) - test('Can toggle link visibility', async ({ comfyPage }) => { + test('@perf Can toggle link visibility', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'toggle-link-visibility' + + await perfMonitor.startMonitoring(testName) + // Note: `Comfy.Graph.CanvasMenu` is disabled in comfyPage setup. // so no cleanup is needed. - await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true) + await perfMonitor.measureOperation('enable-canvas-menu', async () => { + await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true) + }) const button = comfyPage.page.getByTestId('toggle-link-visibility-button') - await button.click() - await comfyPage.nextFrame() + + await perfMonitor.markEvent('before-hide-links') + await perfMonitor.measureOperation('hide-links', async () => { + await button.click() + await comfyPage.nextFrame() + }) + await perfMonitor.markEvent('after-hide-links') + + // Screenshot assertions and validations stay outside performance monitoring await expect(comfyPage.canvas).toHaveScreenshot( 'canvas-with-hidden-links.png' ) @@ -27,13 +42,21 @@ test.describe('Graph Canvas Menu', () => { hiddenLinkRenderMode ) - await button.click() - await comfyPage.nextFrame() + await perfMonitor.markEvent('before-show-links') + await perfMonitor.measureOperation('show-links', async () => { + await button.click() + await comfyPage.nextFrame() + }) + await perfMonitor.markEvent('after-show-links') + + // Screenshot assertions and validations stay outside performance monitoring await expect(comfyPage.canvas).toHaveScreenshot( 'canvas-with-visible-links.png' ) expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe( hiddenLinkRenderMode ) + + await perfMonitor.finishMonitoring(testName) }) }) diff --git a/browser_tests/tests/nodeBadge.spec.ts b/browser_tests/tests/nodeBadge.spec.ts index bc1546593..304dbafec 100644 --- a/browser_tests/tests/nodeBadge.spec.ts +++ b/browser_tests/tests/nodeBadge.spec.ts @@ -3,109 +3,200 @@ import { expect } from '@playwright/test' import type { ComfyApp } from '../../src/scripts/app' import { NodeBadgeMode } from '../../src/types/nodeSource' import { comfyPageFixture as test } from '../fixtures/ComfyPage' +import { PerformanceMonitor } from '../helpers/performanceMonitor' test.describe('Node Badge', () => { - test('Can add badge', async ({ comfyPage }) => { - await comfyPage.page.evaluate(() => { - const LGraphBadge = window['LGraphBadge'] - const app = window['app'] as ComfyApp - const graph = app.graph - const nodes = graph.nodes + test('@perf Can add badge', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'add-single-badge' - for (const node of nodes) { - node.badges = [new LGraphBadge({ text: 'Test Badge' })] - } + await perfMonitor.startMonitoring(testName) - graph.setDirtyCanvas(true, true) + await perfMonitor.measureOperation('add-badge-to-nodes', async () => { + await comfyPage.page.evaluate(() => { + const LGraphBadge = window['LGraphBadge'] + const app = window['app'] as ComfyApp + const graph = app.graph + const nodes = graph.nodes + + for (const node of nodes) { + node.badges = [new LGraphBadge({ text: 'Test Badge' })] + } + + graph.setDirtyCanvas(true, true) + }) }) await expect(comfyPage.canvas).toHaveScreenshot('node-badge.png') + + await perfMonitor.finishMonitoring(testName) }) - test('Can add multiple badges', async ({ comfyPage }) => { - await comfyPage.page.evaluate(() => { - const LGraphBadge = window['LGraphBadge'] - const app = window['app'] as ComfyApp - const graph = app.graph - const nodes = graph.nodes + test('@perf Can add multiple badges', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'add-multiple-badges' - for (const node of nodes) { - node.badges = [ - new LGraphBadge({ text: 'Test Badge 1' }), - new LGraphBadge({ text: 'Test Badge 2' }) - ] + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation( + 'add-multiple-badges-to-nodes', + async () => { + await comfyPage.page.evaluate(() => { + const LGraphBadge = window['LGraphBadge'] + const app = window['app'] as ComfyApp + const graph = app.graph + const nodes = graph.nodes + + for (const node of nodes) { + node.badges = [ + new LGraphBadge({ text: 'Test Badge 1' }), + new LGraphBadge({ text: 'Test Badge 2' }) + ] + } + + graph.setDirtyCanvas(true, true) + }) } - - graph.setDirtyCanvas(true, true) - }) + ) await expect(comfyPage.canvas).toHaveScreenshot('node-badge-multiple.png') + + await perfMonitor.finishMonitoring(testName) }) - test('Can add badge left-side', async ({ comfyPage }) => { - await comfyPage.page.evaluate(() => { - const LGraphBadge = window['LGraphBadge'] - const app = window['app'] as ComfyApp - const graph = app.graph - const nodes = graph.nodes + test('@perf Can add badge left-side', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'add-badge-left-position' - for (const node of nodes) { - node.badges = [new LGraphBadge({ text: 'Test Badge' })] - // @ts-expect-error - Enum value - node.badgePosition = 'top-left' - } + await perfMonitor.startMonitoring(testName) - graph.setDirtyCanvas(true, true) + await perfMonitor.measureOperation('add-badge-with-position', async () => { + await comfyPage.page.evaluate(() => { + const LGraphBadge = window['LGraphBadge'] + const app = window['app'] as ComfyApp + const graph = app.graph + const nodes = graph.nodes + + for (const node of nodes) { + node.badges = [new LGraphBadge({ text: 'Test Badge' })] + // @ts-expect-error - Enum value + node.badgePosition = 'top-left' + } + + graph.setDirtyCanvas(true, true) + }) }) await expect(comfyPage.canvas).toHaveScreenshot('node-badge-left.png') + + await perfMonitor.finishMonitoring(testName) }) }) test.describe('Node source badge', () => { Object.values(NodeBadgeMode).forEach(async (mode) => { - test(`Shows node badges (${mode})`, async ({ comfyPage }) => { + test(`@perf Shows node badges (${mode})`, async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = `node-source-badge-${mode}` + + await perfMonitor.startMonitoring(testName) + // Execution error workflow has both custom node and core node. - await comfyPage.loadWorkflow('execution_error') - await comfyPage.setSetting('Comfy.NodeBadge.NodeSourceBadgeMode', mode) - await comfyPage.setSetting('Comfy.NodeBadge.NodeIdBadgeMode', mode) - await comfyPage.nextFrame() - await comfyPage.resetView() + await perfMonitor.measureOperation('load-workflow', async () => { + await comfyPage.loadWorkflow('execution_error') + }) + + await perfMonitor.measureOperation( + 'configure-badge-settings', + async () => { + await comfyPage.setSetting( + 'Comfy.NodeBadge.NodeSourceBadgeMode', + mode + ) + await comfyPage.setSetting('Comfy.NodeBadge.NodeIdBadgeMode', mode) + } + ) + + await perfMonitor.measureOperation('render-badges', async () => { + await comfyPage.nextFrame() + await comfyPage.resetView() + }) + await expect(comfyPage.canvas).toHaveScreenshot(`node-badge-${mode}.png`) + + await perfMonitor.finishMonitoring(testName) }) }) }) test.describe('Node badge color', () => { - test('Can show node badge with unknown color palette', async ({ + test('@perf Can show node badge with unknown color palette', async ({ comfyPage }) => { - await comfyPage.setSetting( - 'Comfy.NodeBadge.NodeIdBadgeMode', - NodeBadgeMode.ShowAll + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'node-badge-unknown-color-palette' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation( + 'configure-badge-and-palette', + async () => { + await comfyPage.setSetting( + 'Comfy.NodeBadge.NodeIdBadgeMode', + NodeBadgeMode.ShowAll + ) + await comfyPage.setSetting('Comfy.ColorPalette', 'unknown') + } ) - await comfyPage.setSetting('Comfy.ColorPalette', 'unknown') - await comfyPage.nextFrame() - // Click empty space to trigger canvas re-render. - await comfyPage.clickEmptySpace() + + await perfMonitor.measureOperation( + 'render-with-unknown-palette', + async () => { + await comfyPage.nextFrame() + // Click empty space to trigger canvas re-render. + await comfyPage.clickEmptySpace() + } + ) + await expect(comfyPage.canvas).toHaveScreenshot( 'node-badge-unknown-color-palette.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can show node badge with light color palette', async ({ + test('@perf Can show node badge with light color palette', async ({ comfyPage }) => { - await comfyPage.setSetting( - 'Comfy.NodeBadge.NodeIdBadgeMode', - NodeBadgeMode.ShowAll + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'node-badge-light-color-palette' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation( + 'configure-badge-and-light-palette', + async () => { + await comfyPage.setSetting( + 'Comfy.NodeBadge.NodeIdBadgeMode', + NodeBadgeMode.ShowAll + ) + await comfyPage.setSetting('Comfy.ColorPalette', 'light') + } ) - await comfyPage.setSetting('Comfy.ColorPalette', 'light') - await comfyPage.nextFrame() - // Click empty space to trigger canvas re-render. - await comfyPage.clickEmptySpace() + + await perfMonitor.measureOperation( + 'render-with-light-palette', + async () => { + await comfyPage.nextFrame() + // Click empty space to trigger canvas re-render. + await comfyPage.clickEmptySpace() + } + ) + await expect(comfyPage.canvas).toHaveScreenshot( 'node-badge-light-color-palette.png' ) + + await perfMonitor.finishMonitoring(testName) }) }) diff --git a/browser_tests/tests/primitiveNode.spec.ts b/browser_tests/tests/primitiveNode.spec.ts index 7fc408e8b..a1f79cac2 100644 --- a/browser_tests/tests/primitiveNode.spec.ts +++ b/browser_tests/tests/primitiveNode.spec.ts @@ -2,46 +2,114 @@ import { expect } from '@playwright/test' import { comfyPageFixture as test } from '../fixtures/ComfyPage' import type { NodeReference } from '../fixtures/utils/litegraphUtils' +import { PerformanceMonitor } from '../helpers/performanceMonitor' test.describe('Primitive Node', () => { - test('Can load with correct size', async ({ comfyPage }) => { - await comfyPage.loadWorkflow('primitive/primitive_node') + test('@perf Can load with correct size', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'primitive-node-load' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('load-workflow', async () => { + await comfyPage.loadWorkflow('primitive/primitive_node') + }) + await expect(comfyPage.canvas).toHaveScreenshot('primitive_node.png') + + await perfMonitor.finishMonitoring(testName) }) // When link is dropped on widget, it should automatically convert the widget // to input. - test('Can connect to widget', async ({ comfyPage }) => { - await comfyPage.loadWorkflow('primitive/primitive_node_unconnected') - const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1) - const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2) + test('@perf Can connect to widget', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'primitive-node-connect-widget' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('load-workflow', async () => { + await comfyPage.loadWorkflow('primitive/primitive_node_unconnected') + }) + + let primitiveNode: NodeReference + let ksamplerNode: NodeReference + + await perfMonitor.measureOperation('get-node-references', async () => { + primitiveNode = await comfyPage.getNodeRefById(1) + ksamplerNode = await comfyPage.getNodeRefById(2) + }) + // Connect the output of the primitive node to the input of first widget of the ksampler node - await primitiveNode.connectWidget(0, ksamplerNode, 0) + await perfMonitor.measureOperation('connect-widget', async () => { + await primitiveNode!.connectWidget(0, ksamplerNode!, 0) + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'primitive_node_connected.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can connect to dom widget', async ({ comfyPage }) => { - await comfyPage.loadWorkflow( - 'primitive/primitive_node_unconnected_dom_widget' - ) - const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1) - const clipEncoderNode: NodeReference = await comfyPage.getNodeRefById(2) - await primitiveNode.connectWidget(0, clipEncoderNode, 0) + test('@perf Can connect to dom widget', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'primitive-node-connect-dom-widget' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('load-workflow', async () => { + await comfyPage.loadWorkflow( + 'primitive/primitive_node_unconnected_dom_widget' + ) + }) + + let primitiveNode: NodeReference + let clipEncoderNode: NodeReference + + await perfMonitor.measureOperation('get-node-references', async () => { + primitiveNode = await comfyPage.getNodeRefById(1) + clipEncoderNode = await comfyPage.getNodeRefById(2) + }) + + await perfMonitor.measureOperation('connect-dom-widget', async () => { + await primitiveNode!.connectWidget(0, clipEncoderNode!, 0) + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'primitive_node_connected_dom_widget.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can connect to static primitive node', async ({ comfyPage }) => { - await comfyPage.loadWorkflow('primitive/static_primitive_unconnected') - const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1) - const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2) - await primitiveNode.connectWidget(0, ksamplerNode, 0) + test('@perf Can connect to static primitive node', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'primitive-node-connect-static' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('load-workflow', async () => { + await comfyPage.loadWorkflow('primitive/static_primitive_unconnected') + }) + + let primitiveNode: NodeReference + let ksamplerNode: NodeReference + + await perfMonitor.measureOperation('get-node-references', async () => { + primitiveNode = await comfyPage.getNodeRefById(1) + ksamplerNode = await comfyPage.getNodeRefById(2) + }) + + await perfMonitor.measureOperation('connect-static-primitive', async () => { + await primitiveNode!.connectWidget(0, ksamplerNode!, 0) + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'static_primitive_connected.png' ) + + await perfMonitor.finishMonitoring(testName) }) test('Report missing nodes when connect to missing node', async ({ diff --git a/browser_tests/tests/rightClickMenu.spec.ts b/browser_tests/tests/rightClickMenu.spec.ts index 67b8dbd54..d1093eb88 100644 --- a/browser_tests/tests/rightClickMenu.spec.ts +++ b/browser_tests/tests/rightClickMenu.spec.ts @@ -2,65 +2,144 @@ import { expect } from '@playwright/test' import { NodeBadgeMode } from '../../src/types/nodeSource' import { comfyPageFixture as test } from '../fixtures/ComfyPage' +import { PerformanceMonitor } from '../helpers/performanceMonitor' test.describe('Canvas Right Click Menu', () => { - test('Can add node', async ({ comfyPage }) => { - await comfyPage.rightClickCanvas() + test('@perf Can add node', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'add-node-from-menu' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-canvas', async () => { + await comfyPage.rightClickCanvas() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png') - await comfyPage.page.getByText('Add Node').click() - await comfyPage.nextFrame() - await comfyPage.page.getByText('loaders').click() - await comfyPage.nextFrame() - await comfyPage.page.getByText('Load VAE').click() - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('navigate-to-node', async () => { + await comfyPage.page.getByText('Add Node').click() + await comfyPage.nextFrame() + await comfyPage.page.getByText('loaders').click() + await comfyPage.nextFrame() + await comfyPage.page.getByText('Load VAE').click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot('add-node-node-added.png') + + await perfMonitor.finishMonitoring(testName) }) - test('Can add group', async ({ comfyPage }) => { - await comfyPage.rightClickCanvas() + test('@perf Can add group', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'add-group-from-menu' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-canvas', async () => { + await comfyPage.rightClickCanvas() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png') - await comfyPage.page.getByText('Add Group', { exact: true }).click() - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('add-group', async () => { + await comfyPage.page.getByText('Add Group', { exact: true }).click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png') + + await perfMonitor.finishMonitoring(testName) }) - test('Can convert to group node', async ({ comfyPage }) => { - await comfyPage.select2Nodes() + test('@perf Can convert to group node', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'convert-to-group-node' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('select-nodes', async () => { + await comfyPage.select2Nodes() + }) + await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png') - await comfyPage.rightClickCanvas() - await comfyPage.clickContextMenuItem('Convert to Group Node') - await comfyPage.promptDialogInput.fill('GroupNode2CLIP') - await comfyPage.page.keyboard.press('Enter') - await comfyPage.promptDialogInput.waitFor({ state: 'hidden' }) - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('right-click-canvas', async () => { + await comfyPage.rightClickCanvas() + }) + + await perfMonitor.measureOperation('convert-to-group-node', async () => { + await comfyPage.clickContextMenuItem('Convert to Group Node') + await comfyPage.promptDialogInput.fill('GroupNode2CLIP') + await comfyPage.page.keyboard.press('Enter') + await comfyPage.promptDialogInput.waitFor({ state: 'hidden' }) + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-node-group-node.png' ) + + await perfMonitor.finishMonitoring(testName) }) }) test.describe('Node Right Click Menu', () => { - test('Can open properties panel', async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode() + test('@perf Can open properties panel', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'open-properties-panel' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') - await comfyPage.page.getByText('Properties Panel').click() - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('open-properties-panel', async () => { + await comfyPage.page.getByText('Properties Panel').click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-node-properties-panel.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can collapse', async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode() + test('@perf Can collapse', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'collapse-node' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') - await comfyPage.page.getByText('Collapse').click() - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('collapse-node', async () => { + await comfyPage.page.getByText('Collapse').click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-node-collapsed.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can collapse (Node Badge)', async ({ comfyPage }) => { + test('@perf Can collapse (Node Badge)', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'collapse-node-with-badge' + + await perfMonitor.startMonitoring(testName) + await comfyPage.setSetting( 'Comfy.NodeBadge.NodeIdBadgeMode', NodeBadgeMode.ShowAll @@ -70,88 +149,200 @@ test.describe('Node Right Click Menu', () => { NodeBadgeMode.ShowAll ) - await comfyPage.rightClickEmptyLatentNode() - await comfyPage.page.getByText('Collapse').click() - await comfyPage.nextFrame() + await perfMonitor.measureOperation('right-click-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + + await perfMonitor.measureOperation('collapse-node-with-badge', async () => { + await comfyPage.page.getByText('Collapse').click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-node-collapsed-badge.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can bypass', async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode() + test('@perf Can bypass', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'bypass-node' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') - await comfyPage.page.getByText('Bypass').click() - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('bypass-node', async () => { + await comfyPage.page.getByText('Bypass').click() + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-node-bypassed.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can pin and unpin', async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode() + test('@perf Can pin and unpin', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'pin-unpin-node' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('right-click-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') - await comfyPage.page.click('.litemenu-entry:has-text("Pin")') - await comfyPage.nextFrame() - await comfyPage.dragAndDrop({ x: 621, y: 617 }, { x: 16, y: 16 }) + + await perfMonitor.measureOperation('pin-node', async () => { + await comfyPage.page.click('.litemenu-entry:has-text("Pin")') + await comfyPage.nextFrame() + }) + + await perfMonitor.measureOperation('drag-pinned-node', async () => { + await comfyPage.dragAndDrop({ x: 621, y: 617 }, { x: 16, y: 16 }) + }) + await expect(comfyPage.canvas).toHaveScreenshot('node-pinned.png') - await comfyPage.rightClickEmptyLatentNode() + + await perfMonitor.measureOperation('right-click-pinned-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-pinned-node.png' ) - await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') - await comfyPage.nextFrame() - await comfyPage.rightClickEmptyLatentNode() + + await perfMonitor.measureOperation('unpin-node', async () => { + await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') + await comfyPage.nextFrame() + }) + + await perfMonitor.measureOperation( + 'right-click-unpinned-node', + async () => { + await comfyPage.rightClickEmptyLatentNode() + } + ) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-unpinned-node.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can move after unpin', async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode() - await comfyPage.page.click('.litemenu-entry:has-text("Pin")') - await comfyPage.nextFrame() - await comfyPage.rightClickEmptyLatentNode() - await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') - await comfyPage.nextFrame() - await comfyPage.page.waitForTimeout(256) - await comfyPage.dragAndDrop({ x: 496, y: 618 }, { x: 200, y: 590 }) + test('@perf Can move after unpin', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'move-after-unpin' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('pin-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + await comfyPage.page.click('.litemenu-entry:has-text("Pin")') + await comfyPage.nextFrame() + }) + + await perfMonitor.measureOperation('unpin-node', async () => { + await comfyPage.rightClickEmptyLatentNode() + await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') + await comfyPage.nextFrame() + await comfyPage.page.waitForTimeout(256) + }) + + await perfMonitor.measureOperation('move-unpinned-node', async () => { + await comfyPage.dragAndDrop({ x: 496, y: 618 }, { x: 200, y: 590 }) + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'right-click-unpinned-node-moved.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can pin/unpin selected nodes', async ({ comfyPage }) => { - await comfyPage.select2Nodes() - await comfyPage.page.keyboard.down('Control') - await comfyPage.rightClickEmptyLatentNode() - await comfyPage.page.click('.litemenu-entry:has-text("Pin")') - await comfyPage.page.keyboard.up('Control') - await comfyPage.nextFrame() + test('@perf Can pin/unpin selected nodes', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'pin-unpin-selected-nodes' + + await perfMonitor.startMonitoring(testName) + + await perfMonitor.measureOperation('select-multiple-nodes', async () => { + await comfyPage.select2Nodes() + }) + + await perfMonitor.measureOperation('pin-selected-nodes', async () => { + await comfyPage.page.keyboard.down('Control') + await comfyPage.rightClickEmptyLatentNode() + await comfyPage.page.click('.litemenu-entry:has-text("Pin")') + await comfyPage.page.keyboard.up('Control') + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot('selected-nodes-pinned.png') - await comfyPage.rightClickEmptyLatentNode() - await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') - await comfyPage.nextFrame() + + await perfMonitor.measureOperation('unpin-selected-nodes', async () => { + await comfyPage.rightClickEmptyLatentNode() + await comfyPage.page.click('.litemenu-entry:has-text("Unpin")') + await comfyPage.nextFrame() + }) + await expect(comfyPage.canvas).toHaveScreenshot( 'selected-nodes-unpinned.png' ) + + await perfMonitor.finishMonitoring(testName) }) - test('Can clone pinned nodes', async ({ comfyPage }) => { - const nodeCount = await comfyPage.getGraphNodesCount() - const node = (await comfyPage.getFirstNodeRef())! - await node.clickContextMenuOption('Pin') - await comfyPage.nextFrame() - await node.click('title', { button: 'right' }) + test('@perf Can clone pinned nodes', async ({ comfyPage }) => { + const perfMonitor = new PerformanceMonitor(comfyPage.page) + const testName = 'clone-pinned-node' + + await perfMonitor.startMonitoring(testName) + + let nodeCount: number + await perfMonitor.measureOperation('get-initial-node-count', async () => { + nodeCount = await comfyPage.getGraphNodesCount() + }) + + let node: any + await perfMonitor.measureOperation('get-node-reference', async () => { + node = (await comfyPage.getFirstNodeRef())! + }) + + await perfMonitor.measureOperation('pin-node', async () => { + await node.clickContextMenuOption('Pin') + await comfyPage.nextFrame() + }) + + await perfMonitor.measureOperation('right-click-pinned-node', async () => { + await node.click('title', { button: 'right' }) + }) + await expect( comfyPage.page.locator('.litemenu-entry:has-text("Unpin")') ).toBeAttached() + const cloneItem = comfyPage.page.locator( '.litemenu-entry:has-text("Clone")' ) - await cloneItem.click() - await expect(cloneItem).toHaveCount(0) - await comfyPage.nextFrame() - expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount + 1) + + await perfMonitor.measureOperation('clone-node', async () => { + await cloneItem.click() + await expect(cloneItem).toHaveCount(0) + await comfyPage.nextFrame() + }) + + expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount! + 1) + + await perfMonitor.finishMonitoring(testName) }) })