[integration][do-not-merge] M1 FE asset stack for BE integration testing

.github/actions/start-comfyui-server/action.yaml

@@ -19,5 +19,8 @@ runs:
       run: |
         set -euo pipefail
         cp -r ./tools/devtools/* /ComfyUI/custom_nodes/ComfyUI_devtools/
-        cd /ComfyUI && python3 main.py --cpu --multi-user --front-end-root "${{ inputs.front_end_root }}" &
+        # TODO(FE-729): remove --enable-assets once BE-786 lands in the CI ComfyUI image
+        # (BE-786 removes the gate so /api/assets is always on). Until then, FE-729
+        # routes modelStore through assetService, which 503s without this flag.
+        cd /ComfyUI && python3 main.py --cpu --multi-user --enable-assets --front-end-root "${{ inputs.front_end_root }}" &
         wait-for-it --service 127.0.0.1:8188 -t ${{ inputs.timeout }}

browser_tests/assets/missing/fe746_load_image_bare_filename.json

@@ -0,0 +1,42 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 200],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["fe746_photo.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -119,9 +119,22 @@ export class BuilderSelectHelper {
     )[0]
     if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
     await nodeRef.centerOnNode()
-    const widgetLocator = this.comfyPage.vueNodes
-      .getNodeLocator(String(nodeRef.id))
-      .getByLabel(widgetName, { exact: true })
+    const node = this.comfyPage.vueNodes.getNodeLocator(String(nodeRef.id))
+    // Grid-mode widgets (WidgetSelectDefault) and number widgets expose
+    // aria-label on a wrapper/input. Asset-mode widgets (WidgetSelectDropdown)
+    // do not — the widget name lives in a sibling
+    // [data-testid="widget-layout-field-label"] div, so fall back to clicking
+    // the dropdown trigger button in the same row.
+    const byAriaLabel = node.getByLabel(widgetName, { exact: true })
+    const widgetLocator =
+      (await byAriaLabel.count()) > 0
+        ? byAriaLabel
+        : node
+            .getByTestId('widget-layout-field-label')
+            .filter({ hasText: widgetName })
+            .locator('..')
+            .locator('button')
+            .first()
     // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
     await widgetLocator.click({ force: true })
     await this.comfyPage.nextFrame()

browser_tests/tests/assetDeleteClearsLoadImage.spec.ts

@@ -2,13 +2,15 @@
  * FE-230: Deleting an asset must clear the Load Image node preview, widget
  * value, and mark the workflow dirty.
  *
- * Local run (requires cloud build of the frontend):
- *   pnpm build:cloud
- *   pnpm exec playwright test --project=cloud \
- *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
+ * FE-732: Input-asset deletion is no longer gated on `isCloud`; the same
+ * teardown flow now applies to both Cloud and OSS builds. Cloud and OSS
+ * variants below cover both Playwright projects against the shared mock.
  *
- * The cloud project is required because input-asset deletion is gated on
- * `isCloud === true` (see `useMediaAssetActions.deleteAssetApi`).
+ * Local run examples:
+ *   pnpm build:cloud && pnpm exec playwright test --project=cloud \
+ *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
+ *   pnpm build && pnpm exec playwright test --project=chromium \
+ *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
  */
 import type { Page, Route } from '@playwright/test'
 import { expect } from '@playwright/test'
@@ -119,81 +121,88 @@ const baseTest = comfyPageFixture.extend<{ assetMock: AssetMockApi }>({
   }
 })
 
