refactor: replace as never casts with typed fixtures in Load3d tests

Address CodeRabbit review feedback: use CameraState type import,
THREE.Vector3 constructors, and as unknown as THREE.Object3D casts
instead of as never to maintain type safety in test fixtures.

.oxlintrc.json

@@ -84,7 +84,6 @@
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
-    "vitest/require-mock-type-parameters": "off",
     "unicorn/no-new-array": "off",
     "unicorn/no-single-promise-in-promise-methods": "off",
     "unicorn/no-useless-fallback-in-spread": "off",
@@ -117,60 +116,13 @@
     },
     {
       "files": ["browser_tests/**/*.ts"],
-      "jsPlugins": ["eslint-plugin-playwright"],
       "rules": {
         "typescript/no-explicit-any": "error",
         "no-async-promise-executor": "error",
         "no-control-regex": "error",
         "no-useless-rename": "error",
         "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error",
-        "playwright/consistent-spacing-between-blocks": "error",
-        "playwright/expect-expect": [
-          "error",
-          {
-            "assertFunctionNames": [
-              "recordMeasurement",
-              "logMeasurement",
-              "builderSaveAs"
-            ],
-            "assertFunctionPatterns": [
-              "^expect",
-              "^assert",
-              "^verify",
-              "^searchAndExpect",
-              "waitForOpen",
-              "waitForClosed",
-              "waitForRequest"
-            ]
-          }
-        ],
-        "playwright/max-nested-describe": "error",
-        "playwright/no-duplicate-hooks": "error",
-        "playwright/no-element-handle": "error",
-        "playwright/no-eval": "error",
-        "playwright/no-focused-test": "error",
-        "playwright/no-force-option": "off",
-        "playwright/no-networkidle": "error",
-        "playwright/no-page-pause": "error",
-        "playwright/no-skipped-test": "error",
-        "playwright/no-unsafe-references": "error",
-        "playwright/no-unused-locators": "error",
-        "playwright/no-useless-await": "error",
-        "playwright/no-useless-not": "error",
-        "playwright/no-wait-for-navigation": "error",
-        "playwright/no-wait-for-selector": "error",
-        "playwright/no-wait-for-timeout": "error",
-        "playwright/prefer-hooks-on-top": "error",
-        "playwright/prefer-locator": "error",
-        "playwright/prefer-to-have-count": "error",
-        "playwright/prefer-to-have-length": "error",
-        "playwright/prefer-web-first-assertions": "error",
-        "playwright/prefer-native-locators": "error",
-        "playwright/require-to-pass-timeout": "error",
-        "playwright/valid-expect": "error",
-        "playwright/valid-expect-in-promise": "error",
-        "playwright/valid-title": "error"
+        "unicorn/no-empty-file": "error"
       }
     }
   ]

browser_tests/fixtures/ComfyPage.ts

@@ -321,7 +321,7 @@ export class ComfyPage {
         // window.app.extensionManager => GraphView ready
         window.app && window.app.extensionManager
     )
-    await this.page.locator('.p-blockui-mask').waitFor({ state: 'hidden' })
+    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
     await this.nextFrame()
   }
 
@@ -371,7 +371,7 @@ export class ComfyPage {
   }
 
   async closeMenu() {
-    await this.page.locator('button.comfy-close-menu-btn').click()
+    await this.page.click('button.comfy-close-menu-btn')
     await this.nextFrame()
   }
 

browser_tests/fixtures/VueNodeHelpers.ts

@@ -37,7 +37,7 @@ export class VueNodeHelpers {
    */
   getNodeByTitle(title: string): Locator {
     return this.page.locator('[data-node-id]').filter({
-      has: this.page.getByTestId('node-title').filter({ hasText: title })
+      has: this.page.locator('[data-testid="node-title"]', { hasText: title })
     })
   }
 
@@ -146,7 +146,7 @@ export class VueNodeHelpers {
         expectedCount
       )
     } else {
-      await this.page.locator('[data-node-id]').first().waitFor()
+      await this.page.waitForSelector('[data-node-id]')
     }
   }
 

browser_tests/fixtures/components/SettingDialog.ts

@@ -52,6 +52,6 @@ export class SettingDialog extends BaseDialog {
       name: 'About'
     })
     await aboutButton.click()
-    await this.page.locator('.about-container').waitFor()
+    await this.page.waitForSelector('.about-container')
   }
 }

browser_tests/fixtures/components/SidebarTab.ts

@@ -301,9 +301,7 @@ export class AssetsSidebarTab extends SidebarTab {
     this.gridViewOption = page.getByText('Grid view')
     this.sortNewestFirst = page.getByText('Newest first')
     this.sortOldestFirst = page.getByText('Oldest first')
-    this.assetCards = page
-      .getByRole('button')
-      .and(page.locator('[data-selected]'))
+    this.assetCards = page.locator('[role="button"][data-selected]')
     this.selectedCards = page.locator('[data-selected="true"]')
     this.listViewItems = page.locator(
       '.sidebar-content-container [role="button"][tabindex="0"]'

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -53,7 +53,7 @@ export class AppModeHelper {
     this.outputPlaceholder = this.page.getByTestId(
       TestIds.builder.outputPlaceholder
     )
-    this.linearWidgets = this.page.getByTestId('linear-widgets')
+    this.linearWidgets = this.page.locator('[data-testid="linear-widgets"]')
     this.imagePickerPopover = this.page
       .getByRole('dialog')
       .filter({ has: this.page.getByRole('button', { name: 'All' }) })

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -157,7 +157,7 @@ export class SubgraphHelper {
 
     // Wait for the appropriate UI element to appear
     if (action === 'rightClick') {
-      await this.page.locator('.litemenu-entry').first().waitFor({
+      await this.page.waitForSelector('.litemenu-entry', {
         state: 'visible',
         timeout: 5000
       })

browser_tests/fixtures/utils/customMatchers.ts

@@ -14,11 +14,10 @@ function makeMatcher<T>(
   ) {
     await expect(async () => {
       const value = await getValue(node)
-      if (this.isNot) {
-        expect(value, 'Node is ' + type).not.toBeTruthy()
-      } else {
-        expect(value, 'Node is not ' + type).toBeTruthy()
-      }
+      const assertion = this.isNot
+        ? expect(value, 'Node is ' + type).not
+        : expect(value, 'Node is not ' + type)
+      assertion.toBeTruthy()
     }).toPass({ timeout: 5000, ...options })
     return {
       pass: !this.isNot,

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -15,11 +15,13 @@ export class VueNodeFixture {
 
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
-    this.title = locator.getByTestId('node-title')
-    this.titleInput = locator.getByTestId('node-title-input')
+    this.title = locator.locator('[data-testid="node-title"]')
+    this.titleInput = locator.locator('[data-testid="node-title-input"]')
     this.body = locator.locator('[data-testid^="node-body-"]')
     this.pinIndicator = locator.getByTestId(TestIds.node.pinIndicator)
-    this.collapseButton = locator.getByTestId('node-collapse-button')
+    this.collapseButton = locator.locator(
+      '[data-testid="node-collapse-button"]'
+    )
     this.collapseIcon = this.collapseButton.locator('i')
     this.root = locator
   }

browser_tests/tests/appModeWelcome.spec.ts

@@ -16,7 +16,7 @@ test.describe('App mode welcome states', { tag: '@ui' }, () => {
 
     await expect(comfyPage.appMode.welcome).toBeVisible()
     await expect(comfyPage.appMode.emptyWorkflowText).toBeVisible()
-    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
+    await expect(comfyPage.appMode.buildAppButton).not.toBeVisible()
   })
 
   test('Build app button is visible when no outputs selected', async ({
@@ -26,7 +26,7 @@ test.describe('App mode welcome states', { tag: '@ui' }, () => {
 
     await expect(comfyPage.appMode.welcome).toBeVisible()
     await expect(comfyPage.appMode.buildAppButton).toBeVisible()
-    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
+    await expect(comfyPage.appMode.emptyWorkflowText).not.toBeVisible()
   })
 
   test('Empty workflow and build app are hidden when app has outputs', async ({
@@ -35,8 +35,8 @@ test.describe('App mode welcome states', { tag: '@ui' }, () => {
     await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
 
     await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
-    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
+    await expect(comfyPage.appMode.emptyWorkflowText).not.toBeVisible()
+    await expect(comfyPage.appMode.buildAppButton).not.toBeVisible()
   })
 
   test('Back to workflow returns to graph mode', async ({ comfyPage }) => {
@@ -46,7 +46,7 @@ test.describe('App mode welcome states', { tag: '@ui' }, () => {
     await comfyPage.appMode.backToWorkflowButton.click()
 
     await expect(comfyPage.canvas).toBeVisible()
-    await expect(comfyPage.appMode.welcome).toBeHidden()
+    await expect(comfyPage.appMode.welcome).not.toBeVisible()
   })
 
   test('Load template opens template selector', async ({ comfyPage }) => {

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -11,7 +11,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
   test('should open bottom panel via toggle button', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
     await bottomPanel.toggleButton.click()
     await expect(bottomPanel.root).toBeVisible()
   })
@@ -35,7 +35,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
     await expect(bottomPanel.root).toBeVisible()
 
     await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
   })
 
   test('should switch between shortcuts and terminal panels', async ({
@@ -55,7 +55,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
     await expect(logsTab).toBeVisible()
     await expect(
       comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('should persist Logs tab content in bottom panel', async ({

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -10,11 +10,11 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
   test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
     await bottomPanel.keyboardShortcutsButton.click()
     await expect(bottomPanel.root).toBeVisible()
     await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
   })
 
   test('should display essentials shortcuts tab', async ({ comfyPage }) => {
@@ -182,7 +182,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(bottomPanel.root).toBeVisible()
 
     await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
   })
 
   test('should display shortcuts in organized columns', async ({
@@ -192,7 +192,9 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
 
     await bottomPanel.keyboardShortcutsButton.click()
 
-    await expect(comfyPage.page.getByTestId('shortcuts-columns')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="shortcuts-columns"]')
+    ).toBeVisible()
 
     const subcategoryTitles = bottomPanel.shortcuts.subcategoryTitles
     await expect.poll(() => subcategoryTitles.count()).toBeGreaterThanOrEqual(2)
@@ -203,7 +205,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
   }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
 
     await comfyPage.page.keyboard.press('Control+Shift+KeyK')
 

browser_tests/tests/builderReorder.spec.ts

@@ -22,7 +22,7 @@ async function saveCloseAndReopenAsApp(
   await appMode.steps.goToPreview()
   await builderSaveAs(appMode, workflowName)
   await appMode.saveAs.closeButton.click()
-  await expect(appMode.saveAs.successDialog).toBeHidden()
+  await expect(appMode.saveAs.successDialog).not.toBeVisible()
 
   await appMode.footer.exitBuilder()
   await openWorkflowFromSidebar(comfyPage, workflowName)

browser_tests/tests/builderSaveFlow.spec.ts

@@ -31,7 +31,7 @@ async function dismissSuccessDialog(
 ) {
   const btn = button === 'close' ? saveAs.closeButton : saveAs.dismissButton
   await btn.click()
-  await expect(saveAs.successDialog).toBeHidden()
+  await expect(saveAs.successDialog).not.toBeVisible()
 }
 
 test.describe('Builder save flow', { tag: ['@ui'] }, () => {
@@ -113,7 +113,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await comfyPage.page.keyboard.press('Escape')
     await comfyPage.nextFrame()
 
-    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
+    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
   })
 
   test('Exit builder button exits builder mode', async ({ comfyPage }) => {
@@ -121,7 +121,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
     await comfyPage.appMode.footer.exitBuilder()
-    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
+    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
   })
 
   test('Save button directly saves for previously saved workflow', async ({
@@ -141,7 +141,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await footer.saveButton.click()
     await comfyPage.nextFrame()
 
-    await expect(saveAs.dialog).toBeHidden()
+    await expect(saveAs.dialog).not.toBeVisible()
     await expect(footer.saveButton).toBeDisabled()
   })
 
@@ -253,7 +253,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await builderSaveAs(comfyPage.appMode, `${Date.now()} app-view`, 'App')
 
     await comfyPage.appMode.saveAs.viewAppButton.click()
-    await expect(comfyPage.appMode.saveAs.successDialog).toBeHidden()
+    await expect(comfyPage.appMode.saveAs.successDialog).not.toBeVisible()
 
     await expect
       .poll(() => comfyPage.workflow.getActiveWorkflowActiveAppMode())
@@ -271,9 +271,9 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     )
 
     await comfyPage.appMode.saveAs.exitBuilderButton.click()
-    await expect(comfyPage.appMode.saveAs.successDialog).toBeHidden()
+    await expect(comfyPage.appMode.saveAs.successDialog).not.toBeVisible()
 
-    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
+    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
   })
 
   test('save as with different mode does not modify the original workflow', async ({
@@ -327,7 +327,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     await expect(appMode.saveAs.overwriteDialog).toBeVisible()
     await appMode.saveAs.overwriteButton.click()
-    await expect(appMode.saveAs.overwriteDialog).toBeHidden()
+    await expect(appMode.saveAs.overwriteDialog).not.toBeVisible()
 
     await expect(appMode.saveAs.successMessage).toBeVisible()
 

browser_tests/tests/canvasModeSelector.spec.ts

@@ -70,7 +70,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       await expect(menu).toBeVisible()
       await trigger.click()
       await comfyPage.nextFrame()
-      await expect(menu).toBeHidden()
+      await expect(menu).not.toBeVisible()
       await expect(trigger).toHaveAttribute('aria-expanded', 'false')
     })
 
@@ -81,7 +81,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       await expect(menu).toBeVisible()
       await handItem.click()
       await comfyPage.nextFrame()
-      await expect(menu).toBeHidden()
+      await expect(menu).not.toBeVisible()
     })
 
     test('closes when Escape is pressed', async ({ comfyPage }) => {
@@ -91,7 +91,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       await expect(menu).toBeVisible()
       await selectItem.press('Escape')
       await comfyPage.nextFrame()
-      await expect(menu).toBeHidden()
+      await expect(menu).not.toBeVisible()
       await expect(trigger).toHaveAttribute('aria-expanded', 'false')
     })
   })
@@ -197,7 +197,7 @@ test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
       await selectItem.press('ArrowDown')
       await handItem.press('Escape')
       await comfyPage.nextFrame()
-      await expect(menu).toBeHidden()
+      await expect(menu).not.toBeVisible()
       await expect(trigger).toBeFocused()
     })
   })

browser_tests/tests/defaultKeybindings.spec.ts

@@ -38,13 +38,13 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
           `.${tabId}-tab-button.side-bar-button-selected`
         )
 
-        await expect(selectedButton).toBeHidden()
+        await expect(selectedButton).not.toBeVisible()
 
         await comfyPage.canvas.press(key)
         await expect(selectedButton).toBeVisible()
 
         await comfyPage.canvas.press(key)
-        await expect(selectedButton).toBeHidden()
+        await expect(selectedButton).not.toBeVisible()
       })
     }
   })
@@ -172,7 +172,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
 
       // Toggle off with Alt+m
       await comfyPage.page.keyboard.press('Alt+KeyM')
-      await expect(comfyPage.appMode.linearWidgets).toBeHidden()
+      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
 
       // Toggle on again
       await comfyPage.page.keyboard.press('Alt+KeyM')
@@ -189,7 +189,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await expect(minimap).toBeVisible()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await expect(minimap).toBeHidden()
+      await expect(minimap).not.toBeVisible()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
       await expect(minimap).toBeVisible()
@@ -198,13 +198,13 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
-      await expect(comfyPage.bottomPanel.root).toBeHidden()
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
       await expect(comfyPage.bottomPanel.root).toBeVisible()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
-      await expect(comfyPage.bottomPanel.root).toBeHidden()
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
     })
   })
 

browser_tests/tests/dialog.spec.ts

@@ -11,7 +11,9 @@ test.beforeEach(async ({ comfyPage }) => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.getByTestId('settings-dialog')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
     const contentArea = settingsDialog.locator('main')
     await expect(contentArea).toBeVisible()
@@ -24,16 +26,17 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.getByTestId('settings-dialog')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
-    await expect(settingsLocator).toBeHidden()
+    await expect(settingsLocator).not.toBeVisible()
   })
 
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const maxSpeed = 2.5
     await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
-
     await test.step('Setting should persist', async () => {
       await expect
         .poll(() => comfyPage.settings.getSetting('Comfy.Graph.ZoomSpeed'))
@@ -46,7 +49,9 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.press('Control+,')
 
     // Open the keybinding tab
-    const settingsDialog = comfyPage.page.getByTestId('settings-dialog')
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
     await expect(settingsDialog).toBeVisible()
     await settingsDialog
       .locator('nav [role="button"]', { hasText: 'Keybinding' })

browser_tests/tests/dialogs/managerDialog.spec.ts

@@ -307,7 +307,7 @@ test.describe('ManagerDialog', { tag: '@ui' }, () => {
     await searchInput.fill('Test Pack B')
 
     await expect(dialog.getByText('Test Pack B')).toBeVisible()
-    await expect(dialog.getByText('Test Pack A')).toBeHidden()
+    await expect(dialog.getByText('Test Pack A')).not.toBeVisible()
   })
 
   test('Clicking a pack card opens the info panel', async ({ comfyPage }) => {
@@ -360,7 +360,7 @@ test.describe('ManagerDialog', { tag: '@ui' }, () => {
     await expect(dialog).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
   })
 
   test('Empty search shows no results message', async ({ comfyPage }) => {

browser_tests/tests/dialogs/queueClearHistory.spec.ts

@@ -60,7 +60,7 @@ test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
     })
 
     await dialog.getByRole('button', { name: 'Cancel' }).click()
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
     expect(clearCalled).toBe(false)
 
     await comfyPage.page.unroute('**/api/history')
@@ -83,7 +83,7 @@ test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
     })
 
     await dialog.getByLabel('Close').click()
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
     expect(clearCalled).toBe(false)
 
     await comfyPage.page.unroute('**/api/history')
@@ -106,7 +106,7 @@ test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
     const request = await clearPromise
     expect(request.postDataJSON()).toEqual({ clear: true })
 
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
   })
 
   test('Dialog state resets after close and reopen', async ({ comfyPage }) => {
@@ -114,7 +114,7 @@ test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
     const dialog = comfyPage.confirmDialog.root
     await expect(dialog).toBeVisible()
     await dialog.getByRole('button', { name: 'Cancel' }).click()
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
 
     await comfyPage.queuePanel.openClearHistoryDialog()
     await expect(dialog).toBeVisible()

browser_tests/tests/dialogs/settingsDialog.spec.ts

@@ -61,7 +61,7 @@ test.describe('Settings dialog', { tag: '@ui' }, () => {
     await expect(dialog.root).toBeVisible()
 
     await dialog.close()
-    await expect(dialog.root).toBeHidden()
+    await expect(dialog.root).not.toBeVisible()
   })
 
   test('Escape key closes dialog', async ({ comfyPage }) => {
@@ -70,7 +70,7 @@ test.describe('Settings dialog', { tag: '@ui' }, () => {
     await expect(dialog.root).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(dialog.root).toBeHidden()
+    await expect(dialog.root).not.toBeVisible()
   })
 
   test('Search filters settings list', async ({ comfyPage }) => {

browser_tests/tests/domWidget.spec.ts

@@ -10,7 +10,7 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('widgets/collapsed_multiline')
     const textareaWidget = comfyPage.page.locator('.comfy-multiline-input')
-    await expect(textareaWidget).toBeHidden()
+    await expect(textareaWidget).not.toBeVisible()
   })
 
   test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
@@ -25,8 +25,8 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     for (const node of nodes) {
       await node.click('collapse')
     }
-    await expect(firstMultiline).toBeHidden()
-    await expect(lastMultiline).toBeHidden()
+    await expect(firstMultiline).not.toBeVisible()
+    await expect(lastMultiline).not.toBeVisible()
   })
 
   test(
@@ -35,7 +35,7 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-      await expect(comfyPage.menu.sideToolbar).toBeHidden()
+      await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
       await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
     }
   )

browser_tests/tests/errorDialog.spec.ts

@@ -74,7 +74,7 @@ test.describe('Error dialog', () => {
   }) => {
     const errorDialog = await triggerConfigureError(comfyPage)
     await expect(errorDialog).toBeVisible()
-    await expect(errorDialog.locator('pre')).toBeHidden()
+    await expect(errorDialog.locator('pre')).not.toBeVisible()
 
     await errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport).click()
 
@@ -83,7 +83,7 @@ test.describe('Error dialog', () => {
     await expect(reportPre).toHaveText(/\S/)
     await expect(
       errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport)
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('Should copy report to clipboard when "Copy to Clipboard" is clicked', async ({

browser_tests/tests/errorOverlay.spec.ts

@@ -100,7 +100,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await errorOverlay
         .getByTestId(TestIds.dialogs.errorOverlayDismiss)
         .click()
-      await expect(errorOverlay).toBeHidden()
+      await expect(errorOverlay).not.toBeVisible()
 
       await comfyPage.canvas.click()
       await comfyPage.nextFrame()
@@ -112,10 +112,10 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await comfyPage.nextFrame()
 
       await comfyPage.keyboard.undo()
-      await expect(errorOverlay).toBeHidden()
+      await expect(errorOverlay).not.toBeVisible()
 
       await comfyPage.keyboard.redo()
-      await expect(errorOverlay).toBeHidden()
+      await expect(errorOverlay).not.toBeVisible()
     })
   })
 
@@ -156,7 +156,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
-      await expect(overlay).toBeHidden()
+      await expect(overlay).not.toBeVisible()
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 
@@ -168,7 +168,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
-      await expect(overlay).toBeHidden()
+      await expect(overlay).not.toBeVisible()
     })
 
     test('"Dismiss" closes overlay without opening panel', async ({
@@ -181,8 +181,10 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
 
-      await expect(overlay).toBeHidden()
-      await expect(comfyPage.page.getByTestId('properties-panel')).toBeHidden()
+      await expect(overlay).not.toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId('properties-panel')
+      ).not.toBeVisible()
     })
 
     test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
@@ -193,7 +195,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByRole('button', { name: /close/i }).click()
 
-      await expect(overlay).toBeHidden()
+      await expect(overlay).not.toBeVisible()
     })
   })
 })

