fix: address review feedback for Load3D E2E tests

browser_tests/fixtures/selectors.ts

@@ -158,6 +158,9 @@ export const TestIds = {
   },
   loading: {
     overlay: 'loading-overlay'
+  },
+  load3dViewer: {
+    sidebar: 'load3d-viewer-sidebar'
   }
 } as const
 
@@ -189,3 +192,4 @@ export type TestIdValue =
   | (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,6 +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) {}
 
@@ -43,8 +45,29 @@ export class Load3DHelper {
     }, hex)
   }
 
+  async waitForWidgetValue(
+    nodeId: number,
+    widgetName: string,
+    expected: string
+  ): Promise<void> {
+    await expect
+      .poll(
+        () =>
+          this.node.page().evaluate(
+            ({ nodeId, widgetName }) => {
+              const n = window.app!.graph.getNodeById(nodeId)
+              const w = n?.widgets?.find((w) => w.name === widgetName)
+              return w?.value
+            },
+            { nodeId, widgetName }
+          ),
+        { timeout: 15000 }
+      )
+      .toContain(expected)
+  }
+
   async waitForModelLoaded(): Promise<void> {
-    await expect(this.node.getByTestId('loading-overlay')).toBeHidden({
+    await expect(this.node.getByTestId(TestIds.loading.overlay)).toBeHidden({
       timeout: 30000
     })
   }

browser_tests/tests/load3d/Load3DViewerHelper.ts

@@ -13,7 +13,7 @@ export class Load3DViewerHelper {
   }
 
   get sidebar(): Locator {
-    return this.dialog.locator('.w-72')
+    return this.dialog.getByTestId('load3d-viewer-sidebar')
   }
 
   get cancelButton(): Locator {

browser_tests/tests/load3d/load3d.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { assetPath } from '@e2e/fixtures/utils/paths'
 import { Load3DHelper } from './Load3DHelper'
 
 test.describe('Load3D', () => {
@@ -107,21 +108,11 @@ test.describe('Load3D', () => {
       const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
       await load3d.getUploadButton('upload 3d model').click()
       const fileChooser = await fileChooserPromise
-      await fileChooser.setFiles(comfyPage.assetPath('cube.obj'))
+      await fileChooser.setFiles(assetPath('cube.obj'))
 
       await uploadResponsePromise
 
-      await expect
-        .poll(
-          () =>
-            comfyPage.page.evaluate(() => {
-              const n = window.app!.graph.getNodeById(1)
-              const w = n?.widgets?.find((w) => w.name === 'model_file')
-              return w?.value
-            }),
-          { timeout: 15000 }
-        )
-        .toContain('cube.obj')
+      await load3d.waitForWidgetValue(1, 'model_file', 'cube.obj')
 
       await load3d.waitForModelLoaded()
       await comfyPage.nextFrame()
@@ -138,6 +129,7 @@ test.describe('Load3D', () => {
     { tag: ['@screenshot'] },
     async ({ comfyPage }) => {
       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
@@ -148,17 +140,7 @@ test.describe('Load3D', () => {
         waitForUpload: true
       })
 
-      await expect
-        .poll(
-          () =>
-            comfyPage.page.evaluate(() => {
-              const n = window.app!.graph.getNodeById(1)
-              const w = n?.widgets?.find((w) => w.name === 'model_file')
-              return w?.value
-            }),
-          { timeout: 15000 }
-        )
-        .toContain('cube.obj')
+      await load3d.waitForWidgetValue(1, 'model_file', 'cube.obj')
 
       await load3d.waitForModelLoaded()
       await comfyPage.nextFrame()

browser_tests/tests/load3d/load3dViewer.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { assetPath } from '@e2e/fixtures/utils/paths'
 import { Load3DHelper } from './Load3DHelper'
 import { Load3DViewerHelper } from './Load3DViewerHelper'
 
@@ -26,7 +27,7 @@ test.describe('Load3D Viewer', () => {
     const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
     await load3d.getUploadButton('upload 3d model').click()
     const fileChooser = await fileChooserPromise
-    await fileChooser.setFiles(comfyPage.assetPath('cube.obj'))
+    await fileChooser.setFiles(assetPath('cube.obj'))
     await uploadResponsePromise
 
     await load3d.waitForModelLoaded()

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">