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

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

@@ -20,4 +20,4 @@ jobs:
       run: npm ci
 
     - name: Run Prettier check
-      run: npm run format:check
+      run: npx prettier --check './**/*.{js,ts,tsx,vue}'

.github/workflows/i18n-custom-nodes.yaml

@@ -1,162 +0,0 @@
-name: Update Locales for given custom node repository
-on:
-  workflow_dispatch:
-    inputs:
-      owner:
-        description: 'Owner of the repository to update locales for'
-        required: true
-        type: string
-      repository:
-        description: 'Repository to update locales for'
-        required: true
-        type: string
-      fork_owner:
-        description: 'Owner of the forked repository'
-        required: false
-        type: string
-        default: 'Comfy-Org'
-
-jobs:
-  update-locales:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout ComfyUI
-      uses: actions/checkout@v4
-      with:
-        repository: 'comfyanonymous/ComfyUI'
-        path: 'ComfyUI'
-        ref: master
-    - name: Checkout ComfyUI_frontend
-      uses: actions/checkout@v4
-      with:
-        repository: 'Comfy-Org/ComfyUI_frontend'
-        path: 'ComfyUI_frontend'
-    - name: Checkout ComfyUI_devtools
-      uses: actions/checkout@v4
-      with:
-        repository: 'Comfy-Org/ComfyUI_devtools'
-        path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-    - name: Checkout custom node repository
-      uses: actions/checkout@v4
-      with:
-        repository: ${{ inputs.owner }}/${{ inputs.repository }}
-        path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
-    - uses: actions/setup-node@v3
-      with:
-        node-version: lts/*
-    - uses: actions/setup-python@v4
-      with:
-        python-version: '3.10'
-    - name: Install ComfyUI requirements
-      run: |
-        python -m pip install --upgrade pip
-        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-        pip install -r requirements.txt
-        pip install wait-for-it
-      shell: bash
-      working-directory: ComfyUI
-    - name: Install custom node requirements
-      run: |
-        if [ -f "requirements.txt" ]; then
-          pip install -r requirements.txt
-        fi
-      shell: bash
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-    - name: Build & Install ComfyUI_frontend
-      run: |
-        npm ci
-        npm run build
-        rm -rf ../ComfyUI/web/*
-        mv dist/* ../ComfyUI/web/
-      shell: bash
-      working-directory: ComfyUI_frontend
-    - name: Start ComfyUI server
-      run: |
-        python main.py --cpu --multi-user &
-        wait-for-it --service 127.0.0.1:8188 -t 600
-      working-directory: ComfyUI
-      shell: bash
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: npm run dev:electron &
-      working-directory: ComfyUI_frontend
-    - name: Capture base i18n
-      run: npx tsx scripts/diff-i18n capture
-      working-directory: ComfyUI_frontend
-    - name: Update en.json
-      run: npm run collect-i18n
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
-    - name: Update translations
-      run: npm run locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
-    - name: Diff base vs updated i18n
-      run: npx tsx scripts/diff-i18n diff
-      working-directory: ComfyUI_frontend
-    - name: Update i18n in custom node repository
-      run: |
-        LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
-        install -d "$LOCALE_DIR"
-        cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
-    - name: Check and create fork of custom node repository
-      run: |
-        # Try to fork the repository
-        gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
-          echo "Fork failed - repository might already be forked"
-          # Exit 0 to prevent the workflow from failing
-          exit 0
-        }
-
-        # Enable workflows on the forked repository
-        gh api \
-          --method PUT \
-          -H "Accept: application/vnd.github+json" \
-          "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
-          -F can_approve_pull_request_reviews=true \
-          -F default_workflow_permissions="write" \
-          -F enabled=true
-      env:
-        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-
-    - name: Commit changes
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email 'github-actions@github.com'
-
-        # Create and switch to new branch
-        git checkout -b update-locales
-
-        # Stage and commit changes
-        git add -A
-        git commit -m "Update locales"
-
-    - name: Install SSH key For PUSH
-      uses: shimataro/ssh-key-action@v2
-      with:
-        # PR private key from action server
-        key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
-        # github public key to confirm it's github server
-        known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
-
-    - name: Push changes
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        # Force push to create the branch
-        echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
-        git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
-
-    - name: Create PR 
-      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
-      run: |
-        # Create PR using gh cli
-        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
-      env:
-        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}

.github/workflows/i18n-node-defs.yaml

@@ -1,47 +0,0 @@
-name: Update Node Definitions Locales
-
-on:
-  workflow_dispatch:
-    inputs:
-      trigger_type:
-        description: 'Type of trigger (manual or automatic)'
-        required: false
-        type: string
-        default: 'manual'
-
-jobs:
-  update-locales:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: npm run dev:electron &
-      working-directory: ComfyUI_frontend
-    - name: Update en.json
-      run: npm run collect-i18n -- scripts/collect-i18n-node-defs.ts
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
-    - name: Update translations
-      run: npm run locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
-    - name: Create Pull Request
-      uses: peter-evans/create-pull-request@v7
-      with:
-        token: ${{ secrets.PR_GH_TOKEN }}
-        commit-message: "Update locales for node definitions"
-        title: "Update locales for node definitions"
-        body: |
-          Automated PR to update locales for node definitions
-
-          This PR was created automatically by the frontend update workflow.
-        branch: update-locales-node-defs-{{ github.event.inputs.trigger_type }}-{{ github.run_id }}
-        base: main
-        labels: dependencies

.github/workflows/i18n.yaml

@@ -1,40 +0,0 @@
-name: Update Locales
-on:
-  pull_request:
-    branches: [ main, master, dev* ]
-
-jobs:
-  update-locales:
-    # Don't run on fork PRs
-    if: github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: npm run dev:electron &
-      working-directory: ComfyUI_frontend
-    - name: Update en.json
-      run: npm run collect-i18n -- scripts/collect-i18n-general.ts
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
-    - name: Update translations
-      run: npm run locale
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
-    - name: Commit updated locales
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email 'github-actions@github.com'
-        git fetch origin ${{ github.head_ref }}
-        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-        git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
-        git push origin HEAD:${{ github.head_ref }}
-      working-directory: ComfyUI_frontend

.github/workflows/release.yaml

@@ -25,8 +25,6 @@ jobs:
         id: current_version
         run: echo ::set-output name=version::$(node -p "require('./package.json').version")
       - name: Build project
-        env:
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         run: |
           npm ci
           npm run build
@@ -43,21 +41,3 @@ jobs:
           draft: true
           prerelease: false
           make_latest: "true"
-  publish_types:
-    runs-on: ubuntu-latest
-    if: >
-      github.event.pull_request.merged == true &&
-      contains(github.event.pull_request.labels.*.name, 'Release')
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: lts/*
-          registry-url: "https://registry.npmjs.org"
-      - run: npm ci
-      - run: npm run build:types
-      - name: Publish package
-        run: npm publish --access public
-        working-directory: ./dist
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.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,17 +15,18 @@ 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
-        npm run test:jest -- --verbose
+        npm run test:generate:examples
+        npm test -- --verbose
       working-directory: ComfyUI_frontend
 
   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
@@ -42,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
@@ -59,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

.gitignore

@@ -39,9 +39,4 @@ browser_tests/*/*-win32.png
 
 .env
 
