Add resize test for dropzone & textarea widgets

Extract reusable addNode function

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,6 +33,16 @@ export class NodeOperationsHelper {
     })
   }
 
+  /** Add a node to the graph by type and return its string ID. */
+  async addNode(nodeType: string): Promise<string> {
+    return this.page.evaluate((type) => {
+      const node = window.app!.graph.add(
+        window.LiteGraph!.createNode(type, undefined, {})
+      )
+      return String(node!.id)
+    }, nodeType)
+  }
+
   /** Reads from `window.app.graph` (the root workflow graph). */
   async getNodeCount(): Promise<number> {
     return await this.page.evaluate(() => window.app!.graph.nodes.length)

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -1,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -48,16 +46,6 @@ function isClippedByAnyAncestor(el: Element): boolean {
   return false
 }
 
-/** Add a node to the graph by type and return its ID. */
-async function addNode(page: Page, nodeType: string): Promise<string> {
-  return page.evaluate((type) => {
-    const node = window.app!.graph.add(
-      window.LiteGraph!.createNode(type, undefined, {})
-    )
-    return String(node!.id)
-  }, nodeType)
-}
-
 test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
@@ -72,7 +60,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
   test('Select dropdown is not clipped in app mode panel', async ({
     comfyPage
   }) => {
-    const saveVideoId = await addNode(comfyPage.page, 'SaveVideo')
+    const saveVideoId = await comfyPage.nodeOps.addNode('SaveVideo')
     await comfyPage.nextFrame()
 
     const inputs: [string, string][] = [
@@ -116,7 +104,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
   test('FormDropdown popup is not clipped in app mode panel', async ({
     comfyPage
   }) => {
-    const loadImageId = await addNode(comfyPage.page, 'LoadImage')
+    const loadImageId = await comfyPage.nodeOps.addNode('LoadImage')
     await comfyPage.nextFrame()
 
     const inputs: [string, string][] = [

browser_tests/tests/appModeWidgetResize.spec.ts

@@ -0,0 +1,79 @@
+import type { Locator, Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+/** Drag the bottom-right resize handle of an element to resize it vertically. */
+async function dragResizeHandle(page: Page, element: Locator, deltaY: number) {
+  const box = await element.boundingBox()
+  if (!box) throw new Error('Element not visible for resize')
+
+  const handleX = box.x + box.width - 3
+  const handleY = box.y + box.height - 3
+
+  await page.mouse.move(handleX, handleY)
+  await page.mouse.down()
+  await page.mouse.move(handleX, handleY + deltaY, { steps: 5 })
+  await page.mouse.up()
+}
+
+test.describe('App mode widget resize', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Drop zone is vertically resizable in app mode', async ({
+    comfyPage
+  }) => {
+    const loadImageId = await comfyPage.nodeOps.addNode('LoadImage')
+    await comfyPage.nextFrame()
+
+    await comfyPage.appMode.enterAppModeWithInputs([[loadImageId, 'image']])
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    const dropZone = comfyPage.appMode.linearWidgets.locator(
+      '[data-slot="drop-zone-indicator"]'
+    )
+    await expect(dropZone).toBeVisible()
+
+    const initialBox = await dropZone.boundingBox()
+    expect(initialBox).toBeTruthy()
+
+    await dragResizeHandle(comfyPage.page, dropZone, 100)
+
+    await expect
+      .poll(async () => (await dropZone.boundingBox())?.height)
+      .toBeGreaterThan(initialBox!.height)
+  })
+
+  test('Textarea is vertically resizable in app mode', async ({
+    comfyPage
+  }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([['6', 'text']])
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    const textarea = comfyPage.appMode.linearWidgets.locator('textarea').first()
+    await expect(textarea).toBeVisible()
+
+    const initialBox = await textarea.boundingBox()
+    expect(initialBox).toBeTruthy()
+
+    await dragResizeHandle(comfyPage.page, textarea, 100)
+
+    await expect
+      .poll(async () => (await textarea.boundingBox())?.height)
+      .toBeGreaterThan(initialBox!.height)
+  })
+})

browser_tests/tests/widgetCopyButton.spec.ts

@@ -9,11 +9,7 @@ test.describe('Widget copy button', { tag: '@ui' }, () => {
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
 
-    // Add a PreviewAny node which has a read-only textarea with a copy button
-    await comfyPage.page.evaluate(() => {
-      const node = window.LiteGraph!.createNode('PreviewAny')
-      window.app!.graph.add(node)
-    })
+    await comfyPage.nodeOps.addNode('PreviewAny')
 
     await comfyPage.vueNodes.waitForNodes()
   })