fix: address review feedback for Load3D E2E tests

browser_tests/assets/cube.obj

@@ -0,0 +1,40 @@
+# Blender 5.2.0 Alpha
+# www.blender.org
+mtllib Untitled.mtl
+o Cube
+v 2.857396 2.486626 -0.081892
+v 2.857396 0.486626 -0.081892
+v 2.857396 2.486626 1.918108
+v 2.857396 0.486626 1.918108
+v 0.857396 2.486626 -0.081892
+v 0.857396 0.486626 -0.081892
+v 0.857396 2.486626 1.918108
+v 0.857396 0.486626 1.918108
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+vt 0.625000 0.500000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.125000 0.500000
+vt 0.375000 0.500000
+vt 0.125000 0.750000
+s 0
+usemtl Material
+f 1/1/1 5/2/1 7/3/1 3/4/1
+f 4/5/2 3/4/2 7/6/2 8/7/2
+f 8/8/3 7/9/3 5/10/3 6/11/3
+f 6/12/4 2/13/4 4/5/4 8/14/4
+f 2/13/5 1/1/5 3/4/5 4/5/5
+f 6/11/6 5/10/6 1/1/6 2/13/6

browser_tests/fixtures/helpers/Load3DFixtures.ts

@@ -0,0 +1,25 @@
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { Load3DHelper } from '@e2e/tests/load3d/Load3DHelper'
+import { Load3DViewerHelper } from '@e2e/tests/load3d/Load3DViewerHelper'
+
+export const load3dTest = comfyPageFixture.extend<{
+  load3d: Load3DHelper
+}>({
+  load3d: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await use(new Load3DHelper(node))
+  }
+})
+
+export const load3dViewerTest = load3dTest.extend<{
+  viewer: Load3DViewerHelper
+}>({
+  viewer: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.Load3D.3DViewerEnable', true)
+    await use(new Load3DViewerHelper(comfyPage.page))
+  }
+})

browser_tests/fixtures/selectors.ts

@@ -155,6 +155,12 @@ export const TestIds = {
   errors: {
     imageLoadError: 'error-loading-image',
     videoLoadError: 'error-loading-video'
+  },
+  loading: {
+    overlay: 'loading-overlay'
+  },
+  load3dViewer: {
+    sidebar: 'load3d-viewer-sidebar'
   }
 } as const
 
@@ -185,3 +191,5 @@ export type TestIdValue =
   | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
   | (typeof TestIds.queue)[keyof typeof TestIds.queue]
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]
+  | (typeof TestIds.loading)[keyof typeof TestIds.loading]
+  | (typeof TestIds.load3dViewer)[keyof typeof TestIds.load3dViewer]

browser_tests/tests/load3d/Load3DHelper.ts

@@ -1,5 +1,8 @@
+import { expect } from '@playwright/test'
 import type { Locator } from '@playwright/test'
 
+import { TestIds } from '@e2e/fixtures/selectors'
+
 export class Load3DHelper {
   constructor(readonly node: Locator) {}
 
@@ -19,6 +22,10 @@ export class Load3DHelper {
     return this.node.locator('input[type="color"]')
   }
 
+  get openViewerButton(): Locator {
+    return this.node.getByRole('button', { name: /open in 3d viewer/i })
+  }
+
   getUploadButton(label: string): Locator {
     return this.node.getByText(label)
   }
@@ -37,4 +44,10 @@ export class Load3DHelper {
       el.dispatchEvent(new Event('input', { bubbles: true }))
     }, hex)
   }
+
+  async waitForModelLoaded(): Promise<void> {
+    await expect(this.node.getByTestId(TestIds.loading.overlay)).toBeHidden({
+      timeout: 30000
+    })
+  }
 }

browser_tests/tests/load3d/Load3DViewerHelper.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+export class Load3DViewerHelper {
+  readonly dialog: Locator
+
+  constructor(readonly page: Page) {
+    this.dialog = page.locator('[aria-labelledby="global-load3d-viewer"]')
+  }
+
+  get canvas(): Locator {
+    return this.dialog.locator('canvas')
+  }
+
+  get sidebar(): Locator {
+    return this.dialog.getByTestId('load3d-viewer-sidebar')
+  }
+
+  get cancelButton(): Locator {
+    return this.dialog.getByRole('button', { name: /cancel/i })
+  }
+
+  async waitForOpen(): Promise<void> {
+    await expect(this.dialog).toBeVisible({ timeout: 10000 })
+  }
+
+  async waitForClosed(): Promise<void> {
+    await expect(this.dialog).toBeHidden({ timeout: 5000 })
+  }
+}

browser_tests/tests/load3d/load3d.spec.ts

