test: add basic E2E tests for Load3D node

browser_tests/assets/3d/load3d_node.json

@@ -0,0 +1,47 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3D",
+      "pos": [50, 50],
+      "size": [400, 650],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        },
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3D"
+      },
+      "widgets_values": ["", 1024, 1024, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/tests/load3d/Load3DHelper.ts

@@ -0,0 +1,40 @@
+import type { Locator } from '@playwright/test'
+
+export class Load3DHelper {
+  constructor(readonly node: Locator) {}
+
+  get canvas(): Locator {
+    return this.node.locator('canvas')
+  }
+
+  get menuButton(): Locator {
+    return this.node.getByRole('button', { name: /show menu/i })
+  }
+
+  get recordingButton(): Locator {
+    return this.node.getByRole('button', { name: /start recording/i })
+  }
+
+  get colorInput(): Locator {
+    return this.node.locator('input[type="color"]')
+  }
+
+  getUploadButton(label: string): Locator {
+    return this.node.getByText(label)
+  }
+
+  getMenuCategory(name: string): Locator {
+    return this.node.getByText(name, { exact: true })
+  }
+
+  async openMenu(): Promise<void> {
+    await this.menuButton.click()
+  }
+
+  async setBackgroundColor(hex: string): Promise<void> {
+    await this.colorInput.evaluate((el, value) => {
+      ;(el as HTMLInputElement).value = value
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+    }, hex)
+  }
+}

browser_tests/tests/load3d/load3d.spec.ts

@@ -0,0 +1,97 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { Load3DHelper } from './Load3DHelper'
+
+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 () => {
+      await expect(load3d.node).toBeVisible()
+
+      await expect(load3d.canvas).toBeVisible()
+
+      const canvasBox = await load3d.canvas.boundingBox()
+      expect(canvasBox!.width).toBeGreaterThan(0)
+      expect(canvasBox!.height).toBeGreaterThan(0)
+
+      await expect(load3d.getUploadButton('upload 3d model')).toBeVisible()
+      await expect(
+        load3d.getUploadButton('upload extra resources')
+      ).toBeVisible()
+      await expect(load3d.getUploadButton('clear')).toBeVisible()
+
+      await expect(load3d.menuButton).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot('load3d-empty-node.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Controls menu opens and shows all categories',
+    { tag: ['@smoke', '@screenshot'] },
+    async () => {
+      await load3d.openMenu()
+
+      await expect(load3d.getMenuCategory('Scene')).toBeVisible()
+      await expect(load3d.getMenuCategory('Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('Camera')).toBeVisible()
+      await expect(load3d.getMenuCategory('Light')).toBeVisible()
+      await expect(load3d.getMenuCategory('Export')).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-controls-menu-open.png',
+        { maxDiffPixelRatio: 0.05 }
+      )
+    }
+  )
+
+  test(
+    'Changing background color updates the scene',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      await load3d.setBackgroundColor('#cc3333')
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const n = window.app!.graph.getNodeById(1)
+              const config = n?.properties?.['Scene Config'] as
+                | Record<string, string>
+                | undefined
+              return config?.backgroundColor
+            }),
+          { timeout: 3000 }
+        )
+        .toBe('#cc3333')
+
+      await expect(load3d.node).toHaveScreenshot('load3d-red-background.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Recording controls are visible for Load3D',
+    { tag: '@smoke' },
+    async () => {
+      await expect(load3d.recordingButton).toBeVisible()
+    }
+  )
+})