[Test] [Performance] Apply perf monitor wrappers to test files (1/4) (#4124)

2026-02-05 23:50:08 +00:00 · 2025-06-10 15:24:13 -07:00
parent 7e3c7b754f
commit 862a9d2396
4 changed files with 530 additions and 157 deletions
--- 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)
  })
 })
--- 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)
  })
 })
--- 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 ({
--- 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)
  })
 })