[Test] Add playwright tests (#3245)

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

browser_tests/assets/primitive/static_primitive_unconnected.json

@@ -0,0 +1,104 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": {
+        "0": 304.3653259277344,
+        "1": 42.15586471557617
+      },
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveInt",
+      "pos": {
+        "0": 14,
+        "1": 43
+      },
+      "size": [
+        203.1999969482422,
+        40.368401303242536
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "value",
+          "type": "INT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Int"
+      },
+      "widgets_values": [10]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -589,11 +589,20 @@ export class ComfyPage {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
 
-  async connectEdge() {
+  async connectEdge(
-    await this.dragAndDrop(
+    options: {
-      this.loadCheckpointNodeClipOutputSlot,
+      reverse?: boolean
-      this.clipTextEncodeNode1InputSlot
+    } = {}
-    )
+  ) {
+    const { reverse = false } = options
+    const start = reverse
+      ? this.clipTextEncodeNode1InputSlot
+      : this.loadCheckpointNodeClipOutputSlot
+    const end = reverse
+      ? this.loadCheckpointNodeClipOutputSlot
+      : this.clipTextEncodeNode1InputSlot
+
+    await this.dragAndDrop(start, end)
   }
 
   async adjustWidgetValue() {

browser_tests/tests/interaction.spec.ts

@@ -91,15 +91,20 @@ test.describe('Node Interaction', () => {
       await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
     })
 
-    test('Can disconnect/connect edge', async ({ comfyPage }) => {
+    // Test both directions of edge connection.
-      await comfyPage.disconnectEdge()
+    ;[{ reverse: false }, { reverse: true }].forEach(({ reverse }) => {
-      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      test(`Can disconnect/connect edge ${reverse ? 'reverse' : 'normal'}`, async ({
-      await comfyPage.connectEdge()
+        comfyPage
-      // Move mouse to empty area to avoid slot highlight.
+      }) => {
-      await comfyPage.moveMouseToEmptyArea()
+        await comfyPage.disconnectEdge()
-      // Litegraph renders edge with a slight offset.
+        await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
-      await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+        await comfyPage.connectEdge({ reverse })
-        maxDiffPixels: 50
+        // Move mouse to empty area to avoid slot highlight.
+        await comfyPage.moveMouseToEmptyArea()
+        // Litegraph renders edge with a slight offset.
+        await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+          maxDiffPixels: 50
+        })
       })
     })
 

browser_tests/tests/primitiveNode.spec.ts

@@ -5,14 +5,14 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node')
+    await comfyPage.loadWorkflow('primitive/primitive_node')
     await expect(comfyPage.canvas).toHaveScreenshot('primitive_node.png')
   })
 
   // When link is dropped on widget, it should automatically convert the widget
   // to input.
   test('Can connect to widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node_unconnected')
+    await comfyPage.loadWorkflow('primitive/primitive_node_unconnected')
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
     // Connect the output of the primitive node to the input of first widget of the ksampler node
@@ -23,7 +23,9 @@ test.describe('Primitive Node', () => {
   })
 
   test('Can connect to dom widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive_node_unconnected_dom_widget')
+    await comfyPage.loadWorkflow(
+      'primitive/primitive_node_unconnected_dom_widget'
+    )
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const clipEncoderNode: NodeReference = await comfyPage.getNodeRefById(2)
     await primitiveNode.connectWidget(0, clipEncoderNode, 0)
@@ -31,4 +33,14 @@ test.describe('Primitive Node', () => {
       'primitive_node_connected_dom_widget.png'
     )
   })
+
+  test('Can connect to static primitive node', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('primitive/static_primitive_unconnected')
+    const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
+    const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
+    await primitiveNode.connectWidget(0, ksamplerNode, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'static_primitive_connected.png'
+    )
+  })
 })