performance monitoring hooks

browser_tests/tests/copyPaste.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('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
@@ -11,107 +12,288 @@ test.describe('Copy Paste', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png')
   })
 
-  test('Can copy and paste node with link', async ({ comfyPage }) => {
-    await comfyPage.clickTextEncodeNode1()
-    await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.ctrlC()
-    await comfyPage.page.keyboard.press('Control+Shift+V')
-    await expect(comfyPage.canvas).toHaveScreenshot('copied-node-with-link.png')
+  test('@perf Can copy and paste node with link', async ({ comfyPage }) => {
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'copy-paste-node-with-link'
+
+    await perfMonitor.startMonitoring(testName)
+
+    // Click node with performance tracking
+    await perfMonitor.measureOperation('click-text-encode-node', async () => {
+      await comfyPage.clickTextEncodeNode1()
+    })
+
+    // Mouse move with performance tracking
+    await perfMonitor.measureOperation('mouse-move', async () => {
+      await comfyPage.page.mouse.move(10, 10)
+    })
+
+    // Copy operation with performance tracking
+    await perfMonitor.measureOperation('copy-operation', async () => {
+      await comfyPage.ctrlC()
+    })
+
+    // Mark before paste
+    await perfMonitor.markEvent('before-paste')
+
+    // Paste operation with performance tracking
+    await perfMonitor.measureOperation('paste-operation', async () => {
+      await comfyPage.page.keyboard.press('Control+Shift+V')
+    })
+
+    // Mark after paste
+    await perfMonitor.markEvent('after-paste')
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('Can copy and paste text', async ({ comfyPage }) => {
+  test('@perf Can copy and paste text', async ({ comfyPage }) => {
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'copy-paste-text'
+
+    await perfMonitor.startMonitoring(testName)
+
     const textBox = comfyPage.widgetTextBox
-    await textBox.click()
-    const originalString = await textBox.inputValue()
-    await textBox.selectText()
-    await comfyPage.ctrlC(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
+
+    await perfMonitor.measureOperation('click-textbox', async () => {
+      await textBox.click()
+    })
+
+    let originalString: string
+    await perfMonitor.measureOperation('get-input-value', async () => {
+      originalString = await textBox.inputValue()
+    })
+
+    await perfMonitor.measureOperation('select-text', async () => {
+      await textBox.selectText()
+    })
+
+    await perfMonitor.measureOperation('copy-text', async () => {
+      await comfyPage.ctrlC(null)
+    })
+
+    await perfMonitor.measureOperation('paste-text-first', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
+    await perfMonitor.measureOperation('paste-text-second', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
     const resultString = await textBox.inputValue()
-    expect(resultString).toBe(originalString + originalString)
+    expect(resultString).toBe(originalString! + originalString!)
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('Can copy and paste widget value', async ({ comfyPage }) => {
+  test('@perf Can copy and paste widget value', async ({ comfyPage }) => {
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'copy-paste-widget-value'
+
+    await perfMonitor.startMonitoring(testName)
+
     // Copy width value (512) from empty latent node to KSampler's seed.
     // KSampler's seed
-    await comfyPage.canvas.click({
-      position: {
-        x: 1005,
-        y: 281
-      }
+    await perfMonitor.measureOperation('click-ksampler-seed', async () => {
+      await comfyPage.canvas.click({
+        position: {
+          x: 1005,
+          y: 281
+        }
+      })
     })
-    await comfyPage.ctrlC(null)
+
+    await perfMonitor.measureOperation('copy-widget-value', async () => {
+      await comfyPage.ctrlC(null)
+    })
+
     // Empty latent node's width
-    await comfyPage.canvas.click({
-      position: {
-        x: 718,
-        y: 643
-      }
+    await perfMonitor.measureOperation('click-empty-latent-width', async () => {
+      await comfyPage.canvas.click({
+        position: {
+          x: 718,
+          y: 643
+        }
+      })
     })
-    await comfyPage.ctrlV(null)
-    await comfyPage.page.keyboard.press('Enter')
-    await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
+
+    await perfMonitor.measureOperation('paste-widget-value', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
+    await perfMonitor.measureOperation('confirm-with-enter', async () => {
+      await comfyPage.page.keyboard.press('Enter')
+    })
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
   /**
    * https://github.com/Comfy-Org/ComfyUI_frontend/issues/98
    */
-  test('Paste in text area with node previously copied', async ({
+  test('@perf Paste in text area with node previously copied', async ({
     comfyPage
   }) => {
-    await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC(null)
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'paste-text-with-node-copied'
+
+    await perfMonitor.startMonitoring(testName)
+
+    await perfMonitor.measureOperation('click-empty-latent-node', async () => {
+      await comfyPage.clickEmptyLatentNode()
+    })
+
+    await perfMonitor.measureOperation('copy-node', async () => {
+      await comfyPage.ctrlC(null)
+    })
+
     const textBox = comfyPage.widgetTextBox
-    await textBox.click()
-    await textBox.inputValue()
-    await textBox.selectText()
-    await comfyPage.ctrlC(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'paste-in-text-area-with-node-previously-copied.png'
-    )
+
+    await perfMonitor.measureOperation('click-textbox', async () => {
+      await textBox.click()
+    })
+
+    await perfMonitor.measureOperation('get-input-value', async () => {
+      await textBox.inputValue()
+    })
+
+    await perfMonitor.measureOperation('select-text', async () => {
+      await textBox.selectText()
+    })
+
+    await perfMonitor.measureOperation('copy-text', async () => {
+      await comfyPage.ctrlC(null)
+    })
+
+    await perfMonitor.measureOperation('paste-text-first', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
+    await perfMonitor.measureOperation('paste-text-second', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('Copy text area does not copy node', async ({ comfyPage }) => {
+  test('@perf Copy text area does not copy node', async ({ comfyPage }) => {
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'copy-text-no-node'
+
+    await perfMonitor.startMonitoring(testName)
+
     const textBox = comfyPage.widgetTextBox
-    await textBox.click()
-    await textBox.inputValue()
-    await textBox.selectText()
-    await comfyPage.ctrlC(null)
+
+    await perfMonitor.measureOperation('click-textbox', async () => {
+      await textBox.click()
+    })
+
+    await perfMonitor.measureOperation('get-input-value', async () => {
+      await textBox.inputValue()
+    })
+
+    await perfMonitor.measureOperation('select-text', async () => {
+      await textBox.selectText()
+    })
+
+    await perfMonitor.measureOperation('copy-text', async () => {
+      await comfyPage.ctrlC(null)
+    })
+
     // Unfocus textbox.
-    await comfyPage.page.mouse.click(10, 10)
-    await comfyPage.ctrlV(null)
-    await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png')
+    await perfMonitor.measureOperation('unfocus-textbox', async () => {
+      await comfyPage.page.mouse.click(10, 10)
+    })
+
+    await perfMonitor.measureOperation('paste-attempt', async () => {
+      await comfyPage.ctrlV(null)
+    })
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('Copy node by dragging + alt', async ({ comfyPage }) => {
+  test('@perf Copy node by dragging + alt', async ({ comfyPage }) => {
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'copy-node-drag-alt'
+
+    await perfMonitor.startMonitoring(testName)
+
     // TextEncodeNode1
-    await comfyPage.page.mouse.move(618, 191)
+    await perfMonitor.measureOperation('mouse-move-to-node', async () => {
+      await comfyPage.page.mouse.move(618, 191)
+    })
+
+    await perfMonitor.markEvent('alt-key-down')
     await comfyPage.page.keyboard.down('Alt')
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(100, 100)
-    await comfyPage.page.mouse.up()
+
+    await perfMonitor.measureOperation('mouse-down', async () => {
+      await comfyPage.page.mouse.down()
+    })
+
+    await perfMonitor.measureOperation('drag-node', async () => {
+      await comfyPage.page.mouse.move(100, 100)
+    })
+
+    await perfMonitor.measureOperation('mouse-up', async () => {
+      await comfyPage.page.mouse.up()
+    })
+
+    await perfMonitor.markEvent('alt-key-up')
     await comfyPage.page.keyboard.up('Alt')
-    await expect(comfyPage.canvas).toHaveScreenshot('drag-copy-copied-node.png')
+
+    await perfMonitor.finishMonitoring(testName)
   })
 
-  test('Can undo paste multiple nodes as single action', async ({
+  test('@perf Can undo paste multiple nodes as single action', async ({
     comfyPage
   }) => {
-    const initialCount = await comfyPage.getGraphNodesCount()
-    expect(initialCount).toBeGreaterThan(1)
-    await comfyPage.canvas.click()
-    await comfyPage.ctrlA()
-    await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.ctrlC()
-    await comfyPage.ctrlV()
+    const perfMonitor = new PerformanceMonitor(comfyPage.page)
+    const testName = 'undo-paste-multiple-nodes'
 
-    const pasteCount = await comfyPage.getGraphNodesCount()
-    expect(pasteCount).toBe(initialCount * 2)
+    await perfMonitor.startMonitoring(testName)
 
-    await comfyPage.ctrlZ()
-    const undoCount = await comfyPage.getGraphNodesCount()
-    expect(undoCount).toBe(initialCount)
+    let initialCount: number
+    await perfMonitor.measureOperation('get-initial-count', async () => {
+      initialCount = await comfyPage.getGraphNodesCount()
+    })
+    expect(initialCount!).toBeGreaterThan(1)
+
+    await perfMonitor.measureOperation('click-canvas', async () => {
+      await comfyPage.canvas.click()
+    })
+
+    await perfMonitor.measureOperation('select-all', async () => {
+      await comfyPage.ctrlA()
+    })
+
+    await perfMonitor.measureOperation('mouse-move', async () => {
+      await comfyPage.page.mouse.move(10, 10)
+    })
+
+    await perfMonitor.measureOperation('copy-all-nodes', async () => {
+      await comfyPage.ctrlC()
+    })
+
+    await perfMonitor.measureOperation('paste-all-nodes', async () => {
+      await comfyPage.ctrlV()
+    })
+
+    let pasteCount: number
+    await perfMonitor.measureOperation('get-paste-count', async () => {
+      pasteCount = await comfyPage.getGraphNodesCount()
+    })
+    expect(pasteCount!).toBe(initialCount! * 2)
+
+    await perfMonitor.measureOperation('undo-paste', async () => {
+      await comfyPage.ctrlZ()
+    })
+
+    let undoCount: number
+    await perfMonitor.measureOperation('get-undo-count', async () => {
+      undoCount = await comfyPage.getGraphNodesCount()
+    })
+    expect(undoCount!).toBe(initialCount!)
+
+    await perfMonitor.finishMonitoring(testName)
   })
 })