Use 'output_node_id' metadata from dropped file

- The file is displayed only on the node it was saved by.
- No longer restricted to specific supported node types

.env_example

@@ -6,11 +6,6 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 # Note: localhost:8188 does not work.
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
-# Allow dev server access from remote IP addresses.
-# If true, the vite dev server will listen on all addresses, including LAN
-# and public addresses.
-VITE_REMOTE_DEV=false
-
 # The target ComfyUI checkout directory to deploy the frontend code to.
 # The dist directory will be copied to {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev
 # Add `--front-end-root {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev`

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -50,12 +50,6 @@ body:
       description: 'Please copy the output from your browser logs here. You can access this by pressing F12 to toggle the developer tools, then navigating to the Console tab.'
     validations:
       required: true
-  - type: textarea
-    attributes:
-      label: Setting JSON
-      description: 'Please upload the setting file here. The setting file is located at `user/default/comfy.settings.json`'
-    validations:
-      required: true
   - type: dropdown
     id: browsers
     attributes:

.github/workflows/test-browser-exp.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

.github/workflows/test-ui.yaml

@@ -15,7 +15,7 @@ jobs:
   jest-tests:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
     - name: Run Jest tests
       run: |
         npm run test:generate
@@ -26,7 +26,7 @@ jobs:
   playwright-tests-chromium:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
@@ -43,7 +43,7 @@ jobs:
   playwright-tests-chromium-2x:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
@@ -60,7 +60,7 @@ jobs:
   playwright-tests-mobile-chrome:
     runs-on: ubuntu-latest
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

.husky/pre-commit

@@ -1,6 +1 @@
-if [[ "$OS" == "Windows_NT" ]]; then
-  npx.cmd lint-staged
-else
-  npx lint-staged
-fi
-npm run typecheck
+npx lint-staged

README.md

@@ -62,14 +62,6 @@ There will be a 2-day feature freeze before each stable release. During this per
 
 ### Major features
 
-<details>
-  <summary>v1.3.22: Integrated server terminal</summary>
-
-Press Ctrl + ` to toggle integrated terminal.
-
-https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
-</details>
-
 <details>
   <summary>v1.3.7: Keybinding customization</summary>
 
@@ -115,18 +107,6 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
-<details>
-  <summary>v1.3.32: **Litegraph** Nested group</summary>
-
-https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
-</details>
-
-<details>
-  <summary>v1.3.24: **Litegraph** Group selection</summary>
-
-https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
-</details>
-
 <details>
   <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
 
@@ -213,96 +193,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
 </details>
 
-### Developer APIs
-
-<details>
-  <summary>v1.3.34: Register about panel badges</summary>
-
-```js
-app.registerExtension({
-  name: 'TestExtension1',
-  aboutPageBadges: [
-    {
-      label: 'Test Badge',
-      url: 'https://example.com',
-      icon: 'pi pi-box'
-    }
-  ]
-})
-```
-
-![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
-
-</details>
-
-<details>
-  <summary>v1.3.22: Register bottom panel tabs</summary>
-
-```js
-app.registerExtension({
-  name: 'TestExtension',
-  bottomPanelTabs: [
-    {
-      id: 'TestTab',
-      title: 'Test Tab',
-      type: 'custom',
-      render: (el) => {
-        el.innerHTML = '<div>Custom tab</div>'
-      }
-    }
-  ]
-})
-```
-
-![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
-
-</details>
-
-<details>
-  <summary>v1.3.22: New settings API</summary>
-
-Legacy settings API.
-
-```js
-// Register a new setting
-app.ui.settings.addSetting({
-  id: 'TestSetting',
-  name: 'Test Setting',
-  type: 'text',
-  defaultValue: 'Hello, world!'
-})
-
-// Get the value of a setting
-const value = app.ui.settings.getSettingValue('TestSetting')
-
-// Set the value of a setting
-app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
-```
-
-New settings API.
-
-```js
-// Register a new setting
-app.registerExtension({
-  name: 'TestExtension1',
-  settings: [
-    {
-      id: 'TestSetting',
-      name: 'Test Setting',
-      type: 'text',
-      defaultValue: 'Hello, world!'
-    }
-  ]
-})
-
-// Get the value of a setting
-const value = app.extensionManager.setting.get('TestSetting')
-
-// Set the value of a setting
-app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
-```
-
-</details>
+### Node developers API
 
 <details>
   <summary>v1.3.7: Register commands and keybindings</summary>
@@ -407,14 +298,6 @@ We will support custom icons later.
 
 ## Development
 
-### Tech Stack
-
-- [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
-- [Pinia](https://pinia.vuejs.org/) for state management
-- [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
-- [Litegraph](https://github.com/Comfy-Org/litegraph.js) for node editor
-- [zod](https://zod.dev/) for schema validation
-
 ### Git pre-commit hooks
 
 Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
@@ -425,33 +308,11 @@ hook is used to auto-format code on commit.
 Note: The dev server will NOT load any extension from the ComfyUI server. Only
 core extensions will be loaded.
 
+- Run `npm install` to install the necessary packages
 - Start local ComfyUI backend at `localhost:8188`
 - Run `npm run dev` to start the dev server
-- Run `npm run dev:electron` to start the dev server with electron API mocked
 
-#### Access dev server on touch devices
-
-Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
-
-After you start the dev server, you should see following logs:
-
-```
-> comfyui-frontend@1.3.42 dev
-> vite
-
-
-  VITE v5.4.6  ready in 488 ms
-
-  ➜  Local:   http://localhost:5173/
-  ➜  Network: http://172.21.80.1:5173/
-  ➜  Network: http://192.168.2.20:5173/
-  ➜  press h + enter to show help
-```
-
-Make sure your desktop machine and touch device are on the same network. On your touch device,
-navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
-
-### Unit Test
+### Test
 
 - `git clone https://github.com/comfyanonymous/ComfyUI_examples.git` to `tests-ui/ComfyUI_examples` or the EXAMPLE_REPO_PATH location specified in .env
 - `npm i` to install all dependencies
@@ -459,16 +320,6 @@ navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to
 - `npm run test:generate:examples` to extract the example workflows
 - `npm run test` to execute all unit tests.
 
-### Component Test
-
-Component test verifies Vue components in `src/components/`.
-
-- `npm run test:component` to execute all component tests.
-
-### Playwright Test
-
-Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
-
 ### LiteGraph
 
 This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
@@ -476,6 +327,7 @@ This repo is using litegraph package hosted on <https://github.com/Comfy-Org/lit
 ### Test litegraph changes
 
 - Run `npm link` in the local litegraph repo.
+- Run `npm uninstall @comfyorg/litegraph` in this repo.
 - Run `npm link @comfyorg/litegraph` in this repo.
 
 This will replace the litegraph package in this repo with the local litegraph repo.

browser_tests/ComfyPage.ts

@@ -1,23 +1,287 @@
 import type { Page, Locator, APIRequestContext } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { ComfyActionbar } from '../helpers/actionbar'
+import { ComfyActionbar } from './helpers/actionbar'
 import dotenv from 'dotenv'
 dotenv.config()
 import * as fs from 'fs'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