+function registerDeleteFlowTest() {
+  baseTest(
+    'deleting an input asset clears widget value, preview cache, and marks workflow modified',
+    async ({ comfyPage, assetMock }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+
+      // Drive the production drag-and-drop flow to point the Load Image
+      // widget at the asset we are about to delete and populate the preview
+      // cache. FE-230 is asserting that the deletion tears these down.
+      const loadImageNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+      )[0]
+      const { x, y } = await loadImageNode.getPosition()
+      await comfyPage.dragDrop.dragAndDropFile(DROPPED_FILE, {
+        dropPosition: { x, y },
+        waitForUpload: true
+      })
+      const imageWidget = await loadImageNode.getWidget(0)
+      await expect.poll(() => imageWidget.getValue()).toBe(DROPPED_FILE)
+
+      // Re-baseline the change tracker so the deletion-side mutation is the
+      // only thing that can flip `isModified` later.
+      await comfyPage.page.evaluate(() => {
+        const tracker =
+          window.app?.extensionManager?.workflow?.activeWorkflow?.changeTracker
+        tracker?.reset?.()
+      })
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(false)
+
+      // Drive the real production flow: assets sidebar → Imported tab →
+      // right-click asset card → Delete → confirm dialog.
+      const sidebar = comfyPage.menu.assetsTab
+      // The default `open()` waits for assets on the Generated tab; we seed
+      // only an input asset, so skip that wait and let `waitForAssets(1)`
+      // gate on the Imported tab instead.
+      await sidebar.open({ waitForAssets: false })
+      await sidebar.switchToImported()
+      await sidebar.waitForAssets(1)
+      await sidebar.rightClickAsset(TARGET_CARD_TEXT)
+
+      const deleteMenuItem = sidebar.contextMenuItem('Delete')
+      await expect(deleteMenuItem).toBeVisible()
+      await deleteMenuItem.click()
+
+      await comfyPage.confirmDialog.click('delete')
+
+      // Mocked DELETE was issued.
+      await expect
+        .poll(() => assetMock.deleteCalls.includes(TARGET_ASSET.id))
+        .toBe(true)
+
+      // Widget value was cleared.
+      await expect.poll(() => imageWidget.getValue()).toBe('')
+
+      // Preview cache was cleared.
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate((nodeId) => {
+            const node = window.app!.graph.getNodeById(nodeId)
+            return node?.imgs?.length ?? 0
+          }, loadImageNode.id)
+        )
+        .toBe(0)
+
+      // Workflow was marked dirty by changeTracker.captureCanvasState().
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+    }
+  )
+}
+
 baseTest.describe(
-  'FE-230 asset delete clears Load Image preview',
+  'FE-230 asset delete clears Load Image preview (cloud)',
   { tag: '@cloud' },
-  () => {
-    baseTest(
-      'deleting an input asset clears widget value, preview cache, and marks workflow modified',
-      async ({ comfyPage, assetMock }) => {
-        await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-
-        // Drive the production drag-and-drop flow to point the Load Image
-        // widget at the asset we are about to delete and populate the preview
-        // cache. FE-230 is asserting that the deletion tears these down.
-        const loadImageNode = (
-          await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-        )[0]
-        const { x, y } = await loadImageNode.getPosition()
-        await comfyPage.dragDrop.dragAndDropFile(DROPPED_FILE, {
-          dropPosition: { x, y },
-          waitForUpload: true
-        })
-        const imageWidget = await loadImageNode.getWidget(0)
-        await expect.poll(() => imageWidget.getValue()).toBe(DROPPED_FILE)
-
-        // Re-baseline the change tracker so the deletion-side mutation is the
-        // only thing that can flip `isModified` later.
-        await comfyPage.page.evaluate(() => {
-          const tracker =
-            window.app?.extensionManager?.workflow?.activeWorkflow
-              ?.changeTracker
-          tracker?.reset?.()
-        })
-        await expect
-          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-          .toBe(false)
-
-        // Drive the real production flow: assets sidebar → Imported tab →
-        // right-click asset card → Delete → confirm dialog.
-        const sidebar = comfyPage.menu.assetsTab
-        // The default `open()` waits for assets on the Generated tab; we seed
-        // only an input asset, so skip that wait and let `waitForAssets(1)`
-        // gate on the Imported tab instead.
-        await sidebar.open({ waitForAssets: false })
-        await sidebar.switchToImported()
-        await sidebar.waitForAssets(1)
-        await sidebar.rightClickAsset(TARGET_CARD_TEXT)
-
-        const deleteMenuItem = sidebar.contextMenuItem('Delete')
-        await expect(deleteMenuItem).toBeVisible()
-        await deleteMenuItem.click()
-
-        await comfyPage.confirmDialog.click('delete')
-
-        // Mocked DELETE was issued.
-        await expect
-          .poll(() => assetMock.deleteCalls.includes(TARGET_ASSET.id))
-          .toBe(true)
-
-        // Widget value was cleared.
-        await expect.poll(() => imageWidget.getValue()).toBe('')
-
-        // Preview cache was cleared.
-        await expect
-          .poll(() =>
-            comfyPage.page.evaluate((nodeId) => {
-              const node = window.app!.graph.getNodeById(nodeId)
-              return node?.imgs?.length ?? 0
-            }, loadImageNode.id)
-          )
-          .toBe(0)
-
-        // Workflow was marked dirty by changeTracker.captureCanvasState().
-        await expect
-          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-          .toBe(true)
-      }
-    )
-  }
+  registerDeleteFlowTest
+)
+
+baseTest.describe(
+  'FE-230 asset delete clears Load Image preview (oss)',
+  { tag: '@oss' },
+  registerDeleteFlowTest
 )

browser_tests/tests/defaultKeybindings.spec.ts

@@ -27,7 +27,6 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     const sidebarTabs = [
       { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
       { key: 'KeyN', tabId: 'node-library', label: 'node library' },
-      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
       { key: 'KeyA', tabId: 'assets', label: 'assets' }
     ] as const
 

browser_tests/tests/maskEditor.spec.ts

@@ -218,21 +218,8 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   }) => {
     const dialog = await maskEditor.openDialog()
 
-    let maskUploadCount = 0
     let imageUploadCount = 0
 
-    await comfyPage.page.route('**/upload/mask', (route) => {
-      maskUploadCount++
-      return route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          name: `test-mask-${maskUploadCount}.png`,
-          subfolder: 'clipspace',
-          type: 'input'
-        })
-      })
-    })
     await comfyPage.page.route('**/upload/image', (route) => {
       imageUploadCount++
       return route.fulfill({
@@ -252,20 +239,17 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
 
     await expect(dialog).toBeHidden()
 
-    // The save pipeline uploads multiple layers (mask + image variants)
+    // The save pipeline uploads four layers (masked, paint, painted, paintedMasked)
+    // through the unified /upload/image endpoint.
     expect(
-      maskUploadCount + imageUploadCount,
-      'save should trigger upload calls'
-    ).toBeGreaterThan(0)
+      imageUploadCount,
+      'save should upload all four layers via /upload/image'
+    ).toBe(4)
   })
 
   test('save failure keeps dialog open', async ({ comfyPage, maskEditor }) => {
     const dialog = await maskEditor.openDialog()
 
-    // Fail all upload routes
-    await comfyPage.page.route('**/upload/mask', (route) =>
-      route.fulfill({ status: 500 })
-    )
     await comfyPage.page.route('**/upload/image', (route) =>
       route.fulfill({ status: 500 })
     )