-dist.zip
-
-/temp/
-
-# Generated JSON Schemas
-/schemas/
+dist.zip

.husky/pre-commit

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

.i18nrc.cjs

@@ -1,17 +0,0 @@
-// This file is intentionally kept in CommonJS format (.cjs)
-// to resolve compatibility issues with dependencies that require CommonJS.
-// Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli');
-
-module.exports = defineConfig({
-  modelName: 'gpt-4',
-  splitToken: 1024,
-  entry: 'src/locales/en',
-  entryLocale: 'en',
-  output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade.
-  'latent' is the short form of 'latent space'.
-  'mask' is in the context of image processing.
-  `
-});

.prettierrc

@@ -2,17 +2,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80,
-  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "overrides": [
-    {
-      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
-      "options": {
-        "plugins": ["@trivago/prettier-plugin-sort-imports"]
-      }
-    }
-  ]
-}
+  "trailingComma": "none"
+}

CODEOWNERS

@@ -1,17 +0,0 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
-
-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
-
-# Translations (AIGODLIKE team + shinshin86)
-/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
-
-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
-
-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs

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
 ```
 
@@ -52,56 +52,17 @@ pause
 
 ### Stable Release
 
-Stable releases are published bi-weekly in the ComfyUI main repository.
+Stable releases are published weekly in the ComfyUI main repository, aligned with ComfyUI backend's stable release schedule.
+
+#### Feature Freeze
+
+There will be a 2-day feature freeze before each stable release. During this period, no new major features will be merged.
 
 ## Release Summary
 
 ### Major features
 
-<details id='feature-native-translation'>
-  <summary>v1.5: Native translation (i18n)</summary>
-
-  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
-  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
-
-  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
-</details>
-
-<details id='feature-mask-editor'>
-  <summary>v1.4: New mask editor</summary>
-
-  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
-
-  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
-</details>
-
-<details id='feature-integrated-server-terminal'>
-  <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 id='feature-keybinding-customization'>
-  <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 id='feature-node-library-sidebar'>
+<details>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
   #### Drag & Drop
@@ -111,13 +72,13 @@ https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
 https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 </details>
 
-<details id='feature-queue-sidebar'>
+<details>
   <summary>v1.2.0: Queue/History sidebar tab</summary>
 
   https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
 </details>
 
-<details id='feature-node-search'>
+<details>
   <summary>v1.1.0: Node search box</summary>
 
   #### Fuzzy search & Node preview
@@ -129,80 +90,28 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
-<details id='feature-nested-group'>
-  <summary>v1.3.32: **Litegraph** Nested group</summary>
-
-https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
-</details>
-
-<details id='feature-group-selection'>
-  <summary>v1.3.24: **Litegraph** Group selection</summary>
-
-https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
-</details>
-
-<details id='feature-toggle-link-visibility'>
-  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
-
-[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
-
-</details>
-
-<details id='feature-auto-widget-conversion'>
-  <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 id='feature-pan-mode'>
-  <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 id='feature-shift-drag-link-creation'>
-  <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 id='feature-optional-input-donuts'>
-  <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 id='feature-group-title-edit'>
+<details>
   <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
 
 https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
 
 </details>
 
-<details id='feature-group-selection-shortcut'>
+<details>
   <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
 
 https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
 
 </details>
 
-<details id='feature-node-title-edit'>
+<details>
   <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
 
 https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
 
 </details>
 
-<details id='feature-drag-multi-link'>
+<details>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
 
 https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
@@ -211,7 +120,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 </details>
 
-<details id='feature-auto-connect-link'>
+<details>
   <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
 
   #### Before
@@ -221,211 +130,27 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
 </details>
 
-<details id='feature-hide-text-overflow'>
+<details>
   <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
 
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
 </details>
 
-### Developer APIs
+### Node developers API
 
 <details>
-  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
-
-Several browser-only APIs are not available in ComfyUI desktop's electron environment.
-
-- `window.prompt`
-- `window.confirm`
-- `window.alert`
-
-Please use the following APIs as replacements.
-
-```js
-// window.prompt
-window['app'].extensionManager.dialog
-  .prompt({
-    title: 'Test Prompt',
-    message: 'Test Prompt Message'
-  })
-  .then((value: string) => {
-    // Do something with the value user entered
-  })
-```
-
-![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
-
-```js
-// window.confirm
-window['app'].extensionManager.dialog
-  .confirm({
-    title: 'Test Confirm',
-    message: 'Test Confirm Message'
-  })
-  .then((value: boolean) => {
-    // Do something with the value user entered
-  })
-```
-
-![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
-
-```js
-// window.alert
-window['app'].extensionManager.toast
-  .addAlert("Test Alert")
-```
-
-![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
-
-</details>
-
-<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 id='extension-api-bottom-panel-tabs'>
-  <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 id='extension-api-settings'>
-  <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 id='extension-api-commands-keybindings'>
-  <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>
-
-<details id='extension-api-topbar-menu'>
   <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
 
   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)
 </details>
 
-<details id='extension-api-toast'>
+<details>
   <summary>v1.2.27: Extension API to add toast message</summary>i
 
   Extensions can call the following API to add toast messages.
@@ -443,7 +168,7 @@ Documentation of all supported options can be found here: <https://primevue.org/
 ![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
 </details>
 
-<details id='extension-api-sidebar-tab'>
+<details>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
   Extensions now can call the following API to register a sidebar tab.
@@ -468,17 +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
-- [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
-
 ### Git pre-commit hooks
 
 Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
@@ -489,48 +230,17 @@ hook is used to auto-format code on commit.
 Note: The dev server will NOT load any extension from the ComfyUI server. Only
 core extensions will be loaded.
 
+- Run `npm install` to install the necessary packages
 - Start local ComfyUI backend at `localhost:8188`
 - Run `npm run dev` to start the dev server
-- Run `npm run dev:electron` to start the dev server with electron API mocked
 
-#### Access dev server on touch devices
-
-Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
-
-After you start the dev server, you should see following logs:
-
-```
-> comfyui-frontend@1.3.42 dev
-> vite
-
-
-  VITE v5.4.6  ready in 488 ms
-
-  ➜  Local:   http://localhost:5173/
-  ➜  Network: http://172.21.80.1:5173/
-  ➜  Network: http://192.168.2.20:5173/
-  ➜  press h + enter to show help
-```
-
-Make sure your desktop machine and touch device are on the same network. On your touch device,
-navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
-
-### Unit Test
+### Test
 
 - `git clone https://github.com/comfyanonymous/ComfyUI_examples.git` to `tests-ui/ComfyUI_examples` or the EXAMPLE_REPO_PATH location specified in .env
 - `npm i` to install all dependencies
 - `npm run test:generate` to fetch `tests-ui/data/object_info.json`
-- `npm run test:jest` 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.
+- `npm run test:generate:examples` to extract the example workflows
+- `npm run test` to execute all unit tests.
 
 ### LiteGraph
 
@@ -539,90 +249,19 @@ 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.
 
-## Internationalization (i18n)
-
-Our project supports multiple languages using `vue-i18n`. This allows users around the world to use the application in their preferred language.
-
-### Supported Languages
-
- - en (English)
- - zh (中文)
- - ru (Русский)
- - ja (日本語)
- - ko (한국어)
- - fr (Français)
-
-### How to Add a New Language
-
-We welcome the addition of new languages. You can add a new language by following these steps:
-
-#### 1. Generate language files
-We use [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n/README.md) as our translation tool, which integrates with LLM for efficient localization.
-
-Update the configuration file to include the new language(s) you wish to add:
-
-
-```javascript
-const { defineConfig } = require('@lobehub/i18n-cli');
-
-module.exports = defineConfig({
-  entry: 'src/locales/en.json', // Base language file
-  entryLocale: 'en',
-  output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja'], // Add the new language(s) here
-});
-```
-
-Set your OpenAI API Key by running the following command:
-
-```sh
-npx lobe-i18n --option
-```
-
-Once configured, generate the translation files with:
-
-```sh
-npx lobe-i18n locale
-```
-
-This will create the language files for the specified languages in the configuration.
-
-#### 2. Update i18n Configuration
-
-Import the newly generated locale file(s) in the `src/i18n.ts` file to include them in the application's i18n setup.
-
-#### 3. Enable Selection of the New Language
-
-Add the newly added language to the following item in `src/constants/coreSettings.ts`:
-
-```typescript
-  {
-    id: 'Comfy.Locale',
-    name: 'Locale',
-    type: 'combo',
-    // Add the new language(s) here
-    options: [
-      { value: 'en', text: 'English' },
-      { value: 'zh', text: '中文' },
-      { value: 'ru', text: 'Русский' },
-      { value: 'ja', text: '日本語' }
-    ],
-    defaultValue: navigator.language.split('-')[0] || 'en'
-  },
-```
-
-This will make the new language selectable in the application's settings.
-
-#### 4. Test the Translations
-
-Start the development server, switch to the new language, and verify the translations.
-You can switch languages by opening the ComfyUI Settings and selecting from the `ComfyUI > Locale` dropdown box.
-
 ## Deploy
 
 - Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.
 - Option 2: Copy everything under `dist/` to `ComfyUI/web/` in your ComfyUI checkout manually.
+
+## Publish release to ComfyUI main repo
+
+Run following command to publish a release to ComfyUI main repo. The script will create a new branch and do a commit to `web/` folder by checkout `dist.zip`
+from GitHub release.
+
+- `python scripts/main_repo_release.py <path_to_comfyui_main_repo> <version>`

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
 
@@ -34,8 +34,6 @@ There are two ways to run the tests:
    ```
    This opens a user interface where you can select specific tests to run and inspect the test execution timeline.
 
-   To run the same test multiple times in Playwright's UI mode, you must launch the main ComfyUI process with the `--multi-user` flag.
-
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
 ## Screenshot Expectations

browser_tests/appMenu.spec.ts

@@ -1,15 +1,18 @@
 import type { Response } from '@playwright/test'
-import { expect, mergeTests } from '@playwright/test'
-
 import type { StatusWsMessage } from '../src/types/apiTypes.ts'
-import { comfyPageFixture } from './fixtures/ComfyPage'
+import { expect, mergeTests } from '@playwright/test'
+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')
   })
 
   /**
@@ -20,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
@@ -53,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)
     }
 
@@ -112,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/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/oversized_group.json

@@ -1,90 +0,0 @@
-{
-  "last_node_id": 9,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": [
-        37,
-        98
-      ],
-      "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": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        156680208700286,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [
-    {
-      "id": 1,
-      "title": "Group",
-      "bounding": [
-        23,
-        23,
-        900,
-        825
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    }
-  ],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "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/simple_slider.json

@@ -1,49 +0,0 @@
-{
-  "last_node_id": 12,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 12,
-      "type": "DevToolsSimpleSlider",
-      "pos": [
-        50,
-        50
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "FLOAT",
-          "type": "FLOAT",
-          "links": null,
-          "label": "FLOAT"
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "DevToolsSimpleSlider"
-      },
-      "widgets_values": [
-        0.5
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/single_connected_reroute_node.json

@@ -1,116 +0,0 @@
-{
-  "last_node_id": 16,
-  "last_link_id": 18,
-  "nodes": [
-    {
-      "id": 12,
-      "type": "VAEDecode",
-      "pos": [620, 260],
-      "size": [210, 46],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 18
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 13,
-      "type": "Reroute",
-      "pos": [510, 280],
-      "size": [75, 26],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "",
-          "type": "*",
-          "link": 13
-        }
-      ],
-      "outputs": [
-        {
-          "name": "",
-          "type": "VAE",
-          "links": [18],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "showOutputText": false,
-        "horizontal": false
-      }
-    },
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [160, 240],
-      "size": [315, 98],
-      "flags": {},
-      "order": 0,
-      "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": [13],
-          "slot_index": 2
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
-    }
-  ],
-  "links": [
-    [13, 4, 2, 13, 0, "*"],
-    [18, 13, 0, 12, 1, "VAE"]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": {
-        "0": 0,
-        "1": 0
-      }
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/string_input.json

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

browser_tests/browserTabTitle.spec.ts

@@ -1,41 +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,167 +0,0 @@
-import {
-  ComfyPage,
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from './fixtures/ComfyPage'
-
-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 }) => {
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.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 comfyPage.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
-
-      const node = (await comfyPage.getFirstNodeRef())!
-      await node.click('title')
-      await node.click('collapse')
-      await expect(node).toBeCollapsed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
-
-      await comfyPage.ctrlB()
-      await expect(node).toBeBypassed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(2)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
-
-      await comfyPage.ctrlZ()
-      await expect(node).not.toBeBypassed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.getRedoQueueSize()).toBe(1)
-
-      await comfyPage.ctrlZ()
-      await expect(node).not.toBeCollapsed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.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('title')
-    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()
-
-    // Prevent clicks registering a double-click
-    await comfyPage.clickEmptySpace()
-    await node.click('title')
-
-    // 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 node.click('title')
-      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()
-  })
-
-  test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-    await comfyPage.page.evaluate(() => {
-      window['app'].graph.extra.foo = 'bar'
-    })
-    // Click empty space to trigger a change detection.
-    await comfyPage.clickEmptySpace()
-    expect(await comfyPage.getUndoQueueSize()).toBe(1)
-  })
-
-  test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-    await comfyPage.pan({ x: 10, y: 10 })
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-  })
-})

browser_tests/colorPalette.spec.ts

@@ -1,9 +1,7 @@
 import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
 
-import type { Palette } from '../src/types/colorPaletteTypes'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-const customColorPalettes: Record<string, Palette> = {
+const customColorPalettes = {
   obsidian: {
     version: 102,
     id: 'obsidian',
@@ -129,61 +127,29 @@ const customColorPalettes: Record<string, Palette> = {
         'tr-odd-bg-color': 'rgba(19,19,19,.9)'
       }
     }
-  },
-  // A custom light theme with fg color red
-  light_red: {
-    id: 'light_red',
-    name: 'Light Red',
-    light_theme: true,
-    colors: {
-      node_slot: {},
-      litegraph_base: {},
-      comfy_base: {
-        'fg-color': '#ff0000'
-      }
-    }
   }
 }
 
 test.describe('Color Palette', () => {
-  test('Can show custom color palette', async ({ comfyPage }) => {
+  test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
-    // doesn't update the store immediately.
-    await comfyPage.setup()
-
-    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'custom-color-palette-obsidian-dark.png'
-    )
-    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'custom-color-palette-light-red.png'
-    )
-
-    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 
-  test('Can add custom color palette', async ({ comfyPage }) => {
-    await comfyPage.page.evaluate((p) => {
-      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
-    }, customColorPalettes.obsidian_dark)
-    expect(await comfyPage.getToastErrorCount()).toBe(0)
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', {})
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+  })
 
-    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'custom-color-palette-obsidian-dark.png'
-    )
-    // Legacy `custom_` prefix is still supported
+  test('Can show custom color palette', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 })
 
@@ -192,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
   }) => {
@@ -251,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,50 +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,6 +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 }) => {
@@ -11,36 +10,20 @@ test.describe('Copy Paste', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png')
   })
 
-  test('Can copy and paste node with link', async ({ comfyPage }) => {
-    await comfyPage.clickTextEncodeNode1()
-    await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.ctrlC()
-    await comfyPage.page.keyboard.press('Control+Shift+V')
-    await expect(comfyPage.canvas).toHaveScreenshot('copied-node-with-link.png')
-  })
-
   test('Can copy and paste text', async ({ comfyPage }) => {
     const textBox = comfyPage.widgetTextBox
     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)
   })
 
   test('Can copy and paste widget value', async ({ comfyPage }) => {
     // Copy width value (512) from empty latent node to KSampler's seed.
-    // KSampler's seed
-    await comfyPage.canvas.click({
-      position: {
-        x: 1005,
-        y: 281
-      }
-    })
-    await comfyPage.ctrlC(null)
     // Empty latent node's width
     await comfyPage.canvas.click({
       position: {
@@ -48,7 +31,15 @@ test.describe('Copy Paste', () => {
         y: 643
       }
     })
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    // KSampler's seed
+    await comfyPage.canvas.click({
+      position: {
+        x: 1005,
+        y: 281
+      }
+    })
+    await comfyPage.ctrlV()
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
   })
@@ -60,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'
     )
@@ -78,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')
   })
 
@@ -95,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,7 +1,5 @@
 import { expect } from '@playwright/test'
-
-import { Keybinding } from '../src/types/keyBindingTypes'
-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 ({
@@ -38,24 +36,11 @@ 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')
     await expect(executionError).toBeVisible()
   })
-
-  test('Can display Issue Report form', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('execution_error')
-    await comfyPage.queueButton.click()
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.getByLabel('Help Fix This').click()
-    const issueReportForm = comfyPage.page.getByText(
-      'Submit Error Report (Optional)'
-    )
-    await expect(issueReportForm).toBeVisible()
-  })
 })
 
 test.describe('Missing models warning', () => {
@@ -66,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
@@ -80,88 +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 settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
-      (el) => el.clientHeight > 30
-    )
-    expect(isUsableHeight).toBeTruthy()
-  })
-
-  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)
-    })
-  })
-
-  test('Should persist keybinding setting', async ({ comfyPage }) => {
-    // Open the settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
-
-    // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
-    await comfyPage.page.waitForSelector(
-      '[placeholder="Search Keybindings..."]'
-    )
-
-    // Focus the 'New Blank Workflow' row
-    const newBlankWorkflowRow = comfyPage.page.locator('tr', {
-      has: comfyPage.page.getByRole('cell', { name: 'New Blank Workflow' })
-    })
-    await newBlankWorkflowRow.click()
-
-    // Click edit button
-    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
-    await editKeybindingButton.click()
-
-    // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
-    await input.press('Alt+n')
-
-    const requestPromise = comfyPage.page.waitForRequest(
-      '**/api/settings/Comfy.Keybinding.NewBindings'
-    )
-
-    // Save keybinding
-    const saveButton = comfyPage.page
-      .getByLabel('Comfy.NewBlankWorkflow')
-      .getByLabel('Save')
-    await saveButton.click()
-
-    const request = await requestPromise
-    const expectedSetting: Keybinding = {
-      commandId: 'Comfy.NewBlankWorkflow',
-      combo: {
-        key: 'n',
-        ctrl: false,
-        alt: true,
-        shift: false
-      }
-    }
-    expect(request.postData()).toContain(JSON.stringify(expectedSetting))
+    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,199 +1,32 @@
 import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Topbar commands', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    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'])
-    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')
-    })
-  })
-
-  test.describe('Dialog', () => {
-    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
-      await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
-          .prompt({
-            title: 'Test Prompt',
-            message: 'Test Prompt Message'
-          })
-          .then((value: string) => {
-            window['value'] = value
-          })
-      })
-
-      await comfyPage.fillPromptDialog('Hello, world!')
-      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(
-        'Hello, world!'
       )
     })
 
-    test('Should allow showing a confirmation dialog', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
-          .confirm({
-            title: 'Test Confirm',
-            message: 'Test Confirm Message'
-          })
-          .then((value: boolean) => {
-            window['value'] = value
-          })
-      })
-
-      await comfyPage.confirmDialog.click('confirm')
-      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
-    })
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo'])
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
   })
 })

browser_tests/fixtures/ComfyPage.ts

@@ -1,962 +0,0 @@
-import type { APIRequestContext, Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-import { test as base } from '@playwright/test'
-import dotenv from 'dotenv'
-import * as fs from 'fs'
-
-import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
-import type { NodeId } from '../../src/types/comfyWorkflow'
-import type { KeyCombo } from '../../src/types/keyBindingTypes'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { ComfyActionbar } from '../helpers/actionbar'
-import { ComfyTemplates } from '../helpers/templates'
-import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { SettingDialog } from './components/SettingDialog'
-import {
-  NodeLibrarySidebarTab,
-  QueueSidebarTab,
-  WorkflowsSidebarTab
-} from './components/SidebarTab'
-import { Topbar } from './components/Topbar'
-import type { Position, Size } from './types'
-import { NodeReference } from './utils/litegraphUtils'
-import TaskHistory from './utils/taskHistory'
-
-dotenv.config()
-
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
-
-class ComfyMenu {
-  private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
-  private _workflowsTab: WorkflowsSidebarTab | null = null
-  private _queueTab: QueueSidebarTab | null = null
-  private _topbar: Topbar | null = null
-
-  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() {
-    this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
-    return this._nodeLibraryTab
-  }
-
-  get workflowsTab() {
-    this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
-    return this._workflowsTab
-  }
-
-  get queueTab() {
-    this._queueTab ??= new QueueSidebarTab(this.page)
-    return this._queueTab
-  }
-
-  get topbar() {
-    this._topbar ??= new Topbar(this.page)
-    return this._topbar
-  }
-
-  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
-}
-
-type KeysOfType<T, Match> = {
-  [K in keyof T]: T[K] extends Match ? K : never
-}[keyof T]
-
-class ConfirmDialog {
-  public readonly delete: Locator
-  public readonly overwrite: Locator
-  public readonly reject: Locator
-  public readonly confirm: Locator
-
-  constructor(public readonly page: Page) {
-    this.delete = page.locator('button.p-button[aria-label="Delete"]')
-    this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
-    this.reject = page.locator('button.p-button[aria-label="Cancel"]')
-    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
-  }
-
-  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
-    const loc = this[locator]
-    await expect(loc).toBeVisible()
-    await loc.click()
-  }
-}
-
-export class ComfyPage {
-  private _history: TaskHistory | null = null
-
-  public readonly url: string
-  // All canvas position operations are based on default view of canvas.
-  public readonly canvas: Locator
-  public readonly widgetTextBox: 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
-  public readonly confirmDialog: ConfirmDialog
-
-  /** 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.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)
-    this.confirmDialog = new ConfirmDialog(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 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 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()}`)
-    }
-  }
-
-  setupHistory(): TaskHistory {
-    this._history ??= new TaskHistory(this)
-    return this._history
-  }
-
-  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
-    await this.goto()
-    if (clearStorage) {
-      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 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) {
-    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()
-    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 }
-  }
-
-  get promptDialogInput() {
-    return this.page.locator('.p-dialog-content input[type="text"]')
-  }
-
-  async fillPromptDialog(value: string) {
-    await this.promptDialogInput.fill(value)
-    await this.page.keyboard.press('Enter')
-    await this.promptDialogInput.waitFor({ state: 'hidden' })
-    await this.nextFrame()
-  }
-
-  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()
-    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.page.mouse.click(10, 10, { button: 'right' })
-    await this.nextFrame()
-  }
-
-  async clickContextMenuItem(name: string): Promise<void> {
-    await this.page.getByRole('menuitem', { name }).click()
-    await this.nextFrame()
-  }
-
-  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
-      }
-    })
-    this.page.mouse.move(10, 10)
-    await this.nextFrame()
-  }
-
-  async rightClickEmptyLatentNode() {
-    await this.canvas.click({
-      position: {
-        x: 724,
-        y: 645
-      },
-      button: 'right'
-    })
-    this.page.mouse.move(10, 10)
-    await this.nextFrame()
-  }
-
-  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 clickDialogButton(prompt: string, buttonText: string = 'Yes') {
-    const modal = this.page.locator(
-      `.comfy-modal-content:has-text("${prompt}")`
-    )
-    await expect(modal).toBeVisible()
-    await modal
-      .locator('.comfyui-button', {
-        hasText: buttonText
-      })
-      .click()
-    await expect(modal).toBeHidden()
-  }
-
-  async convertAllNodesToGroupNode(groupNodeName: string) {
-    await this.canvas.press('Control+a')
-    const node = await this.getFirstNodeRef()
-    await node!.clickContextMenuOption('Convert to Group Node')
-    await this.fillPromptDialog(groupNodeName)
-    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 getNodes() {
-    return await this.page.evaluate(() => {
-      return window['app'].graph.nodes
-    })
-  }
-  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)
-  }
-  async getUndoQueueSize() {
-    return this.page.evaluate(() => {
-      const workflow = (window['app'].extensionManager as WorkspaceStore)
-        .workflow.activeWorkflow
-      return workflow?.changeTracker.undoQueue.length
-    })
-  }
-  async getRedoQueueSize() {
-    return this.page.evaluate(() => {
-      const workflow = (window['app'].extensionManager as WorkspaceStore)
-        .workflow.activeWorkflow
-      return workflow?.changeTracker.redoQueue.length
-    })
-  }
-  async isCurrentWorkflowModified() {
-    return this.page.evaluate(() => {
-      return (window['app'].extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.isModified
-    })
-  }
-  async getExportedWorkflow({ api = false }: { api?: boolean } = {}) {
-    return this.page.evaluate(async (api) => {
-      return (await window['app'].graphToPrompt())[api ? 'output' : 'workflow']
-    }, api)
-  }
-  async setFocusMode(focusMode: boolean) {
-    await this.page.evaluate((focusMode) => {
-      window['app'].extensionManager.focusMode = focusMode
-    }, focusMode)
-    await this.nextFrame()
-  }
-}
-
-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
-
-    try {
-      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
-      })
-    } catch (e) {
-      console.error(e)
-    }
-
-    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'),
-  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
-    const isFocused = await locator.evaluate(
-      (el) => el === document.activeElement
-    )
-
-    await expect(async () => {
-      expect(isFocused).toBe(!this.isNot)
-    }).toPass(options)
-
-    return {
-      pass: isFocused,
-      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
-    }
-  }
-})