@@ -1,24 +1,13 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import { Load3DHelper } from './Load3DHelper'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { load3dTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
 
 test.describe('Load3D', () => {
-  let load3d: Load3DHelper
-
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    load3d = new Load3DHelper(node)
-  })
-
   test(
     'Renders canvas with upload buttons and controls menu',
     { tag: ['@smoke', '@screenshot'] },
-    async () => {
+    async ({ load3d }) => {
       await expect(load3d.node).toBeVisible()
 
       await expect(load3d.canvas).toBeVisible()
@@ -44,7 +33,7 @@ test.describe('Load3D', () => {
   test(
     'Controls menu opens and shows all categories',
     { tag: ['@smoke', '@screenshot'] },
-    async () => {
+    async ({ load3d }) => {
       await load3d.openMenu()
 
       await expect(load3d.getMenuCategory('Scene')).toBeVisible()
@@ -63,7 +52,7 @@ test.describe('Load3D', () => {
   test(
     'Changing background color updates the scene',
     { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
+    async ({ comfyPage, load3d }) => {
       await load3d.setBackgroundColor('#cc3333')
       await comfyPage.nextFrame()
 
@@ -90,8 +79,72 @@ test.describe('Load3D', () => {
   test(
     'Recording controls are visible for Load3D',
     { tag: '@smoke' },
-    async () => {
+    async ({ load3d }) => {
       await expect(load3d.recordingButton).toBeVisible()
     }
   )
+
+  test(
+    'Uploads a 3D model via button and renders it',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage, load3d }) => {
+      const uploadResponsePromise = comfyPage.page.waitForResponse(
+        (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+        { timeout: 15000 }
+      )
+
+      const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+      await load3d.getUploadButton('upload 3d model').click()
+      const fileChooser = await fileChooserPromise
+      await fileChooser.setFiles(assetPath('cube.obj'))
+
+      await uploadResponsePromise
+
+      const node = await comfyPage.nodeOps.getNodeRefById(1)
+      const modelFileWidget = await node.getWidget(0)
+      await expect
+        .poll(() => modelFileWidget.getValue(), { timeout: 5000 })
+        .toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-uploaded-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
+
+  test(
+    'Drag-and-drops a 3D model onto the canvas',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage, load3d }) => {
+      const canvasBox = await load3d.canvas.boundingBox()
+      expect(canvasBox, 'Canvas bounding box should exist').not.toBeNull()
+      const dropPosition = {
+        x: canvasBox!.x + canvasBox!.width / 2,
+        y: canvasBox!.y + canvasBox!.height / 2
+      }
+
+      await comfyPage.dragDrop.dragAndDropFile('cube.obj', {
+        dropPosition,
+        waitForUpload: true
+      })
+
+      const node = await comfyPage.nodeOps.getNodeRefById(1)
+      const modelFileWidget = await node.getWidget(0)
+      await expect
+        .poll(() => modelFileWidget.getValue(), { timeout: 5000 })
+        .toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-dropped-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
 })

browser_tests/tests/load3d/load3dViewer.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test'
+
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { load3dViewerTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
+
+test.describe('Load3D Viewer', () => {
+  test.beforeEach(async ({ comfyPage, load3d }) => {
+    // Upload cube.obj so the node has a model loaded
+    const uploadResponsePromise = comfyPage.page.waitForResponse(
+      (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+      { timeout: 15000 }
+    )
+    const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+    await load3d.getUploadButton('upload 3d model').click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(assetPath('cube.obj'))
+    await uploadResponsePromise
+
+    const nodeRef = await comfyPage.nodeOps.getNodeRefById(1)
+    const modelFileWidget = await nodeRef.getWidget(0)
+    await expect
+      .poll(() => modelFileWidget.getValue(), { timeout: 5000 })
+      .toContain('cube.obj')
+
+    await load3d.waitForModelLoaded()
+  })
+
+  test(
+    'Opens viewer dialog with canvas and controls sidebar',
+    { tag: '@smoke' },
+    async ({ load3d, viewer }) => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await expect(viewer.canvas).toBeVisible()
+      const canvasBox = await viewer.canvas.boundingBox()
+      expect(canvasBox!.width).toBeGreaterThan(0)
+      expect(canvasBox!.height).toBeGreaterThan(0)
+
+      await expect(viewer.sidebar).toBeVisible()
+      await expect(viewer.cancelButton).toBeVisible()
+    }
+  )
+
+  test(
+    'Cancel button closes the viewer dialog',
+    { tag: '@smoke' },
+    async ({ load3d, viewer }) => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await viewer.cancelButton.click()
+      await viewer.waitForClosed()
+    }
+  )
+})

src/components/common/LoadingOverlay.vue

@@ -3,6 +3,7 @@
     <div
       v-if="loading"
       class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
+      data-testid="loading-overlay"
     >
       <div class="flex flex-col items-center">
         <div class="grid place-items-center">

src/components/load3d/Load3dViewerContent.vue

@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <div class="flex w-72 flex-col">
+    <div class="flex w-72 flex-col" data-testid="load3d-viewer-sidebar">
       <div class="flex-1 overflow-y-auto p-4">
         <div class="space-y-2">
           <div class="space-y-4 p-2">