refactor: extract shared slot bounds util and use default workflow fixture

- Extract measureNodeSlotOffsets / expectSlotsWithinBounds into
  browser_tests/fixtures/utils/slotBoundsUtil.ts to deduplicate
  assertion logic shared by collapsedNodeLinks and subgraphSlotAlignment
- Use default.json (KSampler node) instead of dedicated fixture
- Remove browser_tests/assets/selection/subgraph-with-regular-node.json

browser_tests/assets/selection/subgraph-with-regular-node.json

@@ -1,116 +0,0 @@
-{
-  "id": "selection-bbox-test",
-  "revision": 0,
-  "last_node_id": 3,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
-      "pos": [300, 200],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [1]
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    },
-    {
-      "id": 3,
-      "type": "EmptyLatentImage",
-      "pos": [800, 200],
-      "size": [400, 200],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "latent",
-          "type": "LATENT",
-          "link": 1
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": [512, 512, 1]
-    }
-  ],
-  "links": [[1, 2, 0, 3, 0, "LATENT"]],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 1,
-          "lastLinkId": 0,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Test Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [100, 200, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [500, 200, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [],
-            "pos": { "0": 200, "1": 220 }
-          }
-        ],
-        "outputs": [
-          {
-            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [],
-            "pos": { "0": 520, "1": 220 }
-          }
-        ],
-        "widgets": [],
-        "nodes": [],
-        "groups": [],
-        "links": [],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/utils/slotBoundsUtil.ts

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+export interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+export interface NodeSlotData {
+  nodeId: string
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
+/**
+ * Collect slot center offsets relative to the parent node element.
+ * Returns `null` when the node element is not found.
+ */
+export async function measureNodeSlotOffsets(
+  page: Page,
+  nodeId: string
+): Promise<NodeSlotData | null> {
+  return page.evaluate((id) => {
+    const nodeEl = document.querySelector(
+      `[data-node-id="${id}"]`
+    ) as HTMLElement | null
+    if (!nodeEl) return null
+
+    const nodeRect = nodeEl.getBoundingClientRect()
+    const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+    const slots: { key: string; offsetX: number; offsetY: number }[] = []
+
+    for (const slotEl of slotEls) {
+      const slotRect = slotEl.getBoundingClientRect()
+      slots.push({
+        key: (slotEl as HTMLElement).dataset.slotKey ?? 'unknown',
+        offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+        offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+      })
+    }
+
+    return {
+      nodeId: id,
+      nodeW: nodeRect.width,
+      nodeH: nodeRect.height,
+      slots
+    }
+  }, nodeId)
+}
+
+/**
+ * Assert that every slot falls within the node dimensions (± `margin` px).
+ */
+export function expectSlotsWithinBounds(
+  data: NodeSlotData,
+  margin: number,
+  label?: string
+) {
+  const prefix = label ? `${label}: ` : ''
+
+  for (const slot of data.slots) {
+    expect(
+      slot.offsetX,
+      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
+    ).toBeGreaterThanOrEqual(-margin)
+    expect(
+      slot.offsetX,
+      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
+    ).toBeLessThanOrEqual(data.nodeW + margin)
+
+    expect(
+      slot.offsetY,
+      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
+    ).toBeGreaterThanOrEqual(-margin)
+    expect(
+      slot.offsetY,
+      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
+    ).toBeLessThanOrEqual(data.nodeH + margin)
+  }
+}
+
+/**
+ * Wait for slots, measure, and assert within bounds — single-node convenience.
+ */
+export async function assertNodeSlotsWithinBounds(
+  page: Page,
+  nodeId: string,
+  margin: number = 20
+) {
+  await page
+    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
+    .first()
+    .waitFor()
+
+  const data = await measureNodeSlotOffsets(page, nodeId)
+  expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
+  expectSlotsWithinBounds(data!, margin, `Node ${nodeId}`)
+}

browser_tests/tests/collapsedNodeLinks.spec.ts

@@ -1,50 +1,10 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { assertNodeSlotsWithinBounds } from '../fixtures/utils/slotBoundsUtil'
 
-const SLOT_BOUNDS_MARGIN = 20
-const SUBGRAPH_ID = '2'
-const WORKFLOW = 'selection/subgraph-with-regular-node'
-
-async function assertSlotsWithinNodeBounds(page: Page, nodeId: string) {
-  await page
-    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
-    .first()
-    .waitFor()
-
-  const result = await page.evaluate(
-    ({ nodeId, margin }) => {
-      const nodeEl = document.querySelector(
-        `[data-node-id="${nodeId}"]`
-      ) as HTMLElement | null
-      if (!nodeEl) return { ok: false, violations: ['node element not found'] }
-
-      const nodeRect = nodeEl.getBoundingClientRect()
-      const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-      const violations: string[] = []
-
-      for (const slotEl of slotEls) {
-        const slotRect = slotEl.getBoundingClientRect()
-        const cx = slotRect.left + slotRect.width / 2 - nodeRect.left
-        const cy = slotRect.top + slotRect.height / 2 - nodeRect.top
-
-        if (cx < -margin || cx > nodeRect.width + margin)
-          violations.push(`slot X=${cx} outside width=${nodeRect.width}`)
-        if (cy < -margin || cy > nodeRect.height + margin)
-          violations.push(`slot Y=${cy} outside height=${nodeRect.height}`)
-      }
-
-      return { ok: violations.length === 0, violations }
-    },
-    { nodeId, margin: SLOT_BOUNDS_MARGIN }
-  )
-
-  expect(
-    result.ok,
-    `Slot positions out of bounds: ${result.violations?.join(', ')}`
-  ).toBe(true)
-}
+const NODE_ID = '3'
+const NODE_TITLE = 'KSampler'
 
 test.describe(
   'Collapsed node link positions',
@@ -52,7 +12,7 @@ test.describe(
   () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.workflow.loadWorkflow('default')
       await comfyPage.vueNodes.waitForNodes()
     })
 
@@ -63,15 +23,15 @@ test.describe(
     test('link endpoints stay within collapsed node bounds', async ({
       comfyPage
     }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Test Subgraph')
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
       await node.toggleCollapse()
       await comfyPage.nextFrame()
 
-      await assertSlotsWithinNodeBounds(comfyPage.page, SUBGRAPH_ID)
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
     })
 
     test('links follow collapsed node after drag', async ({ comfyPage }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Test Subgraph')
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
       await node.toggleCollapse()
       await comfyPage.nextFrame()
 
@@ -90,19 +50,19 @@ test.describe(
       await comfyPage.page.mouse.up()
       await comfyPage.nextFrame()
 
-      await assertSlotsWithinNodeBounds(comfyPage.page, SUBGRAPH_ID)
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
     })
 
     test('links recover correct positions after expand', async ({
       comfyPage
     }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Test Subgraph')
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
       await node.toggleCollapse()
       await comfyPage.nextFrame()
       await node.toggleCollapse()
       await comfyPage.nextFrame()
 
-      await assertSlotsWithinNodeBounds(comfyPage.page, SUBGRAPH_ID)
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
     })
   }
 )

browser_tests/tests/subgraphSlotAlignment.spec.ts

@@ -6,30 +6,13 @@ import { expect } from '@playwright/test'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import {
+  expectSlotsWithinBounds,
+  measureNodeSlotOffsets
+} from '../fixtures/utils/slotBoundsUtil'
 
-interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
+const SLOT_BOUNDS_MARGIN = 20
 
-interface NodeSlotData {
-  nodeId: string
-  isSubgraph: boolean
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Regression test for link misalignment on SubgraphNodes when loading
- * workflows with workflowRendererVersion: "LG".
- *
- * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
- * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
- * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
- * slot offsets. The fix uses DOM-relative measurement instead.
- */
 test.describe(
   'Subgraph slot alignment after LG layout scale',
   { tag: ['@subgraph', '@canvas'] },
@@ -37,7 +20,6 @@ test.describe(
     test('slot positions stay within node bounds after loading LG workflow', async ({
       comfyPage
     }) => {
-      const SLOT_BOUNDS_MARGIN = 20
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
 
       const workflowPath = resolve(
@@ -61,71 +43,19 @@ test.describe(
       )
       await comfyPage.nextFrame()
 
-      // Wait for slot elements to appear in DOM
       await comfyPage.page.locator('[data-slot-key]').first().waitFor()
 
-      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.graph._nodes
-        const slotData: NodeSlotData[] = []
+      const nodeIds = await comfyPage.page.evaluate(() =>
+        window
+          .app!.graph._nodes.filter((n) => !!n.isSubgraphNode?.())
+          .map((n) => String(n.id))
+      )
+      expect(nodeIds.length).toBeGreaterThan(0)
 
-        for (const node of nodes) {
-          const nodeId = String(node.id)
-          const nodeEl = document.querySelector(
-            `[data-node-id="${nodeId}"]`
-          ) as HTMLElement | null
-          if (!nodeEl) continue
-
-          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-          if (slotEls.length === 0) continue
-
-          const slots: SlotMeasurement[] = []
-
-          const nodeRect = nodeEl.getBoundingClientRect()
-          for (const slotEl of slotEls) {
-            const slotRect = slotEl.getBoundingClientRect()
-            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
-            slots.push({
-              key: slotKey,
-              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-            })
-          }
-
-          slotData.push({
-            nodeId,
-            isSubgraph: !!node.isSubgraphNode?.(),
-            nodeW: nodeRect.width,
-            nodeH: nodeRect.height,
-            slots
-          })
-        }
-
-        return slotData
-      })
-
-      const subgraphNodes = result.filter((n) => n.isSubgraph)
-      expect(subgraphNodes.length).toBeGreaterThan(0)
-
-      for (const node of subgraphNodes) {
-        for (const slot of node.slots) {
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
-
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
-        }
+      for (const nodeId of nodeIds) {
+        const data = await measureNodeSlotOffsets(comfyPage.page, nodeId)
+        expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
+        expectSlotsWithinBounds(data!, SLOT_BOUNDS_MARGIN, `Node ${nodeId}`)
       }
     })
   }