Add awaits to various tests

Test failure confirmed when links are not connected

.env_example

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

.gitattributes

@@ -0,0 +1,7 @@
+# Default
+* text=auto
+
+# Force TS to LF to make the unixy scripts not break on Windows
+*.ts text eol=lf
+*.vue text eol=lf
+*.js text eol=lf

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -50,6 +50,12 @@ 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/eslint.yaml

@@ -1,11 +1,6 @@
 name: ESLint
 
 on:
-  push:
-    branches:
-      - main
-      - master
-      - 'dev*'
   pull_request:
     branches:
       - main

.github/workflows/format.yaml

@@ -0,0 +1,23 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches: [ main, master, dev* ]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run Prettier check
+      run: npx prettier --check './**/*.{js,ts,tsx,vue}'

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

@@ -5,50 +5,13 @@ name: Update Playwright Expectations
 on:
   pull_request:
     types: [ labeled ]
-    branches: [ main, master ]
 
 jobs:
   test:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     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"
-        ref: ${{ github.head_ref }}
-    - uses: actions/setup-node@v3
-      with:
-        node-version: lts/*
-    - uses: actions/setup-python@v4
-      with:
-        python-version: '3.10'
-    - name: Install 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
-      working-directory: ComfyUI
-    - name: Build & Install ComfyUI_frontend
-      run: |
-        npm ci
-        npm run build
-        rm -rf ../ComfyUI/web/*
-        mv dist/* ../ComfyUI/web/
-      working-directory: ComfyUI_frontend
-    - name: Start ComfyUI server
-      run: |
-        python main.py --cpu &
-        wait-for-it --service 127.0.0.1:8188 -t 600
-      working-directory: ComfyUI
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
@@ -72,6 +35,8 @@ jobs:
       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 browser_tests
         git commit -m "Update test expectations [skip ci]"
         git push origin HEAD:${{ github.head_ref }}

.github/workflows/test-ui.yaml

@@ -5,7 +5,6 @@ on:
     branches:
       - main
       - master
-      - 'dev*'
   pull_request:
     branches:
       - main
@@ -13,80 +12,64 @@ on:
       - 'dev*'
 
 jobs:
-  test:
+  jest-tests:
     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: Get commit message
-      id: commit-message
-      run: echo "::set-output name=message::$(git log -1 --pretty=%B)"
-      working-directory: ComfyUI_frontend
-    - name: Checkout ComfyUI_examples
-      uses: actions/checkout@v4
-      with:
-        repository: "comfyanonymous/ComfyUI_examples"
-        path: "ComfyUI_frontend/tests-ui/ComfyUI_examples"
-        ref: master
-    - name: Skip CI
-      if: contains(steps.commit-message.outputs.message, '[skip ci]')
-      run: echo "Skipping CI as commit contains '[skip ci]'"
-      continue-on-error: true
-      working-directory: ComfyUI_frontend
-    - uses: actions/setup-node@v3
-      with:
-        node-version: lts/*
-    - uses: actions/setup-python@v4
-      with:
-        python-version: '3.10'
-    - name: Install 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
-      working-directory: ComfyUI
-    - name: Build & Install ComfyUI_frontend
-      run: |
-        npm ci
-        npm run build
-        rm -rf ../ComfyUI/web/*
-        mv dist/* ../ComfyUI/web/
-      working-directory: ComfyUI_frontend
-    - name: Start ComfyUI server
-      run: |
-        python main.py --cpu &
-        wait-for-it --service 127.0.0.1:8188 -t 600
-      working-directory: ComfyUI
-    - name: Run UI tests
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
+    - name: Run Jest tests
       run: |
         npm run test:generate
         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
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
-    - name: Run Playwright tests
-      run: npx playwright test
+    - name: Run Playwright tests (Chromium)
+      run: npx playwright test --project=chromium
       working-directory: ComfyUI_frontend
     - uses: actions/upload-artifact@v4
       if: always()
       with:
-        name: playwright-report
+        name: playwright-report-chromium
+        path: ComfyUI_frontend/playwright-report/
+        retention-days: 30
+
+  playwright-tests-chromium-2x:
+    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: Run Playwright tests (Chromium 2x)
+      run: npx playwright test --project=chromium-2x
+      working-directory: ComfyUI_frontend
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report-chromium-2x
+        path: ComfyUI_frontend/playwright-report/
+        retention-days: 30
+
+  playwright-tests-mobile-chrome:
+    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: Run Playwright tests (Mobile Chrome)
+      run: npx playwright test --project=mobile-chrome
+      working-directory: ComfyUI_frontend
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report-mobile-chrome
         path: ComfyUI_frontend/playwright-report/
         retention-days: 30

.github/workflows/update-main.yaml

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

.github/workflows/vitest.yaml

@@ -0,0 +1,31 @@
+name: Vitest Tests
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - 'dev*'
+  pull_request:
+    branches:
+      - main
+      - master
+      - 'dev*'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run Vitest tests
+      run: npm run test:component

.gitignore

@@ -23,6 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+components.d.ts
 
 # Ignore test data.
 tests-ui/data/*

.husky/pre-commit

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

.prettierrc

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

README.md

@@ -33,11 +33,11 @@
 
 ### Nightly Release
 
-Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases). 
+Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases).
 
 To use the latest nightly release, add the following command line argument to your ComfyUI launch script:
 
-```
+```bat
 --front-end-version Comfy-Org/ComfyUI_frontend@latest
 ```
 
@@ -62,6 +62,31 @@ There will be a 2-day feature freeze before each stable release. During this per
 
 ### Major features
 
+<details>
+  <summary>v1.3.22: Integrated server terminal</summary>
+
+Press Ctrl + ` to toggle integrated terminal.
+
+https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
+</details>
+
+<details>
+  <summary>v1.3.7: Keybinding customization</summary>
+
+## Basic UI
+![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
+
+## Reset button
+![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
+
+## Edit Keybinding
+![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
+![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
+
+[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
+
+</details>
+
 <details>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
@@ -90,6 +115,79 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
+<details>
+  <summary>v1.3.32: **Litegraph** Nested group</summary>
+
+https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
+</details>
+
+<details>
+  <summary>v1.3.24: **Litegraph** Group selection</summary>
+
+https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
+</details>
+
+<details>
+  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
+
+</details>
+
+<details>
+  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
+
+Dropping a link of correct type on node widget will automatically convert the widget to input.
+
+[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
+
+</details>
+
+<details>
+  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
+
+The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
+or by holding the space key.
+
+[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
+
+</details>
+
+<details>
+  <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
+
+</details>
+
+<details>
+  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
+
+![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
+
+</details>
+
+<details>
+  <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
+
+https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
+
+</details>
+
+<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>
+  <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>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
 
@@ -115,7 +213,173 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
 </details>
 
-### Node developers API
+### Developer APIs
+
+<details>
+  <summary>v1.3.34: Register about panel badges</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  aboutPageBadges: [
+    {
+      label: 'Test Badge',
+      url: 'https://example.com',
+      icon: 'pi pi-box'
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
+
+</details>
+
+<details>
+  <summary>v1.3.22: Register bottom panel tabs</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension',
+  bottomPanelTabs: [
+    {
+      id: 'TestTab',
+      title: 'Test Tab',
+      type: 'custom',
+      render: (el) => {
+        el.innerHTML = '<div>Custom tab</div>'
+      }
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
+
+</details>
+
+<details>
+  <summary>v1.3.22: New settings API</summary>
+
+Legacy settings API.
+
+```js
+// Register a new setting
+app.ui.settings.addSetting({
+  id: 'TestSetting',
+  name: 'Test Setting',
+  type: 'text',
+  defaultValue: 'Hello, world!'
+})
+
+// Get the value of a setting
+const value = app.ui.settings.getSettingValue('TestSetting')
+
+// Set the value of a setting
+app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
+```
+
+New settings API.
+
+```js
+// Register a new setting
+app.registerExtension({
+  name: 'TestExtension1',
+  settings: [
+    {
+      id: 'TestSetting',
+      name: 'Test Setting',
+      type: 'text',
+      defaultValue: 'Hello, world!'
+    }
+  ]
+})
+
+// Get the value of a setting
+const value = app.extensionManager.setting.get('TestSetting')
+
+// Set the value of a setting
+app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
+```
+
+</details>
+
+<details>
+  <summary>v1.3.7: Register commands and keybindings</summary>
+
+  Extensions can call the following API to register commands and keybindings. Do
+  note that keybindings defined in core cannot be overwritten, and some keybindings
+  are reserved by the browser.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'TestCommand',
+        function: () => {
+          alert('TestCommand')
+        }
+      }
+    ],
+    keybindings: [
+      {
+        combo: { key: 'k' },
+        commandId: 'TestCommand'
+      }
+    ]
+  })
+```
+
+</details>
+
+<details>
+  <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']
+      }
+    ]
+  })
+```
+
+![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
+</details>
+
+<details>
+  <summary>v1.2.27: Extension API to add toast message</summary>i
+
+  Extensions can call the following API to add toast messages.
+
+```js
+  app.extensionManager.toast.add({
+    severity: 'info',
+    summary: 'Loaded!',
+    detail: 'Extension loaded!',
+    life: 3000
+  })
+```
+Documentation of all supported options can be found here: <https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions>
+
+![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
+</details>
+
 <details>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
@@ -141,50 +405,16 @@ We will support custom icons later.
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
 </details>
 
-<details>
-  <summary>v1.2.27: Extension API to add toast message</summary>
-
-  Extensions can call the following API to add toast messages.
-
-```js
-  app.extensionManager.toast.add({
-    severity: 'info',
-    summary: 'Loaded!',
-    detail: 'Extension loaded!'
-  })
-```
-
-![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
-</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>.
-
-
-### What to be done
-
-- Replace the existing ComfyUI front-end impl
-- 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.
-- New extensions API for adding UI-related features.
-
 ## Development
 
+### Tech Stack
+
+- [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
+- [Pinia](https://pinia.vuejs.org/) for state management
+- [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
+- [Litegraph](https://github.com/Comfy-Org/litegraph.js) for node editor
+- [zod](https://zod.dev/) for schema validation
+
 ### Git pre-commit hooks
 
 Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
@@ -195,11 +425,31 @@ 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
 
-### Test
+#### Access dev server on touch devices
+
+After you start the dev server, you should see following logs:
+
+```
+> comfyui-frontend@1.3.42 dev
+> vite
+
+
+  VITE v5.4.6  ready in 488 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: http://172.21.80.1:5173/
+  ➜  Network: http://192.168.2.20:5173/
+  ➜  press h + enter to show help
+```
+
+Make sure your desktop machine and touch device are on the same network. On your touch device,
+navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
+
+### Unit Test
 
 - `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
@@ -207,11 +457,35 @@ core extensions will be loaded.
 - `npm run test:generate:examples` to extract the example workflows
 - `npm run test` to execute all unit tests.
 
+### Component Test
+
+Component test verifies Vue components in `src/components/`.
+
+- `npm run test:component` to execute all component tests.
+
+### Playwright Test
+
+Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
+
 ### LiteGraph
 
-This repo is using litegraph package hosted on https://github.com/Comfy-Org/litegraph.js. Any changes to litegraph should be submitted in that repo instead.
+This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
+
+### Test litegraph changes
+
+- Run `npm link` in the local litegraph repo.
+- Run `npm link @comfyorg/litegraph` in this repo.
+
+This will replace the litegraph package in this repo with the local litegraph repo.
 
 ## 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/ComfyPage.ts

@@ -1,511 +0,0 @@
-import type { Page, Locator } from '@playwright/test'
-import { test as base } from '@playwright/test'
-import dotenv from 'dotenv'
-dotenv.config()
-
-interface Position {
-  x: number
-  y: number
-}
-
-interface Size {
-  width: number
-  height: number
-}
-
-class ComfyNodeSearchBox {
-  public readonly input: Locator
-  public readonly dropdown: Locator
-
-  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'
-    )
-  }
-
-  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()
-  }
-}
-
-class NodeLibrarySidebarTab {
-  public readonly tabId: string = 'node-library'
-  constructor(public readonly page: Page) {}
-
-  get tabButton() {
-    return this.page.locator(`.${this.tabId}-tab-button`)
-  }
-
-  get selectedTabButton() {
-    return this.page.locator(
-      `.${this.tabId}-tab-button.side-bar-button-selected`
-    )
-  }
-
-  get nodeLibraryTree() {
-    return this.page.locator('.node-lib-tree')
-  }
-
-  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() {
-    if (await this.selectedTabButton.isVisible()) {
-      return
-    }
-
-    await this.tabButton.click()
-    await this.nodeLibraryTree.waitFor({ state: 'visible' })
-  }
-
-  folderSelector(folderName: string) {
-    return `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.folder-label:has-text("${folderName}")))`
-  }
-
-  getFolder(folderName: string) {
-    return this.page.locator(this.folderSelector(folderName))
-  }
-
-  nodeSelector(nodeName: string) {
-    return `.p-tree-node-content:has(> .node-lib-tree-node-label:has(.node-label:has-text("${nodeName}")))`
-  }
-
-  getNode(nodeName: string) {
-    return this.page.locator(this.nodeSelector(nodeName))
-  }
-}
-
-class ComfyMenu {
-  public readonly sideToolbar: Locator
-  public readonly themeToggleButton: Locator
-
-  constructor(public readonly page: Page) {
-    this.sideToolbar = page.locator('.side-tool-bar-container')
-    this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
-  }
-
-  get nodeLibraryTab() {
-    return new NodeLibrarySidebarTab(this.page)
-  }
-
-  async toggleTheme() {
-    await this.themeToggleButton.click()
-    await this.page.evaluate(() => {
-      return new Promise((resolve) => {
-        window['app'].ui.settings.addEventListener(
-          'Comfy.ColorPalette.change',
-          resolve,
-          { once: true }
-        )
-
-        setTimeout(resolve, 5000)
-      })
-    })
-  }
-
-  async getThemeId() {
-    return await this.page.evaluate(async () => {
-      return await window['app'].ui.settings.getSettingValue(
-        'Comfy.ColorPalette'
-      )
-    })
-  }
-}
-
-export class ComfyPage {
-  public readonly url: string
-  // All canvas position operations are based on default view of canvas.
-  public readonly canvas: Locator
-  public readonly widgetTextBox: Locator
-
-  // Buttons
-  public readonly resetViewButton: Locator
-  public readonly queueButton: Locator
-
-  // Inputs
-  public readonly workflowUploadInput: Locator
-
-  // Components
-  public readonly searchBox: ComfyNodeSearchBox
-  public readonly menu: ComfyMenu
-
-  constructor(public readonly page: Page) {
-    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)
-  }
-
-  async getGraphNodesCount(): Promise<number> {
-    return await this.page.evaluate(() => {
-      return window['app']?.graph?._nodes?.length || 0
-    })
-  }
-
-  async setup() {
-    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'] !== undefined && window['app'].vueAppReady
-    )
-    await this.page.evaluate(() => {
-      window['app']['canvas'].show_info = false
-    })
-    await this.nextFrame()
-    // Reset view to force re-rendering of canvas. So that info fields like fps
-    // become hidden.
-    await this.resetView()
-  }
-
-  async setSetting(settingId: string, settingValue: any) {
-    return await this.page.evaluate(
-      async ({ id, value }) => {
-        await window['app'].ui.settings.setSettingValueAsync(id, value)
-      },
-      { id: settingId, value: settingValue }
-    )
-  }
-
-  async getSetting(settingId: string) {
-    return await this.page.evaluate(async (id) => {
-      return await window['app'].ui.settings.getSettingValue(id)
-    }, settingId)
-  }
-
-  async reload() {
-    await this.page.reload({ timeout: 15000 })
-    await this.setup()
-  }
-
-  async goto() {
-    await this.page.goto(this.url)
-  }
-
-  async nextFrame() {
-    await this.page.evaluate(() => {
-      return new Promise<number>(requestAnimationFrame)
-    })
-  }
-
-  async delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms))
-  }
-
-  async loadWorkflow(workflowName: string) {
-    await this.workflowUploadInput.setInputFiles(
-      `./browser_tests/assets/${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 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 dragNode2() {
-    await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
-    await this.nextFrame()
-  }
-
-  async disconnectEdge() {
-    // CLIP input anchor
-    await this.page.mouse.move(427, 198)
-    await this.page.mouse.down()
-    await this.page.mouse.move(427, 98)
-    await this.page.mouse.up()
-    // Move out the way to avoid highlight of menu item.
-    await this.page.mouse.move(10, 10)
-    await this.nextFrame()
-  }
-
-  async connectEdge() {
-    // CLIP output anchor on Load Checkpoint Node.
-    await this.page.mouse.move(332, 509)
-    await this.page.mouse.down()
-    // CLIP input anchor on CLIP Text Encode Node.
-    await this.page.mouse.move(427, 198)
-    await this.page.mouse.up()
-    await this.nextFrame()
-  }
-
-  async adjustWidgetValue() {
-    // Adjust Empty Latent Image's width input.
-    const page = this.page
-    await page.locator('#graph-canvas').click({
-      position: {
-        x: 724,
-        y: 645
-      }
-    })
-    await page.locator('input[type="text"]').click()
-    await page.locator('input[type="text"]').fill('128')
-    await page.locator('input[type="text"]').press('Enter')
-    await this.nextFrame()
-  }
-
-  async zoom(deltaY: number, steps: number = 1) {
-    await this.page.mouse.move(10, 10)
-    for (let i = 0; i < steps; i++) {
-      await this.page.mouse.wheel(0, deltaY)
-    }
-    await this.nextFrame()
-  }
-
-  async pan(offset: Position, safeSpot?: Position) {
-    safeSpot = safeSpot || { x: 10, y: 10 }
-    await this.page.mouse.move(safeSpot.x, safeSpot.y)
-    await this.page.mouse.down()
-    // TEMPORARY HACK: Multiple pans open the search menu, so cheat and keep it closed.
-    // TODO: Fix that (double-click at not-the-same-coordinations should not open the menu)
-    await this.page.keyboard.press('Escape')
-    await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
-    await this.page.mouse.up()
-    await this.nextFrame()
-  }
-
-  async rightClickCanvas() {
-    await this.page.mouse.click(10, 10, { button: 'right' })
-    await this.nextFrame()
-  }
-
-  async doubleClickCanvas() {
-    await this.page.mouse.dblclick(10, 10)
-    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 ctrlC() {
-    await this.page.keyboard.down('Control')
-    await this.page.keyboard.press('KeyC')
-    await this.page.keyboard.up('Control')
-    await this.nextFrame()
-  }
-
-  async ctrlV() {
-    await this.page.keyboard.down('Control')
-    await this.page.keyboard.press('KeyV')
-    await this.page.keyboard.up('Control')
-    await this.nextFrame()
-  }
-
-  async closeMenu() {
-    await this.page.click('button.comfy-close-menu-btn')
-    await this.nextFrame()
-  }
-
-  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
-    }
-    await this.dragAndDrop(bottomRight, target)
-    await this.nextFrame()
-    if (revertAfter) {
-      await this.dragAndDrop(target, bottomRight)
-      await this.nextFrame()
-    }
-  }
-
-  async resizeKsamplerNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const ksamplerPos = {
-      x: 864,
-      y: 157
-    }
-    const ksamplerSize = {
-      width: 315,
-      height: 292
-    }
-    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter)
-  }
-
-  async resizeLoadCheckpointNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const loadCheckpointPos = {
-      x: 25,
-      y: 440
-    }
-    const loadCheckpointSize = {
-      width: 320,
-      height: 120
-    }
-    this.resizeNode(
-      loadCheckpointPos,
-      loadCheckpointSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
-  }
-
-  async resizeEmptyLatentNode(
-    percentX: number,
-    percentY: number,
-    revertAfter: boolean = false
-  ) {
-    const emptyLatentPos = {
-      x: 475,
-      y: 580
-    }
-    const emptyLatentSize = {
-      width: 303,
-      height: 132
-    }
-    this.resizeNode(
-      emptyLatentPos,
-      emptyLatentSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
-  }
-}
-
-export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
-  comfyPage: async ({ page }, use) => {
-    const comfyPage = new ComfyPage(page)
-    await comfyPage.setup()
-    await use(comfyPage)
-  }
-})

browser_tests/README.md

@@ -2,8 +2,16 @@
 
 This document outlines the setup and usage of Playwright for testing the ComfyUI_frontend project.
 
+## 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.
+
 ## Setup
 
+Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.
+ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing.
+
 Ensure you have Node.js v20 or later installed. Then, set up the Chromium test driver:
 
 ```bash

browser_tests/actionbar.spec.ts

@@ -0,0 +1,125 @@
+import type { Response } from '@playwright/test'
+import type { StatusWsMessage } from '../src/types/apiTypes.ts'
+import { expect, mergeTests } from '@playwright/test'
+import { comfyPageFixture } from './fixtures/ComfyPage'
+import { webSocketFixture } from './fixtures/ws.ts'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+test.describe('Actionbar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  /**
+   * This test ensures that the autoqueue change mode can only queue one change at a time
+   */
+  test('Does not auto-queue multiple changes at a time', async ({
+    comfyPage,
+    ws
+  }) => {
+    // Enable change auto-queue mode
+    const queueOpts = await comfyPage.actionbar.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()
+
+    // Intercept the prompt queue endpoint
+    let promptNumber = 0
+    comfyPage.page.route('**/api/prompt', async (route, req) => {
+      await new Promise((r) => setTimeout(r, 100))
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          prompt_id: promptNumber,
+          number: ++promptNumber,
+          node_errors: {},
+          // Include the request data to validate which prompt was queued so we can validate the width
+          __request: req.postDataJSON()
+        })
+      })
+    })
+
+    // Start watching for a message to prompt
+    const requestPromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+    // Find and set the width on the latent node
+    const triggerChange = async (value: number) => {
+      return await comfyPage.page.evaluate((value) => {
+        const node = window['app'].graph._nodes.find(
+          (n) => n.type === 'EmptyLatentImage'
+        )
+        node.widgets[0].value = value
+        window[
+          'app'
+        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
+      }, value)
+    }
+
+    // Trigger a status websocket message
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
+            }
+          }
+        }
+      } as StatusWsMessage)
+    }
+
+    // Extract the width from the queue response
+    const getQueuedWidth = async (resp: Promise<Response>) => {
+      const obj = await (await resp).json()
+      return obj['__request']['prompt']['5']['inputs']['width']
+    }
+
+    // Trigger a bunch of changes
+    const START = 32
+    const END = 64
+    for (let i = START; i <= END; i += 8) {
+      await triggerChange(i)
+    }
+
+    // Ensure the queued width is the first value
+    expect(
+      await getQueuedWidth(requestPromise),
+      'the first queued prompt should be the first change width'
+    ).toBe(START)
+
+    // Ensure that no other changes are queued
+    await expect(
+      comfyPage.page.waitForResponse('**/api/prompt', { timeout: 250 })
+    ).rejects.toThrow()
+    expect(
+      promptNumber,
+      'only 1 prompt should have been queued even though there were multiple changes'
+    ).toBe(1)
+
+    // Trigger a status update so auto-queue re-runs
+    await triggerStatus(1)
+    await triggerStatus(0)
+
+    // Ensure the queued width is the last queued value
+    expect(
+      await getQueuedWidth(comfyPage.page.waitForResponse('**/api/prompt')),
+      'last queued prompt width should be the last change'
+    ).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/default.json