browser_tests/fixtures/UserSelectPage.ts

@@ -1,41 +0,0 @@
-import { test as base } from '@playwright/test'
-import { Page } from 'playwright'
-
-export class UserSelectPage {
-  constructor(
-    public readonly url: string,
-    public readonly page: Page
-  ) {}
-
-  get selectionUrl() {
-    return this.url + '/user-select'
-  }
-
-  get container() {
-    return this.page.locator('#comfy-user-selection')
-  }
-
-  get newUserInput() {
-    return this.container.locator('#new-user-input')
-  }
-
-  get existingUserSelect() {
-    return this.container.locator('#existing-user-select')
-  }
-
-  get nextButton() {
-    return this.container.getByText('Next')
-  }
-}
-
-export const userSelectPageFixture = base.extend<{
-  userSelectPage: UserSelectPage
-}>({
-  userSelectPage: async ({ page }, use) => {
-    const userSelectPage = new UserSelectPage(
-      process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188',
-      page
-    )
-    await use(userSelectPage)
-  }
-})

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -1,86 +0,0 @@
-import { Locator, Page } from '@playwright/test'
-
-export class ComfyNodeSearchFilterSelectionPanel {
-  constructor(public readonly page: Page) {}
-
-  get header() {
-    return this.page
-      .getByRole('dialog')
-      .locator('div')
-      .filter({ hasText: 'Add node filter condition' })
-  }
-
-  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,269 +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()
-  }
-  async close() {
-    if (!this.tabButton.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 root() {
-    return this.page.locator('.workflows-sidebar-tab')
-  }
-
-  get browseGalleryButton() {
-    return this.root.locator('.browse-templates-button')
-  }
-
-  get newBlankWorkflowButton() {
-    return this.root.locator('.new-blank-workflow-button')
-  }
-
-  get openWorkflowButton() {
-    return this.root.locator('.open-workflow-button')
-  }
-
-  async getOpenedWorkflowNames() {
-    return await this.root
-      .locator('.comfyui-workflows-open .node-label')
-      .allInnerTexts()
-  }
-
-  async getActiveWorkflowName() {
-    return await this.root
-      .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
-      .innerText()
-  }
-
-  async getTopLevelSavedWorkflowNames() {
-    return await this.root
-      .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.root.locator('.comfyui-workflows-open .node-label', {
-      hasText: name
-    })
-  }
-
-  getPersistedItem(name: string) {
-    return this.root.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)
-  }
-
-  async insertWorkflow(locator: Locator) {
-    await locator.click({ button: 'right' })
-    await this.page
-      .locator('.p-contextmenu-item-content', { hasText: 'Insert' })
-      .click()
-  }
-}
-
-export class QueueSidebarTab extends SidebarTab {
-  constructor(public readonly page: Page) {
-    super(page, 'queue')
-  }
-
-  get root() {
-    return this.page.locator('.sidebar-content-container', { hasText: 'Queue' })
-  }
-
-  get tasks() {
-    return this.root.locator('[data-virtual-grid-item]')
-  }
-
-  get visibleTasks() {
-    return this.tasks.locator('visible=true')
-  }
-
-  get clearButton() {
-    return this.root.locator('.clear-all-button')
-  }
-
-  get collapseTasksButton() {
-    return this.getToggleExpandButton(false)
-  }
-
-  get expandTasksButton() {
-    return this.getToggleExpandButton(true)
-  }
-
-  get noResultsPlaceholder() {
-    return this.root.locator('.no-results-placeholder')
-  }
-
-  private getToggleExpandButton(isExpanded: boolean) {
-    const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
-    return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
-  }
-
-  async open() {
-    await super.open()
-    return this.root.waitFor({ state: 'visible' })
-  }
-
-  async close() {
-    await super.close()
-    await this.root.waitFor({ state: 'hidden' })
-  }
-
-  async expandTasks() {
-    await this.expandTasksButton.click()
-    await this.collapseTasksButton.waitFor({ state: 'visible' })
-  }
-
-  async collapseTasks() {
-    await this.collapseTasksButton.click()
-    await this.expandTasksButton.waitFor({ state: 'visible' })
-  }
-
-  async waitForTasks() {
-    return Promise.all([
-      this.tasks.first().waitFor({ state: 'visible' }),
-      this.tasks.last().waitFor({ state: 'visible' })
-    ])
-  }
-
-  async scrollTasks(direction: 'up' | 'down') {
-    const scrollToEl =
-      direction === 'up' ? this.tasks.last() : this.tasks.first()
-    await scrollToEl.scrollIntoViewIfNeeded()
-    await this.waitForTasks()
-  }
-
-  async clearTasks() {
-    await this.clearButton.click()
-    const confirmButton = this.page.getByLabel('Delete')
-    await confirmButton.click()
-    await this.noResultsPlaceholder.waitFor({ state: 'visible' })
-  }
-
-  /** Set the width of the tab (out of 100). Must call before opening the tab */
-  async setTabWidth(width: number) {
-    if (width < 0 || width > 100) {
-      throw new Error('Width must be between 0 and 100')
-    }
-    return this.page.evaluate((width) => {
-      localStorage.setItem('queue', JSON.stringify([width, 100 - width]))
-    }, width)
-  }
-
-  getTaskPreviewButton(taskIndex: number) {
-    return this.tasks.nth(taskIndex).getByRole('button')
-  }
-
-  async openTaskPreview(taskIndex: number) {
-    const previewButton = this.getTaskPreviewButton(taskIndex)
-    await previewButton.hover()
-    await previewButton.click()
-    return this.getGalleryImage(taskIndex).waitFor({ state: 'visible' })
-  }
-
-  getGalleryImage(galleryItemIndex: number) {
-    // Aria labels of Galleria items are 1-based indices
-    const galleryLabel = `${galleryItemIndex + 1}`
-    return this.page.getByLabel(galleryLabel).locator('.galleria-image')
-  }
-}