browser_tests/tests/featureFlags.spec.ts

@@ -69,7 +69,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       expect(flags?.data).not.toBeNull()
       expect(flags?.data).toHaveProperty('supports_preview_metadata')
       expect(typeof flags?.data?.supports_preview_metadata).toBe('boolean')
-    }).toPass({ timeout: 5000 })
+    }).toPass()
 
     // Verify server sent feature flags back
     await expect(async () => {
@@ -82,7 +82,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       expect(flags).toHaveProperty('max_upload_size')
       expect(typeof flags?.max_upload_size).toBe('number')
       expect(Object.keys(flags ?? {}).length).toBeGreaterThan(0)
-    }).toPass({ timeout: 5000 })
+    }).toPass()
 
     await newPage.close()
   })
@@ -102,7 +102,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       expect(typeof flags.supports_preview_metadata).toBe('boolean')
       expect(flags).toHaveProperty('max_upload_size')
       expect(typeof flags.max_upload_size).toBe('number')
-    }).toPass({ timeout: 5000 })
+    }).toPass()
   })
 
   test('serverSupportsFeature method works with real backend flags', async ({
@@ -182,7 +182,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       )
       expect(typeof maxUpload).toBe('number')
       expect(maxUpload as number).toBeGreaterThan(0)
-    }).toPass({ timeout: 5000 })
+    }).toPass()
 
     // Test getServerFeature with default value for non-existent feature
     await expect
@@ -210,7 +210,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       expect(typeof features.supports_preview_metadata).toBe('boolean')
       expect(features).toHaveProperty('max_upload_size')
       expect(Object.keys(features).length).toBeGreaterThan(0)
-    }).toPass({ timeout: 5000 })
+    }).toPass()
   })
 
   test('Client feature flags are immutable', async ({ comfyPage }) => {
@@ -348,14 +348,14 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       expect(flags).toHaveProperty('supports_preview_metadata')
       expect(typeof flags?.supports_preview_metadata).toBe('boolean')
       expect(flags).toHaveProperty('max_upload_size')
-    }).toPass({ timeout: 5000 })
+    }).toPass()
 
     // Verify feature flags were received and API was initialized
     await expect(async () => {
       const readiness = await newPage.evaluate(() => window.__appReadiness)
       expect(readiness?.featureFlagsReceived).toBe(true)
       expect(readiness?.apiInitialized).toBe(true)
-    }).toPass({ timeout: 5000 })
+    }).toPass()
 
     await newPage.close()
   })

browser_tests/tests/focusMode.spec.ts

@@ -14,12 +14,12 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
 
     await comfyPage.setFocusMode(true)
 
-    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
   })
 
   test('Focus mode restores UI chrome', async ({ comfyPage }) => {
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
 
     await comfyPage.setFocusMode(false)
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
@@ -29,7 +29,7 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
@@ -41,7 +41,7 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
 
     await comfyPage.setFocusMode(true)
 
-    await expect(topMenu).toBeHidden()
+    await expect(topMenu).not.toBeVisible()
   })
 
   test('Canvas remains visible in focus mode', async ({ comfyPage }) => {
@@ -52,12 +52,12 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
 
   test('Focus mode can be toggled multiple times', async ({ comfyPage }) => {
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
 
     await comfyPage.setFocusMode(false)
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
   })
 })

browser_tests/tests/graph.spec.ts

@@ -109,6 +109,6 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
       expect(r.switchOutputLinkIds).toEqual(
         expect.arrayContaining([r.cfg85LinkId, r.cfg86LinkId])
       )
-    }).toPass({ timeout: 5000 })
+    }).toPass()
   })
 })

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -94,6 +94,6 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
     await backdrop.click()
 
     // Modal should be hidden
-    await expect(zoomModal).toBeHidden()
+    await expect(zoomModal).not.toBeVisible()
   })
 })

browser_tests/tests/groupNode.spec.ts

@@ -88,10 +88,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .getNode(groupNodeName)
         .locator('.bookmark-button')
         .click()
-      await comfyPage.page
-        .locator('.p-tree-node-label.tree-explorer-node-label')
-        .first()
-        .hover()
+      await comfyPage.page.hover('.p-tree-node-label.tree-explorer-node-label')
       await expect(
         comfyPage.page.locator('.node-lib-node-preview')
       ).toBeVisible()
@@ -102,7 +99,6 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .click()
     })
   })
-
   test(
     'Can be added to canvas using search',
     { tag: '@screenshot' },
@@ -158,7 +154,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await comfyPage.nextFrame()
     await expect(manage1.selectedNodeTypeSelect).toHaveValue('g1')
     await manage1.close()
-    await expect(manage1.root).toBeHidden()
+    await expect(manage1.root).not.toBeVisible()
 
     const manage2 = await group2.manageGroupNode()
     await expect(manage2.selectedNodeTypeSelect).toHaveValue('g2')
@@ -245,7 +241,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test.describe('Copy and paste', () => {
@@ -353,7 +349,6 @@ test.describe('Group Node', { tag: '@node' }, () => {
       await comfyPage.page.keyboard.press('Alt+g')
       await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
     })
-
     test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
       await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
       await comfyPage.canvas.click({

browser_tests/tests/imageCompare.spec.ts

@@ -46,7 +46,7 @@ test.describe('Image Compare', () => {
 
       await expect(node).toContainText('No images to compare')
       await expect(node.locator('img')).toHaveCount(0)
-      await expect(node.getByRole('presentation')).toHaveCount(0)
+      await expect(node.locator('[role="presentation"]')).toHaveCount(0)
     }
   )
 
@@ -67,7 +67,7 @@ test.describe('Image Compare', () => {
       await expect(beforeImg).toBeVisible()
       await expect(afterImg).toBeVisible()
 
-      const handle = node.getByRole('presentation')
+      const handle = node.locator('[role="presentation"]')
       await expect(handle).toBeVisible()
 
       expect(

browser_tests/tests/interaction.spec.ts

@@ -180,48 +180,6 @@ test.describe('Node Interaction', () => {
     })
   })
 
-  test.describe('Node Duplication', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      // Pin this suite to the legacy canvas path so Alt+drag exercises
-      // LGraphCanvas, not the Vue node drag handler.
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-    })
-
-    test('Can duplicate a regular node via Alt+drag', async ({ comfyPage }) => {
-      const before = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-      expect(
-        before,
-        'Expected exactly 2 CLIPTextEncode nodes in default graph'
-      ).toHaveLength(2)
-
-      const target = before[0]
-      const pos = await target.getPosition()
-      const src = { x: pos.x + 16, y: pos.y + 16 }
-
-      await comfyPage.page.mouse.move(src.x, src.y)
-      await comfyPage.page.keyboard.down('Alt')
-      try {
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-        await comfyPage.page.mouse.move(src.x + 120, src.y + 80, { steps: 20 })
-        await comfyPage.page.mouse.up()
-        await comfyPage.nextFrame()
-      } finally {
-        await comfyPage.page.keyboard.up('Alt')
-      }
-      await comfyPage.canvasOps.moveMouseToEmptyArea()
-
-      await expect
-        .poll(
-          async () =>
-            (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')).length
-        )
-        .toBe(3)
-      expect(await target.exists()).toBe(true)
-    })
-  })
-
   test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting(
@@ -1294,7 +1252,7 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
 
     test('Space + left-click drag should pan canvas', async ({ comfyPage }) => {
       // Click canvas to focus it
-      await comfyPage.canvas.click()
+      await comfyPage.page.click('canvas')
       await comfyPage.nextFrame()
 
       await comfyPage.page.keyboard.down('Space')
@@ -1363,7 +1321,7 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       'panning'
     )
 
-    await comfyPage.canvas.click()
+    await comfyPage.page.click('canvas')
     await comfyPage.nextFrame()
 
     await expect(comfyPage.canvas).toHaveScreenshot('standard-initial.png')

browser_tests/tests/jobHistoryActions.spec.ts

@@ -25,7 +25,7 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.getByTestId('docked-job-history-action')
+      comfyPage.page.locator('[data-testid="docked-job-history-action"]')
     ).toBeVisible()
   })
 
@@ -34,7 +34,9 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
   }) => {
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.getByTestId('docked-job-history-action')
+    const action = comfyPage.page.locator(
+      '[data-testid="docked-job-history-action"]'
+    )
     await expect(action).toBeVisible()
     await expect(action).not.toBeEmpty()
   })
@@ -43,7 +45,7 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.getByTestId('show-run-progress-bar-action')
+      comfyPage.page.locator('[data-testid="show-run-progress-bar-action"]')
     ).toBeVisible()
   })
 
@@ -51,18 +53,20 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.getByTestId('clear-history-action')
+      comfyPage.page.locator('[data-testid="clear-history-action"]')
     ).toBeVisible()
   })
 
   test('Clicking docked job history closes popover', async ({ comfyPage }) => {
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.getByTestId('docked-job-history-action')
+    const action = comfyPage.page.locator(
+      '[data-testid="docked-job-history-action"]'
+    )
     await expect(action).toBeVisible()
     await action.click()
 
-    await expect(action).toBeHidden()
+    await expect(action).not.toBeVisible()
   })
 
   test('Clicking show run progress bar toggles setting', async ({
@@ -74,7 +78,9 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
 
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.getByTestId('show-run-progress-bar-action')
+    const action = comfyPage.page.locator(
+      '[data-testid="show-run-progress-bar-action"]'
+    )
     await action.click()
 
     await expect

browser_tests/tests/linearMode.spec.ts

@@ -14,38 +14,48 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible()
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-run-button"]')
+    ).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
-      comfyPage.page.getByTestId('linear-workflow-info')
+      comfyPage.page.locator('[data-testid="linear-workflow-info"]')
     ).toBeVisible()
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible()
 
     await comfyPage.appMode.toggleAppMode()
 
     await expect(comfyPage.canvas).toBeVisible()
-    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeHidden()
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).not.toBeVisible()
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
-    await expect(comfyPage.canvas).toBeHidden()
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible()
+    await expect(comfyPage.canvas).not.toBeVisible()
   })
 })

browser_tests/tests/menu.spec.ts

@@ -101,7 +101,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
 
       // Check initial state of bottom panel (it's initially hidden)
       const { bottomPanel } = comfyPage
-      await expect(bottomPanel.root).toBeHidden()
+      await expect(bottomPanel.root).not.toBeVisible()
 
       // Checkmark should be invisible initially (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
@@ -126,7 +126,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await expect(viewSubmenu).toBeVisible()
 
       // Verify bottom panel is hidden again
-      await expect(bottomPanel.root).toBeHidden()
+      await expect(bottomPanel.root).not.toBeVisible()
 
       // Checkmark should be invisible again (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
@@ -138,7 +138,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
         .click({ position: { x: viewport.width - 10, y: 10 } })
 
       // Verify menu is now closed