@@ -0,0 +1,135 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [413, 389],
+      "size": [425.27801513671875, 180.6060791015625],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 5 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [6],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["text, watermark"]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [415, 186],
+      "size": [422.84503173828125, 164.31304931640625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 3 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [473, 609],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [2], "slot_index": 0 }],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [863, 186],
+      "size": [315, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": 1 },
+        { "name": "positive", "type": "CONDITIONING", "link": 4 },
+        { "name": "negative", "type": "CONDITIONING", "link": 6 },
+        { "name": "latent_image", "type": "LATENT", "link": 2 }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0 }],
+      "properties": {},
+      "widgets_values": [156680208700286, true, 20, 8, "euler", "normal", 1]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [1209, 188],
+      "size": [210, 46],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 7 },
+        { "name": "vae", "type": "VAE", "link": 8 }
+      ],
+      "outputs": [{ "name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0 }],
+      "properties": {}
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451, 189],
+      "size": [210, 26],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 9 }],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [26, 474],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": [1], "slot_index": 0 },
+        { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
+        { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
+      ],
+      "properties": {},
+      "widgets_values": ["v1-5-pruned-emaonly.ckpt"]
+    }
+  ],
+  "links": [
+    [1, 4, 0, 3, 0, "MODEL"],
+    [2, 5, 0, 3, 3, "LATENT"],
+    [3, 4, 1, 6, 0, "CLIP"],
+    [4, 6, 0, 3, 1, "CONDITIONING"],
+    [5, 4, 1, 7, 0, "CLIP"],
+    [6, 7, 0, 3, 2, "CONDITIONING"],
+    [7, 3, 0, 8, 0, "LATENT"],
+    [8, 4, 2, 8, 1, "VAE"],
+    [9, 8, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/every_node_color.json

@@ -0,0 +1,504 @@
+{
+  "last_node_id": 13,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": {
+        "0": 863,
+        "1": 186
+      },
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 1
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 4
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 6
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            7
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": {
+        "0": 36,
+        "1": 172
+      },
+      "size": {
+        "0": 315,
+        "1": 98
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [
+            1
+          ],
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [
+            3,
+            5
+          ],
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [
+            8
+          ],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "Stable-diffusion/v1-5-pruned-emaonly.safetensors"
+      ],
+      "color": "#322",
+      "bgcolor": "#533"
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": {
+        "0": 473,
+        "1": 609
+      },
+      "size": {
+        "0": 315,
+        "1": 106
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            2
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ],
+      "color": "#323",
+      "bgcolor": "#535"
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": {
+        "0": 415,
+        "1": 186
+      },
+      "size": {
+        "0": 422.84503173828125,
+        "1": 164.31304931640625
+      },
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            4
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ],
+      "color": "#233",
+      "bgcolor": "#355"
+    },
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": {
+        "0": 413,
+        "1": 389
+      },
+      "size": {
+        "0": 425.27801513671875,
+        "1": 180.6060791015625
+      },
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 5
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            6
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "text, watermark"
+      ],
+      "color": "#323",
+      "bgcolor": "#535"
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": {
+        "0": 866,
+        "1": 502
+      },
+      "size": {
+        "0": 210,
+        "1": 46
+      },
+      "flags": {},
+      "order": 8,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 7
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 8
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            9
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": [],
+      "color": "#222",
+      "bgcolor": "#000"
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": {
+        "0": 857,
+        "1": 611
+      },
+      "size": [
+        214.2000732421875,
+        59.4000244140625
+      ],
+      "flags": {},
+      "order": 9,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 9
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    },
+    {
+      "id": 10,
+      "type": "CheckpointLoaderSimple",
+      "pos": {
+        "0": 42,
+        "1": 329
+      },
+      "size": {
+        "0": 315,
+        "1": 98
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "Stable-diffusion/v1-5-pruned-emaonly.safetensors"
+      ],
+      "color": "#332922",
+      "bgcolor": "#593930"
+    },
+    {
+      "id": 11,
+      "type": "CheckpointLoaderSimple",
+      "pos": {
+        "0": 40,
+        "1": 494
+      },
+      "size": {
+        "0": 315,
+        "1": 98
+      },
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "Stable-diffusion/v1-5-pruned-emaonly.safetensors"
+      ],
+      "color": "#223",
+      "bgcolor": "#335"
+    },
+    {
+      "id": 13,
+      "type": "ImageScale",
+      "pos": {
+        "0": 42,
+        "1": 650
+      },
+      "size": {
+        "0": 315,
+        "1": 130
+      },
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageScale"
+      },
+      "widgets_values": [
+        "nearest-exact",
+        512,
+        512,
+        "disabled"
+      ],
+      "color": "#2a363b",
+      "bgcolor": "#3f5159"
+    }
+  ],
+  "links": [
+    [
+      1,
+      4,
+      0,
+      3,
+      0,
+      "MODEL"
+    ],
+    [
+      2,
+      5,
+      0,
+      3,
+      3,
+      "LATENT"
+    ],
+    [
+      3,
+      4,
+      1,
+      6,
+      0,
+      "CLIP"
+    ],
+    [
+      4,
+      6,
+      0,
+      3,
+      1,
+      "CONDITIONING"
+    ],
+    [
+      5,
+      4,
+      1,
+      7,
+      0,
+      "CLIP"
+    ],
+    [
+      6,
+      7,
+      0,
+      3,
+      2,
+      "CONDITIONING"
+    ],
+    [
+      7,
+      3,
+      0,
+      8,
+      0,
+      "LATENT"
+    ],
+    [
+      8,
+      4,
+      2,
+      8,
+      1,
+      "VAE"
+    ],
+    [
+      9,
+      8,
+      0,
+      9,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/execution_error.json

@@ -5,10 +5,10 @@
     {
       "id": 14,
       "type": "PreviewImage",
-      "pos": [
-        858,
-        -41
-      ],
+      "pos": {
+        "0": 300,
+        "1": 60
+      },
       "size": {
         "0": 213.8594970703125,
         "1": 50.65289306640625
@@ -23,6 +23,7 @@
           "link": 15
         }
       ],
+      "outputs": [],
       "properties": {
         "Node name for S&R": "PreviewImage"
       }
@@ -30,10 +31,10 @@
     {
       "id": 17,
       "type": "DevToolsErrorRaiseNode",
-      "pos": [
-        477,
-        -40
-      ],
+      "pos": {
+        "0": 20,
+        "1": 60
+      },
       "size": {
         "0": 210,
         "1": 26
@@ -41,6 +42,7 @@
       "flags": {},
       "order": 0,
       "mode": 0,
+      "inputs": [],
       "outputs": [
         {
           "name": "IMAGE",
@@ -71,10 +73,10 @@
   "config": {},
   "extra": {
     "ds": {
-      "scale": 1.2100000000000006,
+      "scale": 1,
       "offset": [
-        -266.1038310281165,
-        337.94335447664554
+        117.20766722169206,
+        472.69035116826046
       ]
     }
   },

browser_tests/assets/force_input.json

@@ -0,0 +1,62 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "DevToolsNodeWithForceInput",
+      "pos": {
+        "0": 9,
+        "1": 39
+      },
+      "size": {
+        "0": 315,
+        "1": 106
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "int_input",
+          "type": "INT",
+          "link": null,
+          "widget": {
+            "name": "int_input"
+          }
+        },
+        {
+          "name": "float_input",
+          "type": "FLOAT",
+          "link": null,
+          "widget": {
+            "name": "float_input"
+          },
+          "shape": 7
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithForceInput"
+      },
+      "widgets_values": [
+        0,
+        1,
+        0
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/group_node_v1.3.3.json

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

@@ -0,0 +1,252 @@
+{
+  "last_node_id": 15,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 15,
+      "type": "workflow/hello",
+      "pos": {
+        "0": 566,
+        "1": 316
+      },
+      "size": {
+        "0": 468.5999755859375,
+        "1": 582
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null,
+          "label": "model"
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null,
+          "label": "positive"
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null,
+          "label": "negative"
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null,
+          "label": "latent_image"
+        },
+        {
+          "name": "KSampler model",
+          "type": "MODEL",
+          "link": null,
+          "label": "KSampler model"
+        },
+        {
+          "name": "KSampler positive",
+          "type": "CONDITIONING",
+          "link": null,
+          "label": "KSampler positive"
+        },
+        {
+          "name": "KSampler negative",
+          "type": "CONDITIONING",
+          "link": null,
+          "label": "KSampler negative"
+        },
+        {
+          "name": "KSampler latent_image",
+          "type": "LATENT",
+          "link": null,
+          "label": "KSampler latent_image"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3,
+          "label": "LATENT"
+        },
+        {
+          "name": "KSampler LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3,
+          "label": "KSampler LATENT"
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "workflow/hello"
+      },
+      "widgets_values": [
+        "enable",
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        0,
+        10000,
+        "disable",
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "groupNodes": {
+      "hello": {
+        "nodes": [
+          {
+            "id": -1,
+            "type": "KSamplerAdvanced",
+            "pos": {
+              "0": 351.3332824707031,
+              "1": 577.3333129882812
+            },
+            "size": {
+              "0": 315,
+              "1": 334
+            },
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null,
+                "label": "model"
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null,
+                "label": "positive"
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null,
+                "label": "negative"
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null,
+                "label": "latent_image"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null,
+                "shape": 3,
+                "label": "LATENT"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSamplerAdvanced"
+            },
+            "widgets_values": [
+              "enable",
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              0,
+              10000,
+              "disable"
+            ],
+            "index": 0
+          },
+          {
+            "id": -1,
+            "type": "KSampler",
+            "pos": {
+              "0": 636,
+              "1": 427
+            },
+            "size": {
+              "0": 315,
+              "1": 262
+            },
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null,
+                "label": "model"
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null,
+                "label": "positive"
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null,
+                "label": "negative"
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null,
+                "label": "latent_image"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null,
+                "shape": 3,
+                "label": "LATENT"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              1
+            ],
+            "index": 1
+          }
+        ],
+        "links": [],
+        "external": []
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing_models.json

@@ -0,0 +1,25 @@
+{
+  "last_node_id": 0,
+  "last_link_id": 0,
+  "nodes": [],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "clip"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/mixed_graph_items.json

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

browser_tests/assets/node_template_templates.json

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

browser_tests/assets/old_workflow_converted_input.json

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

@@ -0,0 +1,44 @@
+{
+  "last_node_id": 11,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "DevToolsNodeWithOnlyOptionalInput",
+      "pos": {
+        "0": 150,
+        "1": 464.2916564941406
+      },
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null,
+          "shape": 7,
+          "label": "clip"
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOnlyOptionalInput"
+      },
+      "widgets_values": [
+        ""
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "groupNodes": {}
+  },
+  "version": 0.4
+}

browser_tests/assets/optional_input_correct_shape.json

@@ -0,0 +1,57 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "DevToolsNodeWithOptionalInput",
+      "pos": {
+        "0": 19,
+        "1": 46
+      },
+      "size": {
+        "0": 302.4000244140625,
+        "1": 46
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "required_input",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "optional_input",
+          "type": "IMAGE",
+          "link": null,
+          "shape": 7
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOptionalInput"
+      }
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/optional_input_no_shape.json

@@ -0,0 +1,56 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "DevToolsNodeWithOptionalInput",
+      "pos": {
+        "0": 19,
+        "1": 46
+      },
+      "size": {
+        "0": 302.4000244140625,
+        "1": 46
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "required_input",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "optional_input",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOptionalInput"
+      }
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/optional_input_wrong_shape.json

@@ -0,0 +1,57 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "DevToolsNodeWithOptionalInput",
+      "pos": {
+        "0": 19,
+        "1": 46
+      },
+      "size": {
+        "0": 302.4000244140625,
+        "1": 46
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "required_input",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "optional_input",
+          "type": "IMAGE",
+          "link": null,
+          "shape": 6
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOptionalInput"
+      }
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/primitive_node.json

@@ -0,0 +1,145 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": {
+        "0": 521.0906982421875,
+        "1": 40.999996185302734,
+        "2": 0,
+        "3": 0,
+        "4": 0,
+        "5": 0,
+        "6": 0,
+        "7": 0,
+        "8": 0,
+        "9": 0
+      },
+      "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
+        },
+        {
+          "name": "steps",
+          "type": "INT",
+          "link": 1,
+          "widget": {
+            "name": "steps"
+          }
+        }
+      ],
+      "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": 15,
+        "1": 46,
+        "2": 0,
+        "3": 0,
+        "4": 0,
+        "5": 0,
+        "6": 0,
+        "7": 0,
+        "8": 0,
+        "9": 0
+      },
+      "size": [
+        446.96645387135936,
+        108.34243389566905
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [
+            1
+          ],
+          "slot_index": 0,
+          "widget": {
+            "name": "steps"
+          }
+        }
+      ],
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": [
+        20,
+        "fixed"
+      ]
+    }
+  ],
+  "links": [
+    [
+      1,
+      1,
+      0,
+      2,
+      4,
+      "INT"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/primitive_node_unconnected.json

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

@@ -0,0 +1,88 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 13,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": {
+        "0": 10.321063995361328,
+        "1": 73.14462280273438
+      },
+      "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": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "title": "Group",
+      "bounding": [
+        0,
+        0,
+        335,
+        346
+      ],
+      "color": "#3f789e",
+      "font_size": 24
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/single_group_only.json

@@ -0,0 +1,30 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 13,
+  "nodes": [],
+  "links": [],
+  "groups": [
+    {
+      "title": "Group",
+      "bounding": [
+        0,
+        0,
+        335,
+        346
+      ],
+      "color": "#3f789e",
+      "font_size": 24
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.2100000000000006,
+      "offset": [
+        104.34159172650945,
+        241.35965953210126
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/single_ksampler.json

@@ -0,0 +1,76 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 13,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        0,
+        30
+      ],
+      "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": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/single_save_image_node.json

@@ -0,0 +1,46 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": {
+        "0": 64,
+        "1": 104
+      },
+      "size": {
+        "0": 210,
+        "1": 58
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/string_input.json

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

browser_tests/assets/string_node_id.json

@@ -0,0 +1,377 @@
+{
+  "last_node_id": 0,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": "CheckpointLoaderSimple.0",
+      "type": "CheckpointLoaderSimple",
+      "pos": {
+        "0": 100,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 98
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [
+            12
+          ],
+          "shape": 3
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [
+            10,
+            11
+          ],
+          "shape": 3
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [
+            17
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly.ckpt"
+      ]
+    },
+    {
+      "id": "CLIPTextEncode.0",
+      "type": "CLIPTextEncode",
+      "pos": {
+        "0": 515,
+        "1": 130
+      },
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 10
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            13
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": "CLIPTextEncode.1",
+      "type": "CLIPTextEncode",
+      "pos": {
+        "0": 515,
+        "1": 460
+      },
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 11
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            14
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "text, watermark"
+      ]
+    },
+    {
+      "id": "EmptyLatentImage.0",
+      "type": "EmptyLatentImage",
+      "pos": {
+        "0": 100,
+        "1": 358
+      },
+      "size": {
+        "0": 315,
+        "1": 106
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            15
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ]
+    },
+    {
+      "id": "KSampler.0",
+      "type": "KSampler",
+      "pos": {
+        "0": 1015,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 12
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 13
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 14
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 15
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            16
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        3,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": "VAEDecode.0",
+      "type": "VAEDecode",
+      "pos": {
+        "0": 1430,
+        "1": 130
+      },
+      "size": {
+        "0": 210,
+        "1": 46
+      },
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 16
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 17
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            18
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      }
+    },
+    {
+      "id": "SaveImage.0",
+      "type": "SaveImage",
+      "pos": {
+        "0": 1740,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 58
+      },
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 18
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    }
+  ],
+  "links": [
+    [
+      10,
+      "CheckpointLoaderSimple.0",
+      1,
+      "CLIPTextEncode.0",
+      0,
+      "CLIP"
+    ],
+    [
+      11,
+      "CheckpointLoaderSimple.0",
+      1,
+      "CLIPTextEncode.1",
+      0,
+      "CLIP"
+    ],
+    [
+      12,
+      "CheckpointLoaderSimple.0",
+      0,
+      "KSampler.0",
+      0,
+      "MODEL"
+    ],
+    [
+      13,
+      "CLIPTextEncode.0",
+      0,
+      "KSampler.0",
+      1,
+      "CONDITIONING"
+    ],
+    [
+      14,
+      "CLIPTextEncode.1",
+      0,
+      "KSampler.0",
+      2,
+      "CONDITIONING"
+    ],
+    [
+      15,
+      "EmptyLatentImage.0",
+      0,
+      "KSampler.0",
+      3,
+      "LATENT"
+    ],
+    [
+      16,
+      "KSampler.0",
+      0,
+      "VAEDecode.0",
+      0,
+      "LATENT"
+    ],
+    [
+      17,
+      "CheckpointLoaderSimple.0",
+      2,
+      "VAEDecode.0",
+      1,
+      "VAE"
+    ],
+    [
+      18,
+      "VAEDecode.0",
+      0,
+      "SaveImage.0",
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        149.9747408641311,
+        383.8593224280729
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/vintage_clipboard_template.json

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

browser_tests/browserTabTitle.spec.ts

@@ -0,0 +1,51 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Browser tab title', () => {
+  test.describe('Beta Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Can display workflow name', async ({ comfyPage }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
+      })
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+    })
+
+    // Failing on CI
+    // Cannot reproduce locally
+    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
+      })
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+
+      await comfyPage.menu.topbar.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
+
+      const textBox = comfyPage.widgetTextBox
+      await textBox.fill('Hello World')
+      await comfyPage.clickEmptySpace()
+      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
+
+      // Delete the saved workflow for cleanup.
+      await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.delete()
+      })
+    })
+  })
+
+  test.describe('Legacy Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Can display default title', async ({ comfyPage }) => {
+      expect(await comfyPage.page.title()).toBe('ComfyUI')
+    })
+  })
+})

