test: add image crop e2e tests

browser_tests/assets/widgets/image_crop_widget.json

@@ -0,0 +1,50 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ImageCropV2",
+      "pos": [50, 50],
+      "size": [400, 500],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [
+        {
+          "x": 0,
+          "y": 0,
+          "width": 512,
+          "height": 512
+        }
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/image_crop_with_source.json

@@ -0,0 +1,100 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "ImageCropV2",
+      "pos": [450, 50],
+      "size": [400, 500],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [
+        {
+          "x": 10,
+          "y": 10,
+          "width": 100,
+          "height": 100
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "type": "PreviewImage",
+      "pos": [900, 50],
+      "size": [315, 270],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 1, 0, 2, 0, "IMAGE"],
+    [2, 2, 0, 3, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/tests/imageCrop.spec.ts

@@ -0,0 +1,161 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+type CropValue = { x: number; y: number; width: number; height: number } | null
+
+async function getCropValue(comfyPage: ComfyPage): Promise<CropValue> {
+  return comfyPage.page.evaluate(() => {
+    const n = window.app!.graph.getNodeById(2)
+    const w = n?.widgets?.find((w) => w.type === 'imagecrop')
+    const v = w?.value as Record<string, number> | undefined
+    return v ? { x: v.x, y: v.y, width: v.width, height: v.height } : null
+  })
+}
+
+test.describe('Image Crop', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+  })
+
+  test.describe('without source image', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/image_crop_widget')
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test(
+      'Shows empty state when no input image is connected',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        await expect(node).toBeVisible()
+
+        await expect
+          .soft(node.locator('.icon-\\[lucide--image\\]'))
+          .toBeVisible()
+        await expect.soft(node).toContainText('No input image connected')
+        await expect.soft(node.locator('.cursor-move')).toHaveCount(0)
+        await expect.soft(node.locator('img')).toHaveCount(0)
+      }
+    )
+
+    test(
+      'Renders controls in default state',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        await expect(node).toBeVisible()
+
+        await expect(node.getByText('Ratio')).toBeVisible()
+        await expect(
+          node.locator('button:has(.icon-\\[lucide--lock-open\\])')
+        ).toBeVisible()
+        await expect(node.locator('input')).toHaveCount(4)
+      }
+    )
+  })
+
+  test.describe('with source image after execution', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/image_crop_with_source')
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.runButton.click()
+      await expect(
+        comfyPage.vueNodes.getNodeLocator('2').locator('img')
+      ).toBeVisible({ timeout: 30_000 })
+    })
+
+    test(
+      'Displays source image with crop overlay after execution',
+      { tag: ['@smoke', '@screenshot'] },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('2')
+        const img = node.locator('img')
+
+        await expect
+          .poll(() => img.evaluate((el: HTMLImageElement) => el.naturalWidth))
+          .toBeGreaterThan(0)
+
+        await expect(node.locator('.cursor-move')).toBeVisible()
+        await comfyPage.nextFrame()
+        await comfyPage.nextFrame()
+        await comfyPage.page.evaluate(() =>
+          Promise.all(
+            document
+              .getAnimations()
+              .filter((a) => a.playState === 'running')
+              .map((a) => a.finished.catch(() => undefined))
+          )
+        )
+        await expect(node).toHaveScreenshot('image-crop-with-source.png', {
+          maxDiffPixelRatio: 0.02
+        })
+      }
+    )
+
+    test(
+      'Drag crop box updates crop position',
+      { tag: ['@smoke', '@screenshot'] },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('2')
+        const cropBox = node.locator('.cursor-move')
+        const box = await cropBox.boundingBox()
+        expect(box, 'Crop box not found').not.toBeNull()
+
+        const valueBefore = await getCropValue(comfyPage)
+        expect(
+          valueBefore,
+          'Widget value missing — check fixture setup'
+        ).not.toBeNull()
+
+        const startX = box!.x + box!.width / 2
+        const startY = box!.y + box!.height / 2
+
+        const pointerOpts = { bubbles: true, cancelable: true, pointerId: 1 }
+        await cropBox.dispatchEvent('pointerdown', {
+          ...pointerOpts,
+          clientX: startX,
+          clientY: startY
+        })
+        await comfyPage.nextFrame()
+        await cropBox.dispatchEvent('pointermove', {
+          ...pointerOpts,
+          clientX: startX + 15,
+          clientY: startY + 10
+        })
+        await comfyPage.nextFrame()
+        await cropBox.dispatchEvent('pointermove', {
+          ...pointerOpts,
+          clientX: startX + 30,
+          clientY: startY + 20
+        })
+        await cropBox.dispatchEvent('pointerup', {
+          ...pointerOpts,
+          clientX: startX + 30,
+          clientY: startY + 20
+        })
+        await comfyPage.nextFrame()
+
+        let valueAfter: CropValue = null
+        await expect
+          .poll(async () => {
+            valueAfter = await getCropValue(comfyPage)
+            return valueAfter?.x ?? valueBefore!.x
+          })
+          .toBeGreaterThan(valueBefore!.x)
+
+        expect(valueAfter!.y).toBeGreaterThan(valueBefore!.y)
+        expect(valueAfter!.width).toBe(valueBefore!.width)
+        expect(valueAfter!.height).toBe(valueBefore!.height)
+
+        await expect(node).toHaveScreenshot('image-crop-after-drag.png')
+      }
+    )
+  })
+})