-      await expect(menu).toBeHidden()
+      await expect(menu).not.toBeVisible()
     })
 
     test('Displays keybinding next to item', async ({ comfyPage }) => {

browser_tests/tests/minimap.spec.ts

@@ -53,7 +53,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     await expect(minimapContainer).toBeVisible()
 
     await toggleButton.click()
-    await expect(minimapContainer).toBeHidden()
+    await expect(minimapContainer).not.toBeVisible()
 
     await toggleButton.click()
     await expect(minimapContainer).toBeVisible()
@@ -65,7 +65,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     await expect(minimapContainer).toBeVisible()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
-    await expect(minimapContainer).toBeHidden()
+    await expect(minimapContainer).not.toBeVisible()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
     await expect(minimapContainer).toBeVisible()
@@ -76,7 +76,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     await expect(minimap).toBeVisible()
 
     await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
-    await expect(minimap).toBeHidden()
+    await expect(minimap).not.toBeVisible()
 
     const toggleButton = comfyPage.page.getByTestId(
       TestIds.canvas.toggleMinimapButton

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -39,7 +39,9 @@ test.describe(
 
       await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
 
-      const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+      const moreOptionsBtn = comfyPage.page.locator(
+        '[data-testid="more-options-button"]'
+      )
       await expect(moreOptionsBtn).toBeVisible()
       await moreOptionsBtn.click()
       await comfyPage.nextFrame()

browser_tests/tests/nodeDisplay.spec.ts

@@ -40,14 +40,13 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).toBeHidden()
+    ).not.toBeVisible()
 
     // If the node's multiline text widget is visible, then it was loaded successfully
     await expect(comfyPage.page.locator('.comfy-multiline-input')).toHaveCount(
       1
     )
   })
-
   test('Old workflow with converted input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/old_workflow_converted_input')
     const node = await comfyPage.nodeOps.getNodeRefById('1')
@@ -63,7 +62,6 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     expect(vaeInput!.link).toBeNull()
     expect(convertedInput!.link).not.toBeNull()
   })
-
   test('Renamed converted input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/renamed_converted_widget')
     const node = await comfyPage.nodeOps.getNodeRefById('3')
@@ -71,12 +69,10 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     const renamedInput = inputs.find((w) => w.name === 'breadth')
     expect(renamedInput).toBeUndefined()
   })
-
   test('slider', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/simple_slider')
     await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
   })
-
   test('unknown converted widget', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow(
       'missing/missing_nodes_converted_widget'
@@ -85,7 +81,6 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
       'missing_nodes_converted_widget.png'
     )
   })
-
   test('dynamically added input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/dynamically_added_input')
     await expect(comfyPage.canvas).toHaveScreenshot(

browser_tests/tests/nodeHelp.spec.ts

@@ -191,7 +191,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
       ).toBeVisible()
 
       // Verify help page is no longer visible
-      await expect(helpPage.locator('.node-help-content')).toBeHidden()
+      await expect(helpPage.locator('.node-help-content')).not.toBeVisible()
     })
   })
 
@@ -505,7 +505,7 @@ This is English documentation.
 
       // Should show fallback content (node description)
       await expect(helpPage).toBeVisible()
-      await expect(helpPage.locator('.p-progressspinner')).toBeHidden()
+      await expect(helpPage.locator('.p-progressspinner')).not.toBeVisible()
 
       // Should show some content even on error
       await expect(helpPage).not.toHaveText('')

browser_tests/tests/nodeSearchBox.spec.ts

@@ -203,7 +203,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await comfyPage.page.keyboard.press('Escape')
 
       // Verify the filter selection panel is hidden
-      await expect(panel.header).toBeHidden()
+      await expect(panel.header).not.toBeVisible()
 
       // Verify the node search dialog is still visible
       await expect(comfyPage.searchBox.input).toBeVisible()

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -29,7 +29,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).toBeHidden()
+    await expect(searchBoxV2.input).not.toBeVisible()
 
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
@@ -48,7 +48,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
 
     // Enter should add the first (selected) result
     await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).toBeHidden()
+    await expect(searchBoxV2.input).not.toBeVisible()
 
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
@@ -141,7 +141,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
 
       // Enter selects and adds node
       await comfyPage.page.keyboard.press('Enter')
-      await expect(searchBoxV2.input).toBeHidden()
+      await expect(searchBoxV2.input).not.toBeVisible()
 
       await expect
         .poll(() => comfyPage.nodeOps.getGraphNodesCount())

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -39,7 +39,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).toBeHidden()
+    await expect(searchBoxV2.input).not.toBeVisible()
 
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
@@ -56,7 +56,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).toBeHidden()
+    await expect(searchBoxV2.input).not.toBeVisible()
 
     await comfyPage.canvasOps.doubleClick()
     await expect(searchBoxV2.input).toBeVisible()
@@ -104,7 +104,9 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
         .click()
 
       // Verify filter chip appeared and results changed
-      const filterChip = searchBoxV2.dialog.getByTestId('filter-chip')
+      const filterChip = searchBoxV2.dialog.locator(
+        '[data-testid="filter-chip"]'
+      )
       await expect(filterChip).toBeVisible()
       await expect(searchBoxV2.results.first()).toBeVisible()
       await expect
@@ -115,7 +117,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
       await filterChip.getByTestId('chip-delete').click()
 
       // Filter chip should be removed
-      await expect(filterChip).toBeHidden()
+      await expect(filterChip).not.toBeVisible()
       await expect(searchBoxV2.results.first()).toBeVisible()
     })
   })

browser_tests/tests/performance.spec.ts

@@ -202,7 +202,6 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
       'domNodes'
     ])
   })
-
   test('subgraph DOM widget clipping during node selection', async ({
     comfyPage
   }) => {

browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts

@@ -13,5 +13,5 @@ export async function openErrorsTabViaSeeErrors(
   await expect(errorOverlay).toBeVisible()
 
   await errorOverlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
-  await expect(errorOverlay).toBeHidden()
+  await expect(errorOverlay).not.toBeVisible()
 }

browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts

@@ -76,7 +76,7 @@ export class PropertiesPanelHelper {
   async close(): Promise<void> {
     if (await this.root.isVisible()) {
       await this.closeButton.click()
-      await expect(this.root).toBeHidden()
+      await expect(this.root).not.toBeVisible()
     }
   }
 

browser_tests/tests/propertiesPanel/errorsTab.spec.ts

@@ -33,7 +33,7 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
       await comfyPage.actionbar.propertiesButton.click()
 
       const panel = new PropertiesPanelHelper(comfyPage.page)
-      await expect(panel.errorsTabIcon).toBeHidden()
+      await expect(panel.errorsTabIcon).not.toBeVisible()
     })
   })
 
@@ -55,7 +55,7 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
       await errorOverlay
         .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
         .click()
-      await expect(errorOverlay).toBeHidden()
+      await expect(errorOverlay).not.toBeVisible()
 
       const runtimePanel = comfyPage.page.getByTestId(
         TestIds.dialogs.runtimeErrorPanel

browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts

@@ -26,7 +26,7 @@ test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
     await errorOverlay
       .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
       .click()
-    await expect(errorOverlay).toBeHidden()
+    await expect(errorOverlay).not.toBeVisible()
   }
 
   test('Should show Find on GitHub and Copy buttons in error card', async ({

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -104,7 +104,6 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
       const optionCount = await comfyPage.page.getByRole('option').count()
       if (optionCount === 0) {
-        // oxlint-disable-next-line playwright/no-skipped-test -- no library options available in CI
         test.skip()
         return
       }
@@ -126,13 +125,13 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
       await uploadFileViaDropzone(comfyPage)
 
       await expect(getStatusCard(comfyPage)).toBeVisible()
-      await expect(getDropzone(comfyPage)).toBeHidden()
+      await expect(getDropzone(comfyPage)).not.toBeVisible()
 
       await comfyPage.page
         .getByTestId(TestIds.dialogs.missingMediaCancelButton)
         .click()
 
-      await expect(getStatusCard(comfyPage)).toBeHidden()
+      await expect(getStatusCard(comfyPage)).not.toBeVisible()
       await expect(getDropzone(comfyPage)).toBeVisible()
     })
   })
@@ -147,7 +146,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
-      ).toBeHidden()
+      ).not.toBeVisible()
     })
   })
 

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -57,7 +57,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     const locateButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelLocate
     )
-    await expect(locateButton.first()).toBeHidden()
+    await expect(locateButton.first()).not.toBeVisible()
 
     const expandButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelExpand

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -74,7 +74,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
       .click()
     await expect(
       missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('Locate node button is visible for expanded pack nodes', async ({

browser_tests/tests/propertiesPanel/nodeSelection.spec.ts

@@ -27,7 +27,7 @@ test.describe('Properties panel - Node selection', () => {
     })
 
     test('should not show Nodes tab for single node', async () => {
-      await expect(panel.getTab('Nodes')).toBeHidden()
+      await expect(panel.getTab('Nodes')).not.toBeVisible()
     })
 
     test('should display node widgets in Parameters tab', async () => {
@@ -65,7 +65,7 @@ test.describe('Properties panel - Node selection', () => {
         'KSampler',
         'CLIP Text Encode (Prompt)'
       ])
-      await expect(panel.getTab('Info')).toBeHidden()
+      await expect(panel.getTab('Info')).not.toBeVisible()
     })
   })
 

browser_tests/tests/propertiesPanel/nodeSettings.spec.ts

@@ -42,8 +42,8 @@ test.describe('Properties panel - Node settings', () => {
       await expect(nodeLocator.getByText('Bypassed')).toBeVisible()
 
       await panel.getNodeStateButton('Normal').click()
-      await expect(nodeLocator.getByText('Bypassed')).toBeHidden()
-      await expect(nodeLocator.getByText('Muted')).toBeHidden()
+      await expect(nodeLocator.getByText('Bypassed')).not.toBeVisible()
+      await expect(nodeLocator.getByText('Muted')).not.toBeVisible()
     })
   })
 
@@ -114,7 +114,9 @@ test.describe('Properties panel - Node settings', () => {
       await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeVisible()
 
       await panel.pinnedSwitch.click()
-      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeHidden()
+      await expect(
+        nodeLocator.getByTestId('node-pin-indicator')
+      ).not.toBeVisible()
     })
   })
 })

browser_tests/tests/propertiesPanel/openClose.spec.ts

@@ -11,7 +11,7 @@ test.describe('Properties panel - Open and close', () => {
   })
 
   test('should open via actionbar toggle button', async ({ comfyPage }) => {
-    await expect(panel.root).toBeHidden()
+    await expect(panel.root).not.toBeVisible()
     await comfyPage.actionbar.propertiesButton.click()
     await expect(panel.root).toBeVisible()
   })
@@ -20,13 +20,13 @@ test.describe('Properties panel - Open and close', () => {
     await comfyPage.actionbar.propertiesButton.click()
     await expect(panel.root).toBeVisible()
     await panel.closeButton.click()
-    await expect(panel.root).toBeHidden()
+    await expect(panel.root).not.toBeVisible()
   })
 
   test('should close via close button after opening', async ({ comfyPage }) => {
     await comfyPage.actionbar.propertiesButton.click()
     await expect(panel.root).toBeVisible()
     await panel.close()
-    await expect(panel.root).toBeHidden()
+    await expect(panel.root).not.toBeVisible()
   })
 })

browser_tests/tests/propertiesPanel/titleEditing.spec.ts

@@ -34,7 +34,7 @@ test.describe('Properties panel - Title editing', () => {
       'KSampler',
       'CLIP Text Encode (Prompt)'
     ])
-    await expect(panel.titleEditIcon).toBeHidden()
+    await expect(panel.titleEditIcon).not.toBeVisible()
   })
 
   test('should not show pencil icon when nothing is selected', async ({
@@ -44,6 +44,6 @@ test.describe('Properties panel - Title editing', () => {
       window.app!.canvas.deselectAll()
     })
     await expect(panel.panelTitle).toContainText('Workflow Overview')
-    await expect(panel.titleEditIcon).toBeHidden()
+    await expect(panel.titleEditIcon).not.toBeVisible()
   })
 })

browser_tests/tests/propertiesPanel/workflowOverview.spec.ts

