[automated] Update test expectations

browser_tests/assets/widgets/image_compare_widget.json

@@ -0,0 +1,42 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ImageCompare",
+      "pos": [50, 50],
+      "size": [400, 350],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "a_images",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "b_images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "ImageCompare"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/tests/imageCompare.spec.ts

@@ -0,0 +1,81 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Image Compare', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  function createTestImageDataUrl(label: string, color: string): string {
+    const svg =
+      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">` +
+      `<rect width="200" height="200" fill="${color}"/>` +
+      `<text x="50%" y="50%" fill="white" font-size="24" ` +
+      `text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+  }
+
+  async function setImageCompareValue(
+    comfyPage: ComfyPage,
+    value: { beforeImages: string[]; afterImages: string[] }
+  ) {
+    await comfyPage.page.evaluate(
+      ({ value }) => {
+        const node = window.app!.graph.getNodeById(1)
+        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
+        if (widget) {
+          widget.value = value
+          widget.callback?.(value)
+        }
+      },
+      { value }
+    )
+    await comfyPage.nextFrame()
+  }
+
+  test(
+    'Shows empty state when no images are set',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node).toContainText('No images to compare')
+      await expect(node.locator('img')).toHaveCount(0)
+      await expect(node.locator('[role="presentation"]')).toHaveCount(0)
+    }
+  )
+
+  test(
+    'Slider defaults to 50% with both images set',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      const beforeUrl = createTestImageDataUrl('Before', '#c00')
+      const afterUrl = createTestImageDataUrl('After', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [beforeUrl],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeImg = node.locator('img[alt="Before image"]')
+      const afterImg = node.locator('img[alt="After image"]')
+      await expect(beforeImg).toBeVisible()
+      await expect(afterImg).toBeVisible()
+
+      const handle = node.locator('[role="presentation"]')
+      await expect(handle).toBeVisible()
+
+      expect(
+        await handle.evaluate((el) => (el as HTMLElement).style.left)
+      ).toBe('50%')
+      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
+
+      await expect(node).toHaveScreenshot('image-compare-default-50.png')
+    }
+  )
+})