test: resolve merge conflict with main — adopt expectScreenshot API

- minimap: restore TestIds instead of class locators, extract
  getMinimapLocators() and getCanvasOffset() helpers
- maskEditor: extract pollMaskPixelCount() and drawStrokeAndExpectPixels()
  to deduplicate repeated draw -> poll pattern
- imageCrop: remove redundant timeout: 5000 on poll assertions

browser_tests/assets/widgets/image_crop_widget.json

@@ -6,7 +6,7 @@
       "id": 1,
       "type": "ImageCropV2",
       "pos": [50, 50],
-      "size": [400, 500],
+      "size": [400, 550],
       "flags": {},
       "order": 0,
       "mode": 0,
@@ -27,14 +27,7 @@
       "properties": {
         "Node name for S&R": "ImageCropV2"
       },
-      "widgets_values": [
-        {
-          "x": 0,
-          "y": 0,
-          "width": 512,
-          "height": 512
-        }
-      ]
+      "widgets_values": [{ "x": 0, "y": 0, "width": 512, "height": 512 }]
     }
   ],
   "links": [],

browser_tests/helpers/painter.ts

@@ -35,6 +35,13 @@ export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
 }
 
 export async function triggerSerialization(page: Page): Promise<void> {
+  await page.waitForFunction(() => {
+    const graph = window.graph as TestGraphAccess | undefined
+    const node = graph?._nodes_by_id?.['1']
+    const widget = node?.widgets?.find((w) => w.name === 'mask')
+    return typeof widget?.serializeValue === 'function'
+  })
+
   await page.evaluate(async () => {
     const graph = window.graph as TestGraphAccess | undefined
     if (!graph) {
@@ -50,17 +57,22 @@ export async function triggerSerialization(page: Page): Promise<void> {
       )
     }
 
-    const widget = node.widgets?.find((w) => w.name === 'mask')
-    if (!widget) {
+    const widgetIndex = node.widgets?.findIndex((w) => w.name === 'mask') ?? -1
+    if (widgetIndex === -1) {
       throw new Error('Widget "mask" not found on target node 1.')
     }
 
+    const widget = node.widgets?.[widgetIndex]
+    if (!widget) {
+      throw new Error(`Widget index ${widgetIndex} 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)
+    await widget.serializeValue(node, widgetIndex)
   })
 }

browser_tests/tests/imageCrop.spec.ts

@@ -0,0 +1,122 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Image Crop', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    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(node.getByText('No input image connected')).toBeVisible()
+      await expect(node.locator('img[alt="Crop preview"]')).toHaveCount(0)
+    }
+  )
+
+  test(
+    'Renders bounding box coordinate inputs',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('X')).toBeVisible()
+      await expect(node.getByText('Y')).toBeVisible()
+      await expect(node.getByText('Width')).toBeVisible()
+      await expect(node.getByText('Height')).toBeVisible()
+    }
+  )
+
+  test(
+    'Renders ratio selector and lock button',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('Ratio')).toBeVisible()
+      await expect(node.getByRole('button', { name: /lock/i })).toBeVisible()
+    }
+  )
+
+  test(
+    'Lock button toggles aspect ratio lock',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const lockButton = node.getByRole('button', {
+        name: 'Lock aspect ratio'
+      })
+      await expect(lockButton).toBeVisible()
+
+      await lockButton.click()
+      await expect(
+        node.getByRole('button', { name: 'Unlock aspect ratio' })
+      ).toBeVisible()
+
+      await node.getByRole('button', { name: 'Unlock aspect ratio' }).click()
+      await expect(
+        node.getByRole('button', { name: 'Lock aspect ratio' })
+      ).toBeVisible()
+    }
+  )
+
+  test(
+    'Ratio selector offers expected presets',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const trigger = node.getByRole('combobox')
+      await trigger.click()
+
+      const expectedRatios = ['1:1', '3:4', '4:3', '16:9', '9:16', 'Custom']
+      for (const label of expectedRatios) {
+        await expect(
+          comfyPage.page.getByRole('option', { name: label, exact: true })
+        ).toBeVisible()
+      }
+    }
+  )
+
+  test(
+    'Programmatically setting widget value updates bounding box inputs',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const newBounds = { x: 50, y: 100, width: 200, height: 300 }
+
+      await comfyPage.page.evaluate(
+        ({ bounds }) => {
+          const node = window.app!.graph.getNodeById(1)
+          const widget = node?.widgets?.find((w) => w.type === 'imagecrop')
+          if (widget) {
+            widget.value = bounds
+            widget.callback?.(bounds)
+          }
+        },
+        { bounds: newBounds }
+      )
+      await comfyPage.nextFrame()
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const inputs = node.locator('input[inputmode="decimal"]')
+
+      await expect.poll(() => inputs.nth(0).inputValue()).toBe('50')
+
+      await expect.poll(() => inputs.nth(1).inputValue()).toBe('100')
+
+      await expect.poll(() => inputs.nth(2).inputValue()).toBe('200')
+
+      await expect.poll(() => inputs.nth(3).inputValue()).toBe('300')
+    }
+  )
+})

browser_tests/tests/maskEditor.spec.ts

@@ -1,3 +1,4 @@
+import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
@@ -27,6 +28,85 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     }
   }
 
+  async function openMaskEditorDialog(comfyPage: ComfyPage) {
+    const { imagePreview } = await loadImageOnNode(comfyPage)
+
+    await imagePreview.getByRole('region').hover()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    const dialog = comfyPage.page.locator('.mask-editor-dialog')
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('heading', { name: 'Mask Editor' })
+    ).toBeVisible()
+
+    const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
+    await expect(canvasContainer).toBeVisible()
+    await expect(canvasContainer.locator('canvas')).toHaveCount(4)
+
+    return dialog
+  }
+
+  async function getMaskCanvasPixelData(page: Page) {
+    return page.evaluate(() => {
+      const canvases = document.querySelectorAll(
+        '#maskEditorCanvasContainer canvas'
+      )
+      // The mask canvas is the 3rd canvas (index 2, z-30)
+      const maskCanvas = canvases[2] as HTMLCanvasElement
+      if (!maskCanvas) return null
+      const ctx = maskCanvas.getContext('2d')
+      if (!ctx) return null
+      const data = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+      let nonTransparentPixels = 0
+      for (let i = 3; i < data.data.length; i += 4) {
+        if (data.data[i] > 0) nonTransparentPixels++
+      }
+      return { nonTransparentPixels, totalPixels: data.data.length / 4 }
+    })
+  }
+
+  function pollMaskPixelCount(page: Page): Promise<number> {
+    return getMaskCanvasPixelData(page).then(
+      (d) => d?.nonTransparentPixels ?? 0
+    )
+  }
+
+  async function drawStrokeOnPointerZone(
+    page: Page,
+    dialog: ReturnType<typeof page.locator>
+  ) {
+    const pointerZone = dialog.locator(
+      '.maskEditor-ui-container [class*="w-[calc"]'
+    )
+    await expect(pointerZone).toBeVisible()
+
+    const box = await pointerZone.boundingBox()
+    if (!box) throw new Error('Pointer zone bounding box not found')
+
+    const startX = box.x + box.width * 0.3
+    const startY = box.y + box.height * 0.5
+    const endX = box.x + box.width * 0.7
+    const endY = box.y + box.height * 0.5
+
+    await page.mouse.move(startX, startY)
+    await page.mouse.down()
+    await page.mouse.move(endX, endY, { steps: 10 })
+    await page.mouse.up()
+
+    return { startX, startY, endX, endY, box }
+  }
+
+  async function drawStrokeAndExpectPixels(
+    comfyPage: ComfyPage,
+    dialog: ReturnType<typeof comfyPage.page.locator>
+  ) {
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(0)
+  }
+
   test(
     'opens mask editor from image preview button',
     { tag: ['@smoke', '@screenshot'] },
@@ -52,7 +132,7 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
       await expect(dialog.getByText('Save')).toBeVisible()
       await expect(dialog.getByText('Cancel')).toBeVisible()
 
-      await expect(dialog).toHaveScreenshot('mask-editor-dialog-open.png')
+      await comfyPage.expectScreenshot(dialog, 'mask-editor-dialog-open.png')
     }
   )
 
@@ -79,9 +159,245 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
         dialog.getByRole('heading', { name: 'Mask Editor' })
       ).toBeVisible()
 
-      await expect(dialog).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        dialog,
         'mask-editor-dialog-from-context-menu.png'
       )
     }
   )
+
+  test('draws a brush stroke on the mask canvas', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    expect(dataBefore!.nonTransparentPixels).toBe(0)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+  })
+
+  test('undo reverts a brush stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await expect(undoButton).toBeVisible()
+    await undoButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test('redo restores an undone stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await undoButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+
+    const redoButton = dialog.locator('button[title="Redo"]')
+    await expect(redoButton).toBeVisible()
+    await redoButton.click()
+
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(0)
+  })
+
+  test('clear button removes all mask content', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await clearButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test('cancel closes the dialog without saving', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await cancelButton.click()
+
+    await expect(dialog).toBeHidden()
+  })
+
+  test('invert button inverts the mask', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    const pixelsBefore = dataBefore!.nonTransparentPixels
+
+    const invertButton = dialog.getByRole('button', { name: 'Invert' })
+    await expect(invertButton).toBeVisible()
+    await invertButton.click()
+
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(pixelsBefore)
+  })
+
+  test('keyboard shortcut Ctrl+Z triggers undo', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const modifier = process.platform === 'darwin' ? 'Meta+z' : 'Control+z'
+    await comfyPage.page.keyboard.press(modifier)
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test(
+    'tool panel shows all five tools',
+    { tag: ['@smoke'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      const toolPanel = dialog.locator('.maskEditor-ui-container')
+      await expect(toolPanel).toBeVisible()
+
+      // The tool panel should contain exactly 5 tool entries
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await expect(toolEntries).toHaveCount(5)
+
+      // First tool (MaskPen) should be selected by default
+      const selectedTool = dialog.locator(
+        '.maskEditor_toolPanelContainerSelected'
+      )
+      await expect(selectedTool).toHaveCount(1)
+    }
+  )
+
+  test('switching tools updates the selected indicator', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+    await expect(toolEntries).toHaveCount(5)
+
+    // Click the third tool (Eraser, index 2)
+    await toolEntries.nth(2).click()
+
+    // The third tool should now be selected
+    const selectedTool = dialog.locator(
+      '.maskEditor_toolPanelContainerSelected'
+    )
+    await expect(selectedTool).toHaveCount(1)
+
+    // Verify it's the eraser (3rd entry)
+    await expect(toolEntries.nth(2)).toHaveClass(/Selected/)
+  })
+
+  test('brush settings panel is visible with thickness controls', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // The side panel should show brush settings by default
+    const thicknessLabel = dialog.getByText('Thickness')
+    await expect(thicknessLabel).toBeVisible()
+
+    const opacityLabel = dialog.getByText('Opacity').first()
+    await expect(opacityLabel).toBeVisible()
+
+    const hardnessLabel = dialog.getByText('Hardness')
+    await expect(hardnessLabel).toBeVisible()
+  })
+
+  test('save uploads all layers and closes dialog', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    let maskUploadCount = 0
+    let imageUploadCount = 0
+
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-mask-${maskUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+    await comfyPage.page.route('**/upload/image', (route) => {
+      imageUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-image-${imageUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await expect(saveButton).toBeVisible()
+    await saveButton.click()
+
+    await expect(dialog).toBeHidden()
+
+    // The save pipeline uploads multiple layers (mask + image variants)
+    expect(
+      maskUploadCount + imageUploadCount,
+      'save should trigger upload calls'
+    ).toBeGreaterThan(0)
+  })
+
+  test('save failure keeps dialog open', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // Fail all upload routes
+    await comfyPage.page.route('**/upload/mask', (route) =>
+      route.fulfill({ status: 500 })
+    )
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill({ status: 500 })
+    )
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.click()
+
+    // Dialog should remain open when save fails
+    await expect(dialog).toBeVisible()
+  })
+
+  test(
+    'eraser tool removes mask content',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      // Draw a stroke with the mask pen (default tool)
+      await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+      const pixelsAfterDraw = await getMaskCanvasPixelData(comfyPage.page)
+
+      // Switch to eraser tool (3rd tool, index 2)
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await toolEntries.nth(2).click()
+
+      // Draw over the same area with the eraser
+      await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+      await expect
+        .poll(() => pollMaskPixelCount(comfyPage.page))
+        .toBeLessThan(pixelsAfterDraw!.nonTransparentPixels)
+    }
+  )
 })

browser_tests/tests/minimap.spec.ts

@@ -1,6 +1,7 @@
-import { expect } from '@playwright/test'
 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'
 import { TestIds } from '@e2e/fixtures/selectors'
 
@@ -16,21 +17,24 @@ function hasCanvasContent(canvas: Locator): Promise<boolean> {
   })
 }
 
-async function clickMinimapAt(
-  overlay: Locator,
-  page: Page,
-  relX: number,
-  relY: number
-) {
-  const box = await overlay.boundingBox()
-  expect(box, 'Minimap interaction overlay not found').toBeTruthy()
+function getMinimapLocators(comfyPage: ComfyPage) {
+  const container = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+  return {
+    container,
+    canvas: comfyPage.page.getByTestId(TestIds.canvas.minimapCanvas),
+    viewport: comfyPage.page.getByTestId(TestIds.canvas.minimapViewport),
+    toggleButton: comfyPage.page.getByTestId(
+      TestIds.canvas.toggleMinimapButton
+    ),
+    closeButton: comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton)
+  }
+}
 
-  // 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
-  )
+function getCanvasOffset(page: Page): Promise<[number, number]> {
+  return page.evaluate(() => {
+    const ds = window.app!.canvas.ds
+    return [ds.offset[0], ds.offset[1]] as [number, number]
+  })
 }
 
 test.describe('Minimap', { tag: '@canvas' }, () => {
@@ -42,23 +46,13 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap is visible by default', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const { container, canvas, viewport } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
+    await expect(canvas).toBeVisible()
+    await expect(viewport).toBeVisible()
 
-    const minimapCanvas = minimapContainer.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
-    await expect(minimapCanvas).toBeVisible()
-
-    const minimapViewport = minimapContainer.getByTestId(
-      TestIds.canvas.minimapViewport
-    )
-    await expect(minimapViewport).toBeVisible()
-
-    await expect(minimapContainer).toHaveCSS('position', 'relative')
+    await expect(container).toHaveCSS('position', 'relative')
 
     // position and z-index validation moved to the parent container of the minimap
     const minimapMainContainer = comfyPage.page.locator(
@@ -69,59 +63,53 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap toggle button state', async ({ comfyPage }) => {
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
+    const { container, toggleButton } = getMinimapLocators(comfyPage)
 
     await expect(toggleButton).toBeVisible()
-
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
   })
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
+    const { container, toggleButton } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
 
     await toggleButton.click()
-    await expect(minimapContainer).toBeHidden()
+    await comfyPage.nextFrame()
+
+    await expect(container).toBeHidden()
 
     await toggleButton.click()
-    await expect(minimapContainer).toBeVisible()
+    await comfyPage.nextFrame()
+
+    await expect(container).toBeVisible()
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const { container } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
-    await expect(minimapContainer).toBeHidden()
+    await comfyPage.nextFrame()
+
+    await expect(container).toBeHidden()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
-    await expect(minimapContainer).toBeVisible()
+    await comfyPage.nextFrame()
+
+    await expect(container).toBeVisible()
   })
 
   test('Close button hides minimap', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
-    await expect(minimap).toBeVisible()
+    const { container, toggleButton, closeButton } =
+      getMinimapLocators(comfyPage)
 
-    await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
-    await expect(minimap).toBeHidden()
+    await expect(container).toBeVisible()
+
+    await closeButton.click()
+    await expect(container).toBeHidden()
 
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
     await expect(toggleButton).toBeVisible()
   })
 
@@ -129,12 +117,10 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     'Panning canvas moves minimap viewport',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
-      await expect(minimap).toBeVisible()
+      const { container } = getMinimapLocators(comfyPage)
+      await expect(container).toBeVisible()
 
-      await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
+      await comfyPage.expectScreenshot(container, 'minimap-before-pan.png')
 
       await comfyPage.page.evaluate(() => {
         const canvas = window.app!.canvas
@@ -143,155 +129,192 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
         canvas.ds.offset[1] = -600
         canvas.setDirty(true, true)
       })
-      await comfyPage.expectScreenshot(minimap, 'minimap-after-pan.png')
+      await comfyPage.expectScreenshot(container, 'minimap-after-pan.png')
     }
   )
 
-  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
-      )
-      await expect(minimap).toBeVisible()
-
-      const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
+      const { container, viewport } = getMinimapLocators(comfyPage)
+      await expect(container).toBeVisible()
       await expect(viewport).toBeVisible()
 
-      await expect(async () => {
-        const vb = await viewport.boundingBox()
-        const mb = await minimap.boundingBox()
-        expect(vb).toBeTruthy()
-        expect(mb).toBeTruthy()
-        expect(vb!.width).toBeGreaterThan(0)
-        expect(vb!.height).toBeGreaterThan(0)
-        expect(vb!.x).toBeGreaterThanOrEqual(mb!.x)
-        expect(vb!.y).toBeGreaterThanOrEqual(mb!.y)
-        expect(vb!.x + vb!.width).toBeLessThanOrEqual(mb!.x + mb!.width)
-        expect(vb!.y + vb!.height).toBeLessThanOrEqual(mb!.y + mb!.height)
-      }).toPass({ timeout: 5000 })
+      const minimapBox = await container.boundingBox()
+      const viewportBox = await viewport.boundingBox()
 
-      await expect(minimap).toHaveScreenshot('minimap-with-viewport.png')
+      expect(minimapBox).toBeTruthy()
+      expect(viewportBox).toBeTruthy()
+      expect(viewportBox!.width).toBeGreaterThan(0)
+      expect(viewportBox!.height).toBeGreaterThan(0)
+
+      expect(viewportBox!.x + viewportBox!.width).toBeGreaterThan(minimapBox!.x)
+      expect(viewportBox!.y + viewportBox!.height).toBeGreaterThan(
+        minimapBox!.y
+      )
+      expect(viewportBox!.x).toBeLessThan(minimapBox!.x + minimapBox!.width)
+      expect(viewportBox!.y).toBeLessThan(minimapBox!.y + minimapBox!.height)
+
+      await comfyPage.expectScreenshot(container, 'minimap-with-viewport.png')
     }
   )
+
+  test('Clicking on minimap pans the canvas to that position', async ({
+    comfyPage
+  }) => {
+    const { container } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+
+    const offsetBefore = await getCanvasOffset(comfyPage.page)
+
+    const minimapBox = await container.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    // Click the top-left quadrant — canvas should pan so that region
+    // becomes centered, meaning offset increases (moves right/down)
+    await comfyPage.page.mouse.click(
+      minimapBox!.x + minimapBox!.width * 0.2,
+      minimapBox!.y + minimapBox!.height * 0.2
+    )
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => getCanvasOffset(comfyPage.page))
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Dragging on minimap continuously pans the canvas', async ({
+    comfyPage
+  }) => {
+    const { container } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+
+    const minimapBox = await container.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    const startX = minimapBox!.x + minimapBox!.width * 0.3
+    const startY = minimapBox!.y + minimapBox!.height * 0.3
+    const endX = minimapBox!.x + minimapBox!.width * 0.7
+    const endY = minimapBox!.y + minimapBox!.height * 0.7
+
+    const offsetBefore = await getCanvasOffset(comfyPage.page)
+
+    // Drag from top-left toward bottom-right on the minimap
+    await comfyPage.page.mouse.move(startX, startY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(endX, endY, { steps: 10 })
+
+    // Mid-drag: offset should already differ from initial state
+    const offsetMidDrag = await getCanvasOffset(comfyPage.page)
+    expect(
+      offsetMidDrag[0] !== offsetBefore[0] ||
+        offsetMidDrag[1] !== offsetBefore[1]
+    ).toBe(true)
+
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    // Final offset should also differ (drag was not discarded on mouseup)
+    await expect
+      .poll(() => getCanvasOffset(comfyPage.page))
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Minimap viewport updates when canvas is zoomed', async ({
+    comfyPage
+  }) => {
+    const { container, viewport } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+    await expect(viewport).toBeVisible()
+
+    const viewportBefore = await viewport.boundingBox()
+    expect(viewportBefore).toBeTruthy()
+
+    // Zoom in significantly
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.scale = 3
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    // Viewport rectangle should shrink when zoomed in
+    await expect
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        return box?.width ?? 0
+      })
+      .toBeLessThan(viewportBefore!.width)
+  })
+
+  test('Minimap canvas is empty after all nodes are deleted', async ({
+    comfyPage
+  }) => {
+    const { canvas } = getMinimapLocators(comfyPage)
+    await expect(canvas).toBeVisible()
+
+    // Minimap should have content before deletion
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    // Remove all nodes
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('Delete')
+    await comfyPage.nextFrame()
+
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Minimap canvas should be empty — no nodes means nothing to render
+    await expect
+      .poll(() => hasCanvasContent(canvas), { timeout: 5000 })
+      .toBe(false)
+  })
+
+  test('Minimap re-renders after loading a different workflow', async ({
+    comfyPage
+  }) => {
+    const { canvas } = getMinimapLocators(comfyPage)
+    await expect(canvas).toBeVisible()
+
+    // Default workflow has content
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    // Load a very different workflow
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+    await comfyPage.nextFrame()
+
+    // Minimap should still have content (different workflow, still has nodes)
+    await expect
+      .poll(() => hasCanvasContent(canvas), { timeout: 5000 })
+      .toBe(true)
+  })
+
+  test('Minimap viewport position reflects canvas pan state', async ({
+    comfyPage
+  }) => {
+    const { container, viewport } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+    await expect(viewport).toBeVisible()
+
+    const positionBefore = await viewport.boundingBox()
+    expect(positionBefore).toBeTruthy()
+
+    // Pan the canvas by a large amount to the right and down
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.offset[0] -= 500
+      canvas.ds.offset[1] -= 500
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    // The viewport indicator should have moved within the minimap
+    await expect
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        if (!box || !positionBefore) return false
+        return box.x !== positionBefore.x || box.y !== positionBefore.y
+      })
+      .toBe(true)
+  })
 })

browser_tests/tests/painter.spec.ts

@@ -370,4 +370,64 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
     })
   })
+
+  test.describe('Eraser', () => {
+    test('Eraser removes previously drawn content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      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('Eraser on empty canvas adds no content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(false)
+    })
+  })
+
+  test('Multiple strokes accumulate on the canvas', async ({ comfyPage }) => {
+    const canvas = comfyPage.vueNodes
+      .getNodeLocator('1')
+      .locator('.widget-expands canvas')
+    await expect(canvas).toBeVisible()
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.3 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.7 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+  })
 })