browser_tests/changeTracker.spec.ts

@@ -0,0 +1,172 @@
+import {
+  ComfyPage,
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from './fixtures/ComfyPage'
+import type { useWorkspaceStore } from '../src/stores/workspaceStore'
+
+type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
+
+async function beforeChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitBeforeChange()
+  })
+}
+async function afterChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitAfterChange()
+  })
+}
+
+test.describe('Change Tracker', () => {
+  test.describe('Undo/Redo', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.setupWorkflowsDirectory({})
+    })
+
+    test('Can undo multiple operations', async ({ comfyPage }) => {
+      function isModified() {
+        return comfyPage.page.evaluate(async () => {
+          return !!(window['app'].extensionManager as WorkspaceStore).workflow
+            .activeWorkflow?.isModified
+        })
+      }
+
+      function getUndoQueueSize() {
+        return comfyPage.page.evaluate(() => {
+          const workflow = (window['app'].extensionManager as WorkspaceStore)
+            .workflow.activeWorkflow
+          return workflow?.changeTracker.undoQueue.length
+        })
+      }
+
+      function getRedoQueueSize() {
+        return comfyPage.page.evaluate(() => {
+          const workflow = (window['app'].extensionManager as WorkspaceStore)
+            .workflow.activeWorkflow
+          return workflow?.changeTracker.redoQueue.length
+        })
+      }
+      expect(await getUndoQueueSize()).toBe(0)
+      expect(await getRedoQueueSize()).toBe(0)
+
+      // Save, confirm no errors & workflow modified flag removed
+      await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
+      expect(await comfyPage.getToastErrorCount()).toBe(0)
+      expect(await isModified()).toBe(false)
+
+      // TODO(huchenlei): Investigate why saving the workflow is causing the
+      // undo queue to be triggered.
+      expect(await getUndoQueueSize()).toBe(1)
+      expect(await getRedoQueueSize()).toBe(0)
+
+      const node = (await comfyPage.getFirstNodeRef())!
+      await node.click('collapse')
+      await expect(node).toBeCollapsed()
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(2)
+      expect(await getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(3)
+      expect(await getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeBypassed()
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(2)
+      expect(await getRedoQueueSize()).toBe(1)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeCollapsed()
+      expect(await isModified()).toBe(false)
+      expect(await getUndoQueueSize()).toBe(1)
+      expect(await getRedoQueueSize()).toBe(2)
+    })
+  })
+
+  test('Can group multiple change actions into a single transaction', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    expect(node).toBeTruthy()
+    await expect(node).not.toBeCollapsed()
+    await expect(node).not.toBeBypassed()
+
+    // Make changes outside set
+    // Bypass + collapse node
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // Undo, undo, ensure both changes undone
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).toBeCollapsed()
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+
+    // Run again, but within a change transaction
+    await beforeChange(comfyPage)
+
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // End transaction
+    await afterChange(comfyPage)
+
+    // Ensure undo reverts both changes
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+  })
+
+  test('Can nest multiple change transactions without adding undo steps', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    const bypassAndPin = async () => {
+      await beforeChange(comfyPage)
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      await comfyPage.page.keyboard.press('KeyP')
+      await comfyPage.nextFrame()
+      await expect(node).toBePinned()
+      await afterChange(comfyPage)
+    }
+
+    const collapse = async () => {
+      await beforeChange(comfyPage)
+      await node.click('collapse', { moveMouseToEmptyArea: true })
+      await expect(node).toBeCollapsed()
+      await afterChange(comfyPage)
+    }
+
+    const multipleChanges = async () => {
+      await beforeChange(comfyPage)
+      // Call other actions that uses begin/endChange
+      await collapse()
+      await bypassAndPin()
+      await afterChange(comfyPage)
+    }
+
+    await multipleChanges()
+
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBePinned()
+    await expect(node).not.toBeCollapsed()
+
+    await comfyPage.ctrlY()
+    await expect(node).toBeBypassed()
+    await expect(node).toBePinned()
+    await expect(node).toBeCollapsed()
+  })
+})

