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).toBeHidden() }) })