-import type { NodeId } from '../../src/types/comfyWorkflow'
-import type { KeyCombo } from '../../src/types/keyBindingTypes'
-import { ComfyTemplates } from '../helpers/templates'
-import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import {
-  NodeLibrarySidebarTab,
-  WorkflowsSidebarTab
-} from './components/SidebarTab'
-import { Topbar } from './components/Topbar'
-import { NodeReference } from './utils/litegraphUtils'
-import type { Position, Size } from './types'
-import { SettingDialog } from './components/SettingDialog'
+import { NodeBadgeMode } from '../src/types/nodeSource'
+import type { NodeId } from '../src/types/comfyWorkflow'
+import type { KeyCombo } from '../src/types/keyBindingTypes'
+import { ManageGroupNode } from './helpers/manageGroupNode'
+import { ComfyTemplates } from './helpers/templates'
+
+interface Position {
+  x: number
+  y: number
+}
+
+interface Size {
+  width: number
+  height: number
+}
+
+class ComfyNodeSearchFilterSelectionPanel {
+  constructor(public readonly page: Page) {}
+
+  async selectFilterType(filterType: string) {
+    await this.page
+      .locator(
+        `.filter-type-select .p-togglebutton-label:has-text("${filterType}")`
+      )
+      .click()
+  }
+
+  async selectFilterValue(filterValue: string) {
+    await this.page.locator('.filter-value-select .p-select-dropdown').click()
+    await this.page
+      .locator(
+        `.p-select-overlay .p-select-list .p-select-option-label:text-is("${filterValue}")`
+      )
+      .click()
+  }
+
+  async addFilter(filterValue: string, filterType: string) {
+    await this.selectFilterType(filterType)
+    await this.selectFilterValue(filterValue)
+    await this.page.locator('.p-button-label:has-text("Add")').click()
+  }
+}
+
+class ComfyNodeSearchBox {
+  public readonly input: Locator
+  public readonly dropdown: Locator
+  public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel
+
+  constructor(public readonly page: Page) {
+    this.input = page.locator(
+      '.comfy-vue-node-search-container input[type="text"]'
+    )
+    this.dropdown = page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-list'
+    )
+    this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
+  }
+
+  get filterButton() {
+    return this.page.locator('.comfy-vue-node-search-container ._filter-button')
+  }
+
+  async fillAndSelectFirstNode(
+    nodeName: string,
+    options?: { suggestionIndex: number }
+  ) {
+    await this.input.waitFor({ state: 'visible' })
+    await this.input.fill(nodeName)
+    await this.dropdown.waitFor({ state: 'visible' })
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await this.page.waitForTimeout(500)
+    await this.dropdown
+      .locator('li')
+      .nth(options?.suggestionIndex || 0)
+      .click()
+  }
+
+  async addFilter(filterValue: string, filterType: string) {
+    await this.filterButton.click()
+    await this.filterSelectionPanel.addFilter(filterValue, filterType)
+  }
+
+  get filterChips() {
+    return this.page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
+    )
+  }
+
+  async removeFilter(index: number) {
+    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
+  }
+}
+
+class SidebarTab {
+  constructor(
+    public readonly page: Page,
+    public readonly tabId: string
+  ) {}
+
+  get tabButton() {
+    return this.page.locator(`.${this.tabId}-tab-button`)
+  }
+
+  get selectedTabButton() {
+    return this.page.locator(
+      `.${this.tabId}-tab-button.side-bar-button-selected`
+    )
+  }
+
+  async open() {
+    if (await this.selectedTabButton.isVisible()) {
+      return
+    }
+    await this.tabButton.click()
+  }
+}
+
+class NodeLibrarySidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'node-library')
+  }
+
+  get nodeLibrarySearchBoxInput() {
+    return this.page.locator('.node-lib-search-box input[type="text"]')
+  }
+
+  get nodeLibraryTree() {
+    return this.page.locator('.node-lib-tree-explorer')
+  }
+
+  get nodePreview() {
+    return this.page.locator('.node-lib-node-preview')
+  }
+
+  get tabContainer() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
+  get newFolderButton() {
+    return this.tabContainer.locator('.new-folder-button')
+  }
+
+  async open() {
+    await super.open()
+    await this.nodeLibraryTree.waitFor({ state: 'visible' })
+  }
+
+  async close() {
+    if (!this.tabButton.isVisible()) {
+      return
+    }
+
+    await this.tabButton.click()
+    await this.nodeLibraryTree.waitFor({ state: 'hidden' })
+  }
+
+  folderSelector(folderName: string) {
+    return `.p-tree-node-content:has(> .tree-explorer-node-label:has(.tree-folder .node-label:has-text("${folderName}")))`
+  }
+
+  getFolder(folderName: string) {
+    return this.page.locator(this.folderSelector(folderName))
+  }
+
+  nodeSelector(nodeName: string) {
+    return `.p-tree-node-content:has(> .tree-explorer-node-label:has(.tree-leaf .node-label:has-text("${nodeName}")))`
+  }
+
+  getNode(nodeName: string) {
+    return this.page.locator(this.nodeSelector(nodeName))
+  }
+}
+
+class WorkflowsSidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'workflows')
+  }
+
+  get browseGalleryButton() {
+    return this.page.locator('.browse-templates-button')
+  }
+
+  get newBlankWorkflowButton() {
+    return this.page.locator('.new-blank-workflow-button')
+  }
+
+  get openWorkflowButton() {
+    return this.page.locator('.open-workflow-button')
+  }
+
+  async getOpenedWorkflowNames() {
+    return await this.page
+      .locator('.comfyui-workflows-open .node-label')
+      .allInnerTexts()
+  }
+
+  async getTopLevelSavedWorkflowNames() {
+    return await this.page
+      .locator('.comfyui-workflows-browse .node-label')
+      .allInnerTexts()
+  }
+
+  async switchToWorkflow(workflowName: string) {
+    const workflowLocator = this.page.locator(
+      '.comfyui-workflows-open .node-label',
+      { hasText: workflowName }
+    )
+    await workflowLocator.click()
+    await this.page.waitForTimeout(300)
+  }
+}
+
+class Topbar {
+  constructor(public readonly page: Page) {}
+
+  async getTabNames(): Promise<string[]> {
+    return await this.page
+      .locator('.workflow-tabs .workflow-label')
+      .allInnerTexts()
+  }
+
+  async openSubmenuMobile() {
+    await this.page.locator('.p-menubar-mobile .p-menubar-button').click()
+  }
+
+  async getMenuItem(itemLabel: string): Promise<Locator> {
+    return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
+  }
+
+  async getWorkflowTab(tabName: string): Promise<Locator> {
+    return this.page
+      .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
+      .locator('..')
+  }
+
+  async closeWorkflowTab(tabName: string) {
+    const tab = await this.getWorkflowTab(tabName)
+    await tab.locator('.close-button').click({ force: true })
+  }
+
+  async saveWorkflow(workflowName: string) {
+    await this.triggerTopbarCommand(['Workflow', 'Save'])
+    await this.page.locator('.p-dialog-content input').fill(workflowName)
+    await this.page.keyboard.press('Enter')
+    // Wait for the dialog to close.
+    await this.page.waitForTimeout(300)
+  }
+
+  async triggerTopbarCommand(path: string[]) {
+    if (path.length < 2) {
+      throw new Error('Path is too short')
+    }
+
+    const tabName = path[0]
+    const topLevelMenu = this.page.locator(
+      `.top-menubar .p-menubar-item-label:text-is("${tabName}")`
+    )
+    await topLevelMenu.waitFor({ state: 'visible' })
+    await topLevelMenu.click()
+
+    for (let i = 1; i < path.length; i++) {
+      const commandName = path[i]
+      const menuItem = this.page
+        .locator(
+          `.top-menubar .p-menubar-submenu .p-menubar-item:has-text("${commandName}")`
+        )
+        .first()
+      await menuItem.waitFor({ state: 'visible' })
+      await menuItem.hover()
+
+      if (i === path.length - 1) {
+        await menuItem.click()
+      }
+    }
+  }
+}
 
 class ComfyMenu {
   public readonly sideToolbar: Locator
@@ -90,15 +354,6 @@ export class ComfyPage {
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
-  public readonly settingDialog: SettingDialog
-
-  /** Worker index to test user ID */
-  public readonly userIds: string[] = []
-
-  /** Test user ID for the current context */
-  get id() {
-    return this.userIds[comfyPageFixture.info().parallelIndex]
-  }
 
   constructor(
     public readonly page: Page,
@@ -114,7 +369,6 @@ export class ComfyPage {
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
-    this.settingDialog = new SettingDialog(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -154,7 +408,7 @@ export class ComfyPage {
       {
         data: {
           tree_structure: this.convertLeafToContent(structure),
-          base_path: `user/${this.id}/workflows`
+          base_path: 'user/default/workflows'
         }
       }
     )
@@ -166,53 +420,12 @@ export class ComfyPage {
     }
   }
 
-  async setupUser(username: string) {
-    const res = await this.request.get(`${this.url}/api/users`)
-    if (res.status() !== 200)
-      throw new Error(`Failed to retrieve users: ${await res.text()}`)
-
-    const apiRes = await res.json()
-    const user = Object.entries(apiRes?.users ?? {}).find(
-      ([, name]) => name === username
-    )
-    const id = user?.[0]
-
-    return id ? id : await this.createUser(username)
-  }
-
-  async createUser(username: string) {
-    const resp = await this.request.post(`${this.url}/api/users`, {
-      data: { username }
-    })
-
-    if (resp.status() !== 200)
-      throw new Error(`Failed to create user: ${await resp.text()}`)
-
-    return await resp.json()
-  }
-
-  async setupSettings(settings: Record<string, any>) {
-    const resp = await this.request.post(
-      `${this.url}/api/devtools/set_settings`,
-      {
-        data: settings
-      }
-    )
-
-    if (resp.status() !== 200) {
-      throw new Error(`Failed to setup settings: ${await resp.text()}`)
-    }
-  }
-
-  async setup() {
+  async setup({ resetView = true } = {}) {
     await this.goto()
-    await this.page.evaluate((id) => {
+    await this.page.evaluate(() => {
       localStorage.clear()
       sessionStorage.clear()
-      localStorage.setItem('Comfy.userId', id)
-    }, this.id)
-    await this.goto()
-
+    })
     // Unify font for consistent screenshots.
     await this.page.addStyleTag({
       url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
@@ -228,13 +441,26 @@ export class ComfyPage {
     })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
-      () =>
-        // window['app'] => GraphCanvas ready
-        // window['app'].extensionManager => GraphView ready
-        window['app'] && window['app'].extensionManager
+      () => window['app'] !== undefined && window['app'].vueAppReady
     )
-    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
+    await this.page.evaluate(() => {
+      window['app']['canvas'].show_info = false
+    })
     await this.nextFrame()
+    if (resetView) {
+      // Reset view to force re-rendering of canvas. So that info fields like fps
+      // become hidden.
+      await this.resetView()
+    }
+
+    // Hide all badges by default.
+    await this.setSetting('Comfy.NodeBadge.NodeIdBadgeMode', NodeBadgeMode.None)
+    await this.setSetting(
+      'Comfy.NodeBadge.NodeSourceBadgeMode',
+      NodeBadgeMode.None
+    )
+    // Hide canvas menu by default.
+    await this.setSetting('Comfy.Graph.CanvasMenu', false)
   }
 
   public assetPath(fileName: string) {
@@ -302,7 +528,7 @@ export class ComfyPage {
   async setSetting(settingId: string, settingValue: any) {
     return await this.page.evaluate(
       async ({ id, value }) => {
-        await window['app'].extensionManager.setting.set(id, value)
+        await window['app'].ui.settings.setSettingValueAsync(id, value)
       },
       { id: settingId, value: settingValue }
     )
@@ -310,7 +536,7 @@ export class ComfyPage {
 
   async getSetting(settingId: string) {
     return await this.page.evaluate(async (id) => {
-      return await window['app'].extensionManager.setting.get(id)
+      return await window['app'].ui.settings.getSettingValue(id)
     }, settingId)
   }
 
@@ -349,12 +575,6 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async getToastErrorCount() {
-    return await this.page
-      .locator('.p-toast-message.p-toast-message-error')
-      .count()
-  }
-
   async getVisibleToastCount() {
     return await this.page.locator('.p-toast:visible').count()
   }
@@ -556,7 +776,7 @@ export class ComfyPage {
   }
 
   async doubleClickCanvas() {
-    await this.page.mouse.dblclick(10, 10, { delay: 5 })
+    await this.page.mouse.dblclick(10, 10)
     await this.nextFrame()
   }
 
@@ -592,42 +812,43 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async ctrlSend(keyToPress: string, locator: Locator | null = this.canvas) {
-    const target = locator ?? this.page.keyboard
-    await target.press(`Control+${keyToPress}`)
+  async ctrlSend(keyToPress: string) {
+    await this.page.keyboard.down('Control')
+    await this.page.keyboard.press(keyToPress)
+    await this.page.keyboard.up('Control')
     await this.nextFrame()
   }
 
-  async ctrlA(locator?: Locator | null) {
-    await this.ctrlSend('KeyA', locator)
+  async ctrlA() {
+    await this.ctrlSend('KeyA')
   }
 
-  async ctrlB(locator?: Locator | null) {
-    await this.ctrlSend('KeyB', locator)
+  async ctrlB() {
+    await this.ctrlSend('KeyB')
   }
 
-  async ctrlC(locator?: Locator | null) {
-    await this.ctrlSend('KeyC', locator)
+  async ctrlC() {
+    await this.ctrlSend('KeyC')
   }
 
-  async ctrlV(locator?: Locator | null) {
-    await this.ctrlSend('KeyV', locator)
+  async ctrlV() {
+    await this.ctrlSend('KeyV')
   }
 
-  async ctrlZ(locator?: Locator | null) {
-    await this.ctrlSend('KeyZ', locator)
+  async ctrlZ() {
+    await this.ctrlSend('KeyZ')
   }
 
-  async ctrlY(locator?: Locator | null) {
-    await this.ctrlSend('KeyY', locator)
+  async ctrlY() {
+    await this.ctrlSend('KeyY')
   }
 
-  async ctrlArrowUp(locator?: Locator | null) {
-    await this.ctrlSend('ArrowUp', locator)
+  async ctrlArrowUp() {
+    await this.ctrlSend('ArrowUp')
   }
 
-  async ctrlArrowDown(locator?: Locator | null) {
-    await this.ctrlSend('ArrowDown', locator)
+  async ctrlArrowDown() {
+    await this.ctrlSend('ArrowDown')
   }
 
   async closeMenu() {
@@ -655,14 +876,10 @@ export class ComfyPage {
       x: nodePos.x + nodeSize.width * ratioX,
       y: nodePos.y + nodeSize.height * ratioY
     }
-    // -1 to be inside the node.  -2 because nodes currently get an arbitrary +1 to width.
-    await this.dragAndDrop(
-      { x: bottomRight.x - 2, y: bottomRight.y - 1 },
-      target
-    )
+    await this.dragAndDrop(bottomRight, target)
     await this.nextFrame()
     if (revertAfter) {
-      await this.dragAndDrop({ x: target.x - 2, y: target.y - 1 }, bottomRight)
+      await this.dragAndDrop(target, bottomRight)
       await this.nextFrame()
     }
   }
@@ -673,20 +890,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const ksamplerPos = {
-      x: 863,
-      y: 156
+      x: 864,
+      y: 157
     }
     const ksamplerSize = {
       width: 315,
       height: 292
     }
-    return this.resizeNode(
-      ksamplerPos,
-      ksamplerSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
+    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter)
   }
 
   async resizeLoadCheckpointNode(
@@ -695,14 +906,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const loadCheckpointPos = {
-      x: 26,
-      y: 444
+      x: 25,
+      y: 440
     }
     const loadCheckpointSize = {
-      width: 315,
-      height: 127
+      width: 320,
+      height: 120
     }
-    return this.resizeNode(
+    this.resizeNode(
       loadCheckpointPos,
       loadCheckpointSize,
       percentX,
@@ -717,14 +928,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const emptyLatentPos = {
-      x: 473,
-      y: 579
+      x: 475,
+      y: 580
     }
     const emptyLatentSize = {
-      width: 315,
-      height: 136
+      width: 303,
+      height: 132
     }
-    return this.resizeNode(
+    this.resizeNode(
       emptyLatentPos,
       emptyLatentSize,
       percentX,
@@ -773,27 +984,261 @@ export class ComfyPage {
   }
 }
 
+export class NodeSlotReference {
+  constructor(
+    readonly type: 'input' | 'output',
+    readonly index: number,
+    readonly node: NodeReference
+  ) {}
+  async getPosition() {
+    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
+      ([type, id, index]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        return window['app'].canvas.ds.convertOffsetToCanvas(
+          node.getConnectionPos(type === 'input', index)
+        )
+      },
+      [this.type, this.node.id, this.index] as const
+    )
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+  async getLinkCount() {
+    return await this.node.comfyPage.page.evaluate(
+      ([type, id, index]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        if (type === 'input') {
+          return node.inputs[index].link == null ? 0 : 1
+        }
+        return node.outputs[index].links?.length ?? 0
+      },
+      [this.type, this.node.id, this.index] as const
+    )
+  }
+  async removeLinks() {
+    await this.node.comfyPage.page.evaluate(
+      ([type, id, index]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        if (type === 'input') {
+          node.disconnectInput(index)
+        } else {
+          node.disconnectOutput(index)
+        }
+      },
+      [this.type, this.node.id, this.index] as const
+    )
+  }
+}
+
+export class NodeWidgetReference {
+  constructor(
+    readonly index: number,
+    readonly node: NodeReference
+  ) {}
+
+  async getPosition(): Promise<Position> {
+    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
+      ([id, index]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        const widget = node.widgets[index]
+        if (!widget) throw new Error(`Widget ${index} not found.`)
+
+        const [x, y, w, h] = node.getBounding()
+        return window['app'].canvas.ds.convertOffsetToCanvas([
+          x + w / 2,
+          y + window['LiteGraph']['NODE_TITLE_HEIGHT'] + widget.last_y + 1
+        ])
+      },
+      [this.node.id, this.index] as const
+    )
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+}
+
+export class NodeReference {
+  constructor(
+    readonly id: NodeId,
+    readonly comfyPage: ComfyPage
+  ) {}
+  async exists(): Promise<boolean> {
+    return await this.comfyPage.page.evaluate((id) => {
+      const node = window['app'].graph.getNodeById(id)
+      return !!node
+    }, this.id)
+  }
+  getType(): Promise<string> {
+    return this.getProperty('type')
+  }
+  async getPosition(): Promise<Position> {
+    const pos = await this.comfyPage.convertOffsetToCanvas(
+      await this.getProperty<[number, number]>('pos')
+    )
+    return {
+      x: pos[0],
+      y: pos[1]
+    }
+  }
+  async getBounding(): Promise<Position & Size> {
+    const [x, y, width, height]: [number, number, number, number] =
+      await this.comfyPage.page.evaluate((id) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error('Node not found')
+        return node.getBounding()
+      }, this.id)
+    return {
+      x,
+      y,
+      width,
+      height
+    }
+  }
+  async getSize(): Promise<Size> {
+    const size = await this.getProperty<[number, number]>('size')
+    return {
+      width: size[0],
+      height: size[1]
+    }
+  }
+  async getFlags(): Promise<{ collapsed?: boolean; pinned?: boolean }> {
+    return await this.getProperty('flags')
+  }
+  async isPinned() {
+    return !!(await this.getFlags()).pinned
+  }
+  async isCollapsed() {
+    return !!(await this.getFlags()).collapsed
+  }
+  async isBypassed() {
+    return (await this.getProperty<number | null | undefined>('mode')) === 4
+  }
+  async getProperty<T>(prop: string): Promise<T> {
+    return await this.comfyPage.page.evaluate(
+      ([id, prop]) => {
+        const node = window['app'].graph.getNodeById(id)
+        if (!node) throw new Error('Node not found')
+        return node[prop]
+      },
+      [this.id, prop] as const
+    )
+  }
+  async getOutput(index: number) {
+    return new NodeSlotReference('output', index, this)
+  }
+  async getInput(index: number) {
+    return new NodeSlotReference('input', index, this)
+  }
+  async getWidget(index: number) {
+    return new NodeWidgetReference(index, this)
+  }
+  async click(
+    position: 'title' | 'collapse',
+    options?: Parameters<Page['click']>[1] & { moveMouseToEmptyArea?: boolean }
+  ) {
+    const nodePos = await this.getPosition()
+    const nodeSize = await this.getSize()
+    let clickPos: Position
+    switch (position) {
+      case 'title':
+        clickPos = { x: nodePos.x + nodeSize.width / 2, y: nodePos.y - 15 }
+        break
+      case 'collapse':
+        clickPos = { x: nodePos.x + 5, y: nodePos.y - 10 }
+        break
+      default:
+        throw new Error(`Invalid click position ${position}`)
+    }
+
+    const moveMouseToEmptyArea = options?.moveMouseToEmptyArea
+    if (options) {
+      delete options.moveMouseToEmptyArea
+    }
+
+    await this.comfyPage.canvas.click({
+      ...options,
+      position: clickPos
+    })
+    await this.comfyPage.nextFrame()
+    if (moveMouseToEmptyArea) {
+      await this.comfyPage.moveMouseToEmptyArea()
+    }
+  }
+  async copy() {
+    await this.click('title')
+    await this.comfyPage.ctrlC()
+    await this.comfyPage.nextFrame()
+  }
+  async connectWidget(
+    originSlotIndex: number,
+    targetNode: NodeReference,
+    targetWidgetIndex: number
+  ) {
+    const originSlot = await this.getOutput(originSlotIndex)
+    const targetWidget = await targetNode.getWidget(targetWidgetIndex)
+    await this.comfyPage.dragAndDrop(
+      await originSlot.getPosition(),
+      await targetWidget.getPosition()
+    )
+    return originSlot
+  }
+  async connectOutput(
+    originSlotIndex: number,
+    targetNode: NodeReference,
+    targetSlotIndex: number
+  ) {
+    const originSlot = await this.getOutput(originSlotIndex)
+    const targetSlot = await targetNode.getInput(targetSlotIndex)
+    await this.comfyPage.dragAndDrop(
+      await originSlot.getPosition(),
+      await targetSlot.getPosition()
+    )
+    return originSlot
+  }
+  async getContextMenuOptionNames() {
+    await this.click('title', { button: 'right' })
+    const ctx = this.comfyPage.page.locator('.litecontextmenu')
+    return await ctx.locator('.litemenu-entry').allInnerTexts()
+  }
+  async clickContextMenuOption(optionText: string) {
+    await this.click('title', { button: 'right' })
+    const ctx = this.comfyPage.page.locator('.litecontextmenu')
+    await ctx.getByText(optionText).click()
+  }
+  async convertToGroupNode(groupNodeName: string = 'GroupNode') {
+    this.comfyPage.page.once('dialog', async (dialog) => {
+      await dialog.accept(groupNodeName)
+    })
+    await this.clickContextMenuOption('Convert to Group Node')
+    await this.comfyPage.nextFrame()
+    const nodes = await this.comfyPage.getNodeRefsByType(
+      `workflow>${groupNodeName}`
+    )
+    if (nodes.length !== 1) {
+      throw new Error(`Did not find single group node (found=${nodes.length})`)
+    }
+    return nodes[0]
+  }
+  async manageGroupNode() {
+    await this.clickContextMenuOption('Manage Group Node')
+    await this.comfyPage.nextFrame()
+    return new ManageGroupNode(
+      this.comfyPage.page,
+      this.comfyPage.page.locator('.comfy-group-manage')
+    )
+  }
+}
+
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
   comfyPage: async ({ page, request }, use) => {
     const comfyPage = new ComfyPage(page, request)
-
-    const { parallelIndex } = comfyPageFixture.info()
-    const username = `playwright-test-${parallelIndex}`
-    const userId = await comfyPage.setupUser(username)
-    comfyPage.userIds[parallelIndex] = userId
-
-    await comfyPage.setupSettings({
-      'Comfy.UseNewMenu': 'Disabled',
-      // Hide canvas menu/info by default.
-      'Comfy.Graph.CanvasInfo': false,
-      'Comfy.Graph.CanvasMenu': false,
-      // Hide all badges by default.
-      'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
-      'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
-      // Disable tooltips by default to avoid flakiness.
-      'Comfy.EnableTooltips': false,
-      'Comfy.userId': userId
-    })
     await comfyPage.setup()
     await use(comfyPage)
   }

browser_tests/actionbar.spec.ts

@@ -1,7 +1,7 @@
 import type { Response } from '@playwright/test'
 import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { expect, mergeTests } from '@playwright/test'
-import { comfyPageFixture } from './fixtures/ComfyPage'
+import { comfyPageFixture } from './ComfyPage'
 import { webSocketFixture } from './fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
@@ -11,6 +11,10 @@ test.describe('Actionbar', () => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
   /**
    * This test ensures that the autoqueue change mode can only queue one change at a time
    */
@@ -52,9 +56,7 @@ test.describe('Actionbar', () => {
           (n) => n.type === 'EmptyLatentImage'
         )
         node.widgets[0].value = value
-        window[
-          'app'
-        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
+        window['app'].workflowManager.activeWorkflow.changeTracker.checkState()
       }, value)
     }
 

browser_tests/assets/mixed_graph_items.json

@@ -1,227 +0,0 @@
-{
-  "last_node_id": 3,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": {
-        "0": 420,
-        "1": 130
-      },
-      "size": {
-        "0": 315,
-        "1": 262
-      },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": {
-        "0": 820,
-        "1": 130
-      },
-      "size": {
-        "0": 315,
-        "1": 262
-      },
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 1,
-      "type": "KSampler",
-      "pos": {
-        "0": 30,
-        "1": 130
-      },
-      "size": {
-        "0": 315,
-        "1": 262
-      },
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [
-    {
-      "id": 0,
-      "title": "Group",
-      "bounding": [
-        406.9701232910156,
-        59.079444885253906,
-        335,
-        345.6000061035156
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    },
-    {
-      "id": 3,
-      "title": "Group Parent",
-      "bounding": [
-        796.9703979492188,
-        14.796443939208984,
-        355,
-        399.20001220703125
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    },
-    {
-      "id": 2,
-      "title": "Group Child",
-      "bounding": [
-        806.9703979492188,
-        58.39643096923828,
-        335,
-        345.6000061035156
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    }
-  ],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/string_input.json

@@ -1,42 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "DevToolsNodeWithStringInput",
-      "pos": [
-        15,
-        48
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "DevToolsNodeWithStringInput"
-      },
-      "widgets_values": [
-        ""
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/browserTabTitle.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Browser tab title', () => {
   test.describe('Beta Menu', () => {
@@ -7,24 +7,30 @@ test.describe('Browser tab title', () => {
       await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     })
 
-    test('Can display workflow name', async ({ comfyPage }) => {
-      const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.filename
-      })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     })
 
-    // Failing on CI
-    // Cannot reproduce locally
+    test('Can display workflow name', async ({ comfyPage }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].workflowManager.activeWorkflow.name
+      })
+      // Note: unsaved workflow name is always prepended with "*".
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+    })
+
+    // Broken by https://github.com/Comfy-Org/ComfyUI_frontend/pull/893
+    // Release blocker for v1.3.0
     test.skip('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.filename
+        return window['app'].workflowManager.activeWorkflow.name
       })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+      // Note: unsaved workflow name is always prepended with "*".
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
 
-      await comfyPage.menu.topbar.saveWorkflow('test')
+      await comfyPage.menu.saveWorkflow('test')
       expect(await comfyPage.page.title()).toBe('test - ComfyUI')
 
       const textBox = comfyPage.widgetTextBox
@@ -34,7 +40,7 @@ test.describe('Browser tab title', () => {
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.delete()
+        window['app'].workflowManager.activeWorkflow.delete()
       })
     })
   })

browser_tests/changeTracker.spec.ts

@@ -2,10 +2,7 @@ import {
   ComfyPage,
   comfyPageFixture as test,
   comfyExpect as expect
-} from './fixtures/ComfyPage'
-import type { useWorkspaceStore } from '../src/stores/workspaceStore'
-
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
+} from './ComfyPage'
 
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
@@ -19,75 +16,6 @@ async function afterChange(comfyPage: ComfyPage) {
 }
 
 test.describe('Change Tracker', () => {
-  test.describe('Undo/Redo', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.setupWorkflowsDirectory({})
-    })
-
-    test('Can undo multiple operations', async ({ comfyPage }) => {
-      function isModified() {
-        return comfyPage.page.evaluate(async () => {
-          return !!(window['app'].extensionManager as WorkspaceStore).workflow
-            .activeWorkflow?.isModified
-        })
-      }
-
-      function getUndoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.undoQueue.length
-        })
-      }
-
-      function getRedoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.redoQueue.length
-        })
-      }
-      expect(await getUndoQueueSize()).toBe(0)
-      expect(await getRedoQueueSize()).toBe(0)
-
-      // Save, confirm no errors & workflow modified flag removed
-      await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
-      expect(await comfyPage.getToastErrorCount()).toBe(0)
-      expect(await isModified()).toBe(false)
-
-      // TODO(huchenlei): Investigate why saving the workflow is causing the
-      // undo queue to be triggered.
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(0)
-
-      const node = (await comfyPage.getFirstNodeRef())!
-      await node.click('collapse')
-      await expect(node).toBeCollapsed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(0)
-
-      await comfyPage.ctrlB()
-      await expect(node).toBeBypassed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(3)
-      expect(await getRedoQueueSize()).toBe(0)
-
-      await comfyPage.ctrlZ()
-      await expect(node).not.toBeBypassed()
-      expect(await isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(1)
-
-      await comfyPage.ctrlZ()
-      await expect(node).not.toBeCollapsed()
-      expect(await isModified()).toBe(false)
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(2)
-    })
-  })
-
   test('Can group multiple change actions into a single transaction', async ({
     comfyPage
   }) => {
@@ -112,7 +40,7 @@ test.describe('Change Tracker', () => {
     await expect(node).not.toBeCollapsed()
 
     // Run again, but within a change transaction
-    await beforeChange(comfyPage)
+    beforeChange(comfyPage)
 
     await node.click('collapse')
     await comfyPage.ctrlB()
@@ -120,7 +48,7 @@ test.describe('Change Tracker', () => {
     await expect(node).toBeBypassed()
 
     // End transaction
-    await afterChange(comfyPage)
+    afterChange(comfyPage)
 
     // Ensure undo reverts both changes
     await comfyPage.ctrlZ()
@@ -128,7 +56,7 @@ test.describe('Change Tracker', () => {
     await expect(node).not.toBeCollapsed()
   })
 
-  test('Can nest multiple change transactions without adding undo steps', async ({
+  test('Can group multiple transaction calls into a single one', async ({
     comfyPage
   }) => {
     const node = (await comfyPage.getFirstNodeRef())!

browser_tests/colorPalette.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 const customColorPalettes = {
   obsidian: {
@@ -135,6 +135,12 @@ test.describe('Color Palette', () => {
     await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', {})
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+  })
+
   test('Can show custom color palette', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
@@ -152,6 +158,11 @@ test.describe('Node Color Adjustments', () => {
     await comfyPage.loadWorkflow('every_node_color')
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+  })
+
   test('should adjust opacity via node opacity setting', async ({
     comfyPage
   }) => {
@@ -211,7 +222,7 @@ test.describe('Node Color Adjustments', () => {
       await comfyPage.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
       const node = await comfyPage.getFirstNodeRef()
-      await node?.clickContextMenuOption('Colors')
+      await node.clickContextMenuOption('Colors')
     })
 
     test('should persist color adjustments when changing custom node colors', async ({

browser_tests/commands.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Keybindings', () => {
   test('Should execute command', async ({ comfyPage }) => {

browser_tests/copyPaste.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
@@ -15,9 +15,9 @@ test.describe('Copy Paste', () => {
     await textBox.click()
     const originalString = await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+    await comfyPage.ctrlV()
     const resultString = await textBox.inputValue()
     expect(resultString).toBe(originalString + originalString)
   })
@@ -31,7 +31,7 @@ test.describe('Copy Paste', () => {
         y: 643
       }
     })
-    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlC()
     // KSampler's seed
     await comfyPage.canvas.click({
       position: {
@@ -39,7 +39,7 @@ test.describe('Copy Paste', () => {
         y: 281
       }
     })
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV()
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
   })
@@ -51,14 +51,14 @@ test.describe('Copy Paste', () => {
     comfyPage
   }) => {
     await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlC()
     const textBox = comfyPage.widgetTextBox
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+    await comfyPage.ctrlV()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'paste-in-text-area-with-node-previously-copied.png'
     )
@@ -69,10 +69,10 @@ test.describe('Copy Paste', () => {
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlC()
     // Unfocus textbox.
     await comfyPage.page.mouse.click(10, 10)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV()
     await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png')
   })
 

browser_tests/dialog.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
@@ -36,7 +36,6 @@ test.describe('Execution error', () => {
   }) => {
     await comfyPage.loadWorkflow('execution_error')
     await comfyPage.queueButton.click()
-    await comfyPage.nextFrame()
 
     // Wait for the element with the .comfy-execution-error selector to be visible
     const executionError = comfyPage.page.locator('.comfy-error-report')
@@ -52,9 +51,7 @@ test.describe('Missing models warning', () => {
     }, comfyPage.url)
   })
 
-  // Flaky test after parallelization
-  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
-  test.skip('Should display a warning when missing models are found', async ({
+  test('Should display a warning when missing models are found', async ({
     comfyPage
   }) => {
     // The fake_model.safetensors is served by
@@ -66,15 +63,45 @@ test.describe('Missing models warning', () => {
 
     const downloadButton = comfyPage.page.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
-    const downloadPromise = comfyPage.page.waitForEvent('download')
     await downloadButton.click()
 
-    const download = await downloadPromise
-    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
+    const downloadComplete = comfyPage.page.locator('.download-complete')
+    await expect(downloadComplete).toBeVisible()
+  })
+
+  test('Can configure download folder', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const folderSelectToggle = comfyPage.page.locator(
+      '.model-path-select-checkbox'
+    )
+    const folderSelect = comfyPage.page.locator('.model-path-select')
+    await expect(folderSelectToggle).toBeVisible()
+    await expect(folderSelect).not.toBeVisible()
+
+    await folderSelectToggle.click() // show the selectors
+    await expect(folderSelect).toBeVisible()
+
+    await folderSelect.click() // open dropdown
+    await expect(folderSelect).toHaveClass(/p-select-open/)
+
+    await folderSelect.click() // close the dropdown
+    await expect(folderSelect).not.toHaveClass(/p-select-open/)
+
+    await folderSelectToggle.click() // hide the selectors
+    await expect(folderSelect).not.toBeVisible()
   })
 })
 
 test.describe('Settings', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    // Restore default setting value
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', 1.1)
+  })
+
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
     const searchBox = comfyPage.page.locator('.settings-content')

browser_tests/extensionAPI.spec.ts

@@ -1,11 +1,15 @@
 import { expect, Locator } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Topbar commands', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
   test('Should allow registering topbar commands', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
       window['app'].registerExtension({
@@ -48,7 +52,7 @@ test.describe('Topbar commands', () => {
       })
     })
 
-    const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
+    const menuItem: Locator = await comfyPage.menu.topbar.getMenuItem('ext')
     expect(await menuItem.count()).toBe(0)
   })
 
@@ -79,82 +83,4 @@ test.describe('Topbar commands', () => {
       true
     )
   })
-
-  test.describe('Settings', () => {
-    test('Should allow adding settings', async ({ comfyPage }) => {
-      await comfyPage.page.evaluate(() => {
-        window['app'].registerExtension({
-          name: 'TestExtension1',
-          settings: [
-            {
-              id: 'TestSetting',
-              name: 'Test Setting',
-              type: 'text',
-              defaultValue: 'Hello, world!',
-              onChange: () => {
-                window['changeCount'] = (window['changeCount'] ?? 0) + 1
-              }
-            }
-          ]
-        })
-      })
-      // onChange is called when the setting is first added
-      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
-      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, world!')
-
-      await comfyPage.setSetting('TestSetting', 'Hello, universe!')
-      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, universe!')
-      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
-    })
-
-    test('Should allow setting boolean settings', async ({ comfyPage }) => {
-      await comfyPage.page.evaluate(() => {
-        window['app'].registerExtension({
-          name: 'TestExtension1',
-          settings: [
-            {
-              id: 'Comfy.TestSetting',
-              name: 'Test Setting',
-              type: 'boolean',
-              defaultValue: false,
-              onChange: () => {
-                window['changeCount'] = (window['changeCount'] ?? 0) + 1
-              }
-            }
-          ]
-        })
-      })
-
-      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(false)
-      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
-
-      await comfyPage.settingDialog.open()
-      await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
-      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(true)
-      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
-    })
-  })
-
-  test.describe('About panel', () => {
-    test('Should allow adding badges', async ({ comfyPage }) => {
-      await comfyPage.page.evaluate(() => {
-        window['app'].registerExtension({
-          name: 'TestExtension1',
-          aboutPageBadges: [
-            {
-              label: 'Test Badge',
-              url: 'https://example.com',
-              icon: 'pi pi-box'
-            }
-          ]
-        })
-      })
-
-      await comfyPage.settingDialog.open()
-      await comfyPage.settingDialog.goToAboutPanel()
-      const badge = comfyPage.page.locator('.about-badge').last()
-      expect(badge).toBeDefined()
-      expect(await badge.textContent()).toContain('Test Badge')
-    })
-  })
 })

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -1,79 +0,0 @@
-import { Locator, Page } from '@playwright/test'
-
-export class ComfyNodeSearchFilterSelectionPanel {
-  constructor(public readonly page: Page) {}
-
-  async selectFilterType(filterType: string) {
-    await this.page
-      .locator(
-        `.filter-type-select .p-togglebutton-label:has-text("${filterType}")`
-      )
-      .click()
-  }
-
-  async selectFilterValue(filterValue: string) {
-    await this.page.locator('.filter-value-select .p-select-dropdown').click()
-    await this.page
-      .locator(
-        `.p-select-overlay .p-select-list .p-select-option-label:text-is("${filterValue}")`
-      )
-      .click()
-  }
-
-  async addFilter(filterValue: string, filterType: string) {
-    await this.selectFilterType(filterType)
-    await this.selectFilterValue(filterValue)
-    await this.page.locator('.p-button-label:has-text("Add")').click()
-  }
-}
-
-export class ComfyNodeSearchBox {
-  public readonly input: Locator
-  public readonly dropdown: Locator
-  public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel
-
-  constructor(public readonly page: Page) {
-    this.input = page.locator(
-      '.comfy-vue-node-search-container input[type="text"]'
-    )
-    this.dropdown = page.locator(
-      '.comfy-vue-node-search-container .p-autocomplete-list'
-    )
-    this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
-  }
-
-  get filterButton() {
-    return this.page.locator('.comfy-vue-node-search-container .filter-button')
-  }
-
-  async fillAndSelectFirstNode(
-    nodeName: string,
-    options?: { suggestionIndex: number }
-  ) {
-    await this.input.waitFor({ state: 'visible' })
-    await this.input.fill(nodeName)
-    await this.dropdown.waitFor({ state: 'visible' })
-    // Wait for some time for the auto complete list to update.
-    // The auto complete list is debounced and may take some time to update.
-    await this.page.waitForTimeout(500)
-    await this.dropdown
-      .locator('li')
-      .nth(options?.suggestionIndex || 0)
-      .click()
-  }
-
-  async addFilter(filterValue: string, filterType: string) {
-    await this.filterButton.click()
-    await this.filterSelectionPanel.addFilter(filterValue, filterType)
-  }
-
-  get filterChips() {
-    return this.page.locator(
-      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
-    )
-  }
-
-  async removeFilter(index: number) {
-    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
-  }
-}

browser_tests/fixtures/components/SettingDialog.ts

@@ -1,40 +0,0 @@
-import { Page } from '@playwright/test'
-
-export class SettingDialog {
-  constructor(public readonly page: Page) {}
-
-  async open() {
-    const button = this.page.locator('button.comfy-settings-btn:visible')
-    await button.click()
-    await this.page.waitForSelector('div.settings-container')
-  }
-
-  /**
-   * Set the value of a text setting
-   * @param id - The id of the setting
-   * @param value - The value to set
-   */
-  async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
-    await settingInputDiv.locator('input').fill(value)
-  }
-
-  /**
-   * Toggle the value of a boolean setting
-   * @param id - The id of the setting
-   */
-  async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
-    await settingInputDiv.locator('input').click()
-  }
-
-  async goToAboutPanel() {
-    const aboutButton = this.page.locator('li[aria-label="About"]')
-    await aboutButton.click()
-    await this.page.waitForSelector('div.about-container')
-  }
-}

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,139 +0,0 @@
-import { Locator, Page } from '@playwright/test'
-
-class SidebarTab {
-  constructor(
-    public readonly page: Page,
-    public readonly tabId: string
-  ) {}
-
-  get tabButton() {
-    return this.page.locator(`.${this.tabId}-tab-button`)
-  }
-
-  get selectedTabButton() {
-    return this.page.locator(
-      `.${this.tabId}-tab-button.side-bar-button-selected`
-    )
-  }
-
-  async open() {
-    if (await this.selectedTabButton.isVisible()) {
-      return
-    }
-    await this.tabButton.click()
-  }
-}
-
-export class NodeLibrarySidebarTab extends SidebarTab {
-  constructor(public readonly page: Page) {
-    super(page, 'node-library')
-  }
-
-  get nodeLibrarySearchBoxInput() {
-    return this.page.locator('.node-lib-search-box input[type="text"]')
-  }
-
-  get nodeLibraryTree() {
-    return this.page.locator('.node-lib-tree-explorer')
-  }
-
-  get nodePreview() {
-    return this.page.locator('.node-lib-node-preview')
-  }
-
-  get tabContainer() {
-    return this.page.locator('.sidebar-content-container')
-  }
-
-  get newFolderButton() {
-    return this.tabContainer.locator('.new-folder-button')
-  }
-
-  async open() {
-    await super.open()
-    await this.nodeLibraryTree.waitFor({ state: 'visible' })
-  }
-
-  async close() {
-    if (!this.tabButton.isVisible()) {
-      return
-    }
-
-    await this.tabButton.click()
-    await this.nodeLibraryTree.waitFor({ state: 'hidden' })
-  }
-
-  folderSelector(folderName: string) {
-    return `.p-tree-node-content:has(> .tree-explorer-node-label:has(.tree-folder .node-label:has-text("${folderName}")))`
-  }
-
-  getFolder(folderName: string) {
-    return this.page.locator(this.folderSelector(folderName))
-  }
-
-  nodeSelector(nodeName: string) {
-    return `.p-tree-node-content:has(> .tree-explorer-node-label:has(.tree-leaf .node-label:has-text("${nodeName}")))`
-  }
-
-  getNode(nodeName: string) {
-    return this.page.locator(this.nodeSelector(nodeName))
-  }
-}
-
-export class WorkflowsSidebarTab extends SidebarTab {
-  constructor(public readonly page: Page) {
-    super(page, 'workflows')
-  }
-
-  get browseGalleryButton() {
-    return this.page.locator('.browse-templates-button')
-  }
-
-  get newBlankWorkflowButton() {
-    return this.page.locator('.new-blank-workflow-button')
-  }
-
-  get openWorkflowButton() {
-    return this.page.locator('.open-workflow-button')
-  }
-
-  async getOpenedWorkflowNames() {
-    return await this.page
-      .locator('.comfyui-workflows-open .node-label')
-      .allInnerTexts()
-  }
-
-  async getTopLevelSavedWorkflowNames() {
-    return await this.page
-      .locator('.comfyui-workflows-browse .node-label')
-      .allInnerTexts()
-  }
-
-  async switchToWorkflow(workflowName: string) {
-    const workflowLocator = this.getOpenedItem(workflowName)
-    await workflowLocator.click()
-    await this.page.waitForTimeout(300)
-  }
-
-  getOpenedItem(name: string) {
-    return this.page.locator('.comfyui-workflows-open .node-label', {
-      hasText: name
-    })
-  }
-
-  getPersistedItem(name: string) {
-    return this.page.locator('.comfyui-workflows-browse .node-label', {
-      hasText: name
-    })
-  }
-
-  async renameWorkflow(locator: Locator, newName: string) {
-    await locator.click({ button: 'right' })
-    await this.page
-      .locator('.p-contextmenu-item-content', { hasText: 'Rename' })
-      .click()
-    await this.page.keyboard.type(newName)
-    await this.page.keyboard.press('Enter')
-    await this.page.waitForTimeout(300)
-  }
-}

browser_tests/fixtures/components/Topbar.ts

@@ -1,85 +0,0 @@
-import { Locator, Page } from '@playwright/test'
-
-export class Topbar {
-  constructor(public readonly page: Page) {}
-
-  async getTabNames(): Promise<string[]> {
-    return await this.page
-      .locator('.workflow-tabs .workflow-label')
-      .allInnerTexts()
-  }
-
-  async openSubmenuMobile() {
-    await this.page.locator('.p-menubar-mobile .p-menubar-button').click()
-  }
-
-  getMenuItem(itemLabel: string): Locator {
-    return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
-  }
-
-  getWorkflowTab(tabName: string): Locator {
-    return this.page
-      .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
-      .locator('..')
-  }
-
-  async closeWorkflowTab(tabName: string) {
-    const tab = this.getWorkflowTab(tabName)
-    await tab.locator('.close-button').click({ force: true })
-  }
-
-  getSaveDialog(): Locator {
-    return this.page.locator('.p-dialog-content input')
-  }
-
-  saveWorkflow(workflowName: string): Promise<void> {
-    return this._saveWorkflow(workflowName, 'Save')
-  }
-
-  saveWorkflowAs(workflowName: string): Promise<void> {
-    return this._saveWorkflow(workflowName, 'Save As')
-  }
-
-  async _saveWorkflow(workflowName: string, command: 'Save' | 'Save As') {
-    await this.triggerTopbarCommand(['Workflow', command])
-    await this.getSaveDialog().fill(workflowName)
-    await this.page.keyboard.press('Enter')
-
-    // Wait for workflow service to finish saving
-    await this.page.waitForFunction(
-      () => !window['app'].extensionManager.workflow.isBusy,
-      undefined,
-      { timeout: 3000 }
-    )
-    // Wait for the dialog to close.
-    await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
-  }
-
-  async triggerTopbarCommand(path: string[]) {
-    if (path.length < 2) {
-      throw new Error('Path is too short')
-    }
-
-    const tabName = path[0]
-    const topLevelMenu = this.page.locator(
-      `.top-menubar .p-menubar-item-label:text-is("${tabName}")`
-    )
-    await topLevelMenu.waitFor({ state: 'visible' })
-    await topLevelMenu.click()
-
-    for (let i = 1; i < path.length; i++) {
-      const commandName = path[i]
-      const menuItem = this.page
-        .locator(
-          `.top-menubar .p-menubar-submenu .p-menubar-item:has-text("${commandName}")`
-        )
-        .first()
-      await menuItem.waitFor({ state: 'visible' })
-      await menuItem.hover()
-
-      if (i === path.length - 1) {
-        await menuItem.click()
-      }
-    }
-  }
-}

browser_tests/fixtures/types.ts

@@ -1,9 +0,0 @@
-export interface Position {
-  x: number
-  y: number
-}
-
-export interface Size {
-  width: number
-  height: number
-}

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,257 +0,0 @@
-import { ManageGroupNode } from '../../helpers/manageGroupNode'
-import type { NodeId } from '../../../src/types/comfyWorkflow'
-import type { Page } from '@playwright/test'
-import type { ComfyPage } from '../ComfyPage'
-import type { Position, Size } from '../types'
-
-export class NodeSlotReference {
-  constructor(
-    readonly type: 'input' | 'output',
-    readonly index: number,
-    readonly node: NodeReference
-  ) {}
-  async getPosition() {
-    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
-      ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error(`Node ${id} not found.`)
-        return window['app'].canvas.ds.convertOffsetToCanvas(
-          node.getConnectionPos(type === 'input', index)
-        )
-      },
-      [this.type, this.node.id, this.index] as const
-    )
-    return {
-      x: pos[0],
-      y: pos[1]
-    }
-  }
-  async getLinkCount() {
-    return await this.node.comfyPage.page.evaluate(
-      ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error(`Node ${id} not found.`)
-        if (type === 'input') {
-          return node.inputs[index].link == null ? 0 : 1
-        }
-        return node.outputs[index].links?.length ?? 0
-      },
-      [this.type, this.node.id, this.index] as const
-    )
-  }
-  async removeLinks() {
-    await this.node.comfyPage.page.evaluate(
-      ([type, id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error(`Node ${id} not found.`)
-        if (type === 'input') {
-          node.disconnectInput(index)
-        } else {
-          node.disconnectOutput(index)
-        }
-      },
-      [this.type, this.node.id, this.index] as const
-    )
-  }
-}
-
-export class NodeWidgetReference {
-  constructor(
-    readonly index: number,
-    readonly node: NodeReference
-  ) {}
-
-  async getPosition(): Promise<Position> {
-    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
-      ([id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error(`Node ${id} not found.`)
-        const widget = node.widgets[index]
-        if (!widget) throw new Error(`Widget ${index} not found.`)
-
-        const [x, y, w, h] = node.getBounding()
-        return window['app'].canvas.ds.convertOffsetToCanvas([
-          x + w / 2,
-          y + window['LiteGraph']['NODE_TITLE_HEIGHT'] + widget.last_y + 1
-        ])
-      },
-      [this.node.id, this.index] as const
-    )
-    return {
-      x: pos[0],
-      y: pos[1]
-    }
-  }
-}
-
-export class NodeReference {
-  constructor(
-    readonly id: NodeId,
-    readonly comfyPage: ComfyPage
-  ) {}
-  async exists(): Promise<boolean> {
-    return await this.comfyPage.page.evaluate((id) => {
-      const node = window['app'].graph.getNodeById(id)
-      return !!node
-    }, this.id)
-  }
-  getType(): Promise<string> {
-    return this.getProperty('type')
-  }
-  async getPosition(): Promise<Position> {
-    const pos = await this.comfyPage.convertOffsetToCanvas(
-      await this.getProperty<[number, number]>('pos')
-    )
-    return {
-      x: pos[0],
-      y: pos[1]
-    }
-  }
-  async getBounding(): Promise<Position & Size> {
-    const [x, y, width, height]: [number, number, number, number] =
-      await this.comfyPage.page.evaluate((id) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error('Node not found')
-        return node.getBounding()
-      }, this.id)
-    return {
-      x,
-      y,
-      width,
-      height
-    }
-  }
-  async getSize(): Promise<Size> {
-    const size = await this.getProperty<[number, number]>('size')
-    return {
-      width: size[0],
-      height: size[1]
-    }
-  }
-  async getFlags(): Promise<{ collapsed?: boolean; pinned?: boolean }> {
-    return await this.getProperty('flags')
-  }
-  async isPinned() {
-    return !!(await this.getFlags()).pinned
-  }
-  async isCollapsed() {
-    return !!(await this.getFlags()).collapsed
-  }
-  async isBypassed() {
-    return (await this.getProperty<number | null | undefined>('mode')) === 4
-  }
-  async getProperty<T>(prop: string): Promise<T> {
-    return await this.comfyPage.page.evaluate(
-      ([id, prop]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error('Node not found')
-        return node[prop]
-      },
-      [this.id, prop] as const
-    )
-  }
-  async getOutput(index: number) {
-    return new NodeSlotReference('output', index, this)
-  }
-  async getInput(index: number) {
-    return new NodeSlotReference('input', index, this)
-  }
-  async getWidget(index: number) {
-    return new NodeWidgetReference(index, this)
-  }
-  async click(
-    position: 'title' | 'collapse',
-    options?: Parameters<Page['click']>[1] & { moveMouseToEmptyArea?: boolean }
-  ) {
-    const nodePos = await this.getPosition()
-    const nodeSize = await this.getSize()
-    let clickPos: Position
-    switch (position) {
-      case 'title':
-        clickPos = { x: nodePos.x + nodeSize.width / 2, y: nodePos.y - 15 }
-        break
-      case 'collapse':
-        clickPos = { x: nodePos.x + 5, y: nodePos.y - 10 }
-        break
-      default:
-        throw new Error(`Invalid click position ${position}`)
-    }
-
-    const moveMouseToEmptyArea = options?.moveMouseToEmptyArea
-    if (options) {
-      delete options.moveMouseToEmptyArea
-    }
-
-    await this.comfyPage.canvas.click({
-      ...options,
-      position: clickPos
-    })
-    await this.comfyPage.nextFrame()
-    if (moveMouseToEmptyArea) {
-      await this.comfyPage.moveMouseToEmptyArea()
-    }
-  }
-  async copy() {
-    await this.click('title')
-    await this.comfyPage.ctrlC()
-    await this.comfyPage.nextFrame()
-  }
-  async connectWidget(
-    originSlotIndex: number,
-    targetNode: NodeReference,
-    targetWidgetIndex: number
-  ) {
-    const originSlot = await this.getOutput(originSlotIndex)
-    const targetWidget = await targetNode.getWidget(targetWidgetIndex)
-    await this.comfyPage.dragAndDrop(
-      await originSlot.getPosition(),
-      await targetWidget.getPosition()
-    )
-    return originSlot
-  }
-  async connectOutput(
-    originSlotIndex: number,
-    targetNode: NodeReference,
-    targetSlotIndex: number
-  ) {
-    const originSlot = await this.getOutput(originSlotIndex)
-    const targetSlot = await targetNode.getInput(targetSlotIndex)
-    await this.comfyPage.dragAndDrop(
-      await originSlot.getPosition(),
-      await targetSlot.getPosition()
-    )
-    return originSlot
-  }
-  async getContextMenuOptionNames() {
-    await this.click('title', { button: 'right' })
-    const ctx = this.comfyPage.page.locator('.litecontextmenu')
-    return await ctx.locator('.litemenu-entry').allInnerTexts()
-  }
-  async clickContextMenuOption(optionText: string) {
-    await this.click('title', { button: 'right' })
-    const ctx = this.comfyPage.page.locator('.litecontextmenu')
-    await ctx.getByText(optionText).click()
-  }
-  async convertToGroupNode(groupNodeName: string = 'GroupNode') {
-    this.comfyPage.page.once('dialog', async (dialog) => {
-      await dialog.accept(groupNodeName)
-    })
-    await this.clickContextMenuOption('Convert to Group Node')
-    await this.comfyPage.nextFrame()
-    const nodes = await this.comfyPage.getNodeRefsByType(
-      `workflow>${groupNodeName}`
-    )
-    if (nodes.length !== 1) {
-      throw new Error(`Did not find single group node (found=${nodes.length})`)
-    }
-    return nodes[0]
-  }
-  async manageGroupNode() {
-    await this.clickContextMenuOption('Manage Group Node')
-    await this.comfyPage.nextFrame()
-    return new ManageGroupNode(
-      this.comfyPage.page,
-      this.comfyPage.page.locator('.comfy-group-manage')
-    )
-  }
-}

browser_tests/graphCanvasMenu.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Graph Canvas Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/groupNode.spec.ts

@@ -1,8 +1,11 @@
 import { expect } from '@playwright/test'
-import { ComfyPage, comfyPageFixture as test } from './fixtures/ComfyPage'
-import type { NodeReference } from './fixtures/utils/litegraphUtils'
+import { ComfyPage, NodeReference, comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Group Node', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
   test.describe('Node library sidebar', () => {
     const groupNodeName = 'DefautWorkflowGroupNode'
     const groupNodeCategory = 'group nodes>workflow'
@@ -16,6 +19,11 @@ test.describe('Group Node', () => {
       await libraryTab.open()
     })
 
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
+      await libraryTab.close()
+    })
+
     test('Is added to node library sidebar', async ({ comfyPage }) => {
       expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
     })
@@ -77,13 +85,8 @@ test.describe('Group Node', () => {
         .click()
     })
   })
-  // The 500ms fixed delay on the search results is causing flakiness
-  // Potential solution: add a spinner state when the search is in progress,
-  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
-  // does not have a v-model on the query, so we cannot observe the raw
-  // query update, and thus cannot set the spinning state between the raw query
-  // update and the debounced search update.
-  test.skip('Can be added to canvas using search', async ({ comfyPage }) => {
+
+  test('Can be added to canvas using search', async ({ comfyPage }) => {
     const groupNodeName = 'DefautWorkflowGroupNode'
     await comfyPage.convertAllNodesToGroupNode(groupNodeName)
     await comfyPage.doubleClickCanvas()
@@ -95,7 +98,6 @@ test.describe('Group Node', () => {
   })
 
   test('Displays tooltip on title hover', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
     const tooltipTimeout = 500
@@ -144,9 +146,7 @@ test.describe('Group Node', () => {
   }) => {
     await comfyPage.loadWorkflow('legacy_group_node')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
-    await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
-    ).not.toBeVisible()
+    expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
   })
 
   test.describe('Copy and paste', () => {
@@ -192,6 +192,13 @@ test.describe('Group Node', () => {
       await groupNode.copy()
     })
 
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.page.evaluate((groupNodeName) => {
+        window['LiteGraph'].unregisterNodeType(groupNodeName)
+      }, GROUP_NODE_TYPE)
+    })
+
     test('Copies and pastes group node within the same workflow', async ({
       comfyPage
     }) => {

browser_tests/interaction.spec.ts

@@ -1,26 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('Item Interaction', () => {
-  test('Can select/delete all items', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('mixed_graph_items')
-    await comfyPage.canvas.press('Control+a')
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-all.png')
-    await comfyPage.canvas.press('Delete')
-    await expect(comfyPage.canvas).toHaveScreenshot('deleted-all.png')
-  })
-
-  test('Can pin/unpin items with keyboard shortcut', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('mixed_graph_items')
-    await comfyPage.canvas.press('Control+a')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('pinned-all.png')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('unpinned-all.png')
-  })
-})
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Node Interaction', () => {
   test('Can enter prompt', async ({ comfyPage }) => {
@@ -33,7 +12,7 @@ test.describe('Node Interaction', () => {
   })
 
   test.describe('Node Selection', () => {
-    const multiSelectModifiers = ['Control', 'Shift', 'Meta'] as const
+    const multiSelectModifiers = ['Control', 'Shift', 'Meta']
 
     multiSelectModifiers.forEach((modifier) => {
       test(`Can add multiple nodes to selection using ${modifier}+Click`, async ({
@@ -94,8 +73,6 @@ test.describe('Node Interaction', () => {
       await comfyPage.disconnectEdge()
       await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
       await comfyPage.connectEdge()
-      // Move mouse to empty area to avoid slot highlight.
-      await comfyPage.moveMouseToEmptyArea()
       // Litegraph renders edge with a slight offset.
       await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
         maxDiffPixels: 50
@@ -137,24 +114,6 @@ test.describe('Node Interaction', () => {
       await comfyPage.page.keyboard.up('Shift')
       await expect(comfyPage.canvas).toHaveScreenshot('copied-link.png')
     })
-
-    test('Auto snap&highlight when dragging link over node', async ({
-      comfyPage
-    }) => {
-      await comfyPage.setSetting('Comfy.Node.AutoSnapLinkToSlot', true)
-      await comfyPage.setSetting('Comfy.Node.SnapHighlightsNode', true)
-
-      await comfyPage.page.mouse.move(
-        comfyPage.clipTextEncodeNode1InputSlot.x,
-        comfyPage.clipTextEncodeNode1InputSlot.y
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        comfyPage.clipTextEncodeNode2InputSlot.x,
-        comfyPage.clipTextEncodeNode2InputSlot.y
-      )
-      await expect(comfyPage.canvas).toHaveScreenshot('snapped-highlighted.png')
-    })
   })
 
   test('Can adjust widget value', async ({ comfyPage }) => {
@@ -285,8 +244,7 @@ test.describe('Node Interaction', () => {
       position: {
         x: 50,
         y: 10
-      },
-      delay: 5
+      }
     })
     await comfyPage.page.keyboard.type('Hello World')
     await comfyPage.page.keyboard.press('Enter')
@@ -301,8 +259,7 @@ test.describe('Node Interaction', () => {
       position: {
         x: 50,
         y: 50
-      },
-      delay: 5
+      }
     })
     expect(await comfyPage.page.locator('.node-title-editor').count()).toBe(0)
   })
@@ -354,8 +311,7 @@ test.describe('Group Interaction', () => {
       position: {
         x: 50,
         y: 10
-      },
-      delay: 5
+      }
     })
     await comfyPage.page.keyboard.type('Hello World')
     await comfyPage.page.keyboard.press('Enter')
@@ -507,7 +463,7 @@ test.describe('Widget Interaction', () => {
     await expect(textBox).toHaveValue('')
     await textBox.fill('Hello World')
     await expect(textBox).toHaveValue('Hello World')
-    await comfyPage.ctrlZ(null)
+    await comfyPage.ctrlZ()
     await expect(textBox).toHaveValue('')
   })
 
@@ -518,9 +474,9 @@ test.describe('Widget Interaction', () => {
     await textBox.fill('1girl')
     await expect(textBox).toHaveValue('1girl')
     await textBox.selectText()
-    await comfyPage.ctrlArrowUp(null)
+    await comfyPage.ctrlArrowUp()
     await expect(textBox).toHaveValue('(1girl:1.05)')
-    await comfyPage.ctrlZ(null)
+    await comfyPage.ctrlZ()
     await expect(textBox).toHaveValue('1girl')
   })
 })
@@ -530,13 +486,6 @@ test.describe('Load workflow', () => {
     await comfyPage.loadWorkflow('string_node_id')
     await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png')
   })
-
-  test('Can load workflow with ("STRING",) input node', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('string_input')
-    await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
-  })
 })
 
 test.describe('Load duplicate workflow', () => {
@@ -544,6 +493,10 @@ test.describe('Load duplicate workflow', () => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
   test('A workflow can be loaded multiple times in a row', async ({
     comfyPage
   }) => {