browser_tests/colorPalette.spec.ts

@@ -0,0 +1,239 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+const customColorPalettes = {
+  obsidian: {
+    version: 102,
+    id: 'obsidian',
+    name: 'Obsidian',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=',
+        CLEAR_BACKGROUND_COLOR: '#222222',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  },
+  obsidian_dark: {
+    version: 102,
+    id: 'obsidian_dark',
+    name: 'Obsidian Dark',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==',
+        CLEAR_BACKGROUND_COLOR: '#000',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  }
+}
+
+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.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')
+  })
+})
+
+test.describe('Node Color Adjustments', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('every_node_color')
+  })
+
+  test('should adjust opacity via node opacity setting', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.page.waitForTimeout(128)
+
+    // Drag mouse to force canvas to redraw
+    await comfyPage.page.mouse.move(0, 0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
+
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.page.waitForTimeout(128)
+
+    await comfyPage.page.mouse.move(8, 8)
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
+  })
+
+  test('should persist color adjustments when changing themes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.2)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'arc')
+    await comfyPage.nextFrame()
+    await comfyPage.page.mouse.move(0, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-opacity-0.2-arc-theme.png'
+    )
+  })
+
+  test('should not serialize color adjustments in workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
+    const workflow = await comfyPage.page.evaluate(() => {
+      return localStorage.getItem('workflow')
+    })
+    for (const node of JSON.parse(workflow).nodes) {
+      if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
+      if (node.color) expect(node.color).not.toMatch(/hsla/)
+    }
+  })
+
+  test('should lighten node colors when switching to light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('node-lightened-colors.png')
+  })
+
+  test.describe('Context menu color adjustments', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
+      const node = await comfyPage.getFirstNodeRef()
+      await node?.clickContextMenuOption('Colors')
+    })
+
+    test('should persist color adjustments when changing custom node colors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("red")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-changed.png'
+      )
+    })
+
+    test('should persist color adjustments when removing custom node color', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("No color")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-removed.png'
+      )
+    })
+  })
+})