browser_tests/fixtures/components/Topbar.ts

@@ -1,98 +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 getActiveTabName(): Promise<string> {
-    return this.page
-      .locator('.workflow-tabs .p-togglebutton-checked')
-      .innerText()
-  }
-
-  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')
-  }
-
-  exportWorkflow(workflowName: string): Promise<void> {
-    return this._saveWorkflow(workflowName, 'Export')
-  }
-
-  async _saveWorkflow(
-    workflowName: string,
-    command: 'Save' | 'Save As' | 'Export'
-  ) {
-    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,256 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import type { NodeId } from '../../../src/types/comfyWorkflow'
-import { ManageGroupNode } from '../../helpers/manageGroupNode'
-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') {
-    await this.clickContextMenuOption('Convert to Group Node')
-    await this.comfyPage.fillPromptDialog(groupNodeName)
-    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/fixtures/utils/taskHistory.ts

@@ -1,161 +0,0 @@
-import fs from 'fs'
-import _ from 'lodash'
-import path from 'path'
-import type { Request, Route } from 'playwright'
-import { v4 as uuidv4 } from 'uuid'
-
-import type {
-  HistoryTaskItem,
-  TaskItem,
-  TaskOutput
-} from '../../../src/types/apiTypes'
-import type { ComfyPage } from '../ComfyPage'
-
-/** keyof TaskOutput[string] */
-type OutputFileType = 'images' | 'audio' | 'animated'
-
-const DEFAULT_IMAGE = 'example.webp'
-
-const getFilenameParam = (request: Request) => {
-  const url = new URL(request.url())
-  return url.searchParams.get('filename') || DEFAULT_IMAGE
-}
-
-const getContentType = (filename: string, fileType: OutputFileType) => {
-  const subtype = path.extname(filename).slice(1)
-  switch (fileType) {
-    case 'images':
-      return `image/${subtype}`
-    case 'audio':
-      return `audio/${subtype}`
-    case 'animated':
-      return `video/${subtype}`
-  }
-}
-
-const setQueueIndex = (task: TaskItem) => {
-  task.prompt[0] = TaskHistory.queueIndex++
-}
-
-const setPromptId = (task: TaskItem) => {
-  task.prompt[1] = uuidv4()
-}
-
-export default class TaskHistory {
-  static queueIndex = 0
-  static readonly defaultTask: Readonly<HistoryTaskItem> = {
-    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
-    outputs: {},
-    status: {
-      status_str: 'success',
-      completed: true,
-      messages: []
-    },
-    taskType: 'History'
-  }
-  private tasks: HistoryTaskItem[] = []
-  private outputContentTypes: Map<string, string> = new Map()
-
-  constructor(readonly comfyPage: ComfyPage) {}
-
-  private loadAsset: (filename: string) => Buffer = _.memoize(
-    (filename: string) => {
-      const filePath = this.comfyPage.assetPath(filename)
-      return fs.readFileSync(filePath)
-    }
-  )
-
-  private async handleGetHistory(route: Route) {
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(this.tasks)
-    })
-  }
-
-  private async handleGetView(route: Route) {
-    const fileName = getFilenameParam(route.request())
-    if (!this.outputContentTypes.has(fileName)) route.continue()
-
-    const asset = this.loadAsset(fileName)
-    return route.fulfill({
-      status: 200,
-      contentType: this.outputContentTypes.get(fileName),
-      body: asset,
-      headers: {
-        'Cache-Control': 'public, max-age=31536000',
-        'Content-Length': asset.byteLength.toString()
-      }
-    })
-  }
-
-  async setupRoutes() {
-    return this.comfyPage.page.route(
-      /.*\/api\/(view|history)(\?.*)?$/,
-      async (route) => {
-        const request = route.request()
-        const method = request.method()
-
-        const isViewReq = request.url().includes('view') && method === 'GET'
-        if (isViewReq) return this.handleGetView(route)
-
-        const isHistoryPath = request.url().includes('history')
-        const isGetHistoryReq = isHistoryPath && method === 'GET'
-        if (isGetHistoryReq) return this.handleGetHistory(route)
-
-        const isClearReq =
-          method === 'POST' &&
-          isHistoryPath &&
-          request.postDataJSON()?.clear === true
-        if (isClearReq) return this.clearTasks()
-
-        return route.continue()
-      }
-    )
-  }
-
-  private createOutputs(
-    filenames: string[],
-    filetype: OutputFileType
-  ): TaskOutput {
-    return filenames.reduce((outputs, filename, i) => {
-      const nodeId = `${i + 1}`
-      outputs[nodeId] = {
-        [filetype]: [{ filename, subfolder: '', type: 'output' }]
-      }
-      const contentType = getContentType(filename, filetype)
-      this.outputContentTypes.set(filename, contentType)
-      return outputs
-    }, {})
-  }
-
-  private addTask(task: HistoryTaskItem) {
-    setPromptId(task)
-    setQueueIndex(task)
-    this.tasks.push(task)
-  }
-
-  clearTasks() {
-    this.tasks = []
-  }
-
-  withTask(
-    outputFilenames: string[],
-    outputFiletype: OutputFileType = 'images',
-    overrides: Partial<HistoryTaskItem> = {}
-  ): this {
-    this.addTask({
-      ...TaskHistory.defaultTask,
-      outputs: this.createOutputs(outputFilenames, outputFiletype),
-      ...overrides
-    })
-    return this
-  }
-
-  /** Repeats the last task in the task history a specified number of times. */
-  repeat(n: number): this {
-    for (let i = 0; i < n; i++)
-      this.addTask(structuredClone(this.tasks.at(-1)) as HistoryTaskItem)
-    return this
-  }
-}

