Handle Load3D "none" model selection in frontend

browser_tests/assets/widgets/image_crop_widget.json

@@ -1,50 +0,0 @@
-{
-  "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

@@ -1,100 +0,0 @@
-{
-  "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/fixtures/selectors.ts

@@ -21,10 +21,6 @@ export const TestIds = {
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
     closeMinimapButton: 'close-minimap-button',
-    minimapContainer: 'minimap-container',
-    minimapCanvas: 'minimap-canvas',
-    minimapViewport: 'minimap-viewport',
-    minimapInteractionOverlay: 'minimap-interaction-overlay',
     toggleLinkVisibilityButton: 'toggle-link-visibility-button',
     zoomControlsButton: 'zoom-controls-button',
     zoomInAction: 'zoom-in-action',

browser_tests/helpers/painter.ts

@@ -1,66 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-import type { TestGraphAccess } from '@e2e/types/globals'
-
-export async function drawStroke(
-  page: Page,
-  canvas: Locator,
-  opts: { startXPct?: number; endXPct?: number; yPct?: number } = {}
-): Promise<void> {
-  const { startXPct = 0.3, endXPct = 0.7, yPct = 0.5 } = opts
-  const box = await canvas.boundingBox()
-  if (!box) throw new Error('Canvas bounding box not found')
-  await page.mouse.move(
-    box.x + box.width * startXPct,
-    box.y + box.height * yPct
-  )
-  await page.mouse.down()
-  await page.mouse.move(
-    box.x + box.width * endXPct,
-    box.y + box.height * yPct,
-    { steps: 10 }
-  )
-  await page.mouse.up()
-}
-
-export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
-  return canvas.evaluate((el: HTMLCanvasElement) => {
-    const ctx = el.getContext('2d')
-    if (!ctx) return false
-    const { data } = ctx.getImageData(0, 0, el.width, el.height)
-    for (let i = 3; i < data.length; i += 4) {
-      if (data[i] > 0) return true
-    }
-    return false
-  })
-}
-
-export async function triggerSerialization(page: Page): Promise<void> {
-  await page.evaluate(async () => {
-    const graph = window.graph as TestGraphAccess | undefined
-    if (!graph) {
-      throw new Error(
-        'Global window.graph is absent. Ensure workflow fixture is loaded.'
-      )
-    }
-
-    const node = graph._nodes_by_id?.['1']
-    if (!node) {
-      throw new Error(
-        'Target node with ID "1" not found in graph._nodes_by_id.'
-      )
-    }
-
-    const widget = node.widgets?.find((w) => w.name === 'mask')
-    if (!widget) {
-      throw new Error('Widget "mask" not found on target node 1.')
-    }
-
-    if (typeof widget.serializeValue !== 'function') {
-      throw new Error(
-        'mask widget on node 1 does not have a serializeValue function.'
-      )
-    }
-
-    await widget.serializeValue(node, 0)
-  })
-}

browser_tests/tests/imageCompare.spec.ts

@@ -1,10 +1,9 @@
-import type { Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Image Compare', { tag: '@widget' }, () => {
+test.describe('Image Compare', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
@@ -22,12 +21,7 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
 
   async function setImageCompareValue(
     comfyPage: ComfyPage,
-    value: {
-      beforeImages: string[]
-      afterImages: string[]
-      beforeAlt?: string
-      afterAlt?: string
-    }
+    value: { beforeImages: string[]; afterImages: string[] }
   ) {
     await comfyPage.page.evaluate(
       ({ value }) => {
@@ -43,48 +37,6 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
     await comfyPage.nextFrame()
   }
 
-  async function moveToPercentage(
-    page: Page,
-    containerLocator: Locator,
-    percentage: number
-  ) {
-    const box = await containerLocator.boundingBox()
-    if (!box) throw new Error('Container not found')
-    await page.mouse.move(
-      box.x + box.width * (percentage / 100),
-      box.y + box.height / 2
-    )
-  }
-
-  async function waitForImagesLoaded(node: Locator) {
-    await expect
-      .poll(() =>
-        node.evaluate((el) => {
-          const imgs = el.querySelectorAll('img')
-          return (
-            imgs.length > 0 &&
-            Array.from(imgs).every(
-              (img) => img.complete && img.naturalWidth > 0
-            )
-          )
-        })
-      )
-      .toBe(true)
-  }
-
-  async function getClipPathInsetRightPercent(imgLocator: Locator) {
-    return imgLocator.evaluate((el) => {
-      // Accessing raw style avoids cross-browser getComputedStyle normalization issues
-      // Format is uniformly "inset(0 60% 0 0)" per Vue runtime inline style bindings
-      const parts = (el as HTMLElement).style.clipPath.split(' ')
-      return parts.length > 1 ? parseFloat(parts[1]) : -1
-    })
-  }
-
-  // ---------------------------------------------------------------------------
-  // Rendering
-  // ---------------------------------------------------------------------------
-
   test(
     'Shows empty state when no images are set',
     { tag: '@smoke' },
@@ -98,10 +50,6 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
     }
   )
 
-  // ---------------------------------------------------------------------------
-  // Slider defaults
-  // ---------------------------------------------------------------------------
-
   test(
     'Slider defaults to 50% with both images set',
     { tag: ['@smoke', '@screenshot'] },
@@ -123,440 +71,11 @@ test.describe('Image Compare', { tag: '@widget' }, () => {
       await expect(handle).toBeVisible()
 
       expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left),
-        'Slider should default to 50% before screenshot'
+        await handle.evaluate((el) => (el as HTMLElement).style.left)
       ).toBe('50%')
-      await expect
-        .poll(() => getClipPathInsetRightPercent(beforeImg))
-        .toBeCloseTo(50, 0)
+      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
 
-      await waitForImagesLoaded(node)
-      await comfyPage.page.mouse.move(0, 0)
       await expect(node).toHaveScreenshot('image-compare-default-50.png')
     }
   )
-
-  // ---------------------------------------------------------------------------
-  // Slider interaction
-  // ---------------------------------------------------------------------------
-
-  test(
-    'Mouse hover moves slider position',
-    { tag: '@smoke' },
-    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 handle = node.getByRole('presentation')
-      const beforeImg = node.locator('img[alt="Before image"]')
-      const afterImg = node.locator('img[alt="After image"]')
-      await expect(afterImg).toBeVisible()
-
-      // Left edge: sliderPosition ≈ 5 → clip-path inset right ≈ 95%
-      await moveToPercentage(comfyPage.page, afterImg, 5)
-      await expect
-        .poll(() => getClipPathInsetRightPercent(beforeImg))
-        .toBeGreaterThan(90)
-      await expect
-        .poll(() =>
-          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
-        )
-        .toBeLessThan(10)
-
-      // Right edge: sliderPosition ≈ 95 → clip-path inset right ≈ 5%
-      await moveToPercentage(comfyPage.page, afterImg, 95)
-      await expect
-        .poll(() => getClipPathInsetRightPercent(beforeImg))
-        .toBeLessThan(10)
-      await expect
-        .poll(() =>
-          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
-        )
-        .toBeGreaterThan(90)
-    }
-  )
-
-  test('Slider preserves last position when mouse leaves widget', 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 handle = node.getByRole('presentation')
-    const afterImg = node.locator('img[alt="After image"]')
-    await expect(afterImg).toBeVisible()
-
-    await moveToPercentage(comfyPage.page, afterImg, 30)
-    // Wait for Vue to commit the slider update
-    await expect
-      .poll(() =>
-        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
-      )
-      .toBeCloseTo(30, 0)
-    const positionWhileInside = parseFloat(
-      await handle.evaluate((el) => (el as HTMLElement).style.left)
-    )
-
-    await comfyPage.page.mouse.move(0, 0)
-
-    // Position must not reset to default 50%
-    await expect
-      .poll(() =>
-        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
-      )
-      .toBeCloseTo(positionWhileInside, 0)
-  })
-
-  test('Slider clamps to 0% at left edge of container', 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 handle = node.getByRole('presentation')
-    const afterImg = node.locator('img[alt="After image"]')
-    await expect(afterImg).toBeVisible()
-
-    const box = await afterImg.boundingBox()
-    if (!box) throw new Error('Container not found')
-
-    // Move to the leftmost pixel (elementX = 0 → sliderPosition = 0)
-    await comfyPage.page.mouse.move(box.x, box.y + box.height / 2)
-    await expect
-      .poll(() => handle.evaluate((el) => (el as HTMLElement).style.left))
-      .toBe('0%')
-  })
-
-  // ---------------------------------------------------------------------------
-  // Single image modes
-  // ---------------------------------------------------------------------------
-
-  test('Only before image shows without slider when afterImages is empty', async ({
-    comfyPage
-  }) => {
-    const url = createTestImageDataUrl('Before', '#c00')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [url],
-      afterImages: []
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.locator('img')).toHaveCount(1)
-    await expect(node.getByRole('presentation')).toBeHidden()
-  })
-
-  test('Only after image shows without slider when beforeImages is empty', async ({
-    comfyPage
-  }) => {
-    const url = createTestImageDataUrl('After', '#00c')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [],
-      afterImages: [url]
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.locator('img')).toHaveCount(1)
-    await expect(node.getByRole('presentation')).toBeHidden()
-  })
-
-  // ---------------------------------------------------------------------------
-  // Batch navigation
-  // ---------------------------------------------------------------------------
-
-  test(
-    'Batch navigation appears when before side has multiple images',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const url1 = createTestImageDataUrl('A1', '#c00')
-      const url2 = createTestImageDataUrl('A2', '#0c0')
-      const url3 = createTestImageDataUrl('A3', '#00c')
-      const afterUrl = createTestImageDataUrl('B1', '#888')
-      await setImageCompareValue(comfyPage, {
-        beforeImages: [url1, url2, url3],
-        afterImages: [afterUrl]
-      })
-
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const beforeBatch = node.getByTestId('before-batch')
-
-      await expect(node.getByTestId('batch-nav')).toBeVisible()
-      await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('1 / 3')
-      // after-batch renders only when afterBatchCount > 1
-      await expect(node.getByTestId('after-batch')).toBeHidden()
-      await expect(beforeBatch.getByTestId('batch-prev')).toBeDisabled()
-    }
-  )
-
-  test('Batch navigation is hidden when both sides have single images', async ({
-    comfyPage
-  }) => {
-    const url = createTestImageDataUrl('Image', '#c00')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [url],
-      afterImages: [url]
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.getByTestId('batch-nav')).toBeHidden()
-  })
-
-  test(
-    'Navigate forward through before images',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const url1 = createTestImageDataUrl('A1', '#c00')
-      const url2 = createTestImageDataUrl('A2', '#0c0')
-      const url3 = createTestImageDataUrl('A3', '#00c')
-      await setImageCompareValue(comfyPage, {
-        beforeImages: [url1, url2, url3],
-        afterImages: [createTestImageDataUrl('B1', '#888')]
-      })
-
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const beforeBatch = node.getByTestId('before-batch')
-      const counter = beforeBatch.getByTestId('batch-counter')
-      const nextBtn = beforeBatch.getByTestId('batch-next')
-      const prevBtn = beforeBatch.getByTestId('batch-prev')
-
-      await nextBtn.click()
-      await expect(counter).toHaveText('2 / 3')
-      await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
-        'src',
-        url2
-      )
-      await expect(prevBtn).toBeEnabled()
-
-      await nextBtn.click()
-      await expect(counter).toHaveText('3 / 3')
-      await expect(nextBtn).toBeDisabled()
-    }
-  )
-
-  test('Navigate backward through before images', async ({ comfyPage }) => {
-    const url1 = createTestImageDataUrl('A1', '#c00')
-    const url2 = createTestImageDataUrl('A2', '#0c0')
-    const url3 = createTestImageDataUrl('A3', '#00c')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [url1, url2, url3],
-      afterImages: [createTestImageDataUrl('B1', '#888')]
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    const beforeBatch = node.getByTestId('before-batch')
-    const counter = beforeBatch.getByTestId('batch-counter')
-    const nextBtn = beforeBatch.getByTestId('batch-next')
-    const prevBtn = beforeBatch.getByTestId('batch-prev')
-
-    await nextBtn.click()
-    await nextBtn.click()
-    await expect(counter).toHaveText('3 / 3')
-
-    await prevBtn.click()
-    await expect(counter).toHaveText('2 / 3')
-    await expect(prevBtn).toBeEnabled()
-    await expect(nextBtn).toBeEnabled()
-  })
-
-  test('Before and after batch navigation are independent', async ({
-    comfyPage
-  }) => {
-    const url1 = createTestImageDataUrl('A1', '#c00')
-    const url2 = createTestImageDataUrl('A2', '#0c0')
-    const url3 = createTestImageDataUrl('A3', '#00c')
-    const urlA = createTestImageDataUrl('B1', '#880')
-    const urlB = createTestImageDataUrl('B2', '#008')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [url1, url2, url3],
-      afterImages: [urlA, urlB]
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    const beforeBatch = node.getByTestId('before-batch')
-    const afterBatch = node.getByTestId('after-batch')
-
-    await beforeBatch.getByTestId('batch-next').click()
-    await afterBatch.getByTestId('batch-next').click()
-
-    await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('2 / 3')
-    await expect(afterBatch.getByTestId('batch-counter')).toHaveText('2 / 2')
-    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
-      'src',
-      url2
-    )
-    await expect(node.locator('img[alt="After image"]')).toHaveAttribute(
-      'src',
-      urlB
-    )
-  })
-
-  // ---------------------------------------------------------------------------
-  // Visual regression screenshots
-  // ---------------------------------------------------------------------------
-
-  for (const { pct, expectedClipMin, expectedClipMax } of [
-    { pct: 25, expectedClipMin: 70, expectedClipMax: 80 },
-    { pct: 75, expectedClipMin: 20, expectedClipMax: 30 }
-  ]) {
-    test(
-      `Screenshot at ${pct}% slider position`,
-      { tag: '@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 waitForImagesLoaded(node)
-        await moveToPercentage(comfyPage.page, afterImg, pct)
-        await expect
-          .poll(() => getClipPathInsetRightPercent(beforeImg))
-          .toBeGreaterThan(expectedClipMin)
-        await expect
-          .poll(() => getClipPathInsetRightPercent(beforeImg))
-          .toBeLessThan(expectedClipMax)
-
-        await expect(node).toHaveScreenshot(`image-compare-slider-${pct}.png`)
-      }
-    )
-  }
-
-  // ---------------------------------------------------------------------------
-  // Edge cases
-  // ---------------------------------------------------------------------------
-
-  test('Widget remains stable with broken image URLs', async ({
-    comfyPage
-  }) => {
-    await setImageCompareValue(comfyPage, {
-      beforeImages: ['https://example.invalid/broken.png'],
-      afterImages: ['https://example.invalid/broken2.png']
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.locator('img')).toHaveCount(2)
-    await expect(node.getByRole('presentation')).toBeVisible()
-
-    await expect
-      .poll(() =>
-        node.evaluate((el) => {
-          const imgs = el.querySelectorAll('img')
-          let errors = 0
-          imgs.forEach((img) => {
-            if (img.complete && img.naturalWidth === 0 && img.src) errors++
-          })
-          return errors
-        })
-      )
-      .toBe(2)
-  })
-
-  test('Rapid value updates show latest images and reset batch index', async ({
-    comfyPage
-  }) => {
-    const redUrl = createTestImageDataUrl('Red', '#c00')
-    const green1Url = createTestImageDataUrl('G1', '#0c0')
-    const green2Url = createTestImageDataUrl('G2', '#090')
-    const blueUrl = createTestImageDataUrl('Blue', '#00c')
-
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [redUrl, green1Url],
-      afterImages: [blueUrl]
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await node.getByTestId('before-batch').getByTestId('batch-next').click()
-    await expect(
-      node.getByTestId('before-batch').getByTestId('batch-counter')
-    ).toHaveText('2 / 2')
-
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [green1Url, green2Url],
-      afterImages: [blueUrl]
-    })
-
-    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
-      'src',
-      green1Url
-    )
-    await expect(
-      node.getByTestId('before-batch').getByTestId('batch-counter')
-    ).toHaveText('1 / 2')
-  })
-
-  test('Legacy string value shows single image without slider', async ({
-    comfyPage
-  }) => {
-    const url = createTestImageDataUrl('Legacy', '#c00')
-    await comfyPage.page.evaluate(
-      ({ url }) => {
-        const node = window.app!.graph.getNodeById(1)
-        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
-        if (widget) {
-          widget.value = url
-          widget.callback?.(url)
-        }
-      },
-      { url }
-    )
-    await comfyPage.nextFrame()
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.locator('img')).toHaveCount(1)
-    await expect(node.getByRole('presentation')).toBeHidden()
-  })
-
-  test('Custom beforeAlt and afterAlt are used as img alt text', async ({
-    comfyPage
-  }) => {
-    const beforeUrl = createTestImageDataUrl('Before', '#c00')
-    const afterUrl = createTestImageDataUrl('After', '#00c')
-    await setImageCompareValue(comfyPage, {
-      beforeImages: [beforeUrl],
-      afterImages: [afterUrl],
-      beforeAlt: 'Custom before',
-      afterAlt: 'Custom after'
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(node.locator('img[alt="Custom before"]')).toBeVisible()
-    await expect(node.locator('img[alt="Custom after"]')).toBeVisible()
-  })
-
-  test('Large batch sizes show correct counter', async ({ comfyPage }) => {
-    const images = Array.from({ length: 20 }, (_, i) =>
-      createTestImageDataUrl(String(i + 1), '#c00')
-    )
-    await setImageCompareValue(comfyPage, {
-      beforeImages: images,
-      afterImages: images
-    })
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await expect(
-      node.getByTestId('before-batch').getByTestId('batch-counter')
-    ).toHaveText('1 / 20')
-    await expect(
-      node.getByTestId('after-batch').getByTestId('batch-counter')
-    ).toHaveText('1 / 20')
-  })
 })

