[Test] Add playwright test on litegraph native reroute (#3033)

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/assets/reroute/native_reroute.json

@@ -0,0 +1,110 @@
+{
+  "last_node_id": 25,
+  "last_link_id": 33,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [160, 240],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "slot_index": 0,
+          "links": []
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "slot_index": 1,
+          "links": []
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "slot_index": 2,
+          "links": [33]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
+    },
+    {
+      "id": 19,
+      "type": "VAEDecode",
+      "pos": [623.0897216796875, 324.64453125],
+      "size": [210, 46],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 33
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [[33, 4, 2, 19, 1, "VAE"]],
+  "floatingLinks": [
+    {
+      "id": 6,
+      "origin_id": 4,
+      "origin_slot": 2,
+      "target_id": -1,
+      "target_slot": -1,
+      "type": "VAE",
+      "parentId": 1
+    }
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "reroutes": [
+      {
+        "id": 1,
+        "pos": [545.4541015625, 295.85760498046875],
+        "linkIds": [],
+        "floating": {
+          "slotType": "output"
+        }
+      },
+      {
+        "id": 2,
+        "pos": [543.8283081054688, 355.45849609375],
+        "linkIds": [33]
+      }
+    ],
+    "linkExtensions": [
+      {
+        "id": 33,
+        "parentId": 2
+      }
+    ]
+  },
+  "version": 0.4
+}

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,10 +1,17 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/types/comfyWorkflow'
+import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
 
+export const getMiddlePoint = (pos1: Position, pos2: Position) => {
+  return {
+    x: (pos1.x + pos2.x) / 2,
+    y: (pos1.y + pos2.y) / 2
+  }
+}
+
 export class NodeSlotReference {
   constructor(
     readonly type: 'input' | 'output',

browser_tests/rerouteNode.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { getMiddlePoint } from './fixtures/utils/litegraphUtils'
 
 test.describe('Reroute Node', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -36,3 +37,61 @@ test.describe('Reroute Node', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('reroute_inserted.png')
   })
 })
+
+test.describe('LiteGraph Native Reroute Node', () => {
+  test('loads from workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('reroute/native_reroute')
+    await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png')
+  })
+
+  test('Can add reroute by alt clicking on link', async ({ comfyPage }) => {
+    const loadCheckpointNode = (
+      await comfyPage.getNodeRefsByTitle('Load Checkpoint')
+    )[0]
+    const clipEncodeNode = (
+      await comfyPage.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
+    )[0]
+
+    const slot1 = await loadCheckpointNode.getOutput(1)
+    const slot2 = await clipEncodeNode.getInput(0)
+    const middlePoint = getMiddlePoint(
+      await slot1.getPosition(),
+      await slot2.getPosition()
+    )
+
+    await comfyPage.page.keyboard.down('Alt')
+    await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y)
+    await comfyPage.page.keyboard.up('Alt')
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'native_reroute_alt_click.png'
+    )
+  })
+
+  test('Can add reroute by clicking middle of link context menu', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode = (
+      await comfyPage.getNodeRefsByTitle('Load Checkpoint')
+    )[0]
+    const clipEncodeNode = (
+      await comfyPage.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
+    )[0]
+
+    const slot1 = await loadCheckpointNode.getOutput(1)
+    const slot2 = await clipEncodeNode.getInput(0)
+    const middlePoint = getMiddlePoint(
+      await slot1.getPosition(),
+      await slot2.getPosition()
+    )
+
+    await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y)
+    await comfyPage.page
+      .locator('.litecontextmenu .litemenu-entry', { hasText: 'Add Reroute' })
+      .click()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'native_reroute_context_menu.png'
+    )
+  })
+})