Type cleanup, annotation as function, fix import

Naming now uniformly refers to the widget as an Annotated Number and the
widget is now implemented as a proper typescript class

annotatedNumber widgets can optionally have an annotation function set.
This allows for extensions to set annotations on ranges of values.

Fixed the app import incorrectly having an extension

.env_example

@@ -12,10 +12,6 @@ DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 # to ComfyUI launch script to serve the custom web version.
 DEPLOY_COMFYUI_DIR=/home/ComfyUI/web
 
-# The directory containing the ComfyUI installation used to run Playwright tests.
-# If you aren't using a separate install for testing, point this to your regular install.
-TEST_COMFYUI_DIR=/home/ComfyUI
-
 # The directory containing the ComfyUI_examples repo used to extract test workflows.
 EXAMPLE_REPO_PATH=tests-ui/ComfyUI_examples
 

.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

.github/workflows/update-main.yaml

@@ -0,0 +1,53 @@
+name: Update Main Repo from PR
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  update-main-repo:
+    if: github.event.label.name == 'Update Main Repo'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout frontend repo PR
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build
+
+      - name: Checkout ComfyUI
+        uses: actions/checkout@v4
+        with:
+          repository: "comfyanonymous/ComfyUI"
+          path: ComfyUI
+          ref: master
+
+      - name: Copy compiled assets
+        run: |
+          rm -rf ./ComfyUI/web/*
+          cp -R dist/* ./ComfyUI/web/
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.PAT }}
+          commit-message: 'Update frontend assets from PR #${{ github.event.pull_request.number }}'
+          title: 'Update frontend assets from PR #${{ github.event.pull_request.number }}'
+          body: |
+            This PR updates the compiled frontend assets from PR #${{ github.event.pull_request.number }} in the frontend repo.
+
+            Frontend PR: ${{ github.event.pull_request.html_url }}
+          branch: update-frontend-assets-pr-${{ github.event.pull_request.number }}
+          base: main
+          path: ComfyUI

.husky/pre-commit

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

.prettierrc

@@ -2,6 +2,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80
+  "trailingComma": "none"
 }

README.md

@@ -33,11 +33,11 @@
 
 ### Nightly Release
 
-Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases).
+Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases). 
 
 To use the latest nightly release, add the following command line argument to your ComfyUI launch script:
 
-```bat
+```
 --front-end-version Comfy-Org/ComfyUI_frontend@latest
 ```
 
@@ -62,31 +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>
-
-## Basic UI
-![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
-
-## Reset button
-![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
-
-## Edit Keybinding
-![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
-![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
-
-[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
-
-</details>
-
 <details>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
@@ -115,58 +90,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>
-
-[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
-
-</details>
-
-<details>
-  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
-
-Dropping a link of correct type on node widget will automatically convert the widget to input.
-
-[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
-
-</details>
-
-<details>
-  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
-
-The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
-or by holding the space key.
-
-[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
-
-</details>
-
-<details>
-  <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
-
-[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
-
-</details>
-
-<details>
-  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
-
-![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
-
-</details>
-
 <details>
   <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
 
@@ -213,125 +136,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>
-
-<details>
-  <summary>v1.3.7: Register commands and keybindings</summary>
-
-  Extensions can call the following API to register commands and keybindings. Do
-  note that keybindings defined in core cannot be overwritten, and some keybindings
-  are reserved by the browser.
-
-```js
-  app.registerExtension({
-    name: 'TestExtension1',
-    commands: [
-      {
-        id: 'TestCommand',
-        function: () => {
-          alert('TestCommand')
-        }
-      }
-    ],
-    keybindings: [
-      {
-        combo: { key: 'k' },
-        commandId: 'TestCommand'
-      }
-    ]
-  })
-```
-
-</details>
+### Node developers API
 
 <details>
   <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
@@ -339,24 +144,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
   Extensions can call the following API to register custom topbar menu items.
 
 ```js
-  app.registerExtension({
-    name: 'TestExtension1',
-    commands: [
-      {
-        id: 'foo-id',
-        label: 'foo',
-        function: () => {
-          alert(1)
-        }
-      }
-    ],
-    menuCommands: [
-      {
-        path: ['ext', 'ext2'],
-        commands: ['foo-id']
-      }
-    ]
-  })
+  app.extensionManager.menu.registerTopbarCommands(["ext", "ext2"], [{id:"foo", label: "foo", function: () => alert(1)}])
 ```
 
 ![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
@@ -405,16 +193,33 @@ We will support custom icons later.
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
 </details>
 
+## Road Map
+
+### What has been done
+
+- Migrate all code to TypeScript with minimal change modification to the original logic.
+- Bundle all code with Vite's rollup build.
+- Added a shim layer to be backward compatible with the existing extension system. <https://github.com/huchenlei/ComfyUI_frontend/pull/15>
+- Front-end dev server.
+- Zod schema for input validation on ComfyUI workflow.
+- Make litegraph a npm dependency. <https://github.com/Comfy-Org/ComfyUI_frontend/pull/89>
+- Introduce Vue to start managing part of the UI.
+- Easy install and version management (<https://github.com/comfyanonymous/ComfyUI/pull/3897>).
+- Better node management. Sherlock <https://github.com/Nuked88/ComfyUI-N-Sidebar>.
+- Replace the existing ComfyUI front-end implementation. <https://github.com/comfyanonymous/ComfyUI/pull/4379>
+
+
+### What to be done
+
+- Remove `@ts-ignore`s.
+- Turn on `strict` on `tsconfig.json`.
+- Add more widget types for node developers.
+- LLM streaming node.
+- Linear mode (Similar to InvokeAI's linear mode).
+- Keybinding settings management. Register keybindings API for custom nodes.
+
 ## 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,31 +230,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
-
-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
@@ -457,16 +242,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.
@@ -474,6 +249,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/README.md

@@ -5,7 +5,7 @@ This document outlines the setup and usage of Playwright for testing the ComfyUI
 ## WARNING
 
 The browser tests will change the ComfyUI backend state, such as user settings and saved workflows.
-If `TEST_COMFYUI_DIR` in `.env` isn't set to your `(Comfy Path)/ComfyUI` directory, these changes won't be automatically restored.
+Please backup your ComfyUI data before running the tests locally.
 
 ## Setup
 

browser_tests/appMenu.spec.ts

@@ -1,14 +1,18 @@
 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)
 
-test.describe('Actionbar', () => {
+test.describe('AppMenu', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
   })
 
   /**
@@ -19,12 +23,12 @@ test.describe('Actionbar', () => {
     ws
   }) => {
     // Enable change auto-queue mode
-    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
+    const queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()
     expect(await queueOpts.getMode()).toBe('change')
-    await comfyPage.actionbar.queueButton.toggleOptions()
+    await comfyPage.appMenu.queueButton.toggleOptions()
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0
@@ -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)
     }
 
@@ -111,15 +113,4 @@ test.describe('Actionbar', () => {
     ).toBe(END)
     expect(promptNumber, 'queued prompt count should be 2').toBe(2)
   })
-
-  test('Can dock actionbar into top menu', async ({ comfyPage }) => {
-    await comfyPage.page.dragAndDrop(
-      '.actionbar .drag-handle',
-      '.comfyui-menu',
-      {
-        targetPosition: { x: 0, y: 0 }
-      }
-    )
-    expect(await comfyPage.actionbar.isDocked()).toBe(true)
-  })
 })

browser_tests/assets/group_node_v1.3.3.json

@@ -1,404 +0,0 @@
-{
-  "last_node_id": 10,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "workflow>group_node",
-      "pos": {
-        "0": 26,
-        "1": 186
-      },
-      "size": {
-        "0": 400,
-        "1": 390
-      },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "workflow>group_node"
-      },
-      "widgets_values": [
-        512,
-        512,
-        1,
-        "v1-5-pruned-emaonly.ckpt",
-        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
-        "text, watermark",
-        156680208700286,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1,
-        "ComfyUI"
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "groupNodes": {
-      "group_node": {
-        "nodes": [
-          {
-            "id": -1,
-            "type": "EmptyLatentImage",
-            "pos": {
-              "0": 473,
-              "1": 609
-            },
-            "size": {
-              "0": 315,
-              "1": 106
-            },
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [],
-                "slot_index": 0
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "EmptyLatentImage"
-            },
-            "widgets_values": [
-              512,
-              512,
-              1
-            ],
-            "index": 0
-          },
-          {
-            "id": -1,
-            "type": "CheckpointLoaderSimple",
-            "pos": {
-              "0": 26,
-              "1": 474
-            },
-            "size": {
-              "0": 315,
-              "1": 98
-            },
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "MODEL",
-                "type": "MODEL",
-                "links": [],
-                "slot_index": 0
-              },
-              {
-                "name": "CLIP",
-                "type": "CLIP",
-                "links": [],
-                "slot_index": 1
-              },
-              {
-                "name": "VAE",
-                "type": "VAE",
-                "links": [],
-                "slot_index": 2
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "CheckpointLoaderSimple"
-            },
-            "widgets_values": [
-              "v1-5-pruned-emaonly.ckpt"
-            ],
-            "index": 1
-          },
-          {
-            "id": -1,
-            "type": "CLIPTextEncode",
-            "pos": {
-              "0": 415,
-              "1": 186
-            },
-            "size": {
-              "0": 422.84503173828125,
-              "1": 164.31304931640625
-            },
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "clip",
-                "type": "CLIP",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "name": "CONDITIONING",
-                "type": "CONDITIONING",
-                "links": [],
-                "slot_index": 0
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "CLIPTextEncode"
-            },
-            "widgets_values": [
-              "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
-            ],
-            "index": 2
-          },
-          {
-            "id": -1,
-            "type": "CLIPTextEncode",
-            "pos": {
-              "0": 413,
-              "1": 389
-            },
-            "size": {
-              "0": 425.27801513671875,
-              "1": 180.6060791015625
-            },
-            "flags": {},
-            "order": 3,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "clip",
-                "type": "CLIP",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "name": "CONDITIONING",
-                "type": "CONDITIONING",
-                "links": [],
-                "slot_index": 0
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "CLIPTextEncode"
-            },
-            "widgets_values": [
-              "text, watermark"
-            ],
-            "index": 3
-          },
-          {
-            "id": -1,
-            "type": "KSampler",
-            "pos": {
-              "0": 863,
-              "1": 186
-            },
-            "size": {
-              "0": 315,
-              "1": 262
-            },
-            "flags": {},
-            "order": 4,
-            "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": [],
-                "slot_index": 0
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [
-              156680208700286,
-              "randomize",
-              20,
-              8,
-              "euler",
-              "normal",
-              1
-            ],
-            "index": 4
-          },
-          {
-            "id": -1,
-            "type": "VAEDecode",
-            "pos": {
-              "0": 1209,
-              "1": 188
-            },
-            "size": {
-              "0": 210,
-              "1": 46
-            },
-            "flags": {},
-            "order": 5,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "samples",
-                "type": "LATENT",
-                "link": null
-              },
-              {
-                "name": "vae",
-                "type": "VAE",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": [],
-                "slot_index": 0
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "index": 5
-          },
-          {
-            "id": -1,
-            "type": "SaveImage",
-            "pos": {
-              "0": 1451,
-              "1": 189
-            },
-            "size": {
-              "0": 210,
-              "1": 58
-            },
-            "flags": {},
-            "order": 6,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "images",
-                "type": "IMAGE",
-                "link": null
-              }
-            ],
-            "outputs": [],
-            "properties": {},
-            "widgets_values": [
-              "ComfyUI"
-            ],
-            "index": 6
-          }
-        ],
-        "links": [
-          [
-            1,
-            1,
-            2,
-            0,
-            4,
-            "CLIP"
-          ],
-          [
-            1,
-            1,
-            3,
-            0,
-            4,
-            "CLIP"
-          ],
-          [
-            1,
-            0,
-            4,
-            0,
-            4,
-            "MODEL"
-          ],
-          [
-            2,
-            0,
-            4,
-            1,
-            6,
-            "CONDITIONING"
-          ],
-          [
-            3,
-            0,
-            4,
-            2,
-            7,
-            "CONDITIONING"
-          ],
-          [
-            0,
-            0,
-            4,
-            3,
-            5,
-            "LATENT"
-          ],
-          [
-            4,
-            0,
-            5,
-            0,
-            3,
-            "LATENT"
-          ],
-          [
-            1,
-            2,
-            5,
-            1,
-            4,
-            "VAE"
-          ],
-          [
-            5,
-            0,
-            6,
-            0,
-            8,
-            "IMAGE"
-          ]
-        ],
-        "external": []
-      }
-    }
-  },
-  "version": 0.4
-}

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/node_template_templates.json

@@ -1,10 +0,0 @@
-[
-    {
-        "name": "Three Nodes Template",
-        "data": "{\"nodes\":[{\"id\":7,\"type\":\"CLIPTextEncode\",\"pos\":[413,389],\"size\":[425.27801513671875,180.6060791015625],\"flags\":{},\"order\":3,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"text, watermark\"]},{\"id\":6,\"type\":\"CLIPTextEncode\",\"pos\":[415,186],\"size\":[422.84503173828125,164.31304931640625],\"flags\":{},\"order\":2,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"beautiful scenery nature glass bottle landscape, , purple galaxy bottle,\"]},{\"id\":4,\"type\":\"CheckpointLoaderSimple\",\"pos\":[26,474],\"size\":[315,98],\"flags\":{},\"order\":1,\"mode\":0,\"inputs\":[],\"outputs\":[{\"name\":\"MODEL\",\"type\":\"MODEL\",\"links\":[],\"slot_index\":0},{\"name\":\"CLIP\",\"type\":\"CLIP\",\"links\":[],\"slot_index\":1},{\"name\":\"VAE\",\"type\":\"VAE\",\"links\":[],\"slot_index\":2}],\"properties\":{\"Node name for S&R\":\"CheckpointLoaderSimple\"},\"widgets_values\":[\"v1-5-pruned-emaonly.ckpt\"]}],\"groups\":[],\"reroutes\":[],\"links\":[{\"id\":5,\"origin_id\":4,\"origin_slot\":1,\"target_id\":7,\"target_slot\":0,\"type\":\"CLIP\"},{\"id\":3,\"origin_id\":4,\"origin_slot\":1,\"target_id\":6,\"target_slot\":0,\"type\":\"CLIP\"}]}"
-    },
-    {
-        "name": "Completely empty template",
-        "data": "{\"nodes\":[],\"groups\":[],\"reroutes\":[],\"links\":[]}"
-    }
-]

browser_tests/assets/old_workflow_converted_input.json

@@ -1,128 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "ControlNetApplyAdvanced",
-      "pos": {
-        "0": 449,
-        "1": 204
-      },
-      "size": [
-        340.20001220703125,
-        166
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "control_net",
-          "type": "CONTROL_NET",
-          "link": null
-        },
-        {
-          "name": "image",
-          "type": "IMAGE",
-          "link": null
-        },
-        {
-          "name": "strength",
-          "type": "FLOAT",
-          "link": 1,
-          "widget": {
-            "name": "strength"
-          }
-        }
-      ],
-      "outputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "links": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "ControlNetApplyAdvanced"
-      },
-      "widgets_values": [
-        1,
-        0,
-        1
-      ]
-    },
-    {
-      "id": 2,
-      "type": "PrimitiveNode",
-      "pos": {
-        "0": 177,
-        "1": 265
-      },
-      "size": [
-        210,
-        82
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "FLOAT",
-          "type": "FLOAT",
-          "links": [
-            1
-          ],
-          "widget": {
-            "name": "strength"
-          }
-        }
-      ],
-      "properties": {
-        "Run widget replace on values": false
-      },
-      "widgets_values": [
-        1,
-        "fixed"
-      ]
-    }
-  ],
-  "links": [
-    [
-      1,
-      2,
-      0,
-      1,
-      4,
-      "FLOAT"
-    ]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": {
-        "0": 47.541666666666515,
-        "1": 186.9375
-      }
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/primitive_node_unconnected.json

@@ -1,104 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": {
-        "0": 304.3653259277344,
-        "1": 42.15586471557617
-      },
-      "size": [
-        315,
-        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,
-          "shape": 3
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 1,
-      "type": "PrimitiveNode",
-      "pos": {
-        "0": 14,
-        "1": 43
-      },
-      "size": [
-        203.1999969482422,
-        40.368401303242536
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "connect to widget input",
-          "type": "*",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "Run widget replace on values": false
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "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/assets/vintage_clipboard_template.json

@@ -1,6 +0,0 @@
-[
-    {
-        "name": "vintageClipboard Template",
-        "data": "{\"nodes\":[{\"id\":-1,\"type\":\"CheckpointLoaderSimple\",\"pos\":[26,474],\"size\":[315,98],\"flags\":{},\"order\":1,\"mode\":0,\"inputs\":[],\"outputs\":[{\"name\":\"MODEL\",\"type\":\"MODEL\",\"links\":[],\"slot_index\":0},{\"name\":\"CLIP\",\"type\":\"CLIP\",\"links\":[],\"slot_index\":1},{\"name\":\"VAE\",\"type\":\"VAE\",\"links\":[],\"slot_index\":2}],\"properties\":{\"Node name for S&R\":\"CheckpointLoaderSimple\"},\"widgets_values\":[\"v1-5-pruned-emaonly.ckpt\"]},{\"id\":-1,\"type\":\"CLIPTextEncode\",\"pos\":[415,186],\"size\":[422.84503173828125,164.31304931640625],\"flags\":{},\"order\":2,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"beautiful scenery nature glass bottle landscape, , purple galaxy bottle,\"]},{\"id\":-1,\"type\":\"CLIPTextEncode\",\"pos\":[413,389],\"size\":[425.27801513671875,180.6060791015625],\"flags\":{},\"order\":3,\"mode\":0,\"inputs\":[{\"name\":\"clip\",\"type\":\"CLIP\",\"link\":null}],\"outputs\":[{\"name\":\"CONDITIONING\",\"type\":\"CONDITIONING\",\"links\":[],\"slot_index\":0}],\"properties\":{\"Node name for S&R\":\"CLIPTextEncode\"},\"widgets_values\":[\"text, watermark\"]}],\"links\":[[0,1,1,0,4],[0,1,2,0,4]]}"
-    }
-]

browser_tests/browserTabTitle.spec.ts

@@ -1,40 +1,46 @@
 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', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     })
 
     test('Can display workflow name', 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}`)
     })
 
-    // Failing on CI
-    // Cannot reproduce locally
+    // 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}`)
 
-      await comfyPage.menu.topbar.saveWorkflow('test')
-      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
+      await comfyPage.menu.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test')
 
       const textBox = comfyPage.widgetTextBox
       await textBox.fill('Hello World')
       await comfyPage.clickEmptySpace()
-      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`*test`)
 
       // 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

@@ -1,172 +0,0 @@
-import {
-  ComfyPage,
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from './fixtures/ComfyPage'
-import type { useWorkspaceStore } from '../src/stores/workspaceStore'
-
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
-
-async function beforeChange(comfyPage: ComfyPage) {
-  await comfyPage.page.evaluate(() => {
-    window['app'].canvas.emitBeforeChange()
-  })
-}
-async function afterChange(comfyPage: ComfyPage) {
-  await comfyPage.page.evaluate(() => {
-    window['app'].canvas.emitAfterChange()
-  })
-}
-
-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
-  }) => {
-    const node = (await comfyPage.getFirstNodeRef())!
-    expect(node).toBeTruthy()
-    await expect(node).not.toBeCollapsed()
-    await expect(node).not.toBeBypassed()
-
-    // Make changes outside set
-    // Bypass + collapse node
-    await node.click('collapse')
-    await comfyPage.ctrlB()
-    await expect(node).toBeCollapsed()
-    await expect(node).toBeBypassed()
-
-    // Undo, undo, ensure both changes undone
-    await comfyPage.ctrlZ()
-    await expect(node).not.toBeBypassed()
-    await expect(node).toBeCollapsed()
-    await comfyPage.ctrlZ()
-    await expect(node).not.toBeBypassed()
-    await expect(node).not.toBeCollapsed()
-
-    // Run again, but within a change transaction
-    await beforeChange(comfyPage)
-
-    await node.click('collapse')
-    await comfyPage.ctrlB()
-    await expect(node).toBeCollapsed()
-    await expect(node).toBeBypassed()
-
-    // End transaction
-    await afterChange(comfyPage)
-
-    // Ensure undo reverts both changes
-    await comfyPage.ctrlZ()
-    await expect(node).not.toBeBypassed()
-    await expect(node).not.toBeCollapsed()
-  })
-
-  test('Can nest multiple change transactions without adding undo steps', async ({
-    comfyPage
-  }) => {
-    const node = (await comfyPage.getFirstNodeRef())!
-    const bypassAndPin = async () => {
-      await beforeChange(comfyPage)
-      await comfyPage.ctrlB()
-      await expect(node).toBeBypassed()
-      await comfyPage.page.keyboard.press('KeyP')
-      await comfyPage.nextFrame()
-      await expect(node).toBePinned()
-      await afterChange(comfyPage)
-    }
-
-    const collapse = async () => {
-      await beforeChange(comfyPage)
-      await node.click('collapse', { moveMouseToEmptyArea: true })
-      await expect(node).toBeCollapsed()
-      await afterChange(comfyPage)
-    }
-
-    const multipleChanges = async () => {
-      await beforeChange(comfyPage)
-      // Call other actions that uses begin/endChange
-      await collapse()
-      await bypassAndPin()
-      await afterChange(comfyPage)
-    }
-
-    await multipleChanges()
-
-    await comfyPage.ctrlZ()
-    await expect(node).not.toBeBypassed()
-    await expect(node).not.toBePinned()
-    await expect(node).not.toBeCollapsed()
-
-    await comfyPage.ctrlY()
-    await expect(node).toBeBypassed()
-    await expect(node).toBePinned()
-    await expect(node).toBeCollapsed()
-  })
-})

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,49 +0,0 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('Keybindings', () => {
-  test('Should execute command', async ({ comfyPage }) => {
-    await comfyPage.registerCommand('TestCommand', () => {
-      window['foo'] = true
-    })
-
-    await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
-  })
-
-  test('Should execute async command', async ({ comfyPage }) => {
-    await comfyPage.registerCommand('TestCommand', async () => {
-      await new Promise<void>((resolve) =>
-        setTimeout(() => {
-          window['foo'] = true
-          resolve()
-        }, 5)
-      )
-    })
-
-    await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
-  })
-
-  test('Should handle command errors', async ({ comfyPage }) => {
-    await comfyPage.registerCommand('TestCommand', () => {
-      throw new Error('Test error')
-    })
-
-    await comfyPage.executeCommand('TestCommand')
-    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
-  })
-
-  test('Should handle async command errors', async ({ comfyPage }) => {
-    await comfyPage.registerCommand('TestCommand', async () => {
-      await new Promise<void>((resolve, reject) =>
-        setTimeout(() => {
-          reject(new Error('Test error'))
-        }, 5)
-      )
-    })
-
-    await comfyPage.executeCommand('TestCommand')
-    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
-  })
-})

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')
   })
 
@@ -86,23 +86,4 @@ test.describe('Copy Paste', () => {
     await comfyPage.page.keyboard.up('Alt')
     await expect(comfyPage.canvas).toHaveScreenshot('drag-copy-copied-node.png')
   })
-
-  test('Can undo paste multiple nodes as single action', async ({
-    comfyPage
-  }) => {
-    const initialCount = await comfyPage.getGraphNodesCount()
-    expect(initialCount).toBeGreaterThan(1)
-    await comfyPage.canvas.click()
-    await comfyPage.ctrlA()
-    await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.ctrlC()
-    await comfyPage.ctrlV()
-
-    const pasteCount = await comfyPage.getGraphNodesCount()
-    expect(pasteCount).toBe(initialCount * 2)
-
-    await comfyPage.ctrlZ()
-    const undoCount = await comfyPage.getGraphNodesCount()
-    expect(undoCount).toBe(initialCount)
-  })
 })

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,36 +63,35 @@ 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')
-  })
-})
-
-test.describe('Settings', () => {
-  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
-    await comfyPage.page.keyboard.press('Control+,')
-    const searchBox = comfyPage.page.locator('.settings-content')
-    await expect(searchBox).toBeVisible()
-  })
-
-  test('Can open settings with hotkey', async ({ comfyPage }) => {
-    await comfyPage.page.keyboard.down('ControlOrMeta')
-    await comfyPage.page.keyboard.press(',')
-    await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
-    await expect(settingsLocator).toBeVisible()
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(settingsLocator).not.toBeVisible()
-  })
-
-  test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
-    const maxSpeed = 2.5
-    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
-    await test.step('Setting should persist', async () => {
-      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
-    })
+    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()
   })
 })

browser_tests/extensionAPI.spec.ts

@@ -1,160 +1,32 @@
-import { expect, Locator } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Topbar commands', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  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({
-        name: 'TestExtension1',
-        commands: [
+      window['app'].extensionManager.menu.registerTopbarCommands(
+        ['ext'],
+        [
           {
             id: 'foo',
-            label: 'foo-command',
+            label: 'foo',
             function: () => {
               window['foo'] = true
             }
           }
-        ],
-        menuCommands: [
-          {
-            path: ['ext'],
-            commands: ['foo']
-          }
         ]
-      })
+      )
     })
 
-    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo'])
     expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
   })
-
-  test('Should not allow register command defined in other extension', async ({
-    comfyPage
-  }) => {
-    await comfyPage.registerCommand('foo', () => alert(1))
-    await comfyPage.page.evaluate(() => {
-      window['app'].registerExtension({
-        name: 'TestExtension1',
-        menuCommands: [
-          {
-            path: ['ext'],
-            commands: ['foo']
-          }
-        ]
-      })
-    })
-
-    const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
-    expect(await menuItem.count()).toBe(0)
-  })
-
-  test('Should allow registering keybindings', async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      const app = window['app']
-      app.registerExtension({
-        name: 'TestExtension1',
-        commands: [
-          {
-            id: 'TestCommand',
-            function: () => {
-              window['TestCommand'] = true
-            }
-          }
-        ],
-        keybindings: [
-          {
-            combo: { key: 'k' },
-            commandId: 'TestCommand'
-          }
-        ]
-      })
-    })
-
-    await comfyPage.page.keyboard.press('k')
-    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
-      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/ComfyPage.ts

@@ -1,886 +0,0 @@
-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 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'
-
-class ComfyMenu {
-  public readonly sideToolbar: Locator
-  public readonly themeToggleButton: Locator
-  public readonly saveButton: Locator
-
-  constructor(public readonly page: Page) {
-    this.sideToolbar = page.locator('.side-tool-bar-container')
-    this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
-    this.saveButton = page
-      .locator('button[title="Save the current workflow"]')
-      .nth(0)
-  }
-
-  get nodeLibraryTab() {
-    return new NodeLibrarySidebarTab(this.page)
-  }
-
-  get workflowsTab() {
-    return new WorkflowsSidebarTab(this.page)
-  }
-
-  get topbar() {
-    return new Topbar(this.page)
-  }
-
-  async toggleTheme() {
-    await this.themeToggleButton.click()
-    await this.page.evaluate(() => {
-      return new Promise((resolve) => {
-        window['app'].ui.settings.addEventListener(
-          'Comfy.ColorPalette.change',
-          resolve,
-          { once: true }
-        )
-
-        setTimeout(resolve, 5000)
-      })
-    })
-  }
-
-  async getThemeId() {
-    return await this.page.evaluate(async () => {
-      return await window['app'].ui.settings.getSettingValue(
-        'Comfy.ColorPalette'
-      )
-    })
-  }
-}
-
-type FolderStructure = {
-  [key: string]: FolderStructure | string
-}
-
-export class ComfyPage {
-  public readonly url: string
-  // All canvas position operations are based on default view of canvas.
-  public readonly canvas: Locator
-  public readonly widgetTextBox: Locator
-  public readonly contextMenu: Locator
-
-  // Buttons
-  public readonly resetViewButton: Locator
-  public readonly queueButton: Locator
-
-  // Inputs
-  public readonly workflowUploadInput: Locator
-
-  // Components
-  public readonly searchBox: ComfyNodeSearchBox
-  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,
-    public readonly request: APIRequestContext
-  ) {
-    this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
-    this.canvas = page.locator('#graph-canvas')
-    this.widgetTextBox = page.getByPlaceholder('text').nth(1)
-    this.contextMenu = page.locator('.litegraph.litecontextmenu')
-    this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
-    this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.workflowUploadInput = page.locator('#comfy-file-input')
-    this.searchBox = new ComfyNodeSearchBox(page)
-    this.menu = new ComfyMenu(page)
-    this.actionbar = new ComfyActionbar(page)
-    this.templates = new ComfyTemplates(page)
-    this.settingDialog = new SettingDialog(page)
-  }
-
-  convertLeafToContent(structure: FolderStructure): FolderStructure {
-    const result: FolderStructure = {}
-
-    for (const [key, value] of Object.entries(structure)) {
-      if (typeof value === 'string') {
-        const filePath = this.assetPath(value)
-        result[key] = fs.readFileSync(filePath, 'utf-8')
-      } else {
-        result[key] = this.convertLeafToContent(value)
-      }
-    }
-
-    return result
-  }
-
-  async getGraphNodesCount(): Promise<number> {
-    return await this.page.evaluate(() => {
-      return window['app']?.graph?.nodes?.length || 0
-    })
-  }
-
-  async getSelectedGraphNodesCount(): Promise<number> {
-    return await this.page.evaluate(() => {
-      return (
-        window['app']?.graph?.nodes?.filter(
-          (node: any) => node.is_selected === true
-        ).length || 0
-      )
-    })
-  }
-
-  async getGraphSelectedItemsCount(): Promise<number | undefined> {
-    return await this.page.evaluate(() => {
-      return window['app']?.canvas?.selectedItems?.size
-    })
-  }
-
-  async setupWorkflowsDirectory(structure: FolderStructure) {
-    const resp = await this.request.post(
-      `${this.url}/api/devtools/setup_folder_structure`,
-      {
-        data: {
-          tree_structure: this.convertLeafToContent(structure),
-          base_path: `user/${this.id}/workflows`
-        }
-      }
-    )
-
-    if (resp.status() !== 200) {
-      throw new Error(
-        `Failed to setup workflows directory: ${await resp.text()}`
-      )
-    }
-  }
-
-  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 clearNodeTemplates() {
-    const resp = await this.request.delete(
-      `${this.url}/api/userdata/comfy.templates.json`,
-      {
-        headers: { 'Comfy-User': this.id }
-      }
-    )
-
-    const status = resp.status()
-    if (status !== 204 && status !== 404)
-      throw new Error(`Failed to delete node templates: ${await resp.text()}`)
-  }
-
-  async setNodeTemplates(fileName: string) {
-    const path = this.assetPath(fileName)
-    const data = fs.readFileSync(path, 'utf-8')
-
-    const resp = await this.request.post(
-      `${this.url}/api/userdata/comfy.templates.json`,
-      {
-        headers: {
-          'Comfy-User': this.id,
-          overwrite: 'true',
-          full_info: 'true'
-        },
-        data
-      }
-    )
-
-    if (resp.status() !== 200)
-      throw new Error(`Failed to upload node templates: ${await resp.text()}`)
-  }
-
-  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() {
-    await this.goto()
-    await this.page.evaluate((id) => {
-      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'
-    })
-    await this.page.addStyleTag({
-      url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&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'
-    })
-    await this.page.addStyleTag({
-      content: `
-      * {
-				font-family: 'Roboto Mono', 'Noto Color Emoji';
-			}`
-    })
-    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
-    )
-    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
-    await this.nextFrame()
-  }
-
-  public assetPath(fileName: string) {
-    return `./browser_tests/assets/${fileName}`
-  }
-
-  async executeCommand(commandId: string) {
-    await this.page.evaluate((id: string) => {
-      return window['app'].extensionManager.command.execute(id)
-    }, commandId)
-  }
-
-  async registerCommand(
-    commandId: string,
-    command: (() => void) | (() => Promise<void>)
-  ) {
-    await this.page.evaluate(
-      ({ commandId, commandStr }) => {
-        const app = window['app']
-        const randomSuffix = Math.random().toString(36).substring(2, 8)
-        const extensionName = `TestExtension_${randomSuffix}`
-
-        app.registerExtension({
-          name: extensionName,
-          commands: [
-            {
-              id: commandId,
-              function: eval(commandStr)
-            }
-          ]
-        })
-      },
-      { commandId, commandStr: command.toString() }
-    )
-  }
-
-  async registerKeybinding(keyCombo: KeyCombo, command: () => void) {
-    await this.page.evaluate(
-      ({ keyCombo, commandStr }) => {
-        const app = window['app']
-        const randomSuffix = Math.random().toString(36).substring(2, 8)
-        const extensionName = `TestExtension_${randomSuffix}`
-        const commandId = `TestCommand_${randomSuffix}`
-
-        app.registerExtension({
-          name: extensionName,
-          keybindings: [
-            {
-              combo: keyCombo,
-              commandId: commandId
-            }
-          ],
-          commands: [
-            {
-              id: commandId,
-              function: eval(commandStr)
-            }
-          ]
-        })
-      },
-      { keyCombo, commandStr: command.toString() }
-    )
-  }
-
-  async setSetting(settingId: string, settingValue: any) {
-    return await this.page.evaluate(
-      async ({ id, value }) => {
-        await window['app'].extensionManager.setting.set(id, value)
-      },
-      { id: settingId, value: settingValue }
-    )
-  }
-
-  async getSetting(settingId: string) {
-    return await this.page.evaluate(async (id) => {
-      return await window['app'].extensionManager.setting.get(id)
-    }, settingId)
-  }
-
-  async reload() {
-    await this.page.reload({ timeout: 15000 })
-    await this.setup()
-  }
-
-  async goto() {
-    await this.page.goto(this.url)
-  }
-
-  async nextFrame() {
-    await this.page.evaluate(() => {
-      return new Promise<number>(requestAnimationFrame)
-    })
-  }
-
-  async delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms))
-  }
-
-  async loadWorkflow(workflowName: string) {
-    await this.workflowUploadInput.setInputFiles(
-      this.assetPath(`${workflowName}.json`)
-    )
-    await this.nextFrame()
-  }
-
-  async resetView() {
-    if (await this.resetViewButton.isVisible()) {
-      await this.resetViewButton.click()
-    }
-    // Avoid "Reset View" button highlight.
-    await this.page.mouse.move(10, 10)
-    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()
-  }
-
-  async clickTextEncodeNode1() {
-    await this.canvas.click({
-      position: {
-        x: 618,
-        y: 191
-      }
-    })
-    await this.nextFrame()
-  }
-
-  async clickTextEncodeNodeToggler() {
-    await this.canvas.click({
-      position: {
-        x: 430,
-        y: 171
-      }
-    })
-    await this.nextFrame()
-  }
-
-  async clickTextEncodeNode2() {
-    await this.canvas.click({
-      position: {
-        x: 622,
-        y: 400
-      }
-    })
-    await this.nextFrame()
-  }
-
-  async clickEmptySpace() {
-    await this.canvas.click({
-      position: {
-        x: 35,
-        y: 31
-      }
-    })
-    await this.nextFrame()
-  }
-
-  async dragAndDrop(
-    source: Position,
-    target: Position,
-    modifierKey?: 'ControlOrMeta' | 'Control' | 'Alt' | 'Shift'
-  ) {
-    if (modifierKey) await this.page.keyboard.down(modifierKey)
-    await this.page.mouse.move(source.x, source.y)
-    await this.page.mouse.down()
-    await this.page.mouse.move(target.x, target.y)
-    await this.page.mouse.up()
-    if (modifierKey) await this.page.keyboard.up(modifierKey)
-    await this.nextFrame()
-  }
-
-  async dragAndDropFile(fileName: string) {
-    const filePath = this.assetPath(fileName)
-
-    // Read the file content
-    const buffer = fs.readFileSync(filePath)
-
-    // Get file type
-    const getFileType = (fileName: string) => {
-      if (fileName.endsWith('.png')) return 'image/png'
-      if (fileName.endsWith('.webp')) return 'image/webp'
-      if (fileName.endsWith('.json')) return 'application/json'
-      return 'application/octet-stream'
-    }
-
-    const fileType = getFileType(fileName)
-
-    await this.page.evaluate(
-      async ({ buffer, fileName, fileType }) => {
-        const file = new File([new Uint8Array(buffer)], fileName, {
-          type: fileType
-        })
-        const dataTransfer = new DataTransfer()
-        dataTransfer.items.add(file)
-
-        const dropEvent = new DragEvent('drop', {
-          bubbles: true,
-          cancelable: true,
-          dataTransfer
-        })
-
-        Object.defineProperty(dropEvent, 'preventDefault', {
-          value: () => {},
-          writable: false
-        })
-
-        Object.defineProperty(dropEvent, 'stopPropagation', {
-          value: () => {},
-          writable: false
-        })
-
-        document.dispatchEvent(dropEvent)
-      },
-      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
-    )
-
-    await this.nextFrame()
-  }
-
-  async dragNode2() {
-    await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
-    await this.nextFrame()
-  }
-
-  // Default graph positions
-  get clipTextEncodeNode1InputSlot(): Position {
-    return { x: 427, y: 198 }
-  }
-
-  get clipTextEncodeNode2InputSlot(): Position {
-    return { x: 422, y: 402 }
-  }
-
-  // A point on input edge.
-  get clipTextEncodeNode2InputLinkPath(): Position {
-    return {
-      x: 395,
-      y: 422
-    }
-  }
-
-  get loadCheckpointNodeClipOutputSlot(): Position {
-    return { x: 332, y: 509 }
-  }
-
-  get emptySpace(): Position {
-    return { x: 427, y: 98 }
-  }
-
-  async disconnectEdge() {
-    await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
-  }
-
-  async connectEdge() {
-    await this.dragAndDrop(
-      this.loadCheckpointNodeClipOutputSlot,
-      this.clipTextEncodeNode1InputSlot
-    )
-  }
-
-  async adjustWidgetValue() {
-    // Adjust Empty Latent Image's width input.
-    const page = this.page
-    await page.locator('#graph-canvas').click({
-      position: {
-        x: 724,
-        y: 645
-      }
-    })
-    const dialogInput = page.locator('.graphdialog input[type="text"]')
-    await dialogInput.click()
-    await dialogInput.fill('128')
-    await dialogInput.press('Enter')
-    await this.nextFrame()
-  }
-
-  async zoom(deltaY: number, steps: number = 1) {
-    await this.page.mouse.move(10, 10)
-    for (let i = 0; i < steps; i++) {
-      await this.page.mouse.wheel(0, deltaY)
-    }
-    await this.nextFrame()
-  }
-
-  async pan(offset: Position, safeSpot?: Position) {
-    safeSpot = safeSpot || { x: 10, y: 10 }
-    await this.page.mouse.move(safeSpot.x, safeSpot.y)
-    await this.page.mouse.down()
-    // TEMPORARY HACK: Multiple pans open the search menu, so cheat and keep it closed.
-    // TODO: Fix that (double-click at not-the-same-coordinations should not open the menu)
-    await this.page.keyboard.press('Escape')
-    await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
-    await this.page.mouse.up()
-    await this.nextFrame()
-  }
-
-  async panWithTouch(offset: Position, safeSpot?: Position) {
-    safeSpot = safeSpot || { x: 10, y: 10 }
-    const client = await this.page.context().newCDPSession(this.page)
-    await client.send('Input.dispatchTouchEvent', {
-      type: 'touchStart',
-      touchPoints: [safeSpot]
-    })
-    await client.send('Input.dispatchTouchEvent', {
-      type: 'touchMove',
-      touchPoints: [{ x: offset.x + safeSpot.x, y: offset.y + safeSpot.y }]
-    })
-    await client.send('Input.dispatchTouchEvent', {
-      type: 'touchEnd',
-      touchPoints: []
-    })
-    await this.nextFrame()
-  }
-
-  async rightClickCanvas() {
-    await this.canvas.click({
-      position: { x: 10, y: 10 },
-      button: 'right'
-    })
-    await expect(this.contextMenu).toBeVisible()
-  }
-
-  async doubleClickCanvas() {
-    await this.page.mouse.dblclick(10, 10, { delay: 5 })
-    await this.nextFrame()
-  }
-
-  async clickEmptyLatentNode() {
-    await this.canvas.click({
-      position: {
-        x: 724,
-        y: 625
-      }
-    })
-    await this.page.mouse.move(10, 10)
-    await this.nextFrame()
-  }
-
-  async rightClickEmptyLatentNode() {
-    await this.canvas.click({
-      position: {
-        x: 724,
-        y: 645
-      },
-      button: 'right'
-    })
-    await this.page.mouse.move(10, 10)
-    await this.nextFrame()
-  }
-
-  async clickContextMenuItem(name: string): Promise<void> {
-    await this.page.getByRole('menuitem', { name }).click()
-  }
-
-  async select2Nodes() {
-    // Select 2 CLIP nodes.
-    await this.page.keyboard.down('Control')
-    await this.clickTextEncodeNode1()
-    await this.clickTextEncodeNode2()
-    await this.page.keyboard.up('Control')
-    await this.nextFrame()
-  }
-
-  async ctrlSend(keyToPress: string, locator: Locator | null = this.canvas) {
-    const target = locator ?? this.page.keyboard
-    await target.press(`Control+${keyToPress}`)
-    await this.nextFrame()
-  }
-
-  async ctrlA(locator?: Locator | null) {
-    await this.ctrlSend('KeyA', locator)
-  }
-
-  async ctrlB(locator?: Locator | null) {
-    await this.ctrlSend('KeyB', locator)
-  }
-
-  async ctrlC(locator?: Locator | null) {
-    await this.ctrlSend('KeyC', locator)
-  }
-
-  async ctrlV(locator?: Locator | null) {
-    await this.ctrlSend('KeyV', locator)
-  }
-
-  async ctrlZ(locator?: Locator | null) {
-    await this.ctrlSend('KeyZ', locator)
-  }
-
-  async ctrlY(locator?: Locator | null) {
-    await this.ctrlSend('KeyY', locator)
-  }
-
-  async ctrlArrowUp(locator?: Locator | null) {
-    await this.ctrlSend('ArrowUp', locator)
-  }
-
-  async ctrlArrowDown(locator?: Locator | null) {
-    await this.ctrlSend('ArrowDown', locator)
-  }
-
-  async closeMenu() {
-    await this.page.click('button.comfy-close-menu-btn')
-    await this.nextFrame()
-  }
-
-  async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click()
-    await expect(this.page.locator('.p-dialog')).toBeHidden()
-  }
-
-  async resizeNode(
-    nodePos: Position,
-    nodeSize: Size,
-    ratioX: number,
-    ratioY: number,
-    revertAfter: boolean = false
-  ) {
-    const bottomRight = {
-      x: nodePos.x + nodeSize.width,
-      y: nodePos.y + nodeSize.height
-    }
-    const target = {
-      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.nextFrame()
-    if (revertAfter) {
-      await this.dragAndDrop({ x: target.x - 2, y: target.y - 1 }, bottomRight)
-      await this.nextFrame()
-    }
-  }
-
-  async resizeKsamplerNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const ksamplerPos = {
-      x: 863,
-      y: 156
-    }
-    const ksamplerSize = {
-      width: 315,
-      height: 292
-    }
-    return this.resizeNode(
-      ksamplerPos,
-      ksamplerSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
-  }
-
-  async resizeLoadCheckpointNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const loadCheckpointPos = {
-      x: 26,
-      y: 444
-    }
-    const loadCheckpointSize = {
-      width: 315,
-      height: 127
-    }
-    return this.resizeNode(
-      loadCheckpointPos,
-      loadCheckpointSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
-  }
-
-  async resizeEmptyLatentNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const emptyLatentPos = {
-      x: 473,
-      y: 579
-    }
-    const emptyLatentSize = {
-      width: 315,
-      height: 136
-    }
-    return this.resizeNode(
-      emptyLatentPos,
-      emptyLatentSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
-  }
-
-  async convertAllNodesToGroupNode(groupNodeName: string) {
-    this.page.on('dialog', async (dialog) => {
-      await dialog.accept(groupNodeName)
-    })
-    await this.canvas.press('Control+a')
-    const node = await this.getFirstNodeRef()
-    await node!.clickContextMenuOption('Convert to Group Node')
-    await this.nextFrame()
-  }
-  async convertOffsetToCanvas(pos: [number, number]) {
-    return this.page.evaluate((pos) => {
-      return window['app'].canvas.ds.convertOffsetToCanvas(pos)
-    }, pos)
-  }
-  async getNodeRefById(id: NodeId) {
-    return new NodeReference(id, this)
-  }
-  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
-    return Promise.all(
-      (
-        await this.page.evaluate((type) => {
-          return window['app'].graph.nodes
-            .filter((n) => n.type === type)
-            .map((n) => n.id)
-        }, type)
-      ).map((id: NodeId) => this.getNodeRefById(id))
-    )
-  }
-  async getFirstNodeRef(): Promise<NodeReference | null> {
-    const id = await this.page.evaluate(() => {
-      return window['app'].graph.nodes[0]?.id
-    })
-    if (!id) return null
-    return this.getNodeRefById(id)
-  }
-  async moveMouseToEmptyArea() {
-    await this.page.mouse.move(10, 10)
-  }
-}
-
-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)
-  }
-})
-
-const makeMatcher = function <T>(
-  getValue: (node: NodeReference) => Promise<T> | T,
-  type: string
-) {
-  return async function (
-    node: NodeReference,
-    options?: { timeout?: number; intervals?: number[] }
-  ) {
-    const value = await getValue(node)
-    let assertion = expect(
-      value,
-      'Node is ' + (this.isNot ? '' : 'not ') + type
-    )
-    if (this.isNot) {
-      assertion = assertion.not
-    }
-    await expect(async () => {
-      assertion.toBeTruthy()
-    }).toPass({ timeout: 250, ...options })
-    return {
-      pass: !this.isNot,
-      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
-    }
-  }
-}
-
-export const comfyExpect = expect.extend({
-  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
-  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed')
-})

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/globalSetup.ts

@@ -1,20 +0,0 @@
-import { FullConfig } from '@playwright/test'
-import { backupPath } from './utils/backupUtils'
-import dotenv from 'dotenv'
-
-dotenv.config()
-
-export default function globalSetup(config: FullConfig) {
-  if (!process.env.CI) {
-    if (process.env.TEST_COMFYUI_DIR) {
-      backupPath([process.env.TEST_COMFYUI_DIR, 'user'])
-      backupPath([process.env.TEST_COMFYUI_DIR, 'models'], {
-        renameAndReplaceWithScaffolding: true
-      })
-    } else {
-      console.warn(
-        'Set TEST_COMFYUI_DIR in .env to prevent user data (settings, workflows, etc.) from being overwritten'
-      )
-    }
-  }
-}

browser_tests/globalTeardown.ts

@@ -1,12 +0,0 @@
-import { FullConfig } from '@playwright/test'
-import { restorePath } from './utils/backupUtils'
-import dotenv from 'dotenv'
-
-dotenv.config()
-
-export default function globalTeardown(config: FullConfig) {
-  if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {
-    restorePath([process.env.TEST_COMFYUI_DIR, 'user'])
-    restorePath([process.env.TEST_COMFYUI_DIR, 'models'])
-  }
-}

browser_tests/graphCanvasMenu.spec.ts

@@ -1,38 +0,0 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('Graph Canvas Menu', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Set link render mode to spline to make sure it's not affected by other tests'
-    // side effects.
-    await comfyPage.setSetting('Comfy.LinkRenderMode', 2)
-  })
-
-  test('Can toggle link visibility', async ({ comfyPage }) => {
-    // Note: `Comfy.Graph.CanvasMenu` is disabled in comfyPage setup.
-    // so no cleanup is needed.
-    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
-
-    const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
-    await button.click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'canvas-with-hidden-links.png'
-    )
-    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
-      return window['LiteGraph'].HIDDEN_LINK
-    })
-    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).toBe(
-      hiddenLinkRenderMode
-    )
-
-    await button.click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'canvas-with-visible-links.png'
-    )
-    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe(
-      hiddenLinkRenderMode
-    )
-  })
-})

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 { 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'
@@ -10,12 +13,17 @@ test.describe('Group Node', () => {
     let libraryTab
 
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
       libraryTab = comfyPage.menu.nodeLibraryTab
       await comfyPage.convertAllNodesToGroupNode(groupNodeName)
       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)
     })
@@ -90,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
@@ -139,121 +146,6 @@ 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()
-  })
-
-  test.describe('Copy and paste', () => {
-    let groupNode: NodeReference | null
-    const WORKFLOW_NAME = 'group_node_v1.3.3'
-    const GROUP_NODE_CATEGORY = 'group nodes>workflow'
-    const GROUP_NODE_PREFIX = 'workflow>'
-    const GROUP_NODE_NAME = 'group_node' // Node name in given workflow
-    const GROUP_NODE_TYPE = `${GROUP_NODE_PREFIX}${GROUP_NODE_NAME}`
-
-    const isRegisteredLitegraph = async (comfyPage: ComfyPage) => {
-      return await comfyPage.page.evaluate((nodeType: string) => {
-        return !!window['LiteGraph'].registered_node_types[nodeType]
-      }, GROUP_NODE_TYPE)
-    }
-
-    const isRegisteredNodeDefStore = async (comfyPage: ComfyPage) => {
-      const groupNodesFolderCt = await comfyPage.menu.nodeLibraryTab
-        .getFolder(GROUP_NODE_CATEGORY)
-        .count()
-      return groupNodesFolderCt === 1
-    }
-
-    const verifyNodeLoaded = async (
-      comfyPage: ComfyPage,
-      expectedCount: number
-    ) => {
-      expect(await comfyPage.getNodeRefsByType(GROUP_NODE_TYPE)).toHaveLength(
-        expectedCount
-      )
-      expect(await isRegisteredLitegraph(comfyPage)).toBe(true)
-      expect(await isRegisteredNodeDefStore(comfyPage)).toBe(true)
-    }
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.loadWorkflow(WORKFLOW_NAME)
-      await comfyPage.menu.nodeLibraryTab.open()
-
-      groupNode = await comfyPage.getFirstNodeRef()
-      if (!groupNode)
-        throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)
-      await groupNode.copy()
-    })
-
-    test('Copies and pastes group node within the same workflow', async ({
-      comfyPage
-    }) => {
-      await comfyPage.ctrlV()
-      await verifyNodeLoaded(comfyPage, 2)
-    })
-
-    test('Copies and pastes group node after clearing workflow', async ({
-      comfyPage
-    }) => {
-      await comfyPage.menu.topbar.triggerTopbarCommand([
-        'Edit',
-        'Clear Workflow'
-      ])
-      await comfyPage.ctrlV()
-      await verifyNodeLoaded(comfyPage, 1)
-    })
-
-    test('Copies and pastes group node into a newly created blank workflow', async ({
-      comfyPage
-    }) => {
-      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
-      await comfyPage.ctrlV()
-      await verifyNodeLoaded(comfyPage, 1)
-    })
-
-    test('Copies and pastes group node across different workflows', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('default')
-      await comfyPage.ctrlV()
-      await verifyNodeLoaded(comfyPage, 1)
-    })
-
-    test('Serializes group node after copy and paste across workflows', async ({
-      comfyPage
-    }) => {
-      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
-      await comfyPage.ctrlV()
-      const currentGraphState = await comfyPage.page.evaluate(() =>
-        window['app'].graph.serialize()
-      )
-
-      await test.step('Load workflow containing a group node pasted from a different workflow', async () => {
-        await comfyPage.page.evaluate(
-          (workflow) => window['app'].loadGraphData(workflow),
-          currentGraphState
-        )
-        await comfyPage.nextFrame()
-        await verifyNodeLoaded(comfyPage, 1)
-      })
-    })
-  })
-
-  test.describe('Keybindings', () => {
-    test('Convert to group node, no selection', async ({ comfyPage }) => {
-      expect(await comfyPage.getVisibleToastCount()).toBe(0)
-      await comfyPage.page.keyboard.press('Alt+g')
-      await comfyPage.page.waitForTimeout(300)
-      expect(await comfyPage.getVisibleToastCount()).toBe(1)
-    })
-    test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
-      expect(await comfyPage.getVisibleToastCount()).toBe(0)
-      await comfyPage.clickTextEncodeNode1()
-      await comfyPage.page.keyboard.press('Alt+g')
-      await comfyPage.page.waitForTimeout(300)
-      expect(await comfyPage.getVisibleToastCount()).toBe(1)
-    })
+    expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
   })
 })

browser_tests/helpers/appMenu.ts

@@ -1,34 +1,29 @@
 import type { Page, Locator } from '@playwright/test'
 import type { AutoQueueMode } from '../../src/stores/queueStore'
 
-export class ComfyActionbar {
+export class ComfyAppMenu {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
 
   constructor(public readonly page: Page) {
-    this.root = page.locator('.actionbar')
+    this.root = page.locator('.app-menu')
     this.queueButton = new ComfyQueueButton(this)
   }
-
-  async isDocked() {
-    const className = await this.root.getAttribute('class')
-    return className?.includes('is-docked') ?? false
-  }
 }
 
 class ComfyQueueButton {
   public readonly root: Locator
   public readonly primaryButton: Locator
   public readonly dropdownButton: Locator
-  constructor(public readonly actionbar: ComfyActionbar) {
-    this.root = actionbar.root.getByTestId('queue-button')
+  constructor(public readonly appMenu: ComfyAppMenu) {
+    this.root = appMenu.root.getByTestId('queue-button')
     this.primaryButton = this.root.locator('.p-splitbutton-button')
     this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
   }
 
   public async toggleOptions() {
     await this.dropdownButton.click()
-    return new ComfyQueueButtonOptions(this.actionbar.page)
+    return new ComfyQueueButtonOptions(this.appMenu.page)
   }
 }
 

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 }) => {
@@ -32,51 +11,12 @@ test.describe('Node Interaction', () => {
     await expect(textBox).toHaveValue('Hello World 2')
   })
 
-  test.describe('Node Selection', () => {
-    const multiSelectModifiers = ['Control', 'Shift', 'Meta'] as const
-
-    multiSelectModifiers.forEach((modifier) => {
-      test(`Can add multiple nodes to selection using ${modifier}+Click`, async ({
-        comfyPage
-      }) => {
-        const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
-        for (const node of clipNodes) {
-          await node.click('title', { modifiers: [modifier] })
-        }
-        const selectedNodeCount = await comfyPage.getSelectedGraphNodesCount()
-        expect(selectedNodeCount).toBe(clipNodes.length)
-      })
-    })
-
-    test('Can highlight selected', async ({ comfyPage }) => {
-      await expect(comfyPage.canvas).toHaveScreenshot('default.png')
-      await comfyPage.clickTextEncodeNode1()
-      await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
-      await comfyPage.clickTextEncodeNode2()
-      await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
-    })
-
-    test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
-      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
-      const clipNode1Pos = await clipNodes[0].getPosition()
-      const clipNode2Pos = await clipNodes[1].getPosition()
-      const offset = 64
-      await comfyPage.page.keyboard.down('Meta')
-      await comfyPage.dragAndDrop(
-        {
-          x: Math.min(clipNode1Pos.x, clipNode2Pos.x) - offset,
-          y: Math.min(clipNode1Pos.y, clipNode2Pos.y) - offset
-        },
-        {
-          x: Math.max(clipNode1Pos.x, clipNode2Pos.x) + offset,
-          y: Math.max(clipNode1Pos.y, clipNode2Pos.y) + offset
-        }
-      )
-      await comfyPage.page.keyboard.up('Meta')
-      expect(await comfyPage.getSelectedGraphNodesCount()).toBe(
-        clipNodes.length
-      )
-    })
+  test('Can highlight selected', async ({ comfyPage }) => {
+    await expect(comfyPage.canvas).toHaveScreenshot('default.png')
+    await comfyPage.clickTextEncodeNode1()
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
+    await comfyPage.clickTextEncodeNode2()
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
   })
 
   test('Can drag node', async ({ comfyPage }) => {
@@ -94,8 +34,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 +75,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 +205,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 +220,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 +272,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')
@@ -430,52 +347,6 @@ test.describe('Canvas Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('panned.png')
   })
 
-  test('Cursor style changes when panning', async ({ comfyPage }) => {
-    const getCursorStyle = async () => {
-      return await comfyPage.page.evaluate(() => {
-        return (
-          document.getElementById('graph-canvas')!.style.cursor || 'default'
-        )
-      })
-    }
-
-    await comfyPage.page.mouse.move(10, 10)
-    expect(await getCursorStyle()).toBe('default')
-    await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
-    await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('default')
-
-    await comfyPage.page.keyboard.down('Space')
-    expect(await getCursorStyle()).toBe('grab')
-    await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
-    await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('grab')
-    await comfyPage.page.keyboard.up('Space')
-    expect(await getCursorStyle()).toBe('default')
-  })
-
-  test('Can pan when dragging a link', async ({ comfyPage }) => {
-    const posSlot1 = comfyPage.clipTextEncodeNode1InputSlot
-    await comfyPage.page.mouse.move(posSlot1.x, posSlot1.y)
-    await comfyPage.page.mouse.down()
-    const posEmpty = comfyPage.emptySpace
-    await comfyPage.page.mouse.move(posEmpty.x, posEmpty.y)
-    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link1.png')
-    await comfyPage.page.keyboard.down('Space')
-    await comfyPage.page.mouse.move(posEmpty.x + 100, posEmpty.y + 100)
-    // Canvas should be panned.
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'panning-when-dragging-link.png'
-    )
-    await comfyPage.page.keyboard.up('Space')
-    await comfyPage.page.mouse.move(posEmpty.x, posEmpty.y)
-    // Should be back to dragging link mode when space is released.
-    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link2.png')
-    await comfyPage.page.mouse.up()
-  })
-
   test('Can pan very far and back', async ({ comfyPage }) => {
     // intentionally slice the edge of where the clip text encode dom widgets are
     await comfyPage.pan({ x: -800, y: -300 }, { x: 1000, y: 10 })
@@ -507,7 +378,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 +389,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,18 +401,15 @@ 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', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
   })
 
   test('A workflow can be loaded multiple times in a row', async ({