diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index 6614517e2..508f31df0 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -43,6 +43,9 @@ export class ComfyPage { // Buttons public readonly resetViewButton: Locator; + // Inputs + public readonly workflowUploadInput: Locator; + // Search box public readonly searchBox: ComfyNodeSearchBox; @@ -51,6 +54,7 @@ export class ComfyPage { this.canvas = page.locator("#graph-canvas"); this.widgetTextBox = page.getByPlaceholder("text").nth(1); this.resetViewButton = page.getByRole("button", { name: "Reset View" }); + this.workflowUploadInput = page.locator('#comfy-file-input'); this.searchBox = new ComfyNodeSearchBox(page); } @@ -64,6 +68,11 @@ export class ComfyPage { }); } + async loadWorkflow(workflowName: string) { + await this.workflowUploadInput.setInputFiles(`./browser_tests/assets/${workflowName}.json`); + await this.nextFrame(); + } + async resetView() { await this.resetViewButton.click(); // Avoid "Reset View" button highlight. diff --git a/browser_tests/assets/snap_to_slot.json b/browser_tests/assets/snap_to_slot.json new file mode 100644 index 000000000..0c708980b --- /dev/null +++ b/browser_tests/assets/snap_to_slot.json @@ -0,0 +1,164 @@ +{ + "last_node_id": 5, + "last_link_id": 5, + "nodes": [ + { + "id": 1, + "type": "KSampler", + "pos": [ + 590, + 40 + ], + "size": { + "0": 315, + "1": 262 + }, + "flags": {}, + "order": 2, + "mode": 0, + "inputs": [ + { + "name": "model", + "type": "MODEL", + "link": null, + "slot_index": 0 + }, + { + "name": "positive", + "type": "CONDITIONING", + "link": 3, + "slot_index": 1 + }, + { + "name": "negative", + "type": "CONDITIONING", + "link": null, + "slot_index": 2 + }, + { + "name": "latent_image", + "type": "LATENT", + "link": null, + "slot_index": 3 + } + ], + "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": 4, + "type": "CLIPTextEncode", + "pos": [ + 20, + 50 + ], + "size": { + "0": 400, + "1": 200 + }, + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [ + { + "name": "clip", + "type": "CLIP", + "link": null + } + ], + "outputs": [ + { + "name": "CONDITIONING", + "type": "CONDITIONING", + "links": [ + 3 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "CLIPTextEncode" + }, + "widgets_values": [ + "" + ] + }, + { + "id": 5, + "type": "CLIPTextEncode", + "pos": [ + 20, + 320 + ], + "size": { + "0": 400, + "1": 200 + }, + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [ + { + "name": "clip", + "type": "CLIP", + "link": null + } + ], + "outputs": [ + { + "name": "CONDITIONING", + "type": "CONDITIONING", + "links": [], + "shape": 3, + "slot_index": 0 + } + ], + "properties": { + "Node name for S&R": "CLIPTextEncode" + }, + "widgets_values": [ + "" + ] + } + ], + "links": [ + [ + 3, + 4, + 0, + 1, + 1, + "CONDITIONING" + ] + ], + "groups": [], + "config": {}, + "extra": { + "ds": { + "scale": 1, + "offset": [ + 0, + 0 + ] + } + }, + "version": 0.4 +} \ No newline at end of file diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts index 95189cfa2..f0a67f098 100644 --- a/browser_tests/interaction.spec.ts +++ b/browser_tests/interaction.spec.ts @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { comfyPageFixture as test } from './ComfyPage'; +import { ComfyPage, comfyPageFixture as test } from './ComfyPage'; test.describe('Node Interaction', () => { test('Can enter prompt', async ({ comfyPage }) => { @@ -37,6 +37,23 @@ test.describe('Node Interaction', () => { await comfyPage.adjustWidgetValue(); await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png'); }); + + test('Link snap to slot', async ({comfyPage}) => { + await comfyPage.loadWorkflow("snap_to_slot"); + await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png'); + + const outputSlotPos = { + x: 406, + y: 333 + }; + const samplerNodeCenterPos = { + x: 748, + y: 77 + }; + await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos); + + await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png'); + }); }); test.describe('Canvas Interaction', () => { diff --git a/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png new file mode 100644 index 000000000..9575c9221 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-linux.png differ diff --git a/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-win32.png new file mode 100644 index 000000000..8f76e89b1 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-chromium-win32.png differ diff --git a/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png new file mode 100644 index 000000000..24665def2 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-linux.png differ diff --git a/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-win32.png new file mode 100644 index 000000000..00c14d588 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snap-to-slot-linked-chromium-win32.png differ diff --git a/package-lock.json b/package-lock.json index 0f89496a8..45d367b6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "comfyui-frontend", "version": "1.2.1", "dependencies": { - "@comfyorg/litegraph": "^0.7.26", + "@comfyorg/litegraph": "^0.7.29", "@primevue/themes": "^4.0.0-rc.2", "@vitejs/plugin-vue": "^5.0.5", "class-transformer": "^0.5.1", @@ -1819,9 +1819,9 @@ "dev": true }, "node_modules/@comfyorg/litegraph": { - "version": "0.7.26", - "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.26.tgz", - "integrity": "sha512-o62S4tvHXfcAlnyG4UaAuoMyjB+g2nauQ3+l0HWwJjdj6KA565du6PX4OdL5DE0YW1iRNtFEoNq5IQITq26tow==" + "version": "0.7.29", + "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.29.tgz", + "integrity": "sha512-lXgqcJseywRJQ/B9ClW+5u6VIbDJWy8SMJJ1nxXDgTsE30UUmOnBhZkLZZ3ffMv3QFUcYoNLq5EJn3EFx3g+zA==" }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", diff --git a/package.json b/package.json index 6a419485f..e680eb79e 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "zip-dir": "^2.0.0" }, "dependencies": { - "@comfyorg/litegraph": "^0.7.26", + "@comfyorg/litegraph": "^0.7.29", "@primevue/themes": "^4.0.0-rc.2", "@vitejs/plugin-vue": "^5.0.5", "class-transformer": "^0.5.1",