1.6.8 (#2070)

Co-authored-by: github-actions <github-actions@github.com>

.env_example

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

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

@@ -0,0 +1,127 @@
+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: |
+        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
+        }
+      env:
+        GH_TOKEN: ${{ secrets.GH_TOKEN }}
+    - name: Commit and push changes
+      run: |
+        git checkout -b update-locales
+        git add -A
+        git commit -m "Update locales"
+        git remote add org_fork git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git
+        git push org_fork update-locales
+        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      env:
+        GH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/i18n.yaml

@@ -0,0 +1,39 @@
+name: Update Locales
+on:
+  pull_request:
+    branches: [ main, master, dev* ]
+
+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
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
+    - name: Update translations
+      # Pipe output so that it doesn't error out on stdout.clearLine
+      run: npm run locale 2>&1 | cat
+      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

@@ -41,3 +41,21 @@ 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-ui.yaml

@@ -20,7 +20,7 @@ jobs:
       run: |
         npm run test:generate
         npm run test:generate:examples
-        npm test -- --verbose
+        npm run test:jest:fast -- --verbose
       working-directory: ComfyUI_frontend
 
   playwright-tests-chromium:

.gitignore

@@ -39,4 +39,6 @@ browser_tests/*/*-win32.png
 
 .env
 
-dist.zip
+dist.zip
+
+/temp/

.i18nrc.cjs

@@ -0,0 +1,17 @@
+// 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.
+  `
+});

CODEOWNERS

@@ -0,0 +1,17 @@
+# 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

@@ -52,16 +52,30 @@ pause
 
 ### Stable Release
 
-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.
+Stable releases are published bi-weekly in the ComfyUI main repository.
 
 ## Release Summary
 
 ### Major features
 
+<details>
+  <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>
+  <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>
   <summary>v1.3.22: Integrated server terminal</summary>
 
@@ -414,6 +428,7 @@ We will support custom icons later.
 - [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
 
@@ -431,6 +446,8 @@ core extensions will be loaded.
 
 #### 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:
 
 ```
@@ -478,6 +495,85 @@ This repo is using litegraph package hosted on <https://github.com/Comfy-Org/lit
 
 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`.

browser_tests/README.md

@@ -34,6 +34,8 @@ 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/assets/oversized_group.json

@@ -0,0 +1,90 @@
+{
+  "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/simple_slider.json

@@ -0,0 +1,49 @@
+{
+  "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

@@ -0,0 +1,116 @@
+{
+  "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/browserTabTitle.spec.ts

@@ -11,7 +11,7 @@ test.describe('Browser tab title', () => {
       const workflowName = await comfyPage.page.evaluate(async () => {
         return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
     })
 
     // Failing on CI

browser_tests/changeTracker.spec.ts

@@ -3,9 +3,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from './fixtures/ComfyPage'
-import type { useWorkspaceStore } from '../src/stores/workspaceStore'
-
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
@@ -26,65 +23,41 @@ test.describe('Change Tracker', () => {
     })
 
     test('Can undo multiple operations', async ({ comfyPage }) => {
-      function isModified() {
-        return comfyPage.page.evaluate(async () => {
-          return !!(window['app'].extensionManager as WorkspaceStore).workflow
-            .activeWorkflow?.isModified
-        })
-      }
-
-      function getUndoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.undoQueue.length
-        })
-      }
-
-      function getRedoQueueSize() {
-        return comfyPage.page.evaluate(() => {
-          const workflow = (window['app'].extensionManager as WorkspaceStore)
-            .workflow.activeWorkflow
-          return workflow?.changeTracker.redoQueue.length
-        })
-      }
-      expect(await getUndoQueueSize()).toBe(0)
-      expect(await getRedoQueueSize()).toBe(0)
+      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 isModified()).toBe(false)
-
-      // TODO(huchenlei): Investigate why saving the workflow is causing the
-      // undo queue to be triggered.
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(0)
+      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 isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(0)
+      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 isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(3)
-      expect(await getRedoQueueSize()).toBe(0)
+      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 isModified()).toBe(true)
-      expect(await getUndoQueueSize()).toBe(2)
-      expect(await getRedoQueueSize()).toBe(1)
+      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 isModified()).toBe(false)
-      expect(await getUndoQueueSize()).toBe(1)
-      expect(await getRedoQueueSize()).toBe(2)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(2)
     })
   })
 
@@ -98,6 +71,7 @@ test.describe('Change Tracker', () => {
 
     // Make changes outside set
     // Bypass + collapse node
+    await node.click('title')
     await node.click('collapse')
     await comfyPage.ctrlB()
     await expect(node).toBeCollapsed()
@@ -111,6 +85,10 @@ test.describe('Change Tracker', () => {
     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)
 
@@ -152,6 +130,7 @@ test.describe('Change Tracker', () => {
     const multipleChanges = async () => {
       await beforeChange(comfyPage)
       // Call other actions that uses begin/endChange
+      await node.click('title')
       await collapse()
       await bypassAndPin()
       await afterChange(comfyPage)
@@ -169,4 +148,20 @@ test.describe('Change Tracker', () => {
     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

@@ -131,11 +131,8 @@ const customColorPalettes = {
 }
 
 test.describe('Color Palette', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-  })
-
   test('Can show custom color palette', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
@@ -145,6 +142,19 @@ test.describe('Color Palette', () => {
     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)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+  })
 })
 
 test.describe('Node Color Adjustments', () => {

browser_tests/copyPaste.spec.ts

@@ -24,14 +24,6 @@ test.describe('Copy Paste', () => {
 
   test('Can copy and paste widget value', async ({ comfyPage }) => {
     // Copy width value (512) from empty latent node to KSampler's seed.
-    // Empty latent node's width
-    await comfyPage.canvas.click({
-      position: {
-        x: 718,
-        y: 643
-      }
-    })
-    await comfyPage.ctrlC(null)
     // KSampler's seed
     await comfyPage.canvas.click({
       position: {
@@ -39,6 +31,14 @@ test.describe('Copy Paste', () => {
         y: 281
       }
     })
+    await comfyPage.ctrlC(null)
+    // Empty latent node's width
+    await comfyPage.canvas.click({
+      position: {
+        x: 718,
+        y: 643
+      }
+    })
     await comfyPage.ctrlV(null)
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')

browser_tests/dialog.spec.ts

@@ -77,8 +77,12 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const searchBox = comfyPage.page.locator('.settings-content')
-    await expect(searchBox).toBeVisible()
+    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 }) => {
@@ -94,7 +98,7 @@ test.describe('Settings', () => {
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const maxSpeed = 2.5
     await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
-    test.step('Setting should persist', async () => {
+    await test.step('Setting should persist', async () => {
       expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
     })
   })

browser_tests/fixtures/ComfyPage.ts

@@ -17,8 +17,11 @@ import {
 import { Topbar } from './components/Topbar'
 import { NodeReference } from './utils/litegraphUtils'
 import type { Position, Size } from './types'
+import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { SettingDialog } from './components/SettingDialog'
 
+type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
+
 class ComfyMenu {
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
@@ -72,6 +75,28 @@ 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
+
+  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"]')
+  }
+
+  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
+    const loc = this[locator]
+    await expect(loc).toBeVisible()
+    await loc.click()
+  }
+}
+
 export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
@@ -91,6 +116,7 @@ export class ComfyPage {
   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[] = []
@@ -115,6 +141,7 @@ export class ComfyPage {
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page)
+    this.confirmDialog = new ConfirmDialog(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -204,13 +231,15 @@ export class ComfyPage {
     }
   }
 
-  async setup() {
+  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
     await this.goto()
-    await this.page.evaluate((id) => {
-      localStorage.clear()
-      sessionStorage.clear()
-      localStorage.setItem('Comfy.userId', id)
-    }, this.id)
+    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.
@@ -314,9 +343,9 @@ export class ComfyPage {
     }, settingId)
   }
 
-  async reload() {
+  async reload({ clearStorage = true }: { clearStorage?: boolean } = {}) {
     await this.page.reload({ timeout: 15000 })
-    await this.setup()
+    await this.setup({ clearStorage })
   }
 
   async goto() {
@@ -485,6 +514,10 @@ export class ComfyPage {
     return { x: 427, y: 98 }
   }
 
+  get promptDialogInput() {
+    return this.page.locator('.p-dialog-content input[type="text"]')
+  }
+
   async disconnectEdge() {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
@@ -524,9 +557,6 @@ export class ComfyPage {
     safeSpot = safeSpot || { x: 10, y: 10 }
     await this.page.mouse.move(safeSpot.x, safeSpot.y)
     await this.page.mouse.down()
-    // TEMPORARY HACK: Multiple pans open the search menu, so cheat and keep it closed.
-    // TODO: Fix that (double-click at not-the-same-coordinations should not open the menu)
-    await this.page.keyboard.press('Escape')
     await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
     await this.page.mouse.up()
     await this.nextFrame()
@@ -555,6 +585,11 @@ export class ComfyPage {
     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()
@@ -733,15 +768,29 @@ export class ComfyPage {
     )
   }
 
+  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) {
-    this.page.on('dialog', async (dialog) => {
-      await dialog.accept(groupNodeName)
-    })
     await this.canvas.press('Control+a')
     const node = await this.getFirstNodeRef()
     await node!.clickContextMenuOption('Convert to Group Node')
+    await this.promptDialogInput.fill(groupNodeName)
+    await this.page.keyboard.press('Enter')
+    await this.promptDialogInput.waitFor({ state: 'hidden' })
     await this.nextFrame()
   }
+
   async convertOffsetToCanvas(pos: [number, number]) {
     return this.page.evaluate((pos) => {
       return window['app'].canvas.ds.convertOffsetToCanvas(pos)
@@ -771,6 +820,37 @@ export class ComfyPage {
   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 }>({
@@ -782,18 +862,23 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
     const userId = await comfyPage.setupUser(username)
     comfyPage.userIds[parallelIndex] = userId
 
-    await comfyPage.setupSettings({
-      'Comfy.UseNewMenu': 'Disabled',
-      // Hide canvas menu/info by default.
-      'Comfy.Graph.CanvasInfo': false,
-      'Comfy.Graph.CanvasMenu': false,
-      // Hide all badges by default.
-      'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
-      'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
-      // Disable tooltips by default to avoid flakiness.
-      'Comfy.EnableTooltips': false,
-      'Comfy.userId': userId
-    })
+    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)
   }
@@ -828,5 +913,19 @@ const makeMatcher = function <T>(
 export const comfyExpect = expect.extend({
   toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
   toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed')
+  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

@@ -0,0 +1,41 @@
+import { Page } from 'playwright'
+import { test as base } from '@playwright/test'
+
+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

@@ -43,7 +43,7 @@ export class ComfyNodeSearchBox {
   }
 
   get filterButton() {
-    return this.page.locator('.comfy-vue-node-search-container ._filter-button')
+    return this.page.locator('.comfy-vue-node-search-container .filter-button')
   }
 
   async fillAndSelectFirstNode(

browser_tests/fixtures/components/SidebarTab.ts

@@ -85,26 +85,36 @@ export class WorkflowsSidebarTab extends SidebarTab {
     super(page, 'workflows')
   }
 
+  get root() {
+    return this.page.locator('.workflows-sidebar-tab')
+  }
+
   get browseGalleryButton() {
-    return this.page.locator('.browse-templates-button')
+    return this.root.locator('.browse-templates-button')
   }
 
   get newBlankWorkflowButton() {
-    return this.page.locator('.new-blank-workflow-button')
+    return this.root.locator('.new-blank-workflow-button')
   }
 
   get openWorkflowButton() {
-    return this.page.locator('.open-workflow-button')
+    return this.root.locator('.open-workflow-button')
   }
 
   async getOpenedWorkflowNames() {
-    return await this.page
+    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.page
+    return await this.root
       .locator('.comfyui-workflows-browse .node-label')
       .allInnerTexts()
   }
@@ -116,13 +126,13 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 
   getOpenedItem(name: string) {
-    return this.page.locator('.comfyui-workflows-open .node-label', {
+    return this.root.locator('.comfyui-workflows-open .node-label', {
       hasText: name
     })
   }
 
   getPersistedItem(name: string) {
-    return this.page.locator('.comfyui-workflows-browse .node-label', {
+    return this.root.locator('.comfyui-workflows-browse .node-label', {
       hasText: name
     })
   }

browser_tests/fixtures/components/Topbar.ts

@@ -40,7 +40,14 @@ export class Topbar {
     return this._saveWorkflow(workflowName, 'Save As')
   }
 
-  async _saveWorkflow(workflowName: string, command: 'Save' | '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')

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -233,10 +233,10 @@ export class NodeReference {
     await ctx.getByText(optionText).click()
   }
   async convertToGroupNode(groupNodeName: string = 'GroupNode') {
-    this.comfyPage.page.once('dialog', async (dialog) => {
-      await dialog.accept(groupNodeName)
-    })
     await this.clickContextMenuOption('Convert to Group Node')
+    await this.comfyPage.promptDialogInput.fill(groupNodeName)
+    await this.comfyPage.page.keyboard.press('Enter')
+    await this.comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
     await this.comfyPage.nextFrame()
     const nodes = await this.comfyPage.getNodeRefsByType(
       `workflow>${groupNodeName}`

browser_tests/groupNode.spec.ts

@@ -77,8 +77,13 @@ test.describe('Group Node', () => {
         .click()
     })
   })
-
-  test('Can be added to canvas using search', async ({ comfyPage }) => {
+  // 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 }) => {
     const groupNodeName = 'DefautWorkflowGroupNode'
     await comfyPage.convertAllNodesToGroupNode(groupNodeName)
     await comfyPage.doubleClickCanvas()
@@ -98,6 +103,36 @@ 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
   }) => {

browser_tests/helpers/manageGroupNode.ts

@@ -1,12 +1,14 @@
 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) {
@@ -23,6 +25,11 @@ 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/interaction.spec.ts

@@ -320,6 +320,15 @@ 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 ({
@@ -537,6 +546,34 @@ test.describe('Load workflow', () => {
     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.reload({ 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.reload({ clearStorage: false })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'single_ksampler_modified.png'
+    )
+  })
 })
 
 test.describe('Load duplicate workflow', () => {

browser_tests/menu.spec.ts

@@ -350,23 +350,6 @@ test.describe('Menu', () => {
       await comfyPage.page.waitForTimeout(1000)
       expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
     })
-
-    test('Can migrate legacy bookmarks', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
-        'foo/',
-        'foo/KSampler (Advanced)',
-        'UNKNOWN',
-        'KSampler'
-      ])
-      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
-      await comfyPage.reload()
-      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
-        []
-      )
-      expect(
-        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-      ).toEqual(['foo/', 'foo/KSamplerAdvanced', 'KSampler'])
-    })
   })
 
   test.describe('Workflows sidebar', () => {
@@ -379,7 +362,9 @@ test.describe('Menu', () => {
       // Open the sidebar
       const tab = comfyPage.menu.workflowsTab
       await tab.open()
+    })
 
+    test.afterEach(async ({ comfyPage }) => {
       await comfyPage.setupWorkflowsDirectory({})
     })
 
@@ -392,7 +377,7 @@ test.describe('Menu', () => {
       await tab.newBlankWorkflowButton.click()
       expect(await tab.getOpenedWorkflowNames()).toEqual([
         '*Unsaved Workflow.json',
-        'Unsaved Workflow (2).json'
+        '*Unsaved Workflow (2).json'
       ])
     })
 
@@ -450,6 +435,108 @@ test.describe('Menu', () => {
       ).toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
     })
 
+    test('Exported workflow does not contain localized slot names', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('default')
+      const exportedWorkflow = await comfyPage.getExportedWorkflow({
+        api: false
+      })
+      expect(exportedWorkflow).toBeDefined()
+      for (const node of exportedWorkflow.nodes) {
+        for (const slot of node.inputs) {
+          expect(slot.localized_name).toBeUndefined()
+          expect(slot.label).toBeUndefined()
+        }
+        for (const slot of node.outputs) {
+          expect(slot.localized_name).toBeUndefined()
+          expect(slot.label).toBeUndefined()
+        }
+      }
+    })
+
+    test('Can export same workflow with different locales', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('default')
+
+      // Setup download listener before triggering the export
+      const downloadPromise = comfyPage.page.waitForEvent('download')
+      await comfyPage.menu.topbar.exportWorkflow('exported_default.json')
+
+      // Wait for the download and get the file content
+      const download = await downloadPromise
+      expect(download.suggestedFilename()).toBe('exported_default.json')
+
+      // Get the exported workflow content
+      const downloadedContent = await comfyPage.getExportedWorkflow({
+        api: false
+      })
+
+      await comfyPage.setSetting('Comfy.Locale', 'zh')
+      await comfyPage.reload()
+
+      const downloadedContentZh = await comfyPage.getExportedWorkflow({
+        api: false
+      })
+
+      // Compare the exported workflow with the original
+      expect(downloadedContent).toBeDefined()
+      expect(downloadedContent).toEqual(downloadedContentZh)
+    })
+
+    test('Can save workflow as with same name', async ({ comfyPage }) => {
+      await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow5.json'])
+
+      await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
+      await comfyPage.confirmDialog.click('overwrite')
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow5.json'])
+    })
+
+    test('Can save temporary workflow with unmodified name', async ({
+      comfyPage
+    }) => {
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+
+      await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
+      // Should not trigger the overwrite dialog
+      expect(
+        await comfyPage.page.locator('.comfy-modal-content:visible').count()
+      ).toBe(0)
+
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+    })
+
+    test('Can overwrite other workflows with save as', async ({
+      comfyPage
+    }) => {
+      const topbar = comfyPage.menu.topbar
+      await topbar.saveWorkflow('workflow1.json')
+      await topbar.saveWorkflowAs('workflow2.json')
+      await comfyPage.nextFrame()
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow1.json', 'workflow2.json'])
+      expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+        'workflow2.json'
+      )
+
+      await topbar.saveWorkflowAs('workflow1.json')
+      await comfyPage.confirmDialog.click('overwrite')
+      // The old workflow1.json should be deleted and the new one should be saved.
+      expect(
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      ).toEqual(['workflow2.json', 'workflow1.json'])
+      expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+        'workflow1.json'
+      )
+    })
+
     test('Does not report warning when switching between opened workflows', async ({
       comfyPage
     }) => {
@@ -475,12 +562,49 @@ test.describe('Menu', () => {
         `tempWorkflow-${test.info().title}`
       )
       const closeButton = comfyPage.page.locator(
-        '.comfyui-workflows-open .p-button-icon.pi-times'
+        '.comfyui-workflows-open .close-workflow-button'
       )
       await closeButton.click()
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      ).toEqual(['Unsaved Workflow.json'])
+      ).toEqual(['*Unsaved Workflow.json'])
+    })
+
+    test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Workflow.ConfirmDelete', false)
+
+      const { topbar, workflowsTab } = comfyPage.menu
+
+      const filename = 'workflow18.json'
+      await topbar.saveWorkflow(filename)
+      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+
+      await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
+      await comfyPage.nextFrame()
+      await comfyPage.clickContextMenuItem('Delete')
+
+      await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
+      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
+        '*Unsaved Workflow.json'
+      ])
+    })
+
+    test('Can delete workflows', async ({ comfyPage }) => {
+      const { topbar, workflowsTab } = comfyPage.menu
+
+      const filename = 'workflow18.json'
+      await topbar.saveWorkflow(filename)
+      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+
+      await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
+      await comfyPage.clickContextMenuItem('Delete')
+
+      await comfyPage.confirmDialog.click('delete')
+
+      await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
+      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
+        '*Unsaved Workflow.json'
+      ])
     })
   })
 

browser_tests/nodeDisplay.spec.ts

@@ -48,4 +48,8 @@ test.describe('Optional input', () => {
     expect(vaeInput.link).toBeNull()
     expect(convertedInput.link).not.toBeNull()
   })
+  test('slider', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('simple_slider')
+    await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
+  })
 })

browser_tests/nodeSearchBox.spec.ts

@@ -1,5 +1,7 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from './fixtures/ComfyPage'
 
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -105,26 +107,85 @@ test.describe('Node search box', () => {
   })
 
   test.describe('Filtering', () => {
+    const expectFilterChips = async (comfyPage, expectedTexts: string[]) => {
+      const chips = comfyPage.searchBox.filterChips
+
+      // Check that the number of chips matches the expected count
+      await expect(chips).toHaveCount(expectedTexts.length)
+
+      // Verify the text and visibility of each filter chip
+      await Promise.all(
+        expectedTexts.map(async (text, index) => {
+          const chip = chips.nth(index)
+          await expect(chip).toContainText(text)
+          await expect(chip).toBeVisible()
+        })
+      )
+    }
+
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.doubleClickCanvas()
     })
 
     test('Can add filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, ['MODEL'])
     })
 
     test('Can add multiple filters', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(2)
+      await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
       await comfyPage.searchBox.removeFilter(0)
-      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+      await expectFilterChips(comfyPage, [])
+    })
+
+    test.describe('Removing from multiple filters', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+        await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+        await comfyPage.searchBox.addFilter('utils', 'Category')
+      })
+
+      test('Can remove first filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['CLIP', 'utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, [])
+      })
+
+      test('Can remove middle filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(1)
+        await expectFilterChips(comfyPage, ['MODEL', 'utils'])
+      })
+
+      test('Can remove last filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(2)
+        await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
+      })
+    })
+  })
+
+  test.describe('Input focus behavior', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('focuses input after adding a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+
+    test('focuses input after removing a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expect(comfyPage.searchBox.input).toHaveFocus()
     })
   })
 })

browser_tests/rerouteNode.spec.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Reroute Node', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({})
+  })
+
+  test('loads from inserted workflow', async ({ comfyPage }) => {
+    const workflowName = 'single_connected_reroute_node.json'
+    await comfyPage.setupWorkflowsDirectory({
+      [workflowName]: workflowName
+    })
+    await comfyPage.setup()
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+
+    // Insert the workflow
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(workflowName).click({ button: 'right' })
+    const insertButton = comfyPage.page.locator('.p-contextmenu-item-link', {
+      hasText: 'Insert'
+    })
+    await insertButton.click()
+
+    // Close the sidebar tab
+    await workflowsTab.tabButton.click()
+    await workflowsTab.root.waitFor({ state: 'hidden' })
+    await comfyPage.setFocusMode(true)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('reroute_inserted.png')
+  })
+})

browser_tests/rightClickMenu.spec.ts

@@ -32,11 +32,11 @@ test.describe('Canvas Right Click Menu', () => {
   test('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
-    comfyPage.page.on('dialog', async (dialog) => {
-      await dialog.accept('GroupNode2CLIP')
-    })
     await comfyPage.rightClickCanvas()
-    await comfyPage.page.getByText('Convert to Group Node').click()
+    await comfyPage.clickContextMenuItem('Convert to Group Node')
+    await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-group-node.png'
@@ -186,4 +186,22 @@ test.describe('Node Right Click Menu', () => {
       'selected-nodes-unpinned.png'
     )
   })
+
+  test('Can clone pinned nodes', async ({ comfyPage }) => {
+    const nodeCount = await comfyPage.getGraphNodesCount()
+    const node = (await comfyPage.getFirstNodeRef())!
+    await node.clickContextMenuOption('Pin')
+    await comfyPage.nextFrame()
+    await node.click('title', { button: 'right' })
+    await expect(
+      comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
+    ).toBeAttached()
+    const cloneItem = comfyPage.page.locator(
+      '.litemenu-entry:has-text("Clone")'
+    )
+    await cloneItem.click()
+    await expect(cloneItem).toHaveCount(0)
+    await comfyPage.nextFrame()
+    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount + 1)
+  })
 })