browser_tests/tests/minimap.spec.ts

@@ -1,38 +1,8 @@
 import { expect } from '@playwright/test'
-import type { Locator, Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-function hasCanvasContent(canvas: Locator): Promise<boolean> {
-  return canvas.evaluate((el: HTMLCanvasElement) => {
-    const ctx = el.getContext('2d')
-    if (!ctx) return false
-    const { data } = ctx.getImageData(0, 0, el.width, el.height)
-    for (let i = 3; i < data.length; i += 4) {
-      if (data[i] > 0) return true
-    }
-    return false
-  })
-}
-
-async function clickMinimapAt(
-  overlay: Locator,
-  page: Page,
-  relX: number,
-  relY: number
-) {
-  const box = await overlay.boundingBox()
-  expect(box, 'Minimap interaction overlay not found').toBeTruthy()
-
-  // Click area — avoiding the settings button (top-left, 32×32px)
-  // and close button (top-right, 32×32px)
-  await page.mouse.click(
-    box!.x + box!.width * relX,
-    box!.y + box!.height * relY
-  )
-}
-
 test.describe('Minimap', { tag: '@canvas' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -43,20 +13,14 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap is visible by default', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
 
     await expect(minimapContainer).toBeVisible()
 
-    const minimapCanvas = minimapContainer.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
+    const minimapCanvas = minimapContainer.locator('.minimap-canvas')
     await expect(minimapCanvas).toBeVisible()
 
-    const minimapViewport = minimapContainer.getByTestId(
-      TestIds.canvas.minimapViewport
-    )
+    const minimapViewport = minimapContainer.locator('.minimap-viewport')
     await expect(minimapViewport).toBeVisible()
 
     await expect(minimapContainer).toHaveCSS('position', 'relative')
@@ -76,16 +40,12 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
 
     await expect(toggleButton).toBeVisible()
 
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
     await expect(minimapContainer).toBeVisible()
   })
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
     const toggleButton = comfyPage.page.getByTestId(
       TestIds.canvas.toggleMinimapButton
     )
@@ -100,9 +60,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
 
     await expect(minimapContainer).toBeVisible()
 
@@ -114,7 +72,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Close button hides minimap', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
     await expect(minimap).toBeVisible()
 
     await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
@@ -130,9 +88,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     'Panning canvas moves minimap viewport',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
       await expect(minimap).toBeVisible()
 
       await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
@@ -149,135 +105,14 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     }
   )
 
