test: add E2E tests for ImageCropV2 widget (#10737)

## Summary
Adds Playwright E2E tests for the ImageCropV2 widget covering 
1. the empty state (no source image)
2. default control rendering
3. source image display with crop overlay
4. drag-to-reposition behavior.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10737-test-add-E2E-tests-for-ImageCropV2-widget-3336d73d365081b28ed9db63e5df383e)
by [Unito](https://www.unito.io)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: primarily adds Playwright E2E coverage and introduces
`data-testid` attributes for more stable selectors, with no changes to
core crop behavior.
> 
> **Overview**
> Adds new Playwright E2E coverage for the `ImageCropV2` Vue-node
widget, including workflows/fixtures for a disconnected input and a
`LoadImage -> ImageCropV2 -> PreviewImage` pipeline.
> 
> Tests validate the empty state and default controls, verify the crop
overlay renders after execution with screenshot assertions, and exercise
drag-to-reposition by dispatching pointer events and asserting the
widget’s crop value updates.
> 
> Updates `WidgetImageCrop.vue` to add `data-testid` hooks (empty
state/icon and crop overlay) to make the E2E selectors stable.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9f29272742. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts

@@ -0,0 +1,162 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+type CropValue = { x: number; y: number; width: number; height: number } | null
+
+test.describe('Image Crop', { tag: '@widget' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  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.getByTestId('crop-empty-icon')).toBeVisible()
+        await expect.soft(node).toContainText('No input image connected')
+        await expect.soft(node.getByTestId('crop-overlay')).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',
+    { tag: ['@widget', '@slow'] },
+    () => {
+      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
+          if (v && typeof v === 'object' && 'x' in v) {
+            const crop = v as {
+              x: number
+              y: number
+              width: number
+              height: number
+            }
+            return {
+              x: crop.x,
+              y: crop.y,
+              width: crop.width,
+              height: crop.height
+            }
+          }
+          return null
+        })
+      }
+
+      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.getByTestId('crop-overlay')).toBeVisible()
+          await comfyPage.nextFrame()
+          await comfyPage.nextFrame()
+          await expect(node).toHaveScreenshot('image-crop-with-source.png', {
+            maxDiffPixelRatio: 0.05
+          })
+        }
+      )
+
+      test(
+        'Drag crop box updates crop position',
+        { tag: ['@smoke', '@screenshot'] },
+        async ({ comfyPage }) => {
+          const node = comfyPage.vueNodes.getNodeLocator('2')
+          const cropBox = node.getByTestId('crop-overlay')
+          const box = await cropBox.boundingBox()
+          if (!box) throw new Error('Crop box not found')
+
+          const valueBefore = await getCropValue(comfyPage)
+          if (!valueBefore)
+            throw new Error('Widget value missing — check fixture setup')
+
+          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()
+
+          await expect(async () => {
+            const valueAfter = await getCropValue(comfyPage)
+            expect(valueAfter?.x).toBeGreaterThan(valueBefore.x)
+            expect(valueAfter?.y).toBeGreaterThan(valueBefore.y)
+            expect(valueAfter?.width).toBe(valueBefore.width)
+            expect(valueAfter?.height).toBe(valueBefore.height)
+          }).toPass({ timeout: 5000 })
+
+          await expect(node).toHaveScreenshot('image-crop-after-drag.png', {
+            maxDiffPixelRatio: 0.05
+          })
+        }
+      )
+    }
+  )
+})