browser_tests/commands.spec.ts

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

browser_tests/copyPaste.spec.ts

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

browser_tests/dialog.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
@@ -13,15 +13,89 @@ test.describe('Load workflow warning', () => {
   })
 })
 
+test('Does not report warning on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+  await comfyPage.loadWorkflow('missing_nodes')
+  await comfyPage.closeDialog()
+
+  // Make a change to the graph
+  await comfyPage.doubleClickCanvas()
+  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+
+  // Undo and redo the change
+  await comfyPage.ctrlZ()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await comfyPage.ctrlY()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+})
+
 test.describe('Execution error', () => {
   test('Should display an error message when an execution error occurs', async ({
     comfyPage
   }) => {
     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.describe('Missing models warning', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', true)
+    await comfyPage.page.evaluate((url: string) => {
+      return fetch(`${url}/api/devtools/cleanup_fake_model`)
+    }, 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 ({
+    comfyPage
+  }) => {
+    // The fake_model.safetensors is served by
+    // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = comfyPage.page.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await downloadButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
+  })
+})
+
+test.describe('Settings', () => {
+  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Control+,')
+    const searchBox = comfyPage.page.locator('.settings-content')
+    await expect(searchBox).toBeVisible()
+  })
+
+  test('Can open settings with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.press(',')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
+    const settingsLocator = comfyPage.page.locator('.settings-container')
+    await expect(settingsLocator).toBeVisible()
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(settingsLocator).not.toBeVisible()
+  })
+
+  test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
+    const maxSpeed = 2.5
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
+    await test.step('Setting should persist', async () => {
+      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
+    })
+  })
+})