-  test('Minimap canvas is non-empty for a workflow with nodes', async ({
-    comfyPage
-  }) => {
-    const minimapCanvas = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
-    await expect(minimapCanvas).toBeVisible()
-
-    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(true)
-  })
-
-  test('Minimap canvas is empty after all nodes are deleted', async ({
-    comfyPage
-  }) => {
-    const minimapCanvas = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
-    await expect(minimapCanvas).toBeVisible()
-
-    await comfyPage.keyboard.selectAll()
-    await comfyPage.vueNodes.deleteSelected()
-    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-
-    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(false)
-  })
-
-  test('Clicking minimap corner pans the main canvas', async ({
-    comfyPage
-  }) => {
-    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
-    const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
-    const overlay = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapInteractionOverlay
-    )
-    await expect(minimap).toBeVisible()
-
-    const before = await comfyPage.page.evaluate(() => ({
-      x: window.app!.canvas.ds.offset[0],
-      y: window.app!.canvas.ds.offset[1]
-    }))
-
-    const transformBefore = await viewport.evaluate(
-      (el: HTMLElement) => el.style.transform
-    )
-
-    await clickMinimapAt(overlay, comfyPage.page, 0.15, 0.85)
-
-    await expect
-      .poll(() =>
-        comfyPage.page.evaluate(() => ({
-          x: window.app!.canvas.ds.offset[0],
-          y: window.app!.canvas.ds.offset[1]
-        }))
-      )
-      .not.toStrictEqual(before)
-
-    await expect
-      .poll(() => viewport.evaluate((el: HTMLElement) => el.style.transform))
-      .not.toBe(transformBefore)
-  })
-
-  test('Clicking minimap center after FitView causes minimal canvas movement', async ({
-    comfyPage
-  }) => {
-    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
-    const overlay = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapInteractionOverlay
-    )
-    const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
-    await expect(minimap).toBeVisible()
-
-    await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      canvas.ds.offset[0] -= 1000
-      canvas.setDirty(true, true)
-    })
-    await comfyPage.nextFrame()
-
-    const transformBefore = await viewport.evaluate(
-      (el: HTMLElement) => el.style.transform
-    )
-
-    await comfyPage.page.evaluate(() => {
-      window.app!.canvas.fitViewToSelectionAnimated({ duration: 1 })
-    })
-
-    await expect
-      .poll(() => viewport.evaluate((el: HTMLElement) => el.style.transform), {
-        timeout: 2000
-      })
-      .not.toBe(transformBefore)
-
-    await comfyPage.nextFrame()
-
-    const before = await comfyPage.page.evaluate(() => ({
-      x: window.app!.canvas.ds.offset[0],
-      y: window.app!.canvas.ds.offset[1]
-    }))
-
-    await clickMinimapAt(overlay, comfyPage.page, 0.5, 0.5)
-    await comfyPage.nextFrame()
-
-    const after = await comfyPage.page.evaluate(() => ({
-      x: window.app!.canvas.ds.offset[0],
-      y: window.app!.canvas.ds.offset[1]
-    }))
-
-    // ~3px overlay error × ~15 canvas/minimap scale ≈ 45, rounded up
-    const TOLERANCE = 50
-    expect(
-      Math.abs(after.x - before.x),
-      `offset.x changed by more than ${TOLERANCE} after clicking minimap center post-FitView`
-    ).toBeLessThan(TOLERANCE)
-    expect(
-      Math.abs(after.y - before.y),
-      `offset.y changed by more than ${TOLERANCE} after clicking minimap center post-FitView`
-    ).toBeLessThan(TOLERANCE)
-  })
-
   test(
     'Viewport rectangle is visible and positioned within minimap',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
       await expect(minimap).toBeVisible()
 
-      const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
+      const viewport = minimap.locator('.minimap-viewport')
       await expect(viewport).toBeVisible()
 
       await expect(async () => {

browser_tests/tests/painter.spec.ts

@@ -1,17 +1,9 @@
-import type { UploadImageResponse } from '@comfyorg/ingest-types'
-
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import {
-  drawStroke,
-  hasCanvasContent,
-  triggerSerialization
-} from '@e2e/helpers/painter'
 
-test.describe('Painter', { tag: '@widget' }, () => {
+test.describe('Painter', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => window.app?.graph?.clear())
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
     await comfyPage.vueNodes.waitForNodes()
@@ -28,15 +20,9 @@ test.describe('Painter', { tag: '@widget' }, () => {
       await expect(painterWidget).toBeVisible()
 
       await expect(painterWidget.locator('canvas')).toBeVisible()
-      await expect(
-        painterWidget.getByRole('button', { name: 'Brush' })
-      ).toBeVisible()
-      await expect(
-        painterWidget.getByRole('button', { name: 'Eraser' })
-      ).toBeVisible()
-      await expect(
-        painterWidget.getByTestId('painter-clear-button')
-      ).toBeVisible()
+      await expect(painterWidget.getByText('Brush')).toBeVisible()
+      await expect(painterWidget.getByText('Eraser')).toBeVisible()
+      await expect(painterWidget.getByText('Clear')).toBeVisible()
       await expect(
         painterWidget.locator('input[type="color"]').first()
       ).toBeVisible()
@@ -53,66 +39,22 @@ test.describe('Painter', { tag: '@widget' }, () => {
       const canvas = node.locator('.widget-expands canvas')
       await expect(canvas).toBeVisible()
 
-      expect(await hasCanvasContent(canvas), 'canvas should start empty').toBe(
-        false
-      )
-
-      await drawStroke(comfyPage.page, canvas)
-
       await expect
-        .poll(() => hasCanvasContent(canvas), {
-          message: 'canvas should have content after stroke'
-        })
+        .poll(async () =>
+          canvas.evaluate((el) => {
+            const ctx = (el as HTMLCanvasElement).getContext('2d')
+            if (!ctx) return true
+            const data = ctx.getImageData(
+              0,
+              0,
+              (el as HTMLCanvasElement).width,
+              (el as HTMLCanvasElement).height
+            )
+            return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
+          })
+        )
         .toBe(true)
 
-      await expect(node).toHaveScreenshot('painter-after-stroke.png')
-    }
-  )
-
-  test.describe('Drawing', () => {
-    test(
-      'Eraser removes drawn content',
-      { tag: '@smoke' },
-      async ({ comfyPage }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('1')
-        const painterWidget = node.locator('.widget-expands')
-        const canvas = painterWidget.locator('canvas')
-
-        await drawStroke(comfyPage.page, canvas)
-
-        await expect
-          .poll(() => hasCanvasContent(canvas), {
-            message: 'canvas must have content before erasing'
-          })
-          .toBe(true)
-
-        await painterWidget.getByRole('button', { name: 'Eraser' }).click()
-        await drawStroke(comfyPage.page, canvas)
-
-        await expect
-          .poll(
-            () =>
-              canvas.evaluate((el: HTMLCanvasElement) => {
-                const ctx = el.getContext('2d')
-                if (!ctx) return false
-                const cx = Math.floor(el.width / 2)
-                const cy = Math.floor(el.height / 2)
-                const { data } = ctx.getImageData(cx - 5, cy - 5, 10, 10)
-                return data.every((v, i) => i % 4 !== 3 || v === 0)
-              }),
-            { message: 'erased area should be transparent' }
-          )
-          .toBe(true)
-      }
-    )
-
-    test('Stroke ends cleanly when pointer up fires outside canvas', async ({
-      comfyPage
-    }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-      const canvas = painterWidget.locator('canvas')
       const box = await canvas.boundingBox()
       if (!box) throw new Error('Canvas bounding box not found')
 
@@ -126,250 +68,29 @@ test.describe('Painter', { tag: '@widget' }, () => {
         box.y + box.height * 0.5,
         { steps: 10 }
       )
-      await comfyPage.page.mouse.move(box.x - 20, box.y + box.height * 0.5)
       await comfyPage.page.mouse.up()
-
       await comfyPage.nextFrame()
 
       await expect
-        .poll(() => hasCanvasContent(canvas), {
-          message:
-            'canvas should have content after stroke with pointer up outside'
-        })
+        .poll(async () =>
+          canvas.evaluate((el) => {
+            const ctx = (el as HTMLCanvasElement).getContext('2d')
+            if (!ctx) return false
+            const data = ctx.getImageData(
+              0,
+              0,
+              (el as HTMLCanvasElement).width,
+              (el as HTMLCanvasElement).height
+            )
+            for (let i = 3; i < data.data.length; i += 4) {
+              if (data.data[i] > 0) return true
+            }
+            return false
+          })
+        )
         .toBe(true)
-    })
-  })
 
-  test.describe('Tool selection', () => {
-    test('Tool switching toggles brush-only controls', async ({
-      comfyPage
-    }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-
-      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
-      await expect(
-        painterWidget.getByTestId('painter-hardness-row')
-      ).toBeVisible()
-
-      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
-
-      await expect(
-        painterWidget.getByTestId('painter-color-row'),
-        'color row should be hidden in eraser mode'
-      ).toBeHidden()
-      await expect(
-        painterWidget.getByTestId('painter-hardness-row')
-      ).toBeHidden()
-
-      await painterWidget.getByRole('button', { name: 'Brush' }).click()
-
-      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
-      await expect(
-        painterWidget.getByTestId('painter-hardness-row')
-      ).toBeVisible()
-    })
-  })
-
-  test.describe('Brush settings', () => {
-    test('Size slider updates the displayed value', async ({ comfyPage }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-      const sizeRow = painterWidget.getByTestId('painter-size-row')
-      const sizeSlider = sizeRow.getByRole('slider')
-      const sizeDisplay = sizeRow.getByTestId('painter-size-value')
-
-      await expect(sizeDisplay).toHaveText('20')
-
-      await sizeSlider.focus()
-      for (let i = 0; i < 10; i++) {
-        await sizeSlider.press('ArrowRight')
-      }
-
-      await expect(sizeDisplay).toHaveText('30')
-    })
-
-    test('Opacity input clamps out-of-range values', async ({ comfyPage }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-      const opacityInput = painterWidget
-        .getByTestId('painter-color-row')
-        .locator('input[type="number"]')
-
-      await opacityInput.fill('150')
-      await opacityInput.press('Tab')
-      await expect(opacityInput).toHaveValue('100')
-
-      await opacityInput.fill('-10')
-      await opacityInput.press('Tab')
-      await expect(opacityInput).toHaveValue('0')
-    })
-  })
-
-  test.describe('Canvas size controls', () => {
-    test('Width and height sliders visible without connected input', async ({
-      comfyPage
-    }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-
-      await expect(painterWidget.getByTestId('painter-width-row')).toBeVisible()
-      await expect(
-        painterWidget.getByTestId('painter-height-row')
-      ).toBeVisible()
-
-      await expect(
-        painterWidget.getByTestId('painter-dimension-text')
-      ).toBeHidden()
-    })
-
-    test('Width slider resizes the canvas element', async ({ comfyPage }) => {
-      const painterWidget = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands')
-      const canvas = painterWidget.locator('canvas')
-      const widthSlider = painterWidget
-        .getByTestId('painter-width-row')
-        .getByRole('slider')
-
-      const initialWidth = await canvas.evaluate(
-        (el: HTMLCanvasElement) => el.width
-      )
-      expect(initialWidth, 'canvas should start at default width').toBe(512)
-
-      await widthSlider.focus()
-      await widthSlider.press('ArrowRight')
-
-      await expect
-        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
-        .toBe(576)
-    })
-
-    test(
-      'Resize preserves existing drawing',
-      { tag: ['@smoke', '@screenshot'] },
-      async ({ comfyPage }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('1')
-        const painterWidget = node.locator('.widget-expands')
-        const canvas = painterWidget.locator('canvas')
-        const widthSlider = painterWidget
-          .getByTestId('painter-width-row')
-          .getByRole('slider')
-
-        await drawStroke(comfyPage.page, canvas)
-        await expect
-          .poll(() => hasCanvasContent(canvas), {
-            message: 'canvas must have content before resize'
-          })
-          .toBe(true)
-
-        await widthSlider.focus()
-        await widthSlider.press('ArrowRight')
-
-        await expect
-          .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
-          .toBe(576)
-
-        await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
-        await expect(node).toHaveScreenshot('painter-after-resize.png')
-      }
-    )
-  })
-
-  test.describe('Clear', () => {
-    test(
-      'Clear removes all drawn content',
-      { tag: '@smoke' },
-      async ({ comfyPage }) => {
-        const painterWidget = comfyPage.vueNodes
-          .getNodeLocator('1')
-          .locator('.widget-expands')
-        const canvas = painterWidget.locator('canvas')
-
-        await drawStroke(comfyPage.page, canvas)
-        await expect
-          .poll(() => hasCanvasContent(canvas), {
-            message: 'canvas must have content before clear'
-          })
-          .toBe(true)
-
-        const clearButton = painterWidget.getByTestId('painter-clear-button')
-        await clearButton.dispatchEvent('click')
-
-        await expect
-          .poll(() => hasCanvasContent(canvas), {
-            message: 'canvas should be clear after click'
-          })
-          .toBe(false)
-      }
-    )
-  })
-
-  test.describe('Serialization', () => {
-    test('Drawing triggers upload on serialization', async ({ comfyPage }) => {
-      const mockUploadResponse: UploadImageResponse = {
-        name: 'painter-test.png'
-      }
-      let uploadCount = 0
-
-      await comfyPage.page.route('**/upload/image', async (route) => {
-        uploadCount++
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(mockUploadResponse)
-        })
-      })
-
-      const canvas = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands canvas')
-
-      await drawStroke(comfyPage.page, canvas)
-
-      await triggerSerialization(comfyPage.page)
-
-      expect(uploadCount, 'should upload exactly once').toBe(1)
-    })
-
-    test('Empty canvas does not upload on serialization', async ({
-      comfyPage
-    }) => {
-      let uploadCount = 0
-
-      await comfyPage.page.route('**/upload/image', async (route) => {
-        uploadCount++
-        const mockResponse: UploadImageResponse = { name: 'painter-test.png' }
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(mockResponse)
-        })
-      })
-
-      await triggerSerialization(comfyPage.page)
-
-      expect(uploadCount, 'empty canvas should not upload').toBe(0)
-    })
-
-    test('Upload failure shows error toast', async ({ comfyPage }) => {
-      await comfyPage.page.route('**/upload/image', async (route) => {
-        await route.fulfill({ status: 500 })
-      })
-
-      const canvas = comfyPage.vueNodes
-        .getNodeLocator('1')
-        .locator('.widget-expands canvas')
-
-      await drawStroke(comfyPage.page, canvas)
-
-      await expect(triggerSerialization(comfyPage.page)).rejects.toThrow()
-
-      await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-    })
-  })
+      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+    }
+  )
 })

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

