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

browser_tests/tests/selectionToolbox.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture } from '../fixtures/ComfyPage'
+import { PerformanceMonitor } from '../helpers/performanceMonitor'
 
 const test = comfyPageFixture
 
@@ -12,14 +13,21 @@ test.describe('Selection Toolbox', () => {
     await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
   })
 
-  test('shows selection toolbox', async ({ comfyPage }) => {
+  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 comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+    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(
@@ -28,16 +36,37 @@ test.describe('Selection Toolbox', () => {
     await expect(
       comfyPage.page.locator('.selection-overlay-container.show-border')
     ).toBeVisible()
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('shows at correct position when node is pasted', async ({
+  test('@perf shows at correct position when node is pasted', async ({
     comfyPage
   }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    await comfyPage.selectNodes(['KSampler'])
-    await comfyPage.ctrlC()
-    await comfyPage.page.mouse.move(100, 100)
-    await comfyPage.ctrlV()
+    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'
@@ -51,28 +80,59 @@ test.describe('Selection Toolbox', () => {
     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)
   })
 
-  test('hide when select and drag happen at the same time', async ({
+  test('@perf hide when select and drag happen at the same time', async ({
     comfyPage
   }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const nodePos = await node.getPosition()
+    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 comfyPage.page.mouse.move(nodePos.x + 100, nodePos.y - 15)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
+    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('shows border only with multiple selections', async ({ comfyPage }) => {
+  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 comfyPage.selectNodes(['KSampler'])
+    await perfMonitor.measureOperation('select-single-node', async () => {
+      await comfyPage.selectNodes(['KSampler'])
+    })
 
     // Selection overlay should be visible but without border
     await expect(
@@ -83,7 +143,9 @@ test.describe('Selection Toolbox', () => {
     ).not.toBeVisible()
 
     // Select multiple nodes
-    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+    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(
@@ -91,23 +153,37 @@ test.describe('Selection Toolbox', () => {
     ).toBeVisible()
 
     // Deselect to single node
-    await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+    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('displays bypass button in toolbox when nodes are selected', async ({
+  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 comfyPage.loadWorkflow('single_group')
+    await perfMonitor.measureOperation('load-workflow', async () => {
+      await comfyPage.loadWorkflow('single_group')
+    })
 
     // Select group + node should show bypass button
-    await comfyPage.page.focus('canvas')
-    await comfyPage.page.keyboard.press('Control+A')
+    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"]'
@@ -115,20 +191,32 @@ test.describe('Selection Toolbox', () => {
     ).toBeVisible()
 
     // Deselect node (Only group is selected) should hide bypass button
-    await comfyPage.selectNodes(['KSampler'])
+    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('displays color picker button and allows color selection', async ({
+    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 comfyPage.selectNodes(['KSampler'])
+      await perfMonitor.measureOperation('select-node', async () => {
+        await comfyPage.selectNodes(['KSampler'])
+      })
 
       // Color picker button should be visible
       const colorPickerButton = comfyPage.page.locator(
@@ -137,7 +225,9 @@ test.describe('Selection Toolbox', () => {
       await expect(colorPickerButton).toBeVisible()
 
       // Click color picker button
-      await colorPickerButton.click()
+      await perfMonitor.measureOperation('open-color-picker', async () => {
+        await colorPickerButton.click()
+      })
 
       // Color picker dropdown should be visible
       const colorPickerDropdown = comfyPage.page.locator(
@@ -146,10 +236,12 @@ test.describe('Selection Toolbox', () => {
       await expect(colorPickerDropdown).toBeVisible()
 
       // Select a color (e.g., blue)
-      const blueColorOption = colorPickerDropdown.locator(
-        'i[data-testid="blue"]'
-      )
-      await blueColorOption.click()
+      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()
@@ -158,13 +250,22 @@ test.describe('Selection Toolbox', () => {
       // 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('color picker shows current color of selected nodes', async ({
+    test('@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 comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+      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'
@@ -174,84 +275,136 @@ test.describe('Selection Toolbox', () => {
       await expect(colorPickerButton).not.toHaveAttribute('color')
 
       // Click color picker and select a color
-      await colorPickerButton.click()
-      const redColorOption = comfyPage.page.locator(
-        '.color-picker-container i[data-testid="red"]'
-      )
-      await redColorOption.click()
+      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('color picker shows mixed state for differently colored selections', async ({
+    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 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'])
+      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 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()
+      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 comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+      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('color picker shows correct color when selecting pre-colored node', async ({
+    test('@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 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 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 comfyPage.selectNodes(['KSampler'])
+      await perfMonitor.measureOperation('clear-selection', async () => {
+        await comfyPage.selectNodes(['KSampler'])
+      })
 
       // Re-select the node
-      await comfyPage.selectNodes(['KSampler'])
+      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('colorization via color picker can be undone', async ({
+    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 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 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 comfyPage.page.keyboard.press('Control+Z')
-      await comfyPage.nextFrame()
+      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)
     })
   })
 })