refactor(browser_tests): remove deprecated proxy methods from ComfyPage

Migrate all test callers to use helper classes directly:

- nodeOps: getGraphNodesCount, getNodeRefById, selectNodes, etc.

- canvasOps: dragAndDrop, zoom, pan, resetView, etc.

- subgraph: rightClickInputSlot, connectToOutput, etc.

Reduces ComfyPage.ts from 1335 to 1085 lines (-250 lines).

Amp-Thread-ID: https://ampcode.com/threads/T-019c1318-58b7-757f-801c-5b676f0d3421
Co-authored-by: Amp <amp@ampcode.com>

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts

@@ -13,7 +13,10 @@ test.describe('Vue Nodes Canvas Pan', () => {
     '@mobile Can pan with touch',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      await comfyPage.panWithTouch({ x: 64, y: 64 }, { x: 256, y: 256 })
+      await comfyPage.canvasOps.panWithTouch(
+        { x: 64, y: 64 },
+        { x: 256, y: 256 }
+      )
       await expect(comfyPage.canvas).toHaveScreenshot(
         'vue-nodes-paned-with-touch.png'
       )

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -26,7 +26,7 @@ test.describe('Vue Nodes Zoom', () => {
       // the node. The node should not capture the drag while drag-zooming.
       await comfyPage.page.keyboard.down('Control')
       await comfyPage.page.keyboard.down('Shift')
-      await comfyPage.dragAndDrop(
+      await comfyPage.canvasOps.dragAndDrop(
         { x: 200, y: 300 },
         { x: nodeMidpointX, y: nodeMidpointY }
       )

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -112,7 +112,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(samplerNode).toBeTruthy()
 
     const slot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
@@ -142,8 +144,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test('should create a link when dropping on a compatible slot', async ({
     comfyPage
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -172,8 +176,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test('should not create a link when slot types are incompatible', async ({
     comfyPage
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
     expect(samplerNode && clipNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -200,7 +208,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test('should not create a link when dropping onto a slot on the same node', async ({
     comfyPage
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(samplerNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -221,8 +231,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
     const samplerOutputCenter = await getSlotCenter(
       comfyPage.page,
@@ -258,8 +270,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -315,8 +329,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -398,8 +414,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
 
     const samplerOutput = await samplerNode.getOutput(0)
     const vaeInput = await vaeNode.getInput(0)
@@ -483,8 +501,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
-    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
+    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
     expect(samplerNode && vaeNode).toBeTruthy()
 
     const samplerOutput = await samplerNode.getOutput(0)
@@ -572,8 +592,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(clipNode && samplerNode).toBeTruthy()
 
     // Step 1: Connect CLIP's only output (index 0) to KSampler's second input (index 1)
@@ -642,8 +666,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(clipNode && samplerNode).toBeTruthy()
 
     const clipOutput = await clipNode.getOutput(0)
@@ -697,8 +725,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(clipNode && samplerNode).toBeTruthy()
 
     // Start drag from CLIP output[0]
@@ -746,8 +778,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(clipNode && samplerNode).toBeTruthy()
 
     // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
@@ -791,8 +827,12 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test('should batch disconnect all links with ctrl+alt+click on slot', async ({
     comfyPage
   }) => {
-    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
-    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+    )[0]
+    const samplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )[0]
     expect(clipNode && samplerNode).toBeTruthy()
 
     await connectSlots(
@@ -837,7 +877,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'context menu'
       )
 
-      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
       expect(samplerNode).toBeTruthy()
 
       const outputCenter = await getSlotCenter(
@@ -888,7 +930,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       )
       await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
 
-      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
       expect(samplerNode).toBeTruthy()
 
       const outputCenter = await getSlotCenter(
@@ -928,7 +972,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       expect(await samplerOutput.getLinkCount()).toBe(1)
 
       // One of the VAEDecode nodes should have an incoming link on input[0]
-      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      const vaeNodes = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
       let linked = false
       for (const vae of vaeNodes) {
         const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
@@ -947,7 +991,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     }) => {
       await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box')
 
-      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
       expect(samplerNode).toBeTruthy()
 
       const outputCenter = await getSlotCenter(
@@ -980,7 +1026,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerOutput = await samplerNode.getOutput(0)
       expect(await samplerOutput.getLinkCount()).toBe(1)
 
-      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      const vaeNodes = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
       let linked = false
       for (const vae of vaeNodes) {
         const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
@@ -1007,7 +1053,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     await comfyPage.waitForGraphNodes(1)
 
     // Convert the KSampler node to a subgraph
-    let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
+    let ksamplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+    )?.[0]
     await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
     await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
 
@@ -1016,7 +1064,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     await fitToViewInstant(comfyPage)
 
     // Get the KSampler node inside the subgraph
-    ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
+    ksamplerNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('KSampler', true)
+    )?.[0]
     const positiveInput = await ksamplerNode.getInput(1)
     const negativeInput = await ksamplerNode.getInput(2)
 
@@ -1027,7 +1077,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       true
     )
 
-    const sourceSlot = await comfyPage.getSubgraphInputSlot()
+    const sourceSlot = await comfyPage.subgraph.getInputSlot()
     const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
 
     await comfyMouse.move(calculatedSourcePos)

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts

@@ -61,7 +61,7 @@ test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
     if (!ksamplerHeader) throw new Error('KSampler header not found')
 
     // Drag KSampler on top of CLIP Text Encode
-    await comfyPage.dragAndDrop(
+    await comfyPage.canvasOps.dragAndDrop(
       { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
       clipCenter
     )
@@ -108,7 +108,7 @@ test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
     const vaeHeader = await comfyPage.page.getByText('VAE Decode').boundingBox()
     if (!vaeHeader) throw new Error('VAE Decode header not found')
 
-    await comfyPage.dragAndDrop(
+    await comfyPage.canvasOps.dragAndDrop(
       { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
       { x: clipCenter.x - 50, y: clipCenter.y }
     )

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -35,7 +35,7 @@ test.describe('Vue Node Moving', () => {
     async ({ comfyPage }) => {
       const loadCheckpointHeaderPos =
         await getLoadCheckpointHeaderPos(comfyPage)
-      await comfyPage.dragAndDrop(loadCheckpointHeaderPos, {
+      await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
         x: 256,
         y: 256
       })
@@ -56,7 +56,7 @@ test.describe('Vue Node Moving', () => {
 
       const loadCheckpointHeaderPos =
         await getLoadCheckpointHeaderPos(comfyPage)
-      await comfyPage.panWithTouch(
+      await comfyPage.canvasOps.panWithTouch(
         {
           x: 64,
           y: 64

browser_tests/tests/vueNodes/interactions/node/remove.spec.ts

@@ -83,7 +83,7 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
   test('Delete key does not delete node when typing in Vue node widgets', async ({
     comfyPage
   }) => {
-    const initialNodeCount = await comfyPage.getGraphNodesCount()
+    const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
     // Find a text input widget in a Vue node
     const textWidget = comfyPage.page
@@ -98,7 +98,7 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
     await textWidget.press('Delete')
 
     // Node count should remain the same
-    const finalNodeCount = await comfyPage.getGraphNodesCount()
+    const finalNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
     expect(finalNodeCount).toBe(initialNodeCount)
   })
 

browser_tests/tests/vueNodes/interactions/node/select.spec.ts

@@ -78,7 +78,7 @@ test.describe('Vue Node Selection', () => {
     const initialPos = await checkpointNodeHeader.boundingBox()
     if (!initialPos) throw new Error('Failed to get header position')
 
-    await comfyPage.dragAndDrop(
+    await comfyPage.canvasOps.dragAndDrop(
       { x: initialPos.x + 10, y: initialPos.y + 10 },
       { x: initialPos.x + 100, y: initialPos.y + 100 }
     )

browser_tests/tests/vueNodes/nodeStates/pin.spec.ts

@@ -55,7 +55,7 @@ test.describe('Vue Node Pin', () => {
     // Try to drag the node
     const headerPos = await checkpointNodeHeader.boundingBox()
     if (!headerPos) throw new Error('Failed to get header position')
-    await comfyPage.dragAndDrop(
+    await comfyPage.canvasOps.dragAndDrop(
       { x: headerPos.x, y: headerPos.y },
       { x: headerPos.x + 256, y: headerPos.y + 256 }
     )
@@ -71,7 +71,7 @@ test.describe('Vue Node Pin', () => {
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
     // Try to drag the node again
-    await comfyPage.dragAndDrop(
+    await comfyPage.canvasOps.dragAndDrop(
       { x: headerPos.x, y: headerPos.y },
       { x: headerPos.x + 256, y: headerPos.y + 256 }
     )