@@ -1,162 +0,0 @@
-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
-          })
-        }
-      )
-    }
-  )
-})

src/components/imagecrop/WidgetImageCrop.vue

@@ -17,12 +17,8 @@
       <div
         v-else-if="!imageUrl"
         class="flex size-full flex-col items-center justify-center text-center"
-        data-testid="crop-empty-state"
       >
-        <i
-          class="mb-2 icon-[lucide--image] size-12"
-          data-testid="crop-empty-icon"
-        />
+        <i class="mb-2 icon-[lucide--image] size-12" />
         <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
       </div>
 
@@ -47,7 +43,6 @@
           )
         "
         :style="cropBoxStyle"
-        data-testid="crop-overlay"
         @pointerdown="handleDragStart"
         @pointermove="handleDragMove"
         @pointerup="handleDragEnd"

src/components/painter/WidgetPainter.vue

@@ -38,7 +38,6 @@
     <div
       v-if="isImageInputConnected"
       class="text-center text-xs text-muted-foreground"
-      data-testid="painter-dimension-text"
     >
       {{ canvasWidth }} x {{ canvasHeight }}
     </div>
@@ -101,7 +100,6 @@
       </div>
       <div
         class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-        data-testid="painter-size-row"
       >
         <Slider
           :model-value="[brushSize]"