browser_tests/extensionAPI.spec.ts

@@ -0,0 +1,160 @@
+import { expect, Locator } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Topbar commands', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'foo',
+            label: 'foo-command',
+            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')
+    })
+  })
+})

browser_tests/fixtures/ComfyPage.ts

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

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

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

browser_tests/fixtures/components/SettingDialog.ts

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

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

browser_tests/fixtures/components/Topbar.ts

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

browser_tests/fixtures/types.ts

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

browser_tests/fixtures/utils/litegraphUtils.ts

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

browser_tests/fixtures/ws.ts

@@ -0,0 +1,51 @@
+import { test as base } from '@playwright/test'
+
+export const webSocketFixture = base.extend<{
+  ws: { trigger(data: any, url?: string): Promise<void> }
+}>({
+  ws: [
+    async ({ page }, use) => {
+      // Each time a page loads, to catch navigations
+      page.on('load', async () => {
+        await page.evaluate(function () {
+          // Create a wrapper for WebSocket that stores them globally
+          // so we can look it up to trigger messages
+          const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
+          window.WebSocket = class extends window.WebSocket {
+            constructor() {
+              // @ts-expect-error
+              super(...arguments)
+              store[this.url] = this
+            }
+          }
+        })
+      })
+
+      await use({
+        async trigger(data, url) {
+          // Trigger a websocket event on the page
+          await page.evaluate(
+            function ([data, url]) {
+              if (!url) {
+                // If no URL specified, use page URL
+                const u = new URL(window.location.toString())
+                u.protocol = 'ws:'
+                u.pathname = '/'
+                url = u.toString() + 'ws'
+              }
+              const ws: WebSocket = (window as any).__ws__[url]
+              ws.dispatchEvent(
+                new MessageEvent('message', {
+                  data
+                })
+              )
+            },
+            [JSON.stringify(data), url]
+          )
+        }
+      })
+    },
+    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
+    { auto: true }
+  ]
+})

browser_tests/globalSetup.ts

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

browser_tests/globalTeardown.ts

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

browser_tests/graphCanvasMenu.spec.ts

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

@@ -0,0 +1,259 @@
+import { expect } from '@playwright/test'
+import { ComfyPage, comfyPageFixture as test } from './fixtures/ComfyPage'
+import type { NodeReference } from './fixtures/utils/litegraphUtils'
+
+test.describe('Group Node', () => {
+  test.describe('Node library sidebar', () => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    const groupNodeCategory = 'group nodes>workflow'
+    const groupNodeBookmarkName = `workflow>${groupNodeName}`
+    let libraryTab
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      libraryTab = comfyPage.menu.nodeLibraryTab
+      await comfyPage.convertAllNodesToGroupNode(groupNodeName)
+      await libraryTab.open()
+    })
+
+    test('Is added to node library sidebar', async ({ comfyPage }) => {
+      expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
+    })
+
+    test('Can be added to canvas using node library sidebar', async ({
+      comfyPage
+    }) => {
+      const initialNodeCount = await comfyPage.getGraphNodesCount()
+
+      // Add group node from node library sidebar
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab.getNode(groupNodeName).click()
+
+      // Verify the node is added to the canvas
+      expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
+    })
+
+    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .click()
+
+      // Verify the node is added to the bookmarks tab
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual([groupNodeBookmarkName])
+      // Verify the bookmark node with the same name is added to the tree
+      expect(await libraryTab.getNode(groupNodeName).count()).not.toBe(0)
+
+      // Unbookmark the node
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .first()
+        .click()
+
+      // Verify the node is removed from the bookmarks tab
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toHaveLength(0)
+    })
+
+    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .click()
+      await comfyPage.page.hover('.p-tree-node-label.tree-explorer-node-label')
+      expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(
+        true
+      )
+      await libraryTab
+        .getNode(groupNodeName)
+        .locator('.bookmark-button')
+        .first()
+        .click()
+    })
+  })
+
+  test('Can be added to canvas using search', async ({ comfyPage }) => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    await comfyPage.convertAllNodesToGroupNode(groupNodeName)
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.nextFrame()
+    await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'group-node-copy-added-from-search.png'
+    )
+  })
+
+  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
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
+  })
+
+  test('Reconnects inputs after configuration changed via manage dialog save', async ({
+    comfyPage
+  }) => {
+    const expectSingleNode = async (type: string) => {
+      const nodes = await comfyPage.getNodeRefsByType(type)
+      expect(nodes).toHaveLength(1)
+      return nodes[0]
+    }
+    const latent = await expectSingleNode('EmptyLatentImage')
+    const sampler = await expectSingleNode('KSampler')
+    // Remove existing link
+    const samplerInput = await sampler.getInput(0)
+    await samplerInput.removeLinks()
+    // Group latent + sampler
+    await latent.click('title', {
+      modifiers: ['Shift']
+    })
+    await sampler.click('title', {
+      modifiers: ['Shift']
+    })
+    const groupNode = await sampler.convertToGroupNode()
+    // Connect node to group
+    const ckpt = await expectSingleNode('CheckpointLoaderSimple')
+    const input = await ckpt.connectOutput(0, groupNode, 0)
+    expect(await input.getLinkCount()).toBe(1)
+    // Modify the group node via manage dialog
+    const manage = await groupNode.manageGroupNode()
+    await manage.selectNode('KSampler')
+    await manage.changeTab('Inputs')
+    await manage.setLabel('model', 'test')
+    await manage.save()
+    await manage.close()
+    // Ensure the link is still present
+    expect(await input.getLinkCount()).toBe(1)
+  })
+
+  test('Loads from a workflow using the legacy path separator ("/")', async ({
+    comfyPage
+  }) => {
+    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)
+    })
+  })
+})

browser_tests/helpers/actionbar.ts

@@ -0,0 +1,49 @@
+import type { Page, Locator } from '@playwright/test'
+import type { AutoQueueMode } from '../../src/stores/queueStore'
+
+export class ComfyActionbar {
+  public readonly root: Locator
+  public readonly queueButton: ComfyQueueButton
+
+  constructor(public readonly page: Page) {
+    this.root = page.locator('.actionbar')
+    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')
+    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)
+  }
+}
+
+class ComfyQueueButtonOptions {
+  constructor(public readonly page: Page) {}
+
+  public async setMode(mode: AutoQueueMode) {
+    await this.page.evaluate((mode) => {
+      window['app'].extensionManager.queueSettings.mode = mode
+    }, mode)
+  }
+
+  public async getMode() {
+    return await this.page.evaluate(() => {
+      return window['app'].extensionManager.queueSettings.mode
+    })
+  }
+}

browser_tests/helpers/manageGroupNode.ts

@@ -0,0 +1,37 @@
+import { Locator, Page } from '@playwright/test'
+export class ManageGroupNode {
+  footer: Locator
+
+  constructor(
+    readonly page: Page,
+    readonly root: Locator
+  ) {
+    this.footer = root.locator('footer')
+  }
+
+  async setLabel(name: string, label: string) {
+    const active = this.root.locator('.comfy-group-manage-node-page.active')
+    const input = active.getByPlaceholder(name)
+    await input.fill(label)
+  }
+
+  async save() {
+    await this.footer.getByText('Save').click()
+  }
+
+  async close() {
+    await this.footer.getByText('Close').click()
+  }
+
+  async selectNode(name: string) {
+    const list = this.root.locator('.comfy-group-manage-list-items')
+    const item = list.getByText(name)
+    await item.click()
+  }
+
+  async changeTab(name: 'Inputs' | 'Widgets' | 'Outputs') {
+    const header = this.root.locator('.comfy-group-manage-node header')
+    const tab = header.getByText(name)
+    await tab.click()
+  }
+}

browser_tests/helpers/templates.ts

@@ -0,0 +1,12 @@
+import { Locator, Page } from '@playwright/test'
+export class ComfyTemplates {
+  readonly content: Locator
+
+  constructor(readonly page: Page) {
+    this.content = page.getByTestId('template-workflows-content')
+  }
+
+  async loadTemplate(id: string) {
+    await this.content.getByTestId(`template-workflow-${id}`).click()
+  }
+}

browser_tests/interaction.spec.ts

@@ -1,5 +1,26 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+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')
+  })
+})
 
 test.describe('Node Interaction', () => {
   test('Can enter prompt', async ({ comfyPage }) => {
@@ -11,32 +32,128 @@ test.describe('Node Interaction', () => {
     await expect(textBox).toHaveValue('Hello World 2')
   })
 
-  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.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
+      )
+    })
   })
 
-  // Flaky. See https://github.com/comfyanonymous/ComfyUI/issues/3866
-  test.skip('Can drag node', async ({ comfyPage }) => {
+  test('Can drag node', async ({ comfyPage }) => {
     await comfyPage.dragNode2()
     await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
   })
 
-  test('Can disconnect/connect edge', async ({ comfyPage }) => {
-    await comfyPage.disconnectEdge()
-    // Close search menu popped up.
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'disconnected-edge-with-menu.png'
-    )
-    await comfyPage.connectEdge()
-    // Litegraph renders edge with a slight offset.
-    await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
-      maxDiffPixels: 50
+  test.describe('Edge Interaction', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.LinkRelease.Action', 'no action')
+      await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
+    })
+
+    test('Can disconnect/connect edge', async ({ comfyPage }) => {
+      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
+      })
+    })
+
+    // Chromium 2x cannot move link.
+    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
+    test.skip('Can move link', async ({ comfyPage }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputSlot,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
+    })
+
+    // Copy link is not working on CI at all
+    // Chromium 2x recognize it as dragging canvas.
+    // Chromium triggers search box after link release. The link is indeed copied.
+    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
+    test.skip('Can copy link by shift-drag existing link', async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.page.keyboard.down('Shift')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputLinkPath,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      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')
     })
   })
 
@@ -114,12 +231,15 @@ test.describe('Node Interaction', () => {
     )
   })
 
-  test('Can close prompt dialog with canvas click', async ({ comfyPage }) => {
+  test('Can close prompt dialog with canvas click (number widget)', async ({
+    comfyPage
+  }) => {
+    const numberWidgetPos = {
+      x: 724,
+      y: 645
+    }
     await comfyPage.canvas.click({
-      position: {
-        x: 724,
-        y: 645
-      }
+      position: numberWidgetPos
     })
     await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
     // Wait for 1s so that it does not trigger the search box by double click.
@@ -132,6 +252,115 @@ test.describe('Node Interaction', () => {
     })
     await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
   })
+
+  test('Can close prompt dialog with canvas click (text widget)', async ({
+    comfyPage
+  }) => {
+    const textWidgetPos = {
+      x: 167,
+      y: 143
+    }
+    await comfyPage.loadWorkflow('single_save_image_node')
+    await comfyPage.canvas.click({
+      position: textWidgetPos
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-opened-text.png'
+    )
+    await comfyPage.page.waitForTimeout(1000)
+    await comfyPage.canvas.click({
+      position: {
+        x: 10,
+        y: 10
+      }
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-closed-text.png'
+    )
+  })
+
+  test('Can double click node title to edit', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 10
+      },
+      delay: 5
+    })
+    await comfyPage.page.keyboard.type('Hello World')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(comfyPage.canvas).toHaveScreenshot('node-title-edited.png')
+  })
+
+  test('Double click node body does not trigger edit', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 50
+      },
+      delay: 5
+    })
+    expect(await comfyPage.page.locator('.node-title-editor').count()).toBe(0)
+  })
+
+  test('Can group selected nodes', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.GroupSelectedNodes.Padding', 10)
+    await comfyPage.select2Nodes()
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.press('KeyG')
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.nextFrame()
+    // Confirm group title
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.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 ({
+    comfyPage
+  }) => {
+    await comfyPage.select2Nodes()
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
+    await comfyPage.canvas.press('KeyP')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
+  })
+
+  test('Can bypass/unbypass nodes with keyboard shortcut', async ({
+    comfyPage
+  }) => {
+    await comfyPage.select2Nodes()
+    await comfyPage.canvas.press('Control+b')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-bypassed.png')
+    await comfyPage.canvas.press('Control+b')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('nodes-unbypassed.png')
+  })
+})
+
+test.describe('Group Interaction', () => {
+  test('Can double click group title to edit', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('single_group')
+    await comfyPage.canvas.dblclick({
+      position: {
+        x: 50,
+        y: 10
+      },
+      delay: 5
+    })
+    await comfyPage.page.keyboard.type('Hello World')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(comfyPage.canvas).toHaveScreenshot('group-title-edited.png')
+  })
 })
 
 test.describe('Canvas Interaction', () => {
@@ -201,6 +430,52 @@ test.describe('Canvas Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('panned.png')
   })
 
+  test('Cursor style changes when panning', async ({ comfyPage }) => {
+    const getCursorStyle = async () => {
+      return await comfyPage.page.evaluate(() => {
+        return (
+          document.getElementById('graph-canvas')!.style.cursor || 'default'
+        )
+      })
+    }
+
+    await comfyPage.page.mouse.move(10, 10)
+    expect(await getCursorStyle()).toBe('default')
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('default')
+
+    await comfyPage.page.keyboard.down('Space')
+    expect(await getCursorStyle()).toBe('grab')
+    await comfyPage.page.mouse.down()
+    expect(await getCursorStyle()).toBe('grabbing')
+    await comfyPage.page.mouse.up()
+    expect(await getCursorStyle()).toBe('grab')
+    await comfyPage.page.keyboard.up('Space')
+    expect(await getCursorStyle()).toBe('default')
+  })
+
+  test('Can pan when dragging a link', async ({ comfyPage }) => {
+    const posSlot1 = comfyPage.clipTextEncodeNode1InputSlot
+    await comfyPage.page.mouse.move(posSlot1.x, posSlot1.y)
+    await comfyPage.page.mouse.down()
+    const posEmpty = comfyPage.emptySpace
+    await comfyPage.page.mouse.move(posEmpty.x, posEmpty.y)
+    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link1.png')
+    await comfyPage.page.keyboard.down('Space')
+    await comfyPage.page.mouse.move(posEmpty.x + 100, posEmpty.y + 100)
+    // Canvas should be panned.
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'panning-when-dragging-link.png'
+    )
+    await comfyPage.page.keyboard.up('Space')
+    await comfyPage.page.mouse.move(posEmpty.x, posEmpty.y)
+    // Should be back to dragging link mode when space is released.
+    await expect(comfyPage.canvas).toHaveScreenshot('dragging-link2.png')
+    await comfyPage.page.mouse.up()
+  })
+
   test('Can pan very far and back', async ({ comfyPage }) => {
     // intentionally slice the edge of where the clip text encode dom widgets are
     await comfyPage.pan({ x: -800, y: -300 }, { x: 1000, y: 10 })
@@ -216,4 +491,66 @@ test.describe('Canvas Interaction', () => {
     await comfyPage.pan({ x: 800, y: 300 }, { x: 1000, y: 10 })
     await expect(comfyPage.canvas).toHaveScreenshot('panned-back-to-one.png')
   })
+
+  test('@mobile Can pan with touch', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.panWithTouch({ x: 200, y: 200 })
+    await expect(comfyPage.canvas).toHaveScreenshot('panned-touch.png')
+  })
+})
+
+test.describe('Widget Interaction', () => {
+  test('Undo text input', async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('')
+    await expect(textBox).toHaveValue('')
+    await textBox.fill('Hello World')
+    await expect(textBox).toHaveValue('Hello World')
+    await comfyPage.ctrlZ(null)
+    await expect(textBox).toHaveValue('')
+  })
+
+  test('Undo attention edit', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.EditAttention.Delta', 0.05)
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('1girl')
+    await expect(textBox).toHaveValue('1girl')
+    await textBox.selectText()
+    await comfyPage.ctrlArrowUp(null)
+    await expect(textBox).toHaveValue('(1girl:1.05)')
+    await comfyPage.ctrlZ(null)
+    await expect(textBox).toHaveValue('1girl')
+  })
+})
+
+test.describe('Load workflow', () => {
+  test('Can load workflow with string node id', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('string_node_id')
+    await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png')
+  })
+
+  test('Can load workflow with ("STRING",) input node', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('string_input')
+    await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
+  })
+})
+
+test.describe('Load duplicate workflow', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('A workflow can be loaded multiple times in a row', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('single_ksampler')
+    await comfyPage.menu.workflowsTab.open()
+    await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+    await comfyPage.loadWorkflow('single_ksampler')
+    expect(await comfyPage.getGraphNodesCount()).toBe(1)
+  })
 })