browser_tests/globalSetup.ts

@@ -1,21 +0,0 @@
-import { FullConfig } from '@playwright/test'
-import dotenv from 'dotenv'
-
-import { backupPath } from './utils/backupUtils'
-
-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,13 +0,0 @@
-import { FullConfig } from '@playwright/test'
-import dotenv from 'dotenv'
-
-import { restorePath } from './utils/backupUtils'
-
-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,39 +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,9 +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'
@@ -11,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)
     })
@@ -78,13 +85,8 @@ test.describe('Group Node', () => {
         .click()
     })
   })
-  // The 500ms fixed delay on the search results is causing flakiness
-  // Potential solution: add a spinner state when the search is in progress,
-  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
-  // does not have a v-model on the query, so we cannot observe the raw
-  // query update, and thus cannot set the spinning state between the raw query
-  // update and the debounced search update.
-  test.skip('Can be added to canvas using search', async ({ comfyPage }) => {
+
+  test('Can be added to canvas using search', async ({ comfyPage }) => {
     const groupNodeName = 'DefautWorkflowGroupNode'
     await comfyPage.convertAllNodesToGroupNode(groupNodeName)
     await comfyPage.doubleClickCanvas()
@@ -96,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
@@ -104,36 +105,6 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test('Manage group opens with the correct group selected', async ({
-    comfyPage
-  }) => {
-    const makeGroup = async (name, type1, type2) => {
-      const node1 = (await comfyPage.getNodeRefsByType(type1))[0]
-      const node2 = (await comfyPage.getNodeRefsByType(type2))[0]
-      await node1.click('title')
-      await node2.click('title', {
-        modifiers: ['Shift']
-      })
-      return await node2.convertToGroupNode(name)
-    }
-
-    const group1 = await makeGroup(
-      'g1',
-      'CLIPTextEncode',
-      'CheckpointLoaderSimple'
-    )
-    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
-
-    const manage1 = await group1.manageGroupNode()
-    await comfyPage.nextFrame()
-    expect(await manage1.getSelectedNodeType()).toBe('g1')
-    await manage1.close()
-    await expect(manage1.root).not.toBeVisible()
-
-    const manage2 = await group2.manageGroupNode()
-    expect(await manage2.getSelectedNodeType()).toBe('g2')
-  })
-
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {
@@ -175,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,35 +1,29 @@
-import type { Locator, Page } from '@playwright/test'
-
+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/helpers/manageGroupNode.ts

@@ -1,15 +1,12 @@
 import { Locator, Page } from '@playwright/test'
-
 export class ManageGroupNode {
   footer: Locator
-  header: Locator
 
   constructor(
     readonly page: Page,
     readonly root: Locator
   ) {
     this.footer = root.locator('footer')
-    this.header = root.locator('header')
   }
 
   async setLabel(name: string, label: string) {
@@ -26,11 +23,6 @@ export class ManageGroupNode {
     await this.footer.getByText('Close').click()
   }
 
-  async getSelectedNodeType() {
-    const select = this.header.locator('select').first()
-    return await select.inputValue()
-  }
-
   async selectNode(name: string) {
     const list = this.root.locator('.comfy-group-manage-list-items')
     const item = list.getByText(name)

browser_tests/helpers/templates.ts

@@ -1,5 +1,4 @@
 import { Locator, Page } from '@playwright/test'
-
 export class ComfyTemplates {
   readonly content: Locator
 

browser_tests/interaction.spec.ts

@@ -1,27 +1,5 @@
 import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('Item Interaction', () => {
-  test('Can select/delete all items', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('mixed_graph_items')
-    await comfyPage.canvas.press('Control+a')
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-all.png')
-    await comfyPage.canvas.press('Delete')
-    await expect(comfyPage.canvas).toHaveScreenshot('deleted-all.png')
-  })
-
-  test('Can pin/unpin items with keyboard shortcut', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('mixed_graph_items')
-    await comfyPage.canvas.press('Control+a')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('pinned-all.png')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('unpinned-all.png')
-  })
-})
+import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Node Interaction', () => {
   test('Can enter prompt', async ({ comfyPage }) => {
@@ -33,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 }) => {
@@ -95,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
@@ -138,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 }) => {
@@ -286,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')
@@ -302,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)
   })
@@ -321,15 +238,6 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.png')
   })
 
-  test('Can fit group to contents', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('oversized_group')
-    await comfyPage.ctrlA()
-    await comfyPage.nextFrame()
-    await comfyPage.executeCommand('Comfy.Graph.FitGroupToContents')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png')
-  })
-
   // Somehow this test fails on GitHub Actions. It works locally.
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/736
   test.skip('Can pin/unpin nodes with keyboard shortcut', async ({
@@ -364,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')
@@ -440,92 +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')
-    // Move mouse should not alter cursor style.
-    await comfyPage.page.mouse.move(10, 20)
-    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')
-  })
-
-  // https://github.com/Comfy-Org/litegraph.js/pull/424
-  test('Properly resets dragging state after pan mode sequence', async ({
-    comfyPage
-  }) => {
-    const getCursorStyle = async () => {
-      return await comfyPage.page.evaluate(() => {
-        return (
-          document.getElementById('graph-canvas')!.style.cursor || 'default'
-        )
-      })
-    }
-
-    // Initial state check
-    await comfyPage.page.mouse.move(10, 10)
-    expect(await getCursorStyle()).toBe('default')
-
-    // Click and hold
-    await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
-
-    // Press space while holding click
-    await comfyPage.page.keyboard.down('Space')
-    expect(await getCursorStyle()).toBe('grabbing')
-
-    // Release click while space is still down
-    await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('grab')
-
-    // Release space
-    await comfyPage.page.keyboard.up('Space')
-    expect(await getCursorStyle()).toBe('default')
-
-    // Move mouse - cursor should remain default
-    await comfyPage.page.mouse.move(20, 20)
-    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 })
@@ -557,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('')
   })
 
