ComfyUI_frontend/browser_tests/interaction.spec.ts

import { expect } from '@playwright/test';
import { ComfyPage, comfyPageFixture as test } from './ComfyPage';

test.describe('Node Interaction', () => {
  test('Can enter prompt', async ({ comfyPage }) => {
    const textBox = comfyPage.widgetTextBox;
    await textBox.click();
    await textBox.fill('Hello World');
    await expect(textBox).toHaveValue('Hello World');
    await textBox.fill('Hello World 2');
    await expect(textBox).toHaveValue('Hello World 2');
  });

  test('Can highlight selected', async ({ comfyPage }) => {
    await expect(comfyPage.canvas).toHaveScreenshot('default.png');
    await comfyPage.clickTextEncodeNode1();
    await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png');
    await comfyPage.clickTextEncodeNode2();
    await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png');
  });

  // Flaky. See https://github.com/comfyanonymous/ComfyUI/issues/3866
  test.skip('Can drag node', async ({ comfyPage }) => {
    await comfyPage.dragNode2();
    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png');
  });

  test('Can disconnect/connect edge', async ({ comfyPage }) => {
    await comfyPage.disconnectEdge();
    await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge-with-menu.png');
    await comfyPage.connectEdge();
    // Litegraph renders edge with a slight offset.
    await expect(comfyPage.canvas).toHaveScreenshot('default.png', { maxDiffPixels: 50 });
  });

  test('Can adjust widget value', async ({ comfyPage }) => {
    await comfyPage.adjustWidgetValue();
    await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png');
  });

  test('Link snap to slot', async ({comfyPage}) => {
    await comfyPage.loadWorkflow("snap_to_slot");
    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png');

    const outputSlotPos = {
      x: 406,
      y: 333
    };
    const samplerNodeCenterPos = {
      x: 748,
      y: 77
    };
    await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos);

    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png');
  });
});

test.describe('Canvas Interaction', () => {
  test('Can zoom in/out', async ({ comfyPage }) => {
    await comfyPage.zoom(-100);
    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in.png');
    await comfyPage.zoom(200);
    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out.png');
  });

  test('Can pan', async ({ comfyPage }) => {
    await comfyPage.pan({ x: 200, y: 200 });
    await expect(comfyPage.canvas).toHaveScreenshot('panned.png');
  });
});