@@ -23,7 +23,7 @@ test.describe('Properties panel - Workflow Overview', () => {
   })
 
   test('should not show Info tab when nothing is selected', async () => {
-    await expect(panel.getTab('Info')).toBeHidden()
+    await expect(panel.getTab('Info')).not.toBeVisible()
   })
 
   test('should switch to Nodes tab and list all workflow nodes', async ({

browser_tests/tests/queue/queueOverlay.spec.ts

@@ -93,7 +93,7 @@ test.describe('Queue overlay', () => {
     ).toBeVisible()
     await expect(
       comfyPage.page.locator('[data-job-id="job-failed-1"]')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('Toggling overlay again closes it', async ({ comfyPage }) => {
@@ -104,6 +104,8 @@ test.describe('Queue overlay', () => {
 
     await toggle.click()
 
-    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeHidden()
+    await expect(
+      comfyPage.page.locator('[data-job-id]').first()
+    ).not.toBeVisible()
   })
 })

browser_tests/tests/releaseNotifications.spec.ts

@@ -72,8 +72,8 @@ test.describe('Release Notifications', () => {
     ).toBeVisible()
 
     // Close help center by dismissable mask
-    await comfyPage.page.locator('.help-center-backdrop').click()
-    await expect(helpMenu).toBeHidden()
+    await comfyPage.page.click('.help-center-backdrop')
+    await expect(helpMenu).not.toBeVisible()
   })
 
   test('should not show release notifications when mocked (default behavior)', async ({
@@ -103,10 +103,10 @@ test.describe('Release Notifications', () => {
     ).toBeVisible()
 
     // Should not show any popups or toasts
-    await expect(comfyPage.page.locator('.whats-new-popup')).toBeHidden()
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
     await expect(
       comfyPage.page.locator('.release-notification-toast')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('should handle release API errors gracefully', async ({ comfyPage }) => {
@@ -189,13 +189,13 @@ test.describe('Release Notifications', () => {
     const whatsNewSection = comfyPage.page.getByTestId(
       TestIds.dialogs.whatsNewSection
     )
-    await expect(whatsNewSection).toBeHidden()
+    await expect(whatsNewSection).not.toBeVisible()
 
     // Should not show any popups or toasts
-    await expect(comfyPage.page.locator('.whats-new-popup')).toBeHidden()
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
     await expect(
       comfyPage.page.locator('.release-notification-toast')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('should not make API calls when notifications are disabled', async ({
@@ -325,7 +325,7 @@ test.describe('Release Notifications', () => {
     await expect(whatsNewSection).toBeVisible()
 
     // Close help center
-    await comfyPage.page.locator('.help-center-backdrop').click()
+    await comfyPage.page.click('.help-center-backdrop')
 
     // Disable notifications
     await comfyPage.settings.setSetting(
@@ -337,7 +337,7 @@ test.describe('Release Notifications', () => {
     await helpCenterButton.click()
 
     // Verify "What's New?" section is now hidden
-    await expect(whatsNewSection).toBeHidden()
+    await expect(whatsNewSection).not.toBeVisible()
   })
 
   test('should handle edge case with empty releases and disabled notifications', async ({
@@ -381,6 +381,6 @@ test.describe('Release Notifications', () => {
     const whatsNewSection = comfyPage.page.getByTestId(
       TestIds.dialogs.whatsNewSection
     )
-    await expect(whatsNewSection).toBeHidden()
+    await expect(whatsNewSection).not.toBeVisible()
   })
 })

browser_tests/tests/resultGallery.spec.ts

@@ -31,7 +31,7 @@ test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
 
     // Wait for any asset card to appear (may contain img or video)
     const assetCard = comfyPage.page
-      .getByRole('button')
+      .locator('[role="button"]')
       .filter({ has: comfyPage.page.locator('img, video') })
       .first()
 
@@ -56,13 +56,13 @@ test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
     await runAndOpenGallery(comfyPage)
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(comfyPage.mediaLightbox.root).toBeHidden()
+    await expect(comfyPage.mediaLightbox.root).not.toBeVisible()
   })
 
   test('closes gallery when clicking close button', async ({ comfyPage }) => {
     await runAndOpenGallery(comfyPage)
 
     await comfyPage.mediaLightbox.closeButton.click()
-    await expect(comfyPage.mediaLightbox.root).toBeHidden()
+    await expect(comfyPage.mediaLightbox.root).not.toBeVisible()
   })
 })

browser_tests/tests/rightClickMenu.spec.ts

@@ -135,7 +135,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
-    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
 
@@ -153,7 +153,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-pinned-node.png'
     )
-    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
@@ -173,7 +173,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
@@ -181,7 +181,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
 
@@ -203,7 +203,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
     await comfyPage.page.keyboard.up('Control')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
@@ -214,7 +214,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
     await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(

browser_tests/tests/selectionToolbox.spec.ts

@@ -9,7 +9,6 @@ const test = comfyPageFixture
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
-
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
@@ -31,7 +30,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
 
   test('shows selection toolbox', async ({ comfyPage }) => {
     // By default, selection toolbox should be enabled
-    await expect(comfyPage.selectionToolbox).toBeHidden()
+    await expect(comfyPage.selectionToolbox).not.toBeVisible()
 
     // Select multiple nodes
     await comfyPage.nodeOps.selectNodes([
@@ -87,7 +86,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.page.mouse.down()
     await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
     await comfyPage.nextFrame()
-    await expect(comfyPage.selectionToolbox).toBeHidden()
+    await expect(comfyPage.selectionToolbox).not.toBeVisible()
   })
 
   test('shows border only with multiple selections', async ({ comfyPage }) => {
@@ -128,7 +127,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.workflow.loadWorkflow('groups/single_group')
 
     // Select group + node should show bypass button
-    await comfyPage.canvas.focus()
+    await comfyPage.page.focus('canvas')
     await comfyPage.page.keyboard.press('Control+A')
     await expect(
       comfyPage.page.locator(
@@ -142,7 +141,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       comfyPage.page.locator(
         '.selection-toolbox *[data-testid="bypass-button"]'
       )
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test.describe('Color Picker', () => {
@@ -170,7 +169,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerGroup).toBeHidden()
+      await expect(colorPickerGroup).not.toBeVisible()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -204,9 +204,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       name: /Frame Nodes/i
     })
     await expect(frameButton).toBeVisible()
-    await comfyPage.page
-      .getByRole('button', { name: /Frame Nodes/i })
-      .click({ force: true })
+    await frameButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect
@@ -225,7 +223,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     const frameButton = comfyPage.page.getByRole('button', {
       name: /Frame Nodes/i
     })
-    await expect(frameButton).toBeHidden()
+    await expect(frameButton).not.toBeVisible()
   })
 
   test('execute button visible when output node selected', async ({
@@ -255,6 +253,6 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     const executeButton = comfyPage.page.getByRole('button', {
       name: /Execute to selected output nodes/i
     })
-    await expect(executeButton).toBeHidden()
+    await expect(executeButton).not.toBeVisible()
   })
 })

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -47,10 +47,12 @@ test.describe(
 
       await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
 
-      const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+      const moreOptionsBtn = comfyPage.page.locator(
+        '[data-testid="more-options-button"]'
+      )
       await expect(moreOptionsBtn).toBeVisible()
 
-      await moreOptionsBtn.click()
+      await comfyPage.page.click('[data-testid="more-options-button"]')
 
       await comfyPage.nextFrame()
 
@@ -111,7 +113,7 @@ test.describe(
 
       await openMoreOptions(comfyPage)
       await comfyPage.page.getByText('Color', { exact: true }).click()
-      const blueSwatch = comfyPage.page.getByTitle('Blue')
+      const blueSwatch = comfyPage.page.locator('[title="Blue"]')
       await expect(blueSwatch.first()).toBeVisible()
       await blueSwatch.first().click()
       await comfyPage.nextFrame()
@@ -160,7 +162,7 @@ test.describe(
       await comfyPage.nextFrame()
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
-      ).toBeHidden()
+      ).not.toBeVisible()
     })
 
     test('closes More Options menu when clicking the button again (toggle)', async ({
@@ -189,7 +191,7 @@ test.describe(
 
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
-      ).toBeHidden()
+      ).not.toBeVisible()
     })
   }
 )

browser_tests/tests/sidebar/assets.spec.ts

@@ -192,7 +192,6 @@ test.describe('Assets sidebar - grid view display', () => {
     // Imported tab should show the mocked files
     await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
   })
-
   test('Displays svg outputs', async ({ comfyPage }) => {
     await comfyPage.assets.mockOutputHistory([
       createMockJob({
@@ -746,7 +745,7 @@ test.describe('Assets sidebar - delete confirmation', () => {
 
     await comfyPage.confirmDialog.delete.click()
 
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
     await expect(tab.assetCards).toHaveCount(initialCount - 1)
 
     const successToast = comfyPage.page.locator('.p-toast-message-success')
@@ -768,7 +767,7 @@ test.describe('Assets sidebar - delete confirmation', () => {
 
     await comfyPage.confirmDialog.reject.click()
 
-    await expect(dialog).toBeHidden()
+    await expect(dialog).not.toBeVisible()
     await expect(tab.assetCards).toHaveCount(initialCount)
   })
 })

browser_tests/tests/sidebar/modelLibrary.spec.ts

@@ -118,7 +118,7 @@ test.describe('Model library sidebar - search', () => {
     await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
 
     // Other models should not be visible
-    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeHidden()
+    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).not.toBeVisible()
   })
 
   test('Clearing search restores folder view', async ({ comfyPage }) => {

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -58,7 +58,7 @@ test.describe('Node library sidebar', () => {
 
     // Hover over a node to display the preview
     const nodeSelector = tab.nodeSelector('KSampler (Advanced)')
-    await comfyPage.page.locator(nodeSelector).hover()
+    await comfyPage.page.hover(nodeSelector)
 
     // Verify the preview is displayed
     await expect(tab.nodePreview).toBeVisible()
@@ -78,9 +78,9 @@ test.describe('Node library sidebar', () => {
       y: canvasBoundingBox.y + canvasBoundingBox.height / 2
     }
 
-    await comfyPage.page
-      .locator(nodeSelector)
-      .dragTo(comfyPage.page.locator(canvasSelector), { targetPosition })
+    await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector, {
+      targetPosition
+    })
     await comfyPage.nextFrame()
 
     // Verify the node is added to the canvas
@@ -102,9 +102,7 @@ test.describe('Node library sidebar', () => {
     await expect(tab.getNode('KSampler (Advanced)')).toHaveCount(2)
 
     // Hover on the bookmark node to display the preview
-    await comfyPage.page
-      .locator('.node-lib-bookmark-tree-explorer .tree-leaf')
-      .hover()
+    await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
     await expect(tab.nodePreview).toBeVisible()
   })
 
@@ -222,7 +220,6 @@ test.describe('Node library sidebar', () => {
       .click()
     await expectBookmarks(comfyPage, [])
   })
-
   test('Can customize icon', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
@@ -250,7 +247,6 @@ test.describe('Node library sidebar', () => {
       }
     })
   })
-
   // If color is left as default, it should not be saved
   test('Can customize icon (default field)', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -42,11 +42,11 @@ test.describe('Node library sidebar V2', () => {
   test('Search filters nodes in All tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.nodeLibraryTabV2
 
-    await expect(tab.getNode('KSampler (Advanced)')).toBeHidden()
+    await expect(tab.getNode('KSampler (Advanced)')).not.toBeVisible()
 
     await tab.searchInput.fill('KSampler')
     await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
-    await expect(tab.getNode('CLIPLoader')).toBeHidden()
+    await expect(tab.getNode('CLIPLoader')).not.toBeVisible()
   })
 
   test('Drag node to canvas adds it', async ({ comfyPage }) => {

browser_tests/tests/sidebar/workflowSearch.spec.ts

@@ -27,7 +27,9 @@ test.describe('Workflow sidebar - search', () => {
     await searchInput.fill('alpha')
 
     await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
-    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+    await expect(
+      findWorkflow(comfyPage.page, 'beta-workflow')
+    ).not.toBeVisible()
   })
 
   test('Clearing search restores all workflows', async ({ comfyPage }) => {
@@ -36,7 +38,9 @@ test.describe('Workflow sidebar - search', () => {
 
     const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
     await searchInput.fill('alpha')
-    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+    await expect(
+      findWorkflow(comfyPage.page, 'beta-workflow')
+    ).not.toBeVisible()
 
     await searchInput.fill('')
 
@@ -51,7 +55,11 @@ test.describe('Workflow sidebar - search', () => {
     const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
     await searchInput.fill('nonexistent_xyz')
 
-    await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeHidden()
-    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+    await expect(
+      findWorkflow(comfyPage.page, 'alpha-workflow')
+    ).not.toBeVisible()
+    await expect(
+      findWorkflow(comfyPage.page, 'beta-workflow')
+    ).not.toBeVisible()
   })
 })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -265,7 +265,7 @@ test.describe('Workflows sidebar', () => {
 
     // Dismiss the error overlay
     await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
-    await expect(errorOverlay).toBeHidden()
+    await expect(errorOverlay).not.toBeVisible()
 
     // Load blank workflow
     await comfyPage.menu.workflowsTab.open()
@@ -316,7 +316,7 @@ test.describe('Workflows sidebar', () => {
     await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
     await comfyPage.nextFrame()
     await comfyPage.contextMenu.clickMenuItem('Delete')
-    await expect(workflowsTab.getOpenedItem(filename)).toBeHidden()
+    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     await expect
       .poll(() => workflowsTab.getOpenedWorkflowNames())
       .toEqual(['*Unsaved Workflow'])
@@ -337,7 +337,7 @@ test.describe('Workflows sidebar', () => {
 
     await comfyPage.confirmDialog.click('delete')
 
-    await expect(workflowsTab.getOpenedItem(filename)).toBeHidden()
+    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     await expect
       .poll(() => workflowsTab.getOpenedWorkflowNames())
       .toEqual(['*Unsaved Workflow'])

browser_tests/tests/subgraph/subgraphDraftPositions.spec.ts

@@ -52,11 +52,11 @@ test.describe(
       await comfyPage.workflow.waitForDraftPersisted()
 
       // Reload the page (draft auto-loads with hash preserved)
-      await comfyPage.page.reload({ waitUntil: 'domcontentloaded' })
+      await comfyPage.page.reload({ waitUntil: 'networkidle' })
       await comfyPage.page.waitForFunction(
         () => window.app && window.app.extensionManager
       )
-      await comfyPage.page.locator('.p-blockui-mask').waitFor({
+      await comfyPage.page.waitForSelector('.p-blockui-mask', {
         state: 'hidden'
       })
       await comfyPage.nextFrame()

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -131,7 +131,7 @@ test.describe(
         const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
         await expect(enterButton).toBeVisible()
 
-        const nodeBody = subgraphVueNode.getByTestId('node-body-11')
+        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
         await expect(nodeBody).toBeVisible()
 
         const widgets = nodeBody.locator('.lg-node-widgets > div')
@@ -400,7 +400,7 @@ test.describe(
 
         await comfyPage.command.executeCommand('Comfy.QueuePrompt')
 
-        const nodeBody = subgraphVueNode.getByTestId('node-body-5')
+        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-5"]')
         await expect(nodeBody).toBeVisible()
         await expect(
           nodeBody.locator('.lg-node-widgets > div').first()

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -132,9 +132,7 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(RENAMED_INPUT_NAME)
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
       await comfyPage.page.keyboard.press('Enter')
 
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
@@ -155,12 +153,10 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
 
       await comfyPage.subgraph.doubleClickInputSlot(initialInputLabel!)
 
-      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
         state: 'visible'
       })
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(RENAMED_INPUT_NAME)
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
       await comfyPage.page.keyboard.press('Enter')
 
       // Force re-render
@@ -182,13 +178,11 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
 
       await comfyPage.subgraph.doubleClickOutputSlot(initialOutputLabel!)
 
-      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
         state: 'visible'
       })
       const renamedOutputName = 'renamed_output'
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(renamedOutputName)
+      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
       await comfyPage.page.keyboard.press('Enter')
 
       // Force re-render
@@ -215,13 +209,11 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
       await comfyPage.nextFrame()
 
-      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
         state: 'visible'
       })
       const rightClickRenamedName = 'right_click_renamed'
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(rightClickRenamedName)
+      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
       await comfyPage.page.keyboard.press('Enter')
 
       // Force re-render
@@ -278,9 +270,7 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
       const labelClickRenamedName = 'label_click_renamed'
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(labelClickRenamedName)
+      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
       await comfyPage.page.keyboard.press('Enter')
 
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
@@ -313,10 +303,8 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(RENAMED_SLOT_NAME)
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_SLOT_NAME)
       await comfyPage.page.keyboard.press('Enter')
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
@@ -344,10 +332,8 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
         RENAMED_SLOT_NAME
       )
 
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(SECOND_RENAMED_NAME)
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
       await comfyPage.page.keyboard.press('Enter')
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
@@ -380,10 +366,8 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill(RENAMED_SLOT_NAME)
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_SLOT_NAME)
       await comfyPage.page.keyboard.press('Enter')
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
@@ -450,8 +434,8 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill(RENAMED_LABEL)
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_LABEL)
       await comfyPage.page.keyboard.press('Enter')
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
 
@@ -549,10 +533,8 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
-      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
-      await comfyPage.page
-        .locator(SELECTORS.promptDialog)
-        .fill('my_custom_prompt')
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, 'my_custom_prompt')
       await comfyPage.page.keyboard.press('Enter')
       await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
 

browser_tests/tests/templates.spec.ts

@@ -40,7 +40,6 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
   // page.route(), and change checkTemplateFileExists to use browser-context
   // fetch (page.request.head bypasses Playwright routing).
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
-  // oxlint-disable-next-line playwright/no-skipped-test -- https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
   test.skip('should have all required thumbnail media for each template', async ({
     comfyPage
   }) => {
@@ -186,8 +185,8 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
     await comfyPage.templates.content.waitFor({ state: 'visible' })
 
-    const templateGrid = comfyPage.page.getByTestId(
-      'template-workflows-content'
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
     )
     const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
@@ -303,18 +302,20 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
 
       // Wait for cards to load
       await expect(
-        comfyPage.page.getByTestId('template-workflow-short-description')
+        comfyPage.page.locator(
+          '[data-testid="template-workflow-short-description"]'
+        )
       ).toBeVisible()
 
       // Verify all three cards with different descriptions are visible
-      const shortDescCard = comfyPage.page.getByTestId(
-        'template-workflow-short-description'
+      const shortDescCard = comfyPage.page.locator(
+        '[data-testid="template-workflow-short-description"]'
       )
-      const mediumDescCard = comfyPage.page.getByTestId(
-        'template-workflow-medium-description'
+      const mediumDescCard = comfyPage.page.locator(
+        '[data-testid="template-workflow-medium-description"]'
       )
-      const longDescCard = comfyPage.page.getByTestId(
-        'template-workflow-long-description'
+      const longDescCard = comfyPage.page.locator(
+        '[data-testid="template-workflow-long-description"]'
       )
 
       await expect(shortDescCard).toBeVisible()
@@ -332,8 +333,8 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       await expect(longDesc).toContainText('much longer description')
 
       // Verify grid layout maintains consistency
-      const templateGrid = comfyPage.page.getByTestId(
-        'template-workflows-content'
+      const templateGrid = comfyPage.page.locator(
+        '[data-testid="template-workflows-content"]'
       )
       await expect(templateGrid).toBeVisible()
       await expect(templateGrid).toHaveScreenshot(

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -64,9 +64,9 @@ test.describe('Workflow tabs', () => {
     await topbar.getTab(0).click({ button: 'right' })
 
     // Reka UI ContextMenuContent gets data-state="open" when active
-    const contextMenu = comfyPage.page
-      .getByRole('menu')
-      .and(comfyPage.page.locator('[data-state="open"]'))
+    const contextMenu = comfyPage.page.locator(
+      '[role="menu"][data-state="open"]'
+    )
     await expect(contextMenu).toBeVisible()
 
     await expect(
@@ -86,9 +86,9 @@ test.describe('Workflow tabs', () => {
     await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
 
     await topbar.getTab(1).click({ button: 'right' })
-    const contextMenu = comfyPage.page
-      .getByRole('menu')
-      .and(comfyPage.page.locator('[data-state="open"]'))
+    const contextMenu = comfyPage.page.locator(
+      '[role="menu"][data-state="open"]'
+    )
     await expect(contextMenu).toBeVisible()
 
     await contextMenu

browser_tests/tests/useSettingSearch.spec.ts

@@ -112,7 +112,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
     await dialog.open()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(dialog.root).toBeHidden()
+    await expect(dialog.root).not.toBeVisible()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -83,7 +83,7 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
     // Expect no warning toast to be shown
     await expect(
       comfyPage.page.getByText('Version Compatibility Warning')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 
   test('should persist dismissed state across sessions', async ({
@@ -121,6 +121,6 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
     // The same warning from same versions should not be shown to the user again
     await expect(
       comfyPage.page.getByText('Version Compatibility Warning')
-    ).toBeHidden()
+    ).not.toBeVisible()
   })
 })

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -143,7 +143,7 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, nodeTitle)
       await clickExactMenuItem(comfyPage, 'Unpin')
 
-      await expect(fixture.pinIndicator).toBeHidden()
+      await expect(fixture.pinIndicator).not.toBeVisible()
       await expect.poll(() => nodeRef.isPinned()).toBe(false)
     })
 
@@ -178,7 +178,7 @@ test.describe('Vue Node Context Menu', () => {
 
       await openContextMenu(comfyPage, 'KSampler')
       await clickExactMenuItem(comfyPage, 'Minimize Node')
-      await expect(fixture.body).toBeHidden()
+      await expect(fixture.body).not.toBeVisible()
 
       await openContextMenu(comfyPage, 'KSampler')
       await clickExactMenuItem(comfyPage, 'Expand Node')
@@ -194,7 +194,9 @@ test.describe('Vue Node Context Menu', () => {
       const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
       await expect(subgraphNode).toBeVisible()
 
-      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeHidden()
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('KSampler')
+      ).not.toBeVisible()
     })
   })
 
@@ -307,7 +309,9 @@ test.describe('Vue Node Context Menu', () => {
 
       const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
       await expect(subgraphNode).toBeVisible()
-      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeHidden()
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('KSampler')
+      ).not.toBeVisible()
 
       // Unpack the subgraph
       await openContextMenu(comfyPage, 'New Subgraph')
@@ -316,7 +320,7 @@ test.describe('Vue Node Context Menu', () => {
       await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeVisible()
       await expect(
         comfyPage.vueNodes.getNodeByTitle('New Subgraph')
-      ).toBeHidden()
+      ).not.toBeVisible()
     })
 
     test('should open properties panel via Edit Subgraph Widgets', async ({
@@ -429,7 +433,7 @@ test.describe('Vue Node Context Menu', () => {
 
       for (const title of nodeTitles) {
         const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-        await expect(fixture.pinIndicator).toBeHidden()
+        await expect(fixture.pinIndicator).not.toBeVisible()
       }
     })
 
@@ -470,8 +474,8 @@ test.describe('Vue Node Context Menu', () => {
       await openMultiNodeContextMenu(comfyPage, nodeTitles)
       await clickExactMenuItem(comfyPage, 'Minimize Node')
 
-      await expect(fixture1.body).toBeHidden()
-      await expect(fixture2.body).toBeHidden()
+      await expect(fixture1.body).not.toBeVisible()
+      await expect(fixture2.body).not.toBeVisible()
 
       await openMultiNodeContextMenu(comfyPage, nodeTitles)
       await clickExactMenuItem(comfyPage, 'Expand Node')

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -11,21 +11,16 @@ test.describe('Vue Node Moving', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  const getHeaderPos = async (
-    comfyPage: ComfyPage,
-    title: string
-  ): Promise<{ x: number; y: number; width: number; height: number }> => {
-    const box = await comfyPage.vueNodes
-      .getNodeByTitle(title)
-      .getByTestId('node-title')
-      .first()
+  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => {
+    const loadCheckpointHeaderPos = await comfyPage.page
+      .getByText('Load Checkpoint')
       .boundingBox()
-    if (!box) throw new Error(`${title} header not found`)
-    return box
-  }
 
-  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
-    getHeaderPos(comfyPage, 'Load Checkpoint')
+    if (!loadCheckpointHeaderPos)
+      throw new Error('Load Checkpoint header not found')
+
+    return loadCheckpointHeaderPos
+  }
 
   const expectPosChanged = async (pos1: Position, pos2: Position) => {
     const diffX = Math.abs(pos2.x - pos1.x)
@@ -34,16 +29,6 @@ test.describe('Vue Node Moving', () => {
     expect(diffY).toBeGreaterThan(0)
   }
 
-  const deltaBetween = (before: Position, after: Position) => ({
-    x: after.x - before.x,
-    y: after.y - before.y
-  })
-
-  const expectSameDelta = (a: Position, b: Position, tol = 2) => {
-    expect(Math.abs(a.x - b.x)).toBeLessThanOrEqual(tol)
-    expect(Math.abs(a.y - b.y)).toBeLessThanOrEqual(tol)
-  }
-
   test('should allow moving nodes by dragging', async ({ comfyPage }) => {
     const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
@@ -95,73 +80,6 @@ test.describe('Vue Node Moving', () => {
     await expectPosChanged(headerPos, afterPos)
   })
 
-  test('should move all selected nodes together when dragging one with Meta held', async ({
-    comfyPage
-  }) => {
-    const checkpointBefore = await getHeaderPos(comfyPage, 'Load Checkpoint')
-    const ksamplerBefore = await getHeaderPos(comfyPage, 'KSampler')
-    const latentBefore = await getHeaderPos(comfyPage, 'Empty Latent Image')
-
-    const dx = 120
-    const dy = 80
-
-    const clickNodeTitleWithMeta = async (title: string) => {
-      await comfyPage.vueNodes
-        .getNodeByTitle(title)
-        .getByTestId('node-title')
-        .first()
-        .click({ modifiers: ['Meta'] })
-    }
-
-    await comfyPage.page.keyboard.down('Meta')
-    try {
-      await clickNodeTitleWithMeta('Load Checkpoint')
-      await clickNodeTitleWithMeta('KSampler')
-      await clickNodeTitleWithMeta('Empty Latent Image')
-      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
-
-      // Re-fetch drag source after clicks in case the header reflowed.
-      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
-      const centerX = dragSrc.x + dragSrc.width / 2
-      const centerY = dragSrc.y + dragSrc.height / 2
-
-      await comfyPage.page.mouse.move(centerX, centerY)
-      await comfyPage.page.mouse.down()
-      await comfyPage.nextFrame()
-      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
-        steps: 20
-      })
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-    } finally {
-      await comfyPage.page.keyboard.up('Meta')
-      await comfyPage.nextFrame()
-    }
-
-    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
-
-    const checkpointAfter = await getHeaderPos(comfyPage, 'Load Checkpoint')
-    const ksamplerAfter = await getHeaderPos(comfyPage, 'KSampler')
-    const latentAfter = await getHeaderPos(comfyPage, 'Empty Latent Image')
-
-    // All three nodes should have moved together by the same delta.
-    // We don't assert the exact screen delta equals the dragged pixel delta,
-    // because canvas scaling and snap-to-grid can introduce offsets.
-    const checkpointDelta = deltaBetween(checkpointBefore, checkpointAfter)
-    const ksamplerDelta = deltaBetween(ksamplerBefore, ksamplerAfter)
-    const latentDelta = deltaBetween(latentBefore, latentAfter)
-
-    // Confirm an actual drag happened (not zero movement).
-    expect(Math.abs(checkpointDelta.x)).toBeGreaterThan(10)
-    expect(Math.abs(checkpointDelta.y)).toBeGreaterThan(10)
-
-    // Confirm all selected nodes moved by the same delta.
-    expectSameDelta(checkpointDelta, ksamplerDelta)
-    expectSameDelta(checkpointDelta, latentDelta)
-
-    await comfyPage.canvasOps.moveMouseToEmptyArea()
-  })
-
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/interactions/node/rename.spec.ts

@@ -50,6 +50,6 @@ test.describe('Vue Nodes Renaming', () => {
     const editingTitleInput = comfyPage.page.getByTestId(
       TestIds.node.titleInput
     )
-    await expect(editingTitleInput).toBeHidden()
+    await expect(editingTitleInput).not.toBeVisible()
   })
 })

browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts

@@ -30,7 +30,7 @@ test.describe('Vue Node Collapse', () => {
     await comfyPage.nextFrame()
 
     // Verify node content is hidden
-    await expect(body).toBeHidden()
+    await expect(body).not.toBeVisible()
     await expect
       .poll(async () => (await vueNode.boundingBox())?.height)
       .toBeLessThan(expandedBoundingBox.height)

browser_tests/tests/vueNodes/nodeStates/pin.spec.ts

@@ -24,7 +24,7 @@ test.describe('Vue Node Pin', () => {
     await expect(pinIndicator).toBeVisible()
 
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator).toBeHidden()
+    await expect(pinIndicator).not.toBeVisible()
   })
 
   test('should allow toggling pin on multiple selected nodes with hotkey', async ({
@@ -43,8 +43,8 @@ test.describe('Vue Node Pin', () => {
     await expect(pinIndicator2).toBeVisible()
 
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator1).toBeHidden()
-    await expect(pinIndicator2).toBeHidden()
+    await expect(pinIndicator1).not.toBeVisible()
+    await expect(pinIndicator2).not.toBeVisible()
   })
 
   test('should not allow dragging pinned nodes', async ({ comfyPage }) => {

browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts

@@ -43,8 +43,12 @@ test.describe('Advanced Widget Visibility', () => {
     await expect(node.getByLabel('height', { exact: true })).toBeVisible()
 
     // Advanced widgets should not be rendered
-    await expect(node.getByLabel('max_shift', { exact: true })).toBeHidden()
-    await expect(node.getByLabel('base_shift', { exact: true })).toBeHidden()
+    await expect(
+      node.getByLabel('max_shift', { exact: true })
+    ).not.toBeVisible()
+    await expect(
+      node.getByLabel('base_shift', { exact: true })
+    ).not.toBeVisible()
 
     // "Show advanced inputs" button should be present
     await expect(node.getByText('Show advanced inputs')).toBeVisible()
@@ -93,6 +97,6 @@ test.describe('Advanced Widget Visibility', () => {
     await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
 
     // The toggle button should not be shown when global setting is active
-    await expect(node.getByText('Show advanced inputs')).toBeHidden()
+    await expect(node.getByText('Show advanced inputs')).not.toBeVisible()
   })
 })

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -17,7 +17,7 @@ test.describe('Vue Upload Widgets', () => {
 
     await expect(
       comfyPage.page.getByText('choose file to upload', { exact: true })
-    ).toBeHidden()
+    ).not.toBeVisible()
 
     await expect
       .poll(() =>

browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts

@@ -46,14 +46,13 @@ test.describe('Vue Multiline String Widget', () => {
 
     await expect(textarea).toHaveValue('Keep me around')
   })
-
   test('should use native context menu when focused', async ({ comfyPage }) => {
     const textarea = getFirstMultilineStringWidget(comfyPage)
     const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
 
     await textarea.focus()
     await textarea.click({ button: 'right' })
-    await expect(vueContextMenu).toBeHidden()
+    await expect(vueContextMenu).not.toBeVisible()
     await textarea.blur()
 
     await textarea.click({ button: 'right' })

browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts

@@ -9,7 +9,6 @@ test.describe('Vue Widget Reactivity', () => {
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.vueNodes.waitForNodes()
   })
-
   test('Should display added widgets', async ({ comfyPage }) => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
@@ -33,7 +32,6 @@ test.describe('Vue Widget Reactivity', () => {
     })
     await expect(loadCheckpointNode).toHaveCount(4)
   })
-
   test('Should hide removed widgets', async ({ comfyPage }) => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-3"] > .lg-node-widgets > div'

browser_tests/tests/widget.spec.ts

@@ -272,7 +272,6 @@ test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
     // Expect the filename combo value to be updated
     await expect.poll(() => fileComboWidget.getValue()).toBe('image32x32.webp')
   })
-
   test('Displays buttons when viewing single image of batch', async ({
     comfyPage
   }) => {

browser_tests/tests/workflowTabThumbnail.spec.ts

@@ -83,7 +83,7 @@ test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
       1,
       'Unsaved Workflow (2)'
     )
-    await expect(thumbnailImg).toBeHidden()
+    await expect(thumbnailImg).not.toBeVisible()
   })
 
   async function addNode(comfyPage: ComfyPage, category: string, node: string) {

browser_tests/tests/zoomControls.spec.ts

@@ -135,6 +135,6 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     await zoomButton.click()
     await comfyPage.nextFrame()
 
-    await expect(zoomToFit).toBeHidden()
+    await expect(zoomToFit).not.toBeVisible()
   })
 })

docs/guidance/vitest.md

@@ -23,7 +23,7 @@ See `docs/testing/*.md` for detailed patterns.
 
 ## Component Testing
 
-- Use `@testing-library/vue` with `@testing-library/user-event` for component tests (an ESLint rule bans `@vue/test-utils` in new tests)
+- Use Vue Test Utils for component tests
 - Follow advice about making components easy to test
 - Wait for reactivity with `await nextTick()` after state changes
 

docs/testing/README.md

@@ -31,7 +31,7 @@ Our tests use the following frameworks and libraries:
 - [Vitest](https://vitest.dev/) - Test runner and assertion library
 - [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) - Preferred for user-centric component testing
 - [@testing-library/user-event](https://testing-library.com/docs/user-event/intro/) - Realistic user interaction simulation
-- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities (legacy; new tests must use @testing-library/vue)
+- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities (also accepted)
 - [Pinia](https://pinia.vuejs.org/cookbook/testing.html) - For store testing
 
 ## Getting Started

docs/testing/component-testing.md

@@ -1,7 +1,5 @@
 # Component Testing Guide
 
-> **Note**: New component tests must use `@testing-library/vue` with `@testing-library/user-event`. The examples below that use `@vue/test-utils` (`mount`, `wrapper`) are from legacy tests. An ESLint rule enforces this — importing from `@vue/test-utils` in `*.test.ts` files produces a lint error.
-
 This guide covers patterns and examples for testing Vue components in the ComfyUI Frontend codebase.
 
 ## Table of Contents

eslint.config.ts

@@ -432,23 +432,6 @@ export default defineConfig([
       ]
     }
   },
-  {
-    files: ['**/*.test.ts'],
-    rules: {
-      'no-restricted-imports': [
-        'error',
-        {
-          paths: [
-            {
-              name: '@vue/test-utils',
-              message:
-                'Use @testing-library/vue with @testing-library/user-event instead.'
-            }
-          ]
-        }
-      ]
-    }
-  },
   // Browser tests must use comfyPageFixture, not raw @playwright/test test
   {
     files: ['browser_tests/tests/**/*.spec.ts'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.44.2",
+  "version": "1.44.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -28,15 +28,15 @@
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
-    "lint:fix:no-cache": "oxlint src browser_tests --type-aware --fix && eslint src --fix",
-    "lint:fix": "oxlint src browser_tests --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src browser_tests --type-aware && eslint src",
+    "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
+    "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
+    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "pnpm stylelint && oxlint src browser_tests --type-aware && eslint src --cache",
+    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
-    "oxlint": "oxlint src browser_tests --type-aware",
+    "oxlint": "oxlint src --type-aware",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "storybook": "nx storybook",
@@ -150,6 +150,7 @@
     "@vitejs/plugin-vue": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
+    "@vue/test-utils": "catalog:",
     "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
@@ -158,7 +159,6 @@
     "eslint-plugin-better-tailwindcss": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
-    "eslint-plugin-playwright": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",

pnpm-lock.yaml

@@ -171,6 +171,9 @@ catalogs:
     '@vitest/ui':
       specifier: ^4.0.16
       version: 4.0.16
+    '@vue/test-utils':
+      specifier: ^2.4.6
+      version: 2.4.6
     '@vueuse/core':
       specifier: ^14.2.0
       version: 14.2.0
@@ -219,9 +222,6 @@ catalogs:
     eslint-plugin-oxlint:
       specifier: 1.59.0
       version: 1.59.0
-    eslint-plugin-playwright:
-      specifier: ^2.10.1
-      version: 2.10.1
     eslint-plugin-storybook:
       specifier: ^10.2.10
       version: 10.2.10
@@ -690,6 +690,9 @@ importers:
       '@vitest/ui':
         specifier: 'catalog:'
         version: 4.0.16(vitest@4.0.16)
+      '@vue/test-utils':
+        specifier: 'catalog:'
+        version: 2.4.6
       '@webgpu/types':
         specifier: 'catalog:'
         version: 0.1.66
@@ -714,9 +717,6 @@ importers:
       eslint-plugin-oxlint:
         specifier: 'catalog:'
         version: 1.59.0(oxlint@1.59.0(oxlint-tsgolint@0.20.0))
-      eslint-plugin-playwright:
-        specifier: 'catalog:'
-        version: 2.10.1(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-storybook:
         specifier: 'catalog:'
         version: 10.2.10(eslint@9.39.1(jiti@2.6.1))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
@@ -6144,12 +6144,6 @@ packages:
     peerDependencies:
       oxlint: ~1.59.0
 
-  eslint-plugin-playwright@2.10.1:
-    resolution: {integrity: sha512-qea3UxBOb8fTwJ77FMApZKvRye5DOluDHcev0LDJwID3RELeun0JlqzrNIXAB/SXCyB/AesCW/6sZfcT9q3Edg==}
-    engines: {node: '>=16.9.0'}
-    peerDependencies:
-      eslint: '>=8.40.0'
-
   eslint-plugin-storybook@10.2.10:
     resolution: {integrity: sha512-aWkoh2rhTaEsMA4yB1iVIcISM5wb0uffp09ZqhwpoD4GAngCs131uq6un+QdnOMc7vXyAnBBfsuhtOj8WwCUgw==}
     peerDependencies:
@@ -6569,10 +6563,6 @@ packages:
     resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
-  globals@17.4.0:
-    resolution: {integrity: sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==}
-    engines: {node: '>=18'}
-
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -15591,11 +15581,6 @@ snapshots:
       jsonc-parser: 3.3.1
       oxlint: 1.59.0(oxlint-tsgolint@0.20.0)
 
-  eslint-plugin-playwright@2.10.1(eslint@9.39.1(jiti@2.6.1)):
-    dependencies:
-      eslint: 9.39.1(jiti@2.6.1)
-      globals: 17.4.0
-
   eslint-plugin-storybook@10.2.10(eslint@9.39.1(jiti@2.6.1))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/utils': 8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
@@ -16107,8 +16092,6 @@ snapshots:
 
   globals@16.5.0: {}
 
-  globals@17.4.0: {}
-
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1

pnpm-workspace.yaml

@@ -31,12 +31,12 @@ catalog:
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
+  '@tanstack/vue-virtual': ^3.13.12
   '@storybook/addon-docs': ^10.2.10
   '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.2.10
   '@storybook/vue3-vite': ^10.2.10
   '@tailwindcss/vite': ^4.2.0
-  '@tanstack/vue-virtual': ^3.13.12
   '@testing-library/jest-dom': ^6.9.1
   '@testing-library/user-event': ^14.6.1
   '@testing-library/vue': ^8.1.0
@@ -58,6 +58,7 @@ catalog:
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
+  '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^14.2.0
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
@@ -74,7 +75,6 @@ catalog:
   eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.59.0
-  eslint-plugin-playwright: ^2.10.1
   eslint-plugin-storybook: ^10.2.10
   eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0

src/components/range/RangeEditor.test.ts

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/vue'
+import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -6,11 +6,8 @@ import RangeEditor from './RangeEditor.vue'
 
 const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
 
-function renderEditor(props: {
-  modelValue: { min: number; max: number; midpoint?: number }
-  [key: string]: unknown
-}) {
-  return render(RangeEditor, {
+function mountEditor(props: InstanceType<typeof RangeEditor>['$props']) {
+  return mount(RangeEditor, {
     props,
     global: { plugins: [i18n] }
   })
@@ -18,19 +15,20 @@ function renderEditor(props: {
 
 describe('RangeEditor', () => {
   it('renders with min and max handles', () => {
-    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
 
-    expect(screen.getByTestId('handle-min')).toBeDefined()
-    expect(screen.getByTestId('handle-max')).toBeDefined()
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="handle-min"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="handle-max"]').exists()).toBe(true)
   })
 
   it('highlights selected range in plain mode', () => {
-    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
 
-    const highlight = screen.getByTestId('range-highlight')
-    expect(highlight.getAttribute('x')).toBe('0.2')
+    const highlight = wrapper.find('[data-testid="range-highlight"]')
+    expect(highlight.attributes('x')).toBe('0.2')
     expect(
-      Number.parseFloat(highlight.getAttribute('width') ?? 'NaN')
+      Number.parseFloat(highlight.attributes('width') ?? 'NaN')
     ).toBeCloseTo(0.6, 6)
   })
 
@@ -39,37 +37,37 @@ describe('RangeEditor', () => {
     for (let i = 0; i < 256; i++)
       histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
 
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0.2, max: 0.8 },
       display: 'histogram',
       histogram
     })
 
-    const left = screen.getByTestId('range-dim-left')
-    const right = screen.getByTestId('range-dim-right')
-    expect(left.getAttribute('width')).toBe('0.2')
-    expect(right.getAttribute('x')).toBe('0.8')
+    const left = wrapper.find('[data-testid="range-dim-left"]')
+    const right = wrapper.find('[data-testid="range-dim-right"]')
+    expect(left.attributes('width')).toBe('0.2')
+    expect(right.attributes('x')).toBe('0.8')
   })
 
   it('hides midpoint handle by default', () => {
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0, max: 1, midpoint: 0.5 }
     })
 
-    expect(screen.queryByTestId('handle-midpoint')).toBeNull()
+    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(false)
   })
 
   it('shows midpoint handle when showMidpoint is true', () => {
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0, max: 1, midpoint: 0.5 },
       showMidpoint: true
     })
 
-    expect(screen.getByTestId('handle-midpoint')).toBeDefined()
+    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(true)
   })
 
   it('renders gradient background when display is gradient', () => {
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0, max: 1 },
       display: 'gradient',
       gradientStops: [
@@ -78,8 +76,8 @@ describe('RangeEditor', () => {
       ]
     })
 
-    expect(screen.getByTestId('gradient-bg')).toBeDefined()
-    expect(screen.getByTestId('gradient-def')).toBeDefined()
+    expect(wrapper.find('[data-testid="gradient-bg"]').exists()).toBe(true)
+    expect(wrapper.find('linearGradient').exists()).toBe(true)
   })
 
   it('renders histogram path when display is histogram with data', () => {
@@ -87,43 +85,47 @@ describe('RangeEditor', () => {
     for (let i = 0; i < 256; i++)
       histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
 
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0, max: 1 },
       display: 'histogram',
       histogram
     })
 
-    expect(screen.getByTestId('histogram-path')).toBeDefined()
+    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(true)
   })
 
   it('renders inputs for min and max', () => {
-    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
 
-    const inputs = screen.getAllByRole('textbox')
+    const inputs = wrapper.findAll('input')
     expect(inputs).toHaveLength(2)
   })
 
   it('renders midpoint input when showMidpoint is true', () => {
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 0, max: 1, midpoint: 0.5 },
       showMidpoint: true
     })
 
-    const inputs = screen.getAllByRole('textbox')
+    const inputs = wrapper.findAll('input')
     expect(inputs).toHaveLength(3)
   })
 
   it('normalizes handle positions with custom value range', () => {
-    renderEditor({
+    const wrapper = mountEditor({
       modelValue: { min: 64, max: 192 },
       valueMin: 0,
       valueMax: 255
     })
 
-    const minHandle = screen.getByTestId('handle-min')
-    const maxHandle = screen.getByTestId('handle-max')
+    const minHandle = wrapper.find('[data-testid="handle-min"]')
+    const maxHandle = wrapper.find('[data-testid="handle-max"]')
 
-    expect(Number.parseFloat(minHandle.style.left)).toBeCloseTo(25, 0)
-    expect(Number.parseFloat(maxHandle.style.left)).toBeCloseTo(75, 0)
+    expect(
+      Number.parseFloat((minHandle.element as HTMLElement).style.left)
+    ).toBeCloseTo(25, 0)
+    expect(
+      Number.parseFloat((maxHandle.element as HTMLElement).style.left)
+    ).toBeCloseTo(75, 0)
   })
 })

src/components/range/RangeEditor.vue

@@ -17,14 +17,7 @@
         "
       >
         <defs v-if="display === 'gradient'">
-          <linearGradient
-            :id="gradientId"
-            data-testid="gradient-def"
-            x1="0"
-            y1="0"
-            x2="1"
-            y2="0"
-          >
+          <linearGradient :id="gradientId" x1="0" y1="0" x2="1" y2="0">
             <stop
               v-for="(stop, i) in computedStops"
               :key="i"

src/composables/useReconnectingNotification.test.ts

@@ -1,138 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useReconnectingNotification } from '@/composables/useReconnectingNotification'
-
-const mockToastAdd = vi.fn()
-const mockToastRemove = vi.fn()
-
-vi.mock('primevue/usetoast', () => ({
-  useToast: () => ({
-    add: mockToastAdd,
-    remove: mockToastRemove
-  })
-}))
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  })
-}))
-
-const settingMocks = vi.hoisted(() => ({
-  disableToast: false
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: vi.fn(() => ({
-    get: vi.fn((key: string) => {
-      if (key === 'Comfy.Toast.DisableReconnectingToast')
-        return settingMocks.disableToast
-      return undefined
-    })
-  }))
-}))
-
-describe('useReconnectingNotification', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    vi.useFakeTimers()
-    vi.clearAllMocks()
-    settingMocks.disableToast = false
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('does not show toast immediately on reconnecting', () => {
-    const { onReconnecting } = useReconnectingNotification()
-
-    onReconnecting()
-
-    expect(mockToastAdd).not.toHaveBeenCalled()
-  })
-
-  it('shows error toast after delay', () => {
-    const { onReconnecting } = useReconnectingNotification()
-
-    onReconnecting()
-    vi.advanceTimersByTime(1500)
-
-    expect(mockToastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({
-        severity: 'error',
-        summary: 'g.reconnecting'
-      })
-    )
-  })
-
-  it('suppresses toast when reconnected before delay expires', () => {
-    const { onReconnecting, onReconnected } = useReconnectingNotification()
-
-    onReconnecting()
-    vi.advanceTimersByTime(500)
-    onReconnected()
-    vi.advanceTimersByTime(1500)
-
-    expect(mockToastAdd).not.toHaveBeenCalled()
-    expect(mockToastRemove).not.toHaveBeenCalled()
-  })
-
-  it('removes toast and shows success when reconnected after delay', () => {
-    const { onReconnecting, onReconnected } = useReconnectingNotification()
-
-    onReconnecting()
-    vi.advanceTimersByTime(1500)
-    mockToastAdd.mockClear()
-
-    onReconnected()
-
-    expect(mockToastRemove).toHaveBeenCalledWith(
-      expect.objectContaining({
-        severity: 'error',
-        summary: 'g.reconnecting'
-      })
-    )
-    expect(mockToastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({
-        severity: 'success',
-        summary: 'g.reconnected',
-        life: 2000
-      })
-    )
-  })
-
-  it('does nothing when toast is disabled via setting', () => {
-    settingMocks.disableToast = true
-    const { onReconnecting, onReconnected } = useReconnectingNotification()
-
-    onReconnecting()
-    vi.advanceTimersByTime(1500)
-    onReconnected()
-
-    expect(mockToastAdd).not.toHaveBeenCalled()
-    expect(mockToastRemove).not.toHaveBeenCalled()
-  })
-
-  it('does nothing when onReconnected is called without prior onReconnecting', () => {
-    const { onReconnected } = useReconnectingNotification()
-
-    onReconnected()
-
-    expect(mockToastAdd).not.toHaveBeenCalled()
-    expect(mockToastRemove).not.toHaveBeenCalled()
-  })
-
-  it('handles multiple reconnecting events without duplicating toasts', () => {
-    const { onReconnecting } = useReconnectingNotification()
-
-    onReconnecting()
-    vi.advanceTimersByTime(1500) // first toast fires
-    onReconnecting() // second reconnecting event
-    vi.advanceTimersByTime(1500) // second toast fires
-
-    expect(mockToastAdd).toHaveBeenCalledTimes(2)
-  })
-})

src/composables/useReconnectingNotification.ts

@@ -1,52 +0,0 @@
-import { useTimeoutFn } from '@vueuse/core'
-import type { ToastMessageOptions } from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-
-const RECONNECT_TOAST_DELAY_MS = 1500
-
-export function useReconnectingNotification() {
-  const { t } = useI18n()
-  const toast = useToast()
-  const settingStore = useSettingStore()
-
-  const reconnectingMessage: ToastMessageOptions = {
-    severity: 'error',
-    summary: t('g.reconnecting')
-  }
-
-  const reconnectingToastShown = ref(false)
-
-  const { start, stop } = useTimeoutFn(
-    () => {
-      toast.add(reconnectingMessage)
-      reconnectingToastShown.value = true
-    },
-    RECONNECT_TOAST_DELAY_MS,
-    { immediate: false }
-  )
-
-  function onReconnecting() {
-    if (settingStore.get('Comfy.Toast.DisableReconnectingToast')) return
-    start()
-  }
-
-  function onReconnected() {
-    stop()
-
-    if (reconnectingToastShown.value) {
-      toast.remove(reconnectingMessage)
-      toast.add({
-        severity: 'success',
-        summary: t('g.reconnected'),
-        life: 2000
-      })
-      reconnectingToastShown.value = false
-    }
-  }
-
-  return { onReconnecting, onReconnected }
-}

src/extensions/core/load3d/Load3d.test.ts

@@ -0,0 +1,926 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Mock all sub-managers as classes (vi.fn().mockImplementation won't work as constructors)
+vi.mock('./SceneManager', () => {
+  class MockSceneManager {
+    scene = { add: vi.fn(), remove: vi.fn(), traverse: vi.fn(), clear: vi.fn() }
+    gridHelper = { visible: true, position: { set: vi.fn() } }
+    backgroundTexture = null
+    backgroundMesh = null
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    toggleGrid = vi.fn()
+    setBackgroundColor = vi.fn()
+    setBackgroundImage = vi.fn().mockResolvedValue(undefined)
+    removeBackgroundImage = vi.fn()
+    setBackgroundRenderMode = vi.fn()
+    handleResize = vi.fn()
+    renderBackground = vi.fn()
+    captureScene = vi.fn().mockResolvedValue({
+      scene: 'data:scene',
+      mask: 'data:mask',
+      normal: 'data:normal'
+    })
+    updateBackgroundSize = vi.fn()
+  }
+  return { SceneManager: MockSceneManager }
+})
+
+vi.mock('./CameraManager', () => {
+  class MockCameraManager {
+    activeCamera = {
+      position: {
+        set: vi.fn(),
+        clone: vi.fn().mockReturnValue({ x: 0, y: 0, z: 0 }),
+        copy: vi.fn()
+      },
+      rotation: { clone: vi.fn(), copy: vi.fn() },
+      zoom: 1
+    }
+    perspectiveCamera = {
+      position: {
+        set: vi.fn(),
+        clone: vi.fn().mockReturnValue({ x: 0, y: 0, z: 0 }),
+        copy: vi.fn()
+      },
+      lookAt: vi.fn(),
+      updateProjectionMatrix: vi.fn(),
+      aspect: 1,
+      fov: 35
+    }
+    orthographicCamera = {
+      position: { set: vi.fn(), clone: vi.fn(), copy: vi.fn() }
+    }
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    setControls = vi.fn()
+    getCurrentCameraType = vi.fn().mockReturnValue('perspective')
+    toggleCamera = vi.fn()
+    setFOV = vi.fn()
+    setCameraState = vi.fn()
+    getCameraState = vi.fn().mockReturnValue({
+      position: { x: 10, y: 10, z: 10 },
+      target: { x: 0, y: 0, z: 0 },
+      zoom: 1,
+      cameraType: 'perspective'
+    })
+    handleResize = vi.fn()
+    updateAspectRatio = vi.fn()
+    setupForModel = vi.fn()
+  }
+  return { CameraManager: MockCameraManager }
+})
+
+vi.mock('./ControlsManager', () => {
+  class MockControlsManager {
+    controls = {
+      target: {
+        set: vi.fn(),
+        clone: vi.fn().mockReturnValue({ x: 0, y: 0, z: 0 }),
+        copy: vi.fn()
+      },
+      update: vi.fn(),
+      dispose: vi.fn(),
+      object: {}
+    }
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    update = vi.fn()
+    updateCamera = vi.fn()
+  }
+  return { ControlsManager: MockControlsManager }
+})
+
+vi.mock('./LightingManager', () => {
+  class MockLightingManager {
+    lights: never[] = []
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    setLightIntensity = vi.fn()
+  }
+  return { LightingManager: MockLightingManager }
+})
+
+vi.mock('./ViewHelperManager', () => {
+  class MockViewHelperManager {
+    viewHelper = {
+      render: vi.fn(),
+      update: vi.fn(),
+      dispose: vi.fn(),
+      animating: false,
+      visible: true,
+      center: null
+    }
+    viewHelperContainer = document.createElement('div')
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    createViewHelper = vi.fn()
+    update = vi.fn()
+    handleResize = vi.fn()
+    visibleViewHelper = vi.fn()
+    recreateViewHelper = vi.fn()
+  }
+  return { ViewHelperManager: MockViewHelperManager }
+})
+
+vi.mock('./LoaderManager', () => {
+  class MockLoaderManager {
+    init = vi.fn()
+    dispose = vi.fn()
+    loadModel = vi.fn().mockResolvedValue(undefined)
+  }
+  return { LoaderManager: MockLoaderManager }
+})
+
+vi.mock('./SceneModelManager', () => {
+  class MockSceneModelManager {
+    currentModel = null
+    originalModel = null
+    originalFileName: string | null = null
+    originalURL: string | null = null
+    originalRotation = null
+    currentUpDirection = 'original'
+    materialMode = 'original'
+    showSkeleton = false
+    originalMaterials = new WeakMap()
+    normalMaterial = {}
+    standardMaterial = {}
+    wireframeMaterial = {}
+    depthMaterial = {}
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    clearModel = vi.fn()
+    setupModel = vi.fn()
+    addModelToScene = vi.fn()
+    setOriginalModel = vi.fn()
+    setUpDirection = vi.fn()
+    setMaterialMode = vi.fn()
+    setupModelMaterials = vi.fn()
+    hasSkeleton = vi.fn().mockReturnValue(false)
+    setShowSkeleton = vi.fn()
+    containsSplatMesh = vi.fn().mockReturnValue(false)
+  }
+  return { SceneModelManager: MockSceneModelManager }
+})
+
+vi.mock('./RecordingManager', () => {
+  class MockRecordingManager {
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    startRecording = vi.fn().mockResolvedValue(undefined)
+    stopRecording = vi.fn()
+    getIsRecording = vi.fn().mockReturnValue(false)
+    getRecordingDuration = vi.fn().mockReturnValue(0)
+    getRecordingData = vi.fn().mockReturnValue(null)
+    exportRecording = vi.fn()
+    clearRecording = vi.fn()
+  }
+  return { RecordingManager: MockRecordingManager }
+})
+
+vi.mock('./AnimationManager', () => {
+  class MockAnimationManager {
+    animationClips: never[] = []
+    animationActions: never[] = []
+    isAnimationPlaying = false
+    currentAnimation = null
+    selectedAnimationIndex = 0
+    animationSpeed = 1.0
+    init = vi.fn()
+    dispose = vi.fn()
+    reset = vi.fn()
+    update = vi.fn()
+    setupModelAnimations = vi.fn()
+    setAnimationSpeed = vi.fn()
+    updateSelectedAnimation = vi.fn()
+    toggleAnimation = vi.fn()
+    getAnimationTime = vi.fn().mockReturnValue(0)
+    getAnimationDuration = vi.fn().mockReturnValue(0)
+    setAnimationTime = vi.fn()
+  }
+  return { AnimationManager: MockAnimationManager }
+})
+
+vi.mock('./ModelExporter', () => ({
+  ModelExporter: {
+    exportGLB: vi.fn().mockResolvedValue(undefined),
+    exportOBJ: vi.fn().mockResolvedValue(undefined),
+    exportSTL: vi.fn().mockResolvedValue(undefined)
+  }
+}))
+
+// Mock THREE.js — only the parts Load3d itself uses directly
+vi.mock('three', () => {
+  const mockDomElement = document.createElement('canvas')
+  Object.defineProperty(mockDomElement, 'clientWidth', {
+    value: 800,
+    configurable: true
+  })
+  Object.defineProperty(mockDomElement, 'clientHeight', {
+    value: 600,
+    configurable: true
+  })
+
+  class MockWebGLRenderer {
+    domElement = mockDomElement
+    autoClear = false
+    outputColorSpace = ''
+    toneMapping = 0
+    toneMappingExposure = 1
+    setSize = vi.fn()
+    setClearColor = vi.fn()
+    getClearColor = vi.fn()
+    getClearAlpha = vi.fn().mockReturnValue(1)
+    setViewport = vi.fn()
+    setScissor = vi.fn()
+    setScissorTest = vi.fn()
+    clear = vi.fn()
+    render = vi.fn()
+    dispose = vi.fn()
+    forceContextLoss = vi.fn()
+  }
+
+  class MockClock {
+    getDelta = vi.fn().mockReturnValue(0.016)
+  }
+
+  class MockVector3 {
+    x: number
+    y: number
+    z: number
+    constructor(x = 0, y = 0, z = 0) {
+      this.x = x
+      this.y = y
+      this.z = z
+    }
+    clone() {
+      return new MockVector3(this.x, this.y, this.z)
+    }
+    copy(v: MockVector3) {
+      this.x = v.x
+      this.y = v.y
+      this.z = v.z
+      return this
+    }
+    set(x: number, y: number, z: number) {
+      this.x = x
+      this.y = y
+      this.z = z
+      return this
+    }
+  }
+
+  class MockBox3 {
+    min = new MockVector3()
+    setFromObject() {
+      return this
+    }
+    getSize(v: MockVector3) {
+      v.x = 1
+      v.y = 1
+      v.z = 1
+      return v
+    }
+    getCenter(v: MockVector3) {
+      v.x = 0
+      v.y = 0
+      v.z = 0
+      return v
+    }
+  }
+
+  return {
+    WebGLRenderer: MockWebGLRenderer,
+    Clock: MockClock,
+    Vector3: MockVector3,
+    Box3: MockBox3,
+    SRGBColorSpace: 'srgb',
+    // Needed by sub-manager mocks at import time
+    Scene: vi.fn(),
+    PerspectiveCamera: vi.fn(),
+    OrthographicCamera: vi.fn(),
+    GridHelper: vi.fn(),
+    Color: vi.fn(),
+    BufferGeometry: vi.fn()
+  }
+})
+
+vi.mock('three/examples/jsm/controls/OrbitControls', () => ({
+  OrbitControls: vi.fn()
+}))
+
+vi.mock('three/examples/jsm/helpers/ViewHelper', () => ({
+  ViewHelper: vi.fn()
+}))
+
+// Indirect dependencies pulled in by mocked modules
+vi.mock('@/i18n', () => ({ t: vi.fn((key: string) => key) }))
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn().mockReturnValue({ get: vi.fn() })
+}))
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn().mockReturnValue({ addAlert: vi.fn() })
+}))
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn(),
+    apiURL: vi.fn((p: string) => p),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+vi.mock('@/scripts/app', () => ({
+  app: { getRandParam: vi.fn().mockReturnValue('&rand=1'), canvas: null }
+}))
+vi.mock('@/scripts/metadata/ply', () => ({
+  isPLYAsciiFormat: vi.fn().mockReturnValue(false)
+}))
+vi.mock('@/base/common/downloadUtil', () => ({ downloadBlob: vi.fn() }))
+
+import * as THREE from 'three'
+
+import Load3d from './Load3d'
+import type { CameraState } from './interfaces'
+
+function createContainer(): HTMLDivElement {
+  const el = document.createElement('div')
+  Object.defineProperty(el, 'clientWidth', { value: 800 })
+  Object.defineProperty(el, 'clientHeight', { value: 600 })
+  document.body.appendChild(el)
+  return el
+}
+
+describe('Load3d', () => {
+  let load3d: Load3d
+  let container: HTMLDivElement
+
+  // Extra instances created in tests — tracked for cleanup
+  const extraInstances: Load3d[] = []
+
+  function createInstance(
+    options?: ConstructorParameters<typeof Load3d>[1]
+  ): Load3d {
+    const instance = new Load3d(container, options)
+    vi.advanceTimersByTime(150)
+    extraInstances.push(instance)
+    return instance
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    container = createContainer()
+    load3d = new Load3d(container)
+    vi.advanceTimersByTime(150)
+  })
+
+  afterEach(() => {
+    extraInstances.forEach((i) => i.remove())
+    extraInstances.length = 0
+    vi.useRealTimers()
+    load3d.remove()
+    container.remove()
+  })
+
+  describe('constructor', () => {
+    it('appends the renderer canvas to the container', () => {
+      expect(container.querySelector('canvas')).not.toBeNull()
+    })
+
+    it('sets target dimensions from options', () => {
+      const sized = createInstance({ width: 1024, height: 768 })
+      expect(sized.targetWidth).toBe(1024)
+      expect(sized.targetHeight).toBe(768)
+      expect(sized.targetAspectRatio).toBeCloseTo(1024 / 768)
+    })
+
+    it('sets viewer mode from options', () => {
+      const viewer = createInstance({ isViewerMode: true })
+      expect(viewer.isViewerMode).toBe(true)
+    })
+  })
+
+  describe('isActive', () => {
+    it('returns false when no activity flags are set and initial render is done', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      load3d.STATUS_MOUSE_ON_NODE = false
+      load3d.STATUS_MOUSE_ON_SCENE = false
+      load3d.STATUS_MOUSE_ON_VIEWER = false
+      expect(load3d.isActive()).toBe(false)
+    })
+
+    it('returns true when mouse is on node', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      load3d.STATUS_MOUSE_ON_NODE = true
+      expect(load3d.isActive()).toBe(true)
+    })
+
+    it('returns true when mouse is on scene', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      load3d.STATUS_MOUSE_ON_SCENE = true
+      expect(load3d.isActive()).toBe(true)
+    })
+
+    it('returns true when mouse is on viewer', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      load3d.STATUS_MOUSE_ON_VIEWER = true
+      expect(load3d.isActive()).toBe(true)
+    })
+
+    it('returns true before initial render is done', () => {
+      load3d.INITIAL_RENDER_DONE = false
+      expect(load3d.isActive()).toBe(true)
+    })
+
+    it('returns true when animation is playing', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      load3d.animationManager.isAnimationPlaying = true
+      expect(load3d.isActive()).toBe(true)
+    })
+
+    it('returns true when recording is active', () => {
+      load3d.INITIAL_RENDER_DONE = true
+      vi.mocked(load3d.recordingManager.getIsRecording).mockReturnValue(true)
+      expect(load3d.isActive()).toBe(true)
+    })
+  })
+
+  describe('getTargetSize / setTargetSize', () => {
+    it('returns current target dimensions', () => {
+      load3d.setTargetSize(640, 480)
+      expect(load3d.getTargetSize()).toEqual({ width: 640, height: 480 })
+    })
+
+    it('updates aspect ratio', () => {
+      load3d.setTargetSize(1920, 1080)
+      expect(load3d.targetAspectRatio).toBeCloseTo(1920 / 1080)
+    })
+  })
+
+  describe('addEventListener / removeEventListener', () => {
+    it('delegates to eventManager', () => {
+      const callback = vi.fn()
+      load3d.addEventListener('test', callback)
+      load3d.eventManager.emitEvent('test', 'payload')
+      expect(callback).toHaveBeenCalledWith('payload')
+
+      load3d.removeEventListener('test', callback)
+      load3d.eventManager.emitEvent('test', 'payload2')
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('scene delegation', () => {
+    it('toggleGrid delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.toggleGrid(false)
+      expect(load3d.sceneManager.toggleGrid).toHaveBeenCalledWith(false)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('setBackgroundColor delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setBackgroundColor('#ff0000')
+      expect(load3d.sceneManager.setBackgroundColor).toHaveBeenCalledWith(
+        '#ff0000'
+      )
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('setBackgroundRenderMode delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setBackgroundRenderMode('panorama')
+      expect(load3d.sceneManager.setBackgroundRenderMode).toHaveBeenCalledWith(
+        'panorama'
+      )
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('removeBackgroundImage delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.removeBackgroundImage()
+      expect(load3d.sceneManager.removeBackgroundImage).toHaveBeenCalled()
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('captureScene delegates to sceneManager', () => {
+      load3d.captureScene(512, 512)
+      expect(load3d.sceneManager.captureScene).toHaveBeenCalledWith(512, 512)
+    })
+  })
+
+  describe('camera delegation', () => {
+    it('toggleCamera delegates and updates controls and viewHelper', () => {
+      load3d.toggleCamera('orthographic')
+      expect(load3d.cameraManager.toggleCamera).toHaveBeenCalledWith(
+        'orthographic'
+      )
+      expect(load3d.controlsManager.updateCamera).toHaveBeenCalled()
+      expect(load3d.viewHelperManager.recreateViewHelper).toHaveBeenCalled()
+    })
+
+    it('getCurrentCameraType delegates', () => {
+      load3d.getCurrentCameraType()
+      expect(load3d.cameraManager.getCurrentCameraType).toHaveBeenCalled()
+    })
+
+    it('setFOV delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setFOV(60)
+      expect(load3d.cameraManager.setFOV).toHaveBeenCalledWith(60)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('setCameraState delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      const state: CameraState = {
+        position: new THREE.Vector3(1, 2, 3),
+        target: new THREE.Vector3(0, 0, 0),
+        zoom: 1,
+        cameraType: 'perspective'
+      }
+      load3d.setCameraState(state)
+      expect(load3d.cameraManager.setCameraState).toHaveBeenCalledWith(state)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('getCameraState delegates', () => {
+      load3d.getCameraState()
+      expect(load3d.cameraManager.getCameraState).toHaveBeenCalled()
+    })
+  })
+
+  describe('model delegation', () => {
+    it('setMaterialMode delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setMaterialMode('wireframe')
+      expect(load3d.modelManager.setMaterialMode).toHaveBeenCalledWith(
+        'wireframe'
+      )
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('setUpDirection delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setUpDirection('+z')
+      expect(load3d.modelManager.setUpDirection).toHaveBeenCalledWith('+z')
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('getCurrentModel returns modelManager.currentModel', () => {
+      expect(load3d.getCurrentModel()).toBeNull()
+    })
+
+    it('isSplatModel delegates to modelManager', () => {
+      load3d.isSplatModel()
+      expect(load3d.modelManager.containsSplatMesh).toHaveBeenCalled()
+    })
+  })
+
+  describe('lighting delegation', () => {
+    it('setLightIntensity delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setLightIntensity(5)
+      expect(load3d.lightingManager.setLightIntensity).toHaveBeenCalledWith(5)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('clearModel', () => {
+    it('disposes animations and clears model, then renders', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.clearModel()
+      expect(load3d.animationManager.dispose).toHaveBeenCalled()
+      expect(load3d.modelManager.clearModel).toHaveBeenCalled()
+      expect(renderSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('animation methods', () => {
+    it('hasAnimations returns false when empty', () => {
+      expect(load3d.hasAnimations()).toBe(false)
+    })
+
+    it('hasAnimations returns true when clips exist', () => {
+      load3d.animationManager.animationClips = [
+        { name: 'clip' } as THREE.AnimationClip
+      ]
+      expect(load3d.hasAnimations()).toBe(true)
+    })
+
+    it('setAnimationSpeed delegates', () => {
+      load3d.setAnimationSpeed(2.0)
+      expect(load3d.animationManager.setAnimationSpeed).toHaveBeenCalledWith(
+        2.0
+      )
+    })
+
+    it('updateSelectedAnimation delegates', () => {
+      load3d.updateSelectedAnimation(1)
+      expect(
+        load3d.animationManager.updateSelectedAnimation
+      ).toHaveBeenCalledWith(1)
+    })
+
+    it('toggleAnimation delegates', () => {
+      load3d.toggleAnimation(true)
+      expect(load3d.animationManager.toggleAnimation).toHaveBeenCalledWith(true)
+    })
+
+    it('getAnimationTime delegates', () => {
+      load3d.getAnimationTime()
+      expect(load3d.animationManager.getAnimationTime).toHaveBeenCalled()
+    })
+
+    it('getAnimationDuration delegates', () => {
+      load3d.getAnimationDuration()
+      expect(load3d.animationManager.getAnimationDuration).toHaveBeenCalled()
+    })
+
+    it('setAnimationTime delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setAnimationTime(0.5)
+      expect(load3d.animationManager.setAnimationTime).toHaveBeenCalledWith(0.5)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('recording methods', () => {
+    it('isRecording delegates', () => {
+      load3d.isRecording()
+      expect(load3d.recordingManager.getIsRecording).toHaveBeenCalled()
+    })
+
+    it('getRecordingDuration delegates', () => {
+      load3d.getRecordingDuration()
+      expect(load3d.recordingManager.getRecordingDuration).toHaveBeenCalled()
+    })
+
+    it('getRecordingData delegates', () => {
+      load3d.getRecordingData()
+      expect(load3d.recordingManager.getRecordingData).toHaveBeenCalled()
+    })
+
+    it('exportRecording delegates', () => {
+      load3d.exportRecording('test.mp4')
+      expect(load3d.recordingManager.exportRecording).toHaveBeenCalledWith(
+        'test.mp4'
+      )
+    })
+
+    it('clearRecording delegates', () => {
+      load3d.clearRecording()
+      expect(load3d.recordingManager.clearRecording).toHaveBeenCalled()
+    })
+
+    it('startRecording hides view helper and delegates', async () => {
+      await load3d.startRecording()
+      expect(load3d.viewHelperManager.visibleViewHelper).toHaveBeenCalledWith(
+        false
+      )
+      expect(load3d.recordingManager.startRecording).toHaveBeenCalled()
+    })
+
+    it('stopRecording shows view helper and emits event', () => {
+      const emitSpy = vi.spyOn(load3d.eventManager, 'emitEvent')
+      load3d.stopRecording()
+      expect(load3d.viewHelperManager.visibleViewHelper).toHaveBeenCalledWith(
+        true
+      )
+      expect(load3d.recordingManager.stopRecording).toHaveBeenCalled()
+      expect(emitSpy).toHaveBeenCalledWith('recordingStatusChange', false)
+    })
+  })
+
+  describe('skeleton methods', () => {
+    it('hasSkeleton delegates', () => {
+      load3d.hasSkeleton()
+      expect(load3d.modelManager.hasSkeleton).toHaveBeenCalled()
+    })
+
+    it('setShowSkeleton delegates and forces render', () => {
+      const renderSpy = vi.spyOn(load3d, 'forceRender')
+      load3d.setShowSkeleton(true)
+      expect(load3d.modelManager.setShowSkeleton).toHaveBeenCalledWith(true)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('getShowSkeleton reads modelManager state', () => {
+      load3d.modelManager.showSkeleton = true
+      expect(load3d.getShowSkeleton()).toBe(true)
+    })
+  })
+
+  describe('exportModel', () => {
+    it('throws when no model is loaded', async () => {
+      load3d.modelManager.currentModel = null
+      await expect(load3d.exportModel('glb')).rejects.toThrow(
+        'No model to export'
+      )
+    })
+
+    it('throws for unsupported format', async () => {
+      load3d.modelManager.currentModel = {
+        clone: vi.fn().mockReturnValue({})
+      } as unknown as THREE.Object3D
+      load3d.modelManager.originalFileName = 'test'
+      const promise = load3d.exportModel('xyz')
+      // exportModel uses setTimeout(resolve, 10) internally
+      vi.advanceTimersByTime(50)
+      await expect(promise).rejects.toThrow('Unsupported export format: xyz')
+    })
+
+    it('calls correct exporter and emits loading events for glb', async () => {
+      load3d.modelManager.currentModel = {
+        clone: vi.fn().mockReturnValue({})
+      } as unknown as THREE.Object3D
+      load3d.modelManager.originalFileName = 'test'
+
+      const { ModelExporter } = await import('./ModelExporter')
+      const emitSpy = vi.spyOn(load3d.eventManager, 'emitEvent')
+      const promise = load3d.exportModel('glb')
+      await vi.advanceTimersByTimeAsync(50)
+      await promise
+
+      expect(ModelExporter.exportGLB).toHaveBeenCalled()
+      expect(emitSpy).toHaveBeenCalledWith(
+        'exportLoadingStart',
+        'Exporting as GLB...'
+      )
+      expect(emitSpy).toHaveBeenCalledWith('exportLoadingEnd', null)
+    })
+  })
+
+  describe('loadModel', () => {
+    it('resets managers and delegates to loaderManager', async () => {
+      await load3d.loadModel('http://example.com/model.glb', 'model.glb')
+
+      expect(load3d.cameraManager.reset).toHaveBeenCalled()
+      expect(load3d.controlsManager.reset).toHaveBeenCalled()
+      expect(load3d.modelManager.clearModel).toHaveBeenCalled()
+      expect(load3d.animationManager.dispose).toHaveBeenCalled()
+      expect(load3d.loaderManager.loadModel).toHaveBeenCalledWith(
+        'http://example.com/model.glb',
+        'model.glb'
+      )
+    })
+
+    it('sets up animations when model has been loaded', async () => {
+      const mockModel = {} as unknown as THREE.Object3D
+      load3d.modelManager.currentModel = mockModel
+      load3d.modelManager.originalModel = {} as unknown as THREE.Object3D
+
+      await load3d.loadModel('http://example.com/model.glb', 'model.glb')
+
+      expect(load3d.animationManager.setupModelAnimations).toHaveBeenCalledWith(
+        mockModel,
+        load3d.modelManager.originalModel
+      )
+    })
+
+    it('serializes concurrent loadModel calls', async () => {
+      let resolveFirst!: () => void
+      const firstPromise = new Promise<void>((r) => {
+        resolveFirst = r
+      })
+      vi.mocked(load3d.loaderManager.loadModel)
+        .mockImplementationOnce(() => firstPromise)
+        .mockResolvedValueOnce(undefined)
+
+      const p1 = load3d.loadModel('url1')
+      const p2 = load3d.loadModel('url2')
+
+      resolveFirst()
+      await p1
+      await p2
+
+      expect(load3d.loaderManager.loadModel).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('captureThumbnail', () => {
+    it('throws when no model is loaded', async () => {
+      load3d.modelManager.currentModel = null
+      await expect(load3d.captureThumbnail()).rejects.toThrow(
+        'No model loaded for thumbnail capture'
+      )
+    })
+  })
+
+  describe('remove', () => {
+    it('disposes all managers and renderer', () => {
+      load3d.remove()
+
+      expect(load3d.sceneManager.dispose).toHaveBeenCalled()
+      expect(load3d.cameraManager.dispose).toHaveBeenCalled()
+      expect(load3d.controlsManager.dispose).toHaveBeenCalled()
+      expect(load3d.lightingManager.dispose).toHaveBeenCalled()
+      expect(load3d.viewHelperManager.dispose).toHaveBeenCalled()
+      expect(load3d.loaderManager.dispose).toHaveBeenCalled()
+      expect(load3d.modelManager.dispose).toHaveBeenCalled()
+      expect(load3d.recordingManager.dispose).toHaveBeenCalled()
+      expect(load3d.animationManager.dispose).toHaveBeenCalled()
+    })
+  })
+
+  describe('context menu behavior', () => {
+    it('calls onContextMenu callback on right-click without drag', () => {
+      const contextMenuFn = vi.fn()
+      const instance = createInstance({ onContextMenu: contextMenuFn })
+
+      const canvas = instance.renderer.domElement
+      canvas.dispatchEvent(
+        new MouseEvent('mousedown', { button: 2, clientX: 100, clientY: 100 })
+      )
+      canvas.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          clientX: 100,
+          clientY: 100,
+          cancelable: true,
+          bubbles: true
+        })
+      )
+
+      expect(contextMenuFn).toHaveBeenCalled()
+    })
+
+    it('suppresses context menu after right-drag beyond threshold', () => {
+      const contextMenuFn = vi.fn()
+      const instance = createInstance({ onContextMenu: contextMenuFn })
+
+      const canvas = instance.renderer.domElement
+      canvas.dispatchEvent(
+        new MouseEvent('mousedown', { button: 2, clientX: 100, clientY: 100 })
+      )
+      canvas.dispatchEvent(
+        new MouseEvent('mousemove', { buttons: 2, clientX: 150, clientY: 150 })
+      )
+      canvas.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          clientX: 150,
+          clientY: 150,
+          cancelable: true,
+          bubbles: true
+        })
+      )
+
+      expect(contextMenuFn).not.toHaveBeenCalled()
+    })
+
+    it('does not fire context menu in viewer mode', () => {
+      const contextMenuFn = vi.fn()
+      const instance = createInstance({
+        onContextMenu: contextMenuFn,
+        isViewerMode: true
+      })
+
+      const canvas = instance.renderer.domElement
+      canvas.dispatchEvent(
+        new MouseEvent('mousedown', { button: 2, clientX: 100, clientY: 100 })
+      )
+      canvas.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          clientX: 100,
+          clientY: 100,
+          cancelable: true,
+          bubbles: true
+        })
+      )
+
+      expect(contextMenuFn).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handleResize with getDimensions callback', () => {
+    it('uses getDimensions callback to update target size', () => {
+      const getDimensions = vi.fn().mockReturnValue({ width: 400, height: 300 })
+      const instance = createInstance({ getDimensions })
+
+      instance.handleResize()
+
+      expect(instance.targetWidth).toBe(400)
+      expect(instance.targetHeight).toBe(300)
+    })
+
+    it('keeps existing dimensions when getDimensions returns null', () => {
+      const getDimensions = vi.fn().mockReturnValue(null)
+      const instance = createInstance({
+        getDimensions,
+        width: 100,
+        height: 50
+      })
+
+      instance.handleResize()
+
+      expect(instance.targetWidth).toBe(100)
+      expect(instance.targetHeight).toBe(50)
+    })
+  })
+})

src/lib/litegraph/src/LGraphCanvas.cloneZIndex.test.ts

@@ -1,198 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { LayoutSource } from '@/renderer/core/layout/types'
-import type { NodeLayout } from '@/renderer/core/layout/types'
-
-import {
-  LGraph,
-  LGraphCanvas,
-  LGraphNode,
-  LiteGraph
-} from '@/lib/litegraph/src/litegraph'
-
-const TEST_NODE_TYPE = 'test/CloneZIndex' as const
-
-class TestNode extends LGraphNode {
-  static override type = TEST_NODE_TYPE
-
-  constructor(title?: string) {
-    super(title ?? TEST_NODE_TYPE)
-    this.type = TEST_NODE_TYPE
-  }
-}
-
-function createCanvas(graph: LGraph): LGraphCanvas {
-  const el = document.createElement('canvas')
-  el.width = 800
-  el.height = 600
-
-  const ctx = {
-    save: vi.fn(),
-    restore: vi.fn(),
-    translate: vi.fn(),
-    scale: vi.fn(),
-    fillRect: vi.fn(),
-    strokeRect: vi.fn(),
-    fillText: vi.fn(),
-    measureText: vi.fn().mockReturnValue({ width: 50 }),
-    beginPath: vi.fn(),
-    moveTo: vi.fn(),
-    lineTo: vi.fn(),
-    stroke: vi.fn(),
-    fill: vi.fn(),
-    closePath: vi.fn(),
-    arc: vi.fn(),
-    rect: vi.fn(),
-    clip: vi.fn(),
-    clearRect: vi.fn(),
-    setTransform: vi.fn(),
-    roundRect: vi.fn(),
-    getTransform: vi
-      .fn()
-      .mockReturnValue({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
-    font: '',
-    fillStyle: '',
-    strokeStyle: '',
-    lineWidth: 1,
-    globalAlpha: 1,
-    textAlign: 'left' as CanvasTextAlign,
-    textBaseline: 'alphabetic' as CanvasTextBaseline
-  } satisfies Partial<CanvasRenderingContext2D>
-
-  el.getContext = vi
-    .fn()
-    .mockReturnValue(ctx as unknown as CanvasRenderingContext2D)
-  el.getBoundingClientRect = vi.fn().mockReturnValue({
-    left: 0,
-    top: 0,
-    width: 800,
-    height: 600
-  })
-
-  return new LGraphCanvas(el, graph, { skip_render: true })
-}
-
-function createLayoutEntry(node: LGraphNode, zIndex: number) {
-  const nodeId = String(node.id)
-  const layout: NodeLayout = {
-    id: nodeId,
-    position: { x: node.pos[0], y: node.pos[1] },
-    size: { width: node.size[0], height: node.size[1] },
-    zIndex,
-    visible: true,
-    bounds: {
-      x: node.pos[0],
-      y: node.pos[1],
-      width: node.size[0],
-      height: node.size[1]
-    }
-  }
-  layoutStore.applyOperation({
-    type: 'createNode',
-    entity: 'node',
-    nodeId,
-    layout,
-    timestamp: Date.now(),
-    source: LayoutSource.Canvas,
-    actor: 'test'
-  })
-}
-
-function setZIndex(nodeId: string, zIndex: number, previousZIndex: number) {
-  layoutStore.applyOperation({
-    type: 'setNodeZIndex',
-    entity: 'node',
-    nodeId,
-    zIndex,
-    previousZIndex,
-    timestamp: Date.now(),
-    source: LayoutSource.Canvas,
-    actor: 'test'
-  })
-}
-
-describe('cloned node z-index in Vue renderer', () => {
-  let graph: LGraph
-  let canvas: LGraphCanvas
-  let previousVueNodesMode: boolean
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    previousVueNodesMode = LiteGraph.vueNodesMode
-    LiteGraph.vueNodesMode = true
-    LiteGraph.registerNodeType(TEST_NODE_TYPE, TestNode)
-
-    graph = new LGraph()
-    canvas = createCanvas(graph)
-    LGraphCanvas.active_canvas = canvas
-
-    layoutStore.initializeFromLiteGraph([])
-
-    // Simulate Vue runtime: create layout entries when nodes are added
-    graph.onNodeAdded = (node: LGraphNode) => {
-      createLayoutEntry(node, 0)
-    }
-  })
-
-  afterEach(() => {
-    LiteGraph.vueNodesMode = previousVueNodesMode
-  })
-
-  it('places cloned nodes above the original node z-index', () => {
-    const originalNode = new TestNode()
-    originalNode.pos = [100, 100]
-    originalNode.size = [200, 100]
-    graph.add(originalNode)
-
-    const originalNodeId = String(originalNode.id)
-
-    setZIndex(originalNodeId, 5, 0)
-
-    const originalLayout = layoutStore.getNodeLayoutRef(originalNodeId).value
-    expect(originalLayout?.zIndex).toBe(5)
-
-    // Clone the node via cloneNodes (same path as right-click > clone)
-    const result = LGraphCanvas.cloneNodes([originalNode])
-    expect(result).toBeDefined()
-    expect(result!.created.length).toBe(1)
-
-    const clonedNode = result!.created[0] as LGraphNode
-    const clonedNodeId = String(clonedNode.id)
-
-    // The cloned node should have a z-index higher than the original
-    const clonedLayout = layoutStore.getNodeLayoutRef(clonedNodeId).value
-    expect(clonedLayout).toBeDefined()
-    expect(clonedLayout!.zIndex).toBeGreaterThan(originalLayout!.zIndex)
-  })
-
-  it('assigns distinct sequential z-indices when cloning multiple nodes', () => {
-    const nodeA = new TestNode()
-    nodeA.pos = [100, 100]
-    nodeA.size = [200, 100]
-    graph.add(nodeA)
-    setZIndex(String(nodeA.id), 3, 0)
-
-    const nodeB = new TestNode()
-    nodeB.pos = [400, 100]
-    nodeB.size = [200, 100]
-    graph.add(nodeB)
-    setZIndex(String(nodeB.id), 7, 0)
-
-    const result = LGraphCanvas.cloneNodes([nodeA, nodeB])
-    expect(result).toBeDefined()
-    expect(result!.created.length).toBe(2)
-
-    const clonedA = result!.created[0] as LGraphNode
-    const clonedB = result!.created[1] as LGraphNode
-    const layoutA = layoutStore.getNodeLayoutRef(String(clonedA.id)).value!
-    const layoutB = layoutStore.getNodeLayoutRef(String(clonedB.id)).value!
-
-    // Both cloned nodes should be above the highest original (z-index 7)
-    expect(layoutA.zIndex).toBeGreaterThan(7)
-    expect(layoutB.zIndex).toBeGreaterThan(7)
-
-    // Each cloned node should have a distinct z-index
-    expect(layoutA.zIndex).not.toBe(layoutB.zIndex)
-  })
-})

src/lib/litegraph/src/LGraphCanvas.ts

@@ -7,7 +7,6 @@ import { AutoPanController } from '@/renderer/core/canvas/useAutoPan'
 import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
-import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import { forEachNode } from '@/utils/graphTraversalUtil'
@@ -4271,17 +4270,6 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     if (newPositions.length) layoutStore.setSource(LayoutSource.Canvas)
     layoutStore.batchUpdateNodeBounds(newPositions)
 
-    // Bring cloned/pasted nodes to front so they render above the originals
-    const allNodes = layoutStore.getAllNodes().value
-    let maxZIndex = 0
-    for (const [, layout] of allNodes) {
-      if (layout.zIndex > maxZIndex) maxZIndex = layout.zIndex
-    }
-    const { setNodeZIndex } = useLayoutMutations()
-    for (let i = 0; i < newPositions.length; i++) {
-      setNodeZIndex(newPositions[i].nodeId, maxZIndex + i + 1)
-    }
-
     this.selectItems(created)
     forEachNode(graph, (n) => n.onGraphConfigured?.())
     forEachNode(graph, (n) => n.onAfterGraphConfigured?.())

src/platform/workspace/components/RoleBadge.test.ts

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/vue'
+import { mount } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
 import { describe, expect, it } from 'vitest'
 
@@ -17,8 +17,8 @@ const i18n = createI18n({
   }
 })
 
-function renderRoleBadge(role: 'owner' | 'member') {
-  return render(RoleBadge, {
+function mountRoleBadge(role: 'owner' | 'member') {
+  return mount(RoleBadge, {
     props: { role },
     global: { plugins: [i18n] }
   })
@@ -26,12 +26,12 @@ function renderRoleBadge(role: 'owner' | 'member') {
 
 describe('RoleBadge', () => {
   it('renders the owner label', () => {
-    renderRoleBadge('owner')
-    expect(screen.getByText('Owner')).toBeInTheDocument()
+    const wrapper = mountRoleBadge('owner')
+    expect(wrapper.text()).toBe('Owner')
   })
 
   it('renders the member label', () => {
-    renderRoleBadge('member')
-    expect(screen.getByText('Member')).toBeInTheDocument()
+    const wrapper = mountRoleBadge('member')
+    expect(wrapper.text()).toBe('Member')
   })
 })