@@ -568,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')
   })
 })
@@ -580,107 +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('Restore workflow on reload (switch workflow)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
-    await comfyPage.setup({ clearStorage: false })
-    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler.png')
-  })
-
-  test('Restore workflow on reload (modify workflow)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    const node = (await comfyPage.getFirstNodeRef())!
-    await node.click('collapse')
-    // Wait 300ms between 2 clicks so that it is not treated as a double click
-    // by litegraph.
-    await comfyPage.page.waitForTimeout(300)
-    await comfyPage.clickEmptySpace()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'single_ksampler_modified.png'
-    )
-    await comfyPage.setup({ clearStorage: false })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'single_ksampler_modified.png'
-    )
-  })
-
-  test.describe('Restore all open workflows on reload', () => {
-    let workflowA: string
-    let workflowB: string
-
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-
-      workflowA = generateUniqueFilename()
-      await comfyPage.menu.topbar.saveWorkflow(workflowA)
-      workflowB = generateUniqueFilename()
-      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
-      await comfyPage.menu.topbar.saveWorkflow(workflowB)
-
-      // Wait for localStorage to persist the workflow paths before reloading
-      await comfyPage.page.waitForFunction(
-        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
-      )
-      await comfyPage.setup({ clearStorage: false })
-    })
-
-    test('Restores topbar workflow tabs after reload', async ({
-      comfyPage
-    }) => {
-      await comfyPage.setSetting(
-        'Comfy.Workflow.WorkflowTabsPosition',
-        'Topbar'
-      )
-      const tabs = await comfyPage.menu.topbar.getTabNames()
-      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
-
-      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-      expect(activeWorkflowName).toEqual(workflowB)
-    })
-
-    test('Restores sidebar workflows after reload', async ({ comfyPage }) => {
-      await comfyPage.setSetting(
-        'Comfy.Workflow.WorkflowTabsPosition',
-        'Sidebar'
-      )
-      await comfyPage.menu.workflowsTab.open()
-      const openWorkflows =
-        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      const activeWorkflowName =
-        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
-      const workflowPathA = `${workflowA}.json`
-      const workflowPathB = `${workflowB}.json`
-
-      expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowPathA, workflowPathB])
-      )
-      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
-        openWorkflows.indexOf(workflowPathB)
-      )
-      expect(activeWorkflowName).toEqual(workflowPathB)
-    })
-  })
 })
 
 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 ({