@@ -111,12 +109,9 @@
           class="flex-1"
           @update:model-value="(v) => v?.length && (brushSize = v[0])"
         />
-        <span
-          class="text-node-text-muted w-8 text-center text-xs"
-          data-testid="painter-size-value"
-        >
-          {{ brushSize }}
-        </span>
+        <span class="text-node-text-muted w-8 text-center text-xs">{{
+          brushSize
+        }}</span>
       </div>
 
       <template v-if="tool === PAINTER_TOOLS.BRUSH">
@@ -128,7 +123,6 @@
         </div>
         <div
           class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
-          data-testid="painter-color-row"
         >
           <input
             type="color"
@@ -172,7 +166,6 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-          data-testid="painter-hardness-row"
         >
           <Slider
             :model-value="[brushHardnessPercent]"
@@ -199,7 +192,6 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-          data-testid="painter-width-row"
         >
           <Slider
             :model-value="[canvasWidth]"
@@ -222,7 +214,6 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-          data-testid="painter-height-row"
         >
           <Slider
             :model-value="[canvasHeight]"
@@ -264,7 +255,6 @@
       <Button
         variant="secondary"
         size="md"
-        data-testid="painter-clear-button"
         :class="
           cn(
             'gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground',

src/extensions/core/load3d.ts

@@ -295,7 +295,7 @@ useExtensionService().registerExtension({
 
           const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
           if (modelWidget) {
-            modelWidget.value = ''
+            modelWidget.value = 'none'
           }
         })
 

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -75,7 +75,7 @@ class Load3DConfiguration {
       loadFolder,
       cameraState
     )
-    if (modelWidget.value) {
+    if (modelWidget.value && modelWidget.value !== 'none') {
       onModelWidgetUpdate(modelWidget.value)
     }
 
@@ -226,7 +226,10 @@ class Load3DConfiguration {
   ) {
     let isFirstLoad = true
     return async (value: string | number | boolean | object) => {
-      if (!value) return
+      if (!value || value === 'none') {
+        this.load3d.clearModel()
+        return
+      }
 
       const filename = value as string
 

src/renderer/extensions/minimap/MiniMap.vue

@@ -24,7 +24,6 @@
     <div
       ref="containerRef"
       class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface"
-      data-testid="minimap-container"
       :style="containerStyles"
     >
       <Button
@@ -59,18 +58,12 @@
         :width="width"
         :height="height"
         class="minimap-canvas"
-        data-testid="minimap-canvas"
       />
 
-      <div
-        class="minimap-viewport"
-        :style="viewportStyles"
-        data-testid="minimap-viewport"
-      />
+      <div class="minimap-viewport" :style="viewportStyles" />
 
       <div
         class="absolute inset-0 touch-none"
-        data-testid="minimap-interaction-overlay"
         @pointerdown="handlePointerDown"
         @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"