[tests] Add browser tests for subgraph functionalities (#4495)

browser_tests/fixtures/ComfyPage.ts

@@ -21,7 +21,7 @@ import {
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
 import type { Position, Size } from './types'
-import { NodeReference } from './utils/litegraphUtils'
+import { NodeReference, SubgraphSlotReference } from './utils/litegraphUtils'
 import TaskHistory from './utils/taskHistory'
 
 dotenv.config()
@@ -888,11 +888,412 @@ export class ComfyPage {
     })
   }
 
+  /**
+   * Right-clicks on a subgraph output slot to open the context menu.
+   * Must be called when inside a subgraph.
+   *
+   * Similar to rightClickSubgraphInputSlot but for output slots.
+   *
+   * @param outputName Optional name of the specific output slot to target.
+   *                   If not provided, tries all available output slots until one works.
+   * @returns Promise that resolves when the context menu appears
+   */
+  async rightClickSubgraphOutputSlot(outputName?: string): Promise<void> {
+    const foundSlot = await this.page.evaluate(async (targetOutputName) => {
+      const app = window['app']
+      const currentGraph = app.canvas.graph
+
+      // Check if we're in a subgraph
+      if (currentGraph.constructor.name !== 'Subgraph') {
+        throw new Error(
+          'Not in a subgraph - this method only works inside subgraphs'
+        )
+      }
+
+      // Get the output node
+      const outputNode = currentGraph.outputNode
+      if (!outputNode) {
+        throw new Error('No output node found in subgraph')
+      }
+
+      // Get available outputs
+      const outputs = currentGraph.outputs
+      if (!outputs || outputs.length === 0) {
+        throw new Error('No output slots found in subgraph')
+      }
+
+      // Filter to specific output if requested
+      const outputsToTry = targetOutputName
+        ? outputs.filter((out) => out.name === targetOutputName)
+        : outputs
+
+      if (outputsToTry.length === 0) {
+        throw new Error(
+          targetOutputName
+            ? `Output slot '${targetOutputName}' not found`
+            : 'No output slots available to try'
+        )
+      }
+
+      // Try right-clicking on each output slot position until one works
+      for (const output of outputsToTry) {
+        if (!output.pos) continue
+
+        const testX = output.pos[0]
+        const testY = output.pos[1]
+
+        // Create a right-click event at the output slot position
+        const rightClickEvent = {
+          canvasX: testX,
+          canvasY: testY,
+          button: 2, // Right mouse button
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        }
+
+        // Trigger the output node's right-click handler
+        if (outputNode.onPointerDown) {
+          outputNode.onPointerDown(
+            rightClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+        }
+
+        // Wait briefly for menu to appear
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Check if litegraph context menu appeared
+        const menuExists = document.querySelector('.litemenu-entry')
+        if (menuExists) {
+          return { success: true, outputName: output.name, x: testX, y: testY }
+        }
+      }
+
+      return { success: false }
+    }, outputName)
+
+    if (!foundSlot.success) {
+      throw new Error(
+        outputName
+          ? `Could not open context menu for output slot '${outputName}'`
+          : 'Could not find any output slot position to right-click'
+      )
+    }
+
+    // Wait for the litegraph context menu to be visible
+    await this.page.waitForSelector('.litemenu-entry', {
+      state: 'visible',
+      timeout: 5000
+    })
+  }
+
+  /**
+   * Get a reference to a subgraph input slot
+   */
+  async getSubgraphInputSlot(
+    slotName?: string
+  ): Promise<SubgraphSlotReference> {
+    return new SubgraphSlotReference('input', slotName || '', this)
+  }
+
+  /**
+   * Get a reference to a subgraph output slot
+   */
+  async getSubgraphOutputSlot(
+    slotName?: string
+  ): Promise<SubgraphSlotReference> {
+    return new SubgraphSlotReference('output', slotName || '', this)
+  }
+
+  /**
+   * Connect a regular node output to a subgraph input.
+   * This creates a new input slot on the subgraph if targetInputName is not provided.
+   */
+  async connectToSubgraphInput(
+    sourceNode: NodeReference,
+    sourceSlotIndex: number,
+    targetInputName?: string
+  ): Promise<void> {
+    const sourceSlot = await sourceNode.getOutput(sourceSlotIndex)
+    const targetSlot = await this.getSubgraphInputSlot(targetInputName)
+
+    const targetPosition = targetInputName
+      ? await targetSlot.getPosition() // Connect to existing slot
+      : await targetSlot.getOpenSlotPosition() // Create new slot
+
+    await this.dragAndDrop(await sourceSlot.getPosition(), targetPosition)
+    await this.nextFrame()
+  }
+
+  /**
+   * Connect a subgraph input to a regular node input.
+   * This creates a new input slot on the subgraph if sourceInputName is not provided.
+   */
+  async connectFromSubgraphInput(
+    targetNode: NodeReference,
+    targetSlotIndex: number,
+    sourceInputName?: string
+  ): Promise<void> {
+    const sourceSlot = await this.getSubgraphInputSlot(sourceInputName)
+    const targetSlot = await targetNode.getInput(targetSlotIndex)
+
+    const sourcePosition = sourceInputName
+      ? await sourceSlot.getPosition() // Connect from existing slot
+      : await sourceSlot.getOpenSlotPosition() // Create new slot
+
+    const targetPosition = await targetSlot.getPosition()
+
+    // Debug: Log the positions we're trying to use
+    console.log('Drag positions:', {
+      source: sourcePosition,
+      target: targetPosition
+    })
+
+    await this.dragAndDrop(sourcePosition, targetPosition)
+    await this.nextFrame()
+  }
+
+  /**
+   * Connect a regular node output to a subgraph output.
+   * This creates a new output slot on the subgraph if targetOutputName is not provided.
+   */
+  async connectToSubgraphOutput(
+    sourceNode: NodeReference,
+    sourceSlotIndex: number,
+    targetOutputName?: string
+  ): Promise<void> {
+    const sourceSlot = await sourceNode.getOutput(sourceSlotIndex)
+    const targetSlot = await this.getSubgraphOutputSlot(targetOutputName)
+
+    const targetPosition = targetOutputName
+      ? await targetSlot.getPosition() // Connect to existing slot
+      : await targetSlot.getOpenSlotPosition() // Create new slot
+
+    await this.dragAndDrop(await sourceSlot.getPosition(), targetPosition)
+    await this.nextFrame()
+  }
+
+  /**
+   * Connect a subgraph output to a regular node input.
+   * This creates a new output slot on the subgraph if sourceOutputName is not provided.
+   */
+  async connectFromSubgraphOutput(
+    targetNode: NodeReference,
+    targetSlotIndex: number,
+    sourceOutputName?: string
+  ): Promise<void> {
+    const sourceSlot = await this.getSubgraphOutputSlot(sourceOutputName)
+    const targetSlot = await targetNode.getInput(targetSlotIndex)
+
+    const sourcePosition = sourceOutputName
+      ? await sourceSlot.getPosition() // Connect from existing slot
+      : await sourceSlot.getOpenSlotPosition() // Create new slot
+
+    await this.dragAndDrop(sourcePosition, await targetSlot.getPosition())
+    await this.nextFrame()
+  }
+
+  /**
+   * Add a visual marker at a position for debugging
+   */
+  async debugAddMarker(
+    position: Position,
+    id: string = 'debug-marker'
+  ): Promise<void> {
+    await this.page.evaluate(
+      ([pos, markerId]) => {
+        // Remove existing marker if present
+        const existing = document.getElementById(markerId)
+        if (existing) existing.remove()
+
+        // Create marker
+        const marker = document.createElement('div')
+        marker.id = markerId
+        marker.style.position = 'fixed'
+        marker.style.left = `${pos.x - 10}px`
+        marker.style.top = `${pos.y - 10}px`
+        marker.style.width = '20px'
+        marker.style.height = '20px'
+        marker.style.border = '2px solid red'
+        marker.style.borderRadius = '50%'
+        marker.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'
+        marker.style.pointerEvents = 'none'
+        marker.style.zIndex = '10000'
+        document.body.appendChild(marker)
+      },
+      [position, id] as const
+    )
+  }
+
+  /**
+   * Remove debug markers
+   */
+  async debugRemoveMarkers(): Promise<void> {
+    await this.page.evaluate(() => {
+      document
+        .querySelectorAll('[id^="debug-marker"]')
+        .forEach((el) => el.remove())
+    })
+  }
+
+  /**
+   * Take a screenshot and attach it to the test report for debugging
+   * This is a convenience method that combines screenshot capture and test attachment
+   *
+   * @param testInfo The Playwright TestInfo object (from test parameters)
+   * @param name Name for the attachment
+   * @param options Optional screenshot options (defaults to page screenshot)
+   */
+  async debugAttachScreenshot(
+    testInfo: any,
+    name: string,
+    options?: {
+      fullPage?: boolean
+      element?: 'canvas' | 'page'
+      markers?: Array<{ position: Position; id?: string }>
+    }
+  ): Promise<void> {
+    // Add markers if requested
+    if (options?.markers) {
+      for (const marker of options.markers) {
+        await this.debugAddMarker(marker.position, marker.id)
+      }
+    }
+
+    // Take screenshot - default to page if not specified
+    let screenshot: Buffer
+    const targetElement = options?.element || 'page'
+
+    if (targetElement === 'canvas') {
+      screenshot = await this.canvas.screenshot()
+    } else if (options?.fullPage) {
+      screenshot = await this.page.screenshot({ fullPage: true })
+    } else {
+      screenshot = await this.page.screenshot()
+    }
+
+    // Attach to test report
+    await testInfo.attach(name, {
+      body: screenshot,
+      contentType: 'image/png'
+    })
+
+    // Clean up markers if we added any
+    if (options?.markers) {
+      await this.debugRemoveMarkers()
+    }
+  }
+
   async doubleClickCanvas() {
     await this.page.mouse.dblclick(10, 10, { delay: 5 })
     await this.nextFrame()
   }
 
+  /**
+   * Capture the canvas as a PNG and save it for debugging
+   */
+  async debugSaveCanvasScreenshot(filename: string): Promise<void> {
+    await this.page.evaluate(async (filename) => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      // Convert canvas to blob
+      return new Promise<void>((resolve) => {
+        canvas.toBlob(async (blob) => {
+          if (!blob) {
+            throw new Error('Failed to create blob from canvas')
+          }
+
+          // Create a download link and trigger it
+          const url = URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = filename
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+          URL.revokeObjectURL(url)
+          resolve()
+        }, 'image/png')
+      })
+    }, filename)
+
+    // Wait a bit for the download to process
+    await this.page.waitForTimeout(500)
+  }
+
+  /**
+   * Capture canvas as base64 data URL for inspection
+   */
+  async debugGetCanvasDataURL(): Promise<string> {
+    return await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+      return canvas.toDataURL('image/png')
+    })
+  }
+
+  /**
+   * Create an overlay div with the canvas image for easier Playwright screenshot
+   */
+  async debugShowCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      // Remove existing overlay if present
+      const existingOverlay = document.getElementById('debug-canvas-overlay')
+      if (existingOverlay) {
+        existingOverlay.remove()
+      }
+
+      // Create overlay div
+      const overlay = document.createElement('div')
+      overlay.id = 'debug-canvas-overlay'
+      overlay.style.position = 'fixed'
+      overlay.style.top = '0'
+      overlay.style.left = '0'
+      overlay.style.zIndex = '9999'
+      overlay.style.backgroundColor = 'white'
+      overlay.style.padding = '10px'
+      overlay.style.border = '2px solid red'
+
+      // Create image from canvas
+      const img = document.createElement('img')
+      img.src = canvas.toDataURL('image/png')
+      img.style.maxWidth = '800px'
+      img.style.maxHeight = '600px'
+      overlay.appendChild(img)
+
+      document.body.appendChild(overlay)
+    })
+  }
+
+  /**
+   * Remove the debug canvas overlay
+   */
+  async debugHideCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const overlay = document.getElementById('debug-canvas-overlay')
+      if (overlay) {
+        overlay.remove()
+      }
+    })
+  }
+
   async clickEmptyLatentNode() {
     await this.canvas.click({
       position: {

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -12,6 +12,128 @@ export const getMiddlePoint = (pos1: Position, pos2: Position) => {
   }
 }
 
+export class SubgraphSlotReference {
+  constructor(
+    readonly type: 'input' | 'output',
+    readonly slotName: string,
+    readonly comfyPage: ComfyPage
+  ) {}
+
+  async getPosition(): Promise<Position> {
+    const pos: [number, number] = await this.comfyPage.page.evaluate(
+      ([type, slotName]) => {
+        const currentGraph = window['app'].canvas.graph
+
+        // Check if we're in a subgraph
+        if (currentGraph.constructor.name !== 'Subgraph') {
+          throw new Error(
+            'Not in a subgraph - this method only works inside subgraphs'
+          )
+        }
+
+        const slots =
+          type === 'input' ? currentGraph.inputs : currentGraph.outputs
+        if (!slots || slots.length === 0) {
+          throw new Error(`No ${type} slots found in subgraph`)
+        }
+
+        // Find the specific slot or use the first one if no name specified
+        const slot = slotName
+          ? slots.find((s) => s.name === slotName)
+          : slots[0]
+
+        if (!slot) {
+          throw new Error(`${type} slot '${slotName}' not found`)
+        }
+
+        if (!slot.pos) {
+          throw new Error(`${type} slot '${slotName}' has no position`)
+        }
+
+        // Convert from offset to canvas coordinates
+        const canvasPos = window['app'].canvas.ds.convertOffsetToCanvas([
+          slot.pos[0],
+          slot.pos[1]
+        ])
+        return canvasPos
+      },
+      [this.type, this.slotName] as const
+    )
+
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+
+  async getOpenSlotPosition(): Promise<Position> {
+    const pos: [number, number] = await this.comfyPage.page.evaluate(
+      ([type]) => {
+        const currentGraph = window['app'].canvas.graph
+
+        if (currentGraph.constructor.name !== 'Subgraph') {
+          throw new Error(
+            'Not in a subgraph - this method only works inside subgraphs'
+          )
+        }
+
+        const node =
+          type === 'input' ? currentGraph.inputNode : currentGraph.outputNode
+        const slots =
+          type === 'input' ? currentGraph.inputs : currentGraph.outputs
+
+        if (!node) {
+          throw new Error(`No ${type} node found in subgraph`)
+        }
+
+        // Calculate position for next available slot
+        // const nextSlotIndex = slots?.length || 0
+        // const slotHeight = 20
+        // const slotY = node.pos[1] + 30 + nextSlotIndex * slotHeight
+
+        // Find last slot position
+        const lastSlot = slots.at(-1)
+        let slotX: number
+        let slotY: number
+
+        if (lastSlot) {
+          // If there are existing slots, position the new one below the last one
+          const gapHeight = 20
+          slotX = lastSlot.pos[0]
+          slotY = lastSlot.pos[1] + gapHeight
+        } else {
+          // No existing slots - use slotAnchorX if available, otherwise calculate from node position
+          if (currentGraph.slotAnchorX !== undefined) {
+            // The actual slot X position seems to be slotAnchorX - 10
+            slotX = currentGraph.slotAnchorX - 10
+          } else {
+            // Fallback: calculate from node edge
+            slotX =
+              type === 'input'
+                ? node.pos[0] + node.size[0] - 10 // Right edge for input node
+                : node.pos[0] + 10 // Left edge for output node
+          }
+          // For Y position when no slots exist, use middle of node
+          slotY = node.pos[1] + node.size[1] / 2
+        }
+
+        // Convert from offset to canvas coordinates
+        const canvasPos = window['app'].canvas.ds.convertOffsetToCanvas([
+          slotX,
+          slotY
+        ])
+        return canvasPos
+      },
+      [this.type] as const
+    )
+
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+}
+
 export class NodeSlotReference {
   constructor(
     readonly type: 'input' | 'output',
@@ -21,11 +143,27 @@ export class NodeSlotReference {
   async getPosition() {
     const pos: [number, number] = await this.node.comfyPage.page.evaluate(
       ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
+        // Use canvas.graph to get the current graph (works in both main graph and subgraphs)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error(`Node ${id} not found.`)
-        return window['app'].canvas.ds.convertOffsetToCanvas(
-          node.getConnectionPos(type === 'input', index)
+
+        const rawPos = node.getConnectionPos(type === 'input', index)
+        const convertedPos =
+          window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
+
+        // Debug logging - convert Float32Arrays to regular arrays for visibility
+        console.log(
+          `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
+          {
+            nodePos: [node.pos[0], node.pos[1]],
+            nodeSize: [node.size[0], node.size[1]],
+            rawConnectionPos: [rawPos[0], rawPos[1]],
+            convertedPos: [convertedPos[0], convertedPos[1]],
+            currentGraphType: window['app'].canvas.graph.constructor.name
+          }
         )
+
+        return convertedPos
       },
       [this.type, this.node.id, this.index] as const
     )
@@ -37,7 +175,7 @@ export class NodeSlotReference {
   async getLinkCount() {
     return await this.node.comfyPage.page.evaluate(
       ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error(`Node ${id} not found.`)
         if (type === 'input') {
           return node.inputs[index].link == null ? 0 : 1
@@ -50,7 +188,7 @@ export class NodeSlotReference {
   async removeLinks() {
     await this.node.comfyPage.page.evaluate(
       ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error(`Node ${id} not found.`)
         if (type === 'input') {
           node.disconnectInput(index)
@@ -75,7 +213,7 @@ export class NodeWidgetReference {
   async getPosition(): Promise<Position> {
     const pos: [number, number] = await this.node.comfyPage.page.evaluate(
       ([id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error(`Node ${id} not found.`)
         const widget = node.widgets[index]
         if (!widget) throw new Error(`Widget ${index} not found.`)
@@ -134,7 +272,7 @@ export class NodeWidgetReference {
     const pos = await this.getPosition()
     const canvas = this.node.comfyPage.canvas
     const canvasPos = (await canvas.boundingBox())!
-    this.node.comfyPage.dragAndDrop(
+    await this.node.comfyPage.dragAndDrop(
       {
         x: canvasPos.x + pos.x,
         y: canvasPos.y + pos.y
@@ -166,7 +304,7 @@ export class NodeReference {
   ) {}
   async exists(): Promise<boolean> {
     return await this.comfyPage.page.evaluate((id) => {
-      const node = window['app'].graph.getNodeById(id)
+      const node = window['app'].canvas.graph.getNodeById(id)
       return !!node
     }, this.id)
   }
@@ -185,7 +323,7 @@ export class NodeReference {
   async getBounding(): Promise<Position & Size> {
     const [x, y, width, height]: [number, number, number, number] =
       await this.comfyPage.page.evaluate((id) => {
-        const node = window['app'].graph.getNodeById(id)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error('Node not found')
         return node.getBounding()
       }, this.id)
@@ -218,7 +356,7 @@ export class NodeReference {
   async getProperty<T>(prop: string): Promise<T> {
     return await this.comfyPage.page.evaluate(
       ([id, prop]) => {
-        const node = window['app'].graph.getNodeById(id)
+        const node = window['app'].canvas.graph.getNodeById(id)
         if (!node) throw new Error('Node not found')
         return node[prop]
       },
@@ -259,7 +397,8 @@ export class NodeReference {
 
     await this.comfyPage.canvas.click({
       ...options,
-      position: clickPos
+      position: clickPos,
+      force: true
     })
     await this.comfyPage.nextFrame()
     if (moveMouseToEmptyArea) {
@@ -319,6 +458,18 @@ export class NodeReference {
     }
     return nodes[0]
   }
+  async convertToSubgraph() {
+    await this.clickContextMenuOption('Convert to Subgraph')
+    await this.comfyPage.nextFrame()
+    await this.comfyPage.page.waitForTimeout(256)
+    const nodes = await this.comfyPage.getNodeRefsByTitle('New Subgraph')
+    if (nodes.length !== 1) {
+      throw new Error(
+        `Did not find single subgraph node (found=${nodes.length})`
+      )
+    }
+    return nodes[0]
+  }
   async manageGroupNode() {
     await this.clickContextMenuOption('Manage Group Node')
     await this.comfyPage.nextFrame()
@@ -327,4 +478,58 @@ export class NodeReference {
       this.comfyPage.page.locator('.comfy-group-manage')
     )
   }
+  async navigateIntoSubgraph() {
+    const titleHeight = await this.comfyPage.page.evaluate(() => {
+      return window['LiteGraph']['NODE_TITLE_HEIGHT']
+    })
+    const nodePos = await this.getPosition()
+    const nodeSize = await this.getSize()
+
+    // Try multiple positions to avoid DOM widget interference
+    const clickPositions = [
+      { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + titleHeight + 5 },
+      { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + nodeSize.height / 2 },
+      { x: nodePos.x + 20, y: nodePos.y + titleHeight + 5 }
+    ]
+
+    let isInSubgraph = false
+    let attempts = 0
+    const maxAttempts = 3
+
+    while (!isInSubgraph && attempts < maxAttempts) {
+      attempts++
+
+      for (const position of clickPositions) {
+        // Clear any selection first
+        await this.comfyPage.canvas.click({
+          position: { x: 50, y: 50 },
+          force: true
+        })
+        await this.comfyPage.nextFrame()
+
+        // Double-click to enter subgraph
+        await this.comfyPage.canvas.dblclick({ position, force: true })
+        await this.comfyPage.nextFrame()
+        await this.comfyPage.page.waitForTimeout(500)
+
+        // Check if we successfully entered the subgraph
+        isInSubgraph = await this.comfyPage.page.evaluate(() => {
+          const graph = window['app'].canvas.graph
+          return graph?.constructor?.name === 'Subgraph'
+        })
+
+        if (isInSubgraph) break
+      }
+
+      if (!isInSubgraph && attempts < maxAttempts) {
+        await this.comfyPage.page.waitForTimeout(500)
+      }
+    }
+
+    if (!isInSubgraph) {
+      throw new Error(
+        'Failed to navigate into subgraph after ' + attempts + ' attempts'
+      )
+    }
+  }
 }