ComfyUI_frontend/browser_tests/tests/zoomControls.spec.ts

import { expect } from '@playwright/test'

import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
import { TestIds } from '@e2e/fixtures/selectors'

test.describe('Zoom Controls', { tag: '@canvas' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
    await comfyPage.workflow.loadWorkflow('default')
    await comfyPage.page.waitForFunction(() => window.app && window.app.canvas)
  })

  test('Default zoom is 100% and node has a size', async ({ comfyPage }) => {
    await expect
      .poll(() =>
        comfyPage.page.evaluate(
          () => window.app!.graph.nodes[0]?.size?.[0] ?? 0
        )
      )
      .toBeGreaterThan(0)
    await expect
      .poll(() =>
        comfyPage.page.evaluate(
          () => window.app!.graph.nodes[0]?.size?.[1] ?? 0
        )
      )
      .toBeGreaterThan(0)

    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await expect(zoomButton).toContainText('100%')

    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(1.0, 1)
  })

  test('Zoom to fit reduces percentage', async ({ comfyPage }) => {
    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await zoomButton.click()
    await comfyPage.nextFrame()

    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
    await expect(zoomToFit).toBeVisible()
    await zoomToFit.click()

    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeLessThan(1.0)

    await expect(zoomButton).not.toContainText('100%')
  })

  test('Zoom out reduces percentage', async ({ comfyPage }) => {
    const initialScale = await comfyPage.canvasOps.getScale()

    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await zoomButton.click()
    await comfyPage.nextFrame()

    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
    await zoomOut.click()
    await comfyPage.nextFrame()

    await expect
      .poll(() => comfyPage.canvasOps.getScale())
      .toBeLessThan(initialScale)
  })

  test('Zoom out clamps at 10% minimum', async ({ comfyPage }) => {
    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await zoomButton.click()
    await comfyPage.nextFrame()

    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
    for (let i = 0; i < 30; i++) {
      await zoomOut.click()
    }
    await comfyPage.nextFrame()

    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(0.1, 1)

    await expect(zoomButton).toContainText('10%')
  })

  test('Manual percentage entry allows zoom in and zoom out', async ({
    comfyPage
  }) => {
    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await zoomButton.click()
    await comfyPage.nextFrame()

    const input = comfyPage.page
      .getByTestId(TestIds.canvas.zoomPercentageInput)
      .locator('input')
    await input.fill('100')
    await input.press('Enter')
    await comfyPage.nextFrame()

    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(1.0, 1)

    const zoomIn = comfyPage.page.getByTestId(TestIds.canvas.zoomInAction)
    await zoomIn.click()
    await comfyPage.nextFrame()

    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeGreaterThan(1.0)
    const scaleAfterZoomIn = await comfyPage.canvasOps.getScale()

    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
    await zoomOut.click()
    await comfyPage.nextFrame()

    await expect
      .poll(() => comfyPage.canvasOps.getScale())
      .toBeLessThan(scaleAfterZoomIn)
  })

  test('Clicking zoom button toggles zoom controls visibility', async ({
    comfyPage
  }) => {
    const zoomButton = comfyPage.page.getByTestId(
      TestIds.canvas.zoomControlsButton
    )
    await zoomButton.click()
    await comfyPage.nextFrame()

    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
    await expect(zoomToFit).toBeVisible()

    await zoomButton.click()
    await comfyPage.nextFrame()

    await expect(zoomToFit).not.toBeVisible()
  })
})