merge main into rh-test

browser_tests/fixtures/ComfyMouse.ts

@@ -10,7 +10,7 @@ import type { Position } from './types'
  * - {@link Mouse.move}
  * - {@link Mouse.up}
  */
-export interface DragOptions {
+interface DragOptions {
   button?: 'left' | 'right' | 'middle'
   clickCount?: number
   steps?: number

browser_tests/fixtures/ComfyPage.ts

@@ -5,13 +5,14 @@ import dotenv from 'dotenv'
 import * as fs from 'fs'
 
 import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
-import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
+import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
@@ -144,6 +145,7 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
+  public readonly vueNodes: VueNodeHelpers
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -172,6 +174,7 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
+    this.vueNodes = new VueNodeHelpers(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -453,6 +456,32 @@ export class ComfyPage {
     await workflowsTab.close()
   }
 
+  /**
+   * Attach a screenshot to the test report.
+   * By default, screenshots are only taken in non-CI environments.
+   * @param name - Name for the screenshot attachment
+   * @param options - Optional configuration
+   * @param options.runInCI - Whether to take screenshot in CI (default: false)
+   * @param options.fullPage - Whether to capture full page (default: false)
+   */
+  async attachScreenshot(
+    name: string,
+    options: { runInCI?: boolean; fullPage?: boolean } = {}
+  ) {
+    const { runInCI = false, fullPage = false } = options
+
+    // Skip in CI unless explicitly requested
+    if (process.env.CI && !runInCI) {
+      return
+    }
+
+    const testInfo = comfyPageFixture.info()
+    await testInfo.attach(name, {
+      body: await this.page.screenshot({ fullPage }),
+      contentType: 'image/png'
+    })
+  }
+
   async resetView() {
     if (await this.resetViewButton.isVisible()) {
       await this.resetViewButton.click()
@@ -1395,7 +1424,7 @@ export class ComfyPage {
   }
 
   async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click()
+    await this.page.locator('.p-dialog-close-button').click({ force: true })
     await expect(this.page.locator('.p-dialog')).toBeHidden()
   }
 
@@ -1614,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
 
     try {
       await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,

browser_tests/fixtures/UserSelectPage.ts

@@ -1,5 +1,5 @@
+import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { Page } from 'playwright'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/VueNodeHelpers.ts

@@ -0,0 +1,117 @@
+/**
+ * Vue Node Test Helpers
+ */
+import type { Locator, Page } from '@playwright/test'
+
+export class VueNodeHelpers {
+  constructor(private page: Page) {}
+
+  /**
+   * Get locator for all Vue node components in the DOM
+   */
+  get nodes(): Locator {
+    return this.page.locator('[data-node-id]')
+  }
+
+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  get selectedNodes(): Locator {
+    return this.page.locator(
+      '[data-node-id].outline-black, [data-node-id].outline-white'
+    )
+  }
+
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
+  /**
+   * Get total count of Vue nodes in the DOM
+   */
+  async getNodeCount(): Promise<number> {
+    return await this.nodes.count()
+  }
+
+  /**
+   * Get count of selected Vue nodes
+   */
+  async getSelectedNodeCount(): Promise<number> {
+    return await this.selectedNodes.count()
+  }
+
+  /**
+   * Get all Vue node IDs currently in the DOM
+   */
+  async getNodeIds(): Promise<string[]> {
+    return await this.nodes.evaluateAll((nodes) =>
+      nodes
+        .map((n) => n.getAttribute('data-node-id'))
+        .filter((id): id is string => id !== null)
+    )
+  }
+
+  /**
+   * Select a specific Vue node by ID
+   */
+  async selectNode(nodeId: string): Promise<void> {
+    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
+  }
+
+  /**
+   * Select multiple Vue nodes by IDs using Ctrl+click
+   */
+  async selectNodes(nodeIds: string[]): Promise<void> {
+    if (nodeIds.length === 0) return
+
+    // Select first node normally
+    await this.selectNode(nodeIds[0])
+
+    // Add additional nodes with Ctrl+click
+    for (let i = 1; i < nodeIds.length; i++) {
+      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
+        modifiers: ['Control']
+      })
+    }
+  }
+
+  /**
+   * Clear all selections by clicking empty space
+   */
+  async clearSelection(): Promise<void> {
+    await this.page.mouse.click(50, 50)
+  }
+
+  /**
+   * Delete selected Vue nodes using Delete key
+   */
+  async deleteSelected(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Delete')
+  }
+
+  /**
+   * Delete selected Vue nodes using Backspace key
+   */
+  async deleteSelectedWithBackspace(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Backspace')
+  }
+
+  /**
+   * Wait for Vue nodes to be rendered
+   */
+  async waitForNodes(expectedCount?: number): Promise<void> {
+    if (expectedCount !== undefined) {
+      await this.page.waitForFunction(
+        (count) => document.querySelectorAll('[data-node-id]').length >= count,
+        expectedCount
+      )
+    } else {
+      await this.page.waitForSelector('[data-node-id]')
+    }
+  }
+}

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}

browser_tests/fixtures/components/SettingDialog.ts

@@ -1,6 +1,6 @@
-import { Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
-import { ComfyPage } from '../ComfyPage'
+import type { ComfyPage } from '../ComfyPage'
 
 export class SettingDialog {
   constructor(

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 class SidebarTab {
   constructor(

browser_tests/fixtures/components/Topbar.ts

@@ -1,7 +1,14 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 export class Topbar {
-  constructor(public readonly page: Page) {}
+  private readonly menuLocator: Locator
+  private readonly menuTrigger: Locator
+
+  constructor(public readonly page: Page) {
+    this.menuLocator = page.locator('.comfy-command-menu')
+    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
+  }
 
   async getTabNames(): Promise<string[]> {
     return await this.page
@@ -15,10 +22,33 @@ export class Topbar {
       .innerText()
   }
 
-  getMenuItem(itemLabel: string): Locator {
+  /**
+   * Get a menu item by its label, optionally within a specific parent container
+   */
+  getMenuItem(itemLabel: string, parent?: Locator): Locator {
+    if (parent) {
+      return parent.locator(`.p-tieredmenu-item:has-text("${itemLabel}")`)
+    }
+
     return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
   }
 
+  /**
+   * Get the visible submenu (last visible submenu in case of nested menus)
+   */
+  getVisibleSubmenu(): Locator {
+    return this.page.locator('.p-tieredmenu-submenu:visible').last()
+  }
+
+  /**
+   * Check if a menu item has an active checkmark
+   */
+  async isMenuItemActive(menuItem: Locator): Promise<boolean> {
+    const checkmark = menuItem.locator('.pi-check')
+    const classes = await checkmark.getAttribute('class')
+    return classes ? !classes.includes('invisible') : false
+  }
+
   getWorkflowTab(tabName: string): Locator {
     return this.page
       .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
@@ -66,10 +96,50 @@ export class Topbar {
 
   async openTopbarMenu() {
     await this.page.waitForTimeout(1000)
-    await this.page.locator('.comfyui-logo-wrapper').click()
-    const menu = this.page.locator('.comfy-command-menu')
-    await menu.waitFor({ state: 'visible' })
-    return menu
+    await this.menuTrigger.click()
+    await this.menuLocator.waitFor({ state: 'visible' })
+    return this.menuLocator
+  }
+
+  /**
+   * Close the topbar menu by clicking outside
+   */
+  async closeTopbarMenu() {
+    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
+    await expect(this.menuLocator).not.toBeVisible()
+  }
+
+  /**
+   * Navigate to a submenu by hovering over a menu item
+   */
+  async openSubmenu(menuItemLabel: string): Promise<Locator> {
+    const menuItem = this.getMenuItem(menuItemLabel)
+    await menuItem.hover()
+    const submenu = this.getVisibleSubmenu()
+    await submenu.waitFor({ state: 'visible' })
+    return submenu
+  }
+
+  /**
+   * Get theme menu items and interact with theme switching
+   */
+  async getThemeMenuItems() {
+    const themeSubmenu = await this.openSubmenu('Theme')
+    return {
+      submenu: themeSubmenu,
+      darkTheme: this.getMenuItem('Dark (Default)', themeSubmenu),
+      lightTheme: this.getMenuItem('Light', themeSubmenu)
+    }
+  }
+
+  /**
+   * Switch to a specific theme
+   */
+  async switchTheme(theme: 'dark' | 'light') {
+    const { darkTheme, lightTheme } = await this.getThemeMenuItems()
+    const themeItem = theme === 'dark' ? darkTheme : lightTheme
+    const themeLabel = themeItem.locator('.p-menubar-item-label')
+    await themeLabel.click()
   }
 
   async triggerTopbarCommand(path: string[]) {
@@ -79,9 +149,7 @@ export class Topbar {
 
     const menu = await this.openTopbarMenu()
     const tabName = path[0]
-    const topLevelMenuItem = this.page.locator(
-      `.p-menubar-item-label:text-is("${tabName}")`
-    )
+    const topLevelMenuItem = this.getMenuItem(tabName)
     const topLevelMenu = menu
       .locator('.p-tieredmenu-item')
       .filter({ has: topLevelMenuItem })

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
@@ -134,7 +134,7 @@ export class SubgraphSlotReference {
   }
 }
 
-export class NodeSlotReference {
+class NodeSlotReference {
   constructor(
     readonly type: 'input' | 'output',
     readonly index: number,
@@ -201,7 +201,7 @@ export class NodeSlotReference {
   }
 }
 
-export class NodeWidgetReference {
+class NodeWidgetReference {
   constructor(
     readonly index: number,
     readonly node: NodeReference

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,7 +1,7 @@
+import type { Request, Route } from '@playwright/test'
 import _ from 'es-toolkit/compat'
 import fs from 'fs'
 import path from 'path'
-import type { Request, Route } from 'playwright'
 import { v4 as uuidv4 } from 'uuid'
 
 import type {

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}

browser_tests/fixtures/ws.ts

@@ -12,9 +12,10 @@ export const webSocketFixture = base.extend<{
           // so we can look it up to trigger messages
           const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
           window.WebSocket = class extends window.WebSocket {
-            constructor() {
-              // @ts-expect-error
-              super(...arguments)
+            constructor(
+              ...rest: ConstructorParameters<typeof window.WebSocket>
+            ) {
+              super(...rest)
               store[this.url] = this
             }
           }