Add tests

Co-authored-by: huchenlei <20929282+huchenlei@users.noreply.github.com>

.env_example

@@ -18,3 +18,10 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true
+
+# Whether to disable proxying the `/templates` route. If true, allows you to 
+# serve templates from the ComfyUI_frontend/public/templates folder (for 
+# locally testing changes to templates). When false or nonexistent, the 
+# templates are served via the normal method from the server's python site 
+# packages.
+DISABLE_TEMPLATES_PROXY=false

README.md

@@ -67,6 +67,449 @@ The development of successive minor versions overlaps. For example, while versio
 | 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
 | 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
+## Release Summary
+
+### Major features
+
+<details id='feature-native-translation'>
+  <summary>v1.5: Native translation (i18n)</summary>
+
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
+  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
+
+  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
+</details>
+
+<details id='feature-mask-editor'>
+  <summary>v1.4: New mask editor</summary>
+
+  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
+
+  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
+</details>
+
+<details id='feature-integrated-server-terminal'>
+  <summary>v1.3.22: Integrated server terminal</summary>
+
+Press Ctrl + ` to toggle integrated terminal.
+
+https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
+</details>
+
+<details id='feature-keybinding-customization'>
+  <summary>v1.3.7: Keybinding customization</summary>
+
+## Basic UI
+![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
+
+## Reset button
+![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
+
+## Edit Keybinding
+![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
+![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
+
+[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
+
+</details>
+
+<details id='feature-node-library-sidebar'>
+  <summary>v1.2.4: Node library sidebar tab</summary>
+
+  #### Drag & Drop
+https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
+
+  #### Filter
+https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
+</details>
+
+<details id='feature-queue-sidebar'>
+  <summary>v1.2.0: Queue/History sidebar tab</summary>
+
+  https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
+</details>
+
+<details id='feature-node-search'>
+  <summary>v1.1.0: Node search box</summary>
+
+  #### Fuzzy search & Node preview
+  ![image](https://github.com/user-attachments/assets/94733e32-ea4e-4a9c-b321-c1a05db48709)
+
+  #### Release link with shift
+  https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
+</details>
+
+### QoL changes
+
+<details id='feature-nested-group'>
+  <summary>v1.3.32: **Litegraph** Nested group</summary>
+
+https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
+</details>
+
+<details id='feature-group-selection'>
+  <summary>v1.3.24: **Litegraph** Group selection</summary>
+
+https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
+</details>
+
+<details id='feature-toggle-link-visibility'>
+  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
+
+</details>
+
+<details id='feature-auto-widget-conversion'>
+  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
+
+Dropping a link of correct type on node widget will automatically convert the widget to input.
+
+[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
+
+</details>
+
+<details id='feature-pan-mode'>
+  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
+
+The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
+or by holding the space key.
+
+[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
+
+</details>
+
+<details id='feature-shift-drag-link-creation'>
+  <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
+
+</details>
+
+<details id='feature-optional-input-donuts'>
+  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
+
+![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
+
+</details>
+
+<details id='feature-group-title-edit'>
+  <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
+
+https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
+
+</details>
+
+<details id='feature-group-selection-shortcut'>
+  <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
+
+https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
+
+</details>
+
+<details id='feature-node-title-edit'>
+  <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
+
+https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
+
+</details>
+
+<details id='feature-drag-multi-link'>
+  <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
+
+https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
+
+https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
+
+</details>
+
+<details id='feature-auto-connect-link'>
+  <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
+
+  #### Before
+  https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
+
+  #### After
+  https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
+</details>
+
+<details id='feature-hide-text-overflow'>
+  <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
+
+  https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
+</details>
+
+### Developer APIs
+
+<details>
+  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
+
+Several browser-only APIs are not available in ComfyUI desktop's electron environment.
+
+- `window.prompt`
+- `window.confirm`
+- `window.alert`
+
+Please use the following APIs as replacements.
+
+```js
+// window.prompt
+window['app'].extensionManager.dialog
+  .prompt({
+    title: 'Test Prompt',
+    message: 'Test Prompt Message'
+  })
+  .then((value: string) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
+
+```js
+// window.confirm
+window['app'].extensionManager.dialog
+  .confirm({
+    title: 'Test Confirm',
+    message: 'Test Confirm Message'
+  })
+  .then((value: boolean) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
+
+```js
+// window.alert
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
+```
+
+![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
+
+</details>
+
+<details>
+  <summary>v1.3.34: Register about panel badges</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  aboutPageBadges: [
+    {
+      label: 'Test Badge',
+      url: 'https://example.com',
+      icon: 'pi pi-box'
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
+
+</details>
+
+<details id='extension-api-bottom-panel-tabs'>
+  <summary>v1.3.22: Register bottom panel tabs</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension',
+  bottomPanelTabs: [
+    {
+      id: 'TestTab',
+      title: 'Test Tab',
+      type: 'custom',
+      render: (el) => {
+        el.innerHTML = '<div>Custom tab</div>'
+      }
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
+
+</details>
+
+<details id='extension-api-settings'>
+  <summary>v1.3.22: New settings API</summary>
+
+Legacy settings API.
+
+```js
+// Register a new setting
+app.ui.settings.addSetting({
+  id: 'TestSetting',
+  name: 'Test Setting',
+  type: 'text',
+  defaultValue: 'Hello, world!'
+})
+
+// Get the value of a setting
+const value = app.ui.settings.getSettingValue('TestSetting')
+
+// Set the value of a setting
+app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
+```
+
+New settings API.
+
+```js
+// Register a new setting
+app.registerExtension({
+  name: 'TestExtension1',
+  settings: [
+    {
+      id: 'TestSetting',
+      name: 'Test Setting',
+      type: 'text',
+      defaultValue: 'Hello, world!'
+    }
+  ]
+})
+
+// Get the value of a setting
+const value = app.extensionManager.setting.get('TestSetting')
+
+// Set the value of a setting
+app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
+```
+
+</details>
+
+<details id='extension-api-commands-keybindings'>
+  <summary>v1.3.7: Register commands and keybindings</summary>
+
+  Extensions can call the following API to register commands and keybindings. Do
+  note that keybindings defined in core cannot be overwritten, and some keybindings
+  are reserved by the browser.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'TestCommand',
+        function: () => {
+          alert('TestCommand')
+        }
+      }
+    ],
+    keybindings: [
+      {
+        combo: { key: 'k' },
+        commandId: 'TestCommand'
+      }
+    ]
+  })
+```
+
+</details>
+
+<details id='extension-api-topbar-menu'>
+  <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
+
+  Extensions can call the following API to register custom topbar menu items.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'foo-id',
+        label: 'foo',
+        function: () => {
+          alert(1)
+        }
+      }
+    ],
+    menuCommands: [
+      {
+        path: ['ext', 'ext2'],
+        commands: ['foo-id']
+      }
+    ]
+  })
+```
+
+![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
+</details>
+
+<details id='extension-api-toast'>
+  <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 id='extension-api-sidebar-tab'>
+  <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
+
+  Extensions now can call the following API to register a sidebar tab.
+
+```js
+  app.extensionManager.registerSidebarTab({
+    id: "search",
+    icon: "pi pi-search",
+    title: "search",
+    tooltip: "search",
+    type: "custom",
+    render: (el) => {
+      el.innerHTML = "<div>Custom search tab</div>";
+    },
+  });
+```
+
+The list of supported icons can be found here: <https://primevue.org/icons/#list>
+
+We will support custom icons later.
+
+![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
+</details>
+
+<details id='extension-api-selection-toolbox'>
+  <summary>v1.10.9: Selection Toolbox API</summary>
+
+Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  commands: [
+    {
+      id: 'test.selection.command',
+      label: 'Test Command',
+      icon: 'pi pi-star',
+      function: () => {
+        // Command logic here
+      }
+    }
+  ],
+  // Return an array of command IDs to show in the selection toolbox
+  // when an item is selected
+  getSelectionToolboxCommands: (selectedItem) => ['test.selection.command']
+})
+```
+
+The selection toolbox will display the command button when items are selected:
+![Image](https://github.com/user-attachments/assets/28d91267-c0a9-4bd5-a7c4-36e8ec44c9bd)
+
+</details>
+
 ## Contributing
 
 We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.

browser_tests/assets/collapsed_multiline.json

@@ -33,5 +33,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/default.json

@@ -130,6 +130,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/default_input.json

@@ -42,12 +42,12 @@
   "config": {},
   "extra": {
     "ds": {
-      "scale": 2.1600300525920346,
+      "scale": 1,
       "offset": [
-        63.071794466403446,
-        75.18055335968394
+        0,
+        0
       ]
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/every_node_color.json

@@ -499,6 +499,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/execution/partial_execution.json

@@ -0,0 +1,85 @@
+{
+  "id": "1a95532f-c8aa-4c9d-a7f6-f928ba2d4862",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 3,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "PreviewAny",
+      "pos": [946.2566528320312, 598.4373168945312],
+      "size": [140, 76],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 3
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 1,
+      "type": "PreviewAny",
+      "pos": [951.0236206054688, 421.3861083984375],
+      "size": [140, 76],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "PrimitiveString",
+      "pos": [575.1760864257812, 504.5214538574219],
+      "size": [270, 58],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [2, 3]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveString"
+      },
+      "widgets_values": ["foo"]
+    }
+  ],
+  "links": [
+    [2, 3, 0, 1, 0, "*"],
+    [3, 3, 0, 4, 0, "*"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.19.1",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -160,4 +160,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/group_node_v1.3.3.json

@@ -43,6 +43,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "groupNodes": {
       "group_node": {
         "nodes": [
@@ -401,4 +405,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/legacy_group_node.json

@@ -110,6 +110,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "groupNodes": {
       "hello": {
         "nodes": [
@@ -249,4 +253,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/missing_models_from_node_properties.json

@@ -44,6 +44,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/missing_nodes_converted_widget.json

@@ -61,6 +61,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/note_nodes.json

@@ -50,6 +50,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/only_optional_inputs.json

@@ -38,7 +38,11 @@
   "groups": [],
   "config": {},
   "extra": {
-    "groupNodes": {}
+    "groupNodes": {},
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
   },
   "version": 0.4
-}
+}

browser_tests/assets/primitive/primitive_node_unconnected_dom_widget.json

@@ -54,6 +54,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/renamed_converted_widget.json

@@ -92,10 +92,14 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "VHS_latentpreview": true,
     "VHS_latentpreviewrate": 0,
     "VHS_MetadataImage": false,
     "VHS_KeepIntermediate": false
   },
   "version": 0.4
-}
+}

browser_tests/assets/reroute/native_reroute.json

@@ -84,6 +84,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "reroutes": [
       {
         "id": 1,

browser_tests/assets/single_connected_reroute_node.json

@@ -106,10 +106,7 @@
   "extra": {
     "ds": {
       "scale": 1,
-      "offset": {
-        "0": 0,
-        "1": 0
-      }
+      "offset": [0, 0]
     }
   },
   "version": 0.4

browser_tests/assets/string_node_id.json

@@ -368,10 +368,10 @@
     "ds": {
       "scale": 1,
       "offset": [
-        149.9747408641311,
-        383.8593224280729
+        0,
+        0
       ]
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/widgets/boolean_widget.json

@@ -31,5 +31,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/widgets/load_animated_webp.json

@@ -8,4 +8,4 @@
       "title": "Load Animated Image"
     }
   }
-}
+}

browser_tests/assets/widgets/load_audio_widget.json

@@ -27,6 +27,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/widgets/load_image_widget.json

@@ -41,6 +41,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/widgets/save_animated_webp.json

@@ -54,7 +54,11 @@
   "groups": [],
   "config": {},
   "extra": {
-    "frontendVersion": "1.17.0"
+    "frontendVersion": "1.17.0",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
   },
   "version": 0.4
 }

browser_tests/desktop/fixtures/electron.ts

@@ -0,0 +1,124 @@
+import { test as base } from '@playwright/test'
+
+type ElectronFixtureOptions = {
+  registerDefaults?: {
+    downloadManager?: boolean
+  }
+}
+
+type MockFunction = {
+  calls: unknown[][]
+  called: () => Promise<void>
+  handler?: (args: unknown[]) => unknown
+}
+
+export type MockElectronAPI = {
+  setup: (method: string, handler: (args: unknown[]) => unknown) => MockFunction
+}
+
+export const electronFixture = base.extend<{
+  electronAPI: MockElectronAPI
+  electronOptions: ElectronFixtureOptions
+}>({
+  electronOptions: [
+    {
+      registerDefaults: {
+        downloadManager: true
+      }
+    },
+    { option: true }
+  ],
+
+  electronAPI: [
+    async ({ page, electronOptions }, use) => {
+      const mocks = new Map<string, MockFunction>()
+
+      await page.exposeFunction(
+        '__handleMockCall',
+        async (method: string, args: unknown[]) => {
+          const mock = mocks.get(method)
+
+          if (electronOptions.registerDefaults?.downloadManager) {
+            if (method === 'DownloadManager.getAllDownloads') {
+              return []
+            }
+          }
+
+          if (!mock) return null
+          mock.calls.push(args)
+          return mock.handler ? mock.handler(args) : null
+        }
+      )
+
+      const createMockFunction = (
+        method: string,
+        handler: (args: unknown[]) => unknown
+      ): MockFunction => {
+        let resolveNextCall: (() => void) | null = null
+
+        const mockFn: MockFunction = {
+          calls: [],
+          async called() {
+            if (this.calls.length > 0) return
+
+            return new Promise<void>((resolve) => {
+              resolveNextCall = resolve
+            })
+          },
+          handler: (args: unknown[]) => {
+            const result = handler(args)
+            resolveNextCall?.()
+            resolveNextCall = null
+            return result
+          }
+        }
+        mocks.set(method, mockFn)
+
+        // Add the method to the window.electronAPI object
+        page.evaluate((methodName) => {
+          const w = window as typeof window & {
+            electronAPI: Record<string, any>
+          }
+
+          w.electronAPI[methodName] = async (...args: unknown[]) => {
+            return window['__handleMockCall'](methodName, args)
+          }
+        }, method)
+
+        return mockFn
+      }
+
+      const testAPI: MockElectronAPI = {
+        setup(method, handler) {
+          console.log('adding handler for', method)
+          return createMockFunction(method, handler)
+        }
+      }
+
+      await page.addInitScript(async () => {
+        const getProxy = (...path: string[]) => {
+          return new Proxy(() => {}, {
+            // Handle the proxy itself being called as a function
+            apply: async (target, thisArg, argArray) => {
+              return window['__handleMockCall'](path.join('.'), argArray)
+            },
+            // Handle property access
+            get: (target, prop: string) => {
+              return getProxy(...path, prop)
+            }
+          })
+        }
+
+        const w = window as typeof window & {
+          electronAPI: any
+        }
+
+        w.electronAPI = getProxy()
+        console.log('registered electron api')
+      })
+
+      await use(testAPI)
+    },
+    { auto: true }
+  ]
+})

browser_tests/desktop/importModel.spec.ts

@@ -0,0 +1,172 @@
+import { expect, mergeTests } from '@playwright/test'
+
+import { ComfyPage, comfyPageFixture } from '../fixtures/ComfyPage'
+import { MockElectronAPI, electronFixture } from './fixtures/electron'
+
+const test = mergeTests(comfyPageFixture, electronFixture)
+
+comfyPageFixture.describe('Import Model (web)', () => {
+  comfyPageFixture(
+    'Import dialog does not show when electron api is not available',
+    async ({ comfyPage }) => {
+      await comfyPage.dragAndDropExternalResource({
+        fileName: 'test.bin',
+        buffer: Buffer.from('')
+      })
+
+      // Normal unable to find workflow in file error
+      await expect(
+        comfyPage.page.locator('.p-toast-message.p-toast-message-warn')
+      ).toHaveCount(1)
+    }
+  )
+})
+
+test.describe('Import Model (electron)', () => {
+  const dropFile = async (
+    comfyPage: ComfyPage,
+    electronAPI: MockElectronAPI,
+    fileName: string,
+    metadata: string
+  ) => {
+    const getFilePathMock = electronAPI.setup('getFilePath', () =>
+      Promise.resolve('some/file/path/' + fileName)
+    )
+
+    let buffer: Buffer | undefined
+    if (metadata) {
+      const contentBuffer = Buffer.from(metadata, 'utf-8')
+
+      const headerSizeBuffer = Buffer.alloc(8)
+      headerSizeBuffer.writeBigUInt64LE(BigInt(contentBuffer.length))
+
+      buffer = Buffer.concat([headerSizeBuffer, contentBuffer])
+    }
+
+    await comfyPage.dragAndDropExternalResource({
+      fileName,
+      buffer
+    })
+    await getFilePathMock.called()
+
+    await expect(
+      comfyPage.page.locator('.p-toast-message.p-toast-message-warn')
+    ).toHaveCount(0)
+    await expect(comfyPage.importModelDialog.rootEl).toBeVisible()
+  }
+
+  test('Can show import file dialog by dropping file onto the app', async ({
+    comfyPage,
+    electronAPI
+  }) => {
+    await dropFile(comfyPage, electronAPI, 'test.bin', '{}')
+  })
+
+  test('Can autodetect checkpoint model type from modelspec', async ({
+    comfyPage,
+    electronAPI
+  }) => {
+    await dropFile(
+      comfyPage,
+      electronAPI,
+      'file.safetensors',
+      JSON.stringify({
+        __metadata__: {
+          'modelspec.sai_model_spec': 'test',
+          'modelspec.architecture': 'stable-diffusion-v1'
+        }
+      })
+    )
+
+    await expect(comfyPage.importModelDialog.modelTypeInput).toHaveValue(
+      'checkpoints'
+    )
+  })
+
+  test('Can autodetect lora model type from modelspec', async ({
+    comfyPage,
+    electronAPI
+  }) => {
+    await dropFile(
+      comfyPage,
+      electronAPI,
+      'file.safetensors',
+      JSON.stringify({
+        __metadata__: {
+          'modelspec.sai_model_spec': 'test',
+          'modelspec.architecture': 'Flux.1-AE/lora'
+        }
+      })
+    )
+
+    await expect(comfyPage.importModelDialog.modelTypeInput).toHaveValue(
+      'loras'
+    )
+  })
+
+  test('Can autodetect checkpoint model type from header keys', async ({
+    comfyPage,
+    electronAPI
+  }) => {
+    await dropFile(
+      comfyPage,
+      electronAPI,
+      'file.safetensors',
+      JSON.stringify({
+        'model.diffusion_model.input_blocks.0.0.bias': {}
+      })
+    )
+
+    await expect(comfyPage.importModelDialog.modelTypeInput).toHaveValue(
+      'checkpoints'
+    )
+  })
+
+  test('Can autodetect lora model type from header keys', async ({
+    comfyPage,
+    electronAPI
+  }) => {
+    await dropFile(
+      comfyPage,
+      electronAPI,
+      'file.safetensors',
+      JSON.stringify({
+        'lora_unet_down_blocks_0_attentions_0_proj_in.alpha': {}
+      })
+    )
+
+    await expect(comfyPage.importModelDialog.modelTypeInput).toHaveValue(
+      'loras'
+    )
+  })
+
+  test('Can import file', async ({ comfyPage, electronAPI }) => {
+    await dropFile(
+      comfyPage,
+      electronAPI,
+      'checkpoint_modelspec.safetensors',
+      '{}'
+    )
+
+    const importModelMock = electronAPI.setup(
+      'importModel',
+      () => new Promise((resolve) => setTimeout(resolve, 100))
+    )
+
+    // Model type is required so select one
+    await expect(comfyPage.importModelDialog.importButton).toBeDisabled()
+    await comfyPage.importModelDialog.modelTypeInput.fill('checkpoints')
+    await expect(comfyPage.importModelDialog.importButton).toBeEnabled()
+
+    // Click import, ensure API is called
+    await comfyPage.importModelDialog.importButton.click()
+    await importModelMock.called()
+
+    // Toast should be shown and dialog closes
+    await expect(
+      comfyPage.page.locator('.p-toast-message.p-toast-message-success')
+    ).toHaveCount(1)
+
+    await expect(comfyPage.importModelDialog.rootEl).toBeHidden()
+  })
+})

browser_tests/fixtures/ComfyPage.ts

@@ -13,6 +13,7 @@ import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { ImportModelDialog } from './components/ImportModelDialog'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
@@ -140,6 +141,7 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
+  public readonly importModelDialog: ImportModelDialog
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -165,6 +167,7 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page)
     this.confirmDialog = new ConfirmDialog(page)
+    this.importModelDialog = new ImportModelDialog(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -270,6 +273,7 @@ export class ComfyPage {
         localStorage.clear()
         sessionStorage.clear()
         localStorage.setItem('Comfy.userId', id)
+        localStorage.setItem('api-nodes-news-seen', 'true')
       }, this.id)
     }
     await this.goto()
@@ -468,6 +472,7 @@ export class ComfyPage {
       fileName?: string
       url?: string
       dropPosition?: Position
+      buffer?: Buffer
     } = {}
   ) {
     const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
@@ -486,7 +491,7 @@ export class ComfyPage {
     // Dropping a file from the filesystem
     if (fileName) {
       const filePath = this.assetPath(fileName)
-      const buffer = fs.readFileSync(filePath)
+      const buffer = options.buffer ?? fs.readFileSync(filePath)
 
       const getFileType = (fileName: string) => {
         if (fileName.endsWith('.png')) return 'image/png'

browser_tests/fixtures/components/ImportModelDialog.ts

@@ -0,0 +1,17 @@
+import { Page } from '@playwright/test'
+
+export class ImportModelDialog {
+  constructor(public readonly page: Page) {}
+
+  get rootEl() {
+    return this.page.locator('div[aria-labelledby="global-import-model"]')
+  }
+
+  get modelTypeInput() {
+    return this.rootEl.locator('#model-type')
+  }
+
+  get importButton() {
+    return this.rootEl.getByLabel('Import')
+  }
+}

browser_tests/tests/execution.spec.ts

@@ -18,3 +18,27 @@ test.describe('Execution', () => {
     )
   })
 })
+
+test.describe('Execute to selected output nodes', () => {
+  test('Execute to selected output nodes', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('execution/partial_execution')
+    const input = await comfyPage.getNodeRefById(3)
+    const output1 = await comfyPage.getNodeRefById(1)
+    const output2 = await comfyPage.getNodeRefById(4)
+    expect(await (await input.getWidget(0)).getValue()).toBe('foo')
+    expect(await (await output1.getWidget(0)).getValue()).toBe('')
+    expect(await (await output2.getWidget(0)).getValue()).toBe('')
+
+    await output1.click('title')
+
+    await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
+    // @note: Wait for the execution to finish. We might want to move to a more
+    // reliable way to wait for the execution to finish. Workflow in this test
+    // is simple enough that this is fine for now.
+    await comfyPage.page.waitForTimeout(200)
+
+    expect(await (await input.getWidget(0)).getValue()).toBe('foo')
+    expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
+    expect(await (await output2.getWidget(0)).getValue()).toBe('')
+  })
+})

browser_tests/tests/interaction.spec.ts

@@ -666,6 +666,12 @@ test.describe('Load workflow', () => {
       expect(activeWorkflowName).toEqual(workflowPathB)
     })
   })
+
+  test('Auto fit view after loading workflow', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.EnableWorkflowViewRestore', false)
+    await comfyPage.loadWorkflow('single_ksampler')
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler_fit.png')
+  })
 })
 
 test.describe('Load duplicate workflow', () => {