test: add E2E tests for Node Library V2 sidebar (#10798)

## Summary

- Adds Playwright E2E tests for the Node Library V2 sidebar tab
(`Comfy.NodeLibrary.NewDesign: true`)
- Adds `NodeLibrarySidebarTabV2` fixture class with V2-specific locators
(search input, tab buttons, node cards)
- Exposes `menu.nodeLibraryTabV2` on `ComfyPage` for test access
- Tests cover: tab visibility, default tab selection, tab switching,
folder expansion, search filtering, and sort button presence

## Test plan

- [ ] Run `pnpm test:browser:local -- --grep "Node library sidebar V2"`
against a running ComfyUI server with the V2 node library
- [ ] Verify tests pass in CI

Fixes #9079

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10798-test-add-E2E-tests-for-Node-Library-V2-sidebar-3356d73d36508185a11feaf95e32225b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

browser_tests/fixtures/ComfyPage.ts

@@ -20,6 +20,7 @@ import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import {
   AssetsSidebarTab,
   NodeLibrarySidebarTab,
+  NodeLibrarySidebarTabV2,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -56,6 +57,7 @@ class ComfyPropertiesPanel {
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
+  private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
@@ -78,6 +80,11 @@ class ComfyMenu {
     return this._nodeLibraryTab
   }
 
+  get nodeLibraryTabV2() {
+    this._nodeLibraryTabV2 ??= new NodeLibrarySidebarTabV2(this.page)
+    return this._nodeLibraryTabV2
+  }
+
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab

browser_tests/fixtures/components/SidebarTab.ts

@@ -100,6 +100,59 @@ export class NodeLibrarySidebarTab extends SidebarTab {
   }
 }
 
+export class NodeLibrarySidebarTabV2 extends SidebarTab {
+  constructor(public override readonly page: Page) {
+    super(page, 'node-library')
+  }
+
+  get searchInput() {
+    return this.page.getByPlaceholder('Search...')
+  }
+
+  get sidebarContent() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
+  getTab(name: string) {
+    return this.sidebarContent.getByRole('tab', { name, exact: true })
+  }
+
+  get allTab() {
+    return this.getTab('All')
+  }
+
+  get blueprintsTab() {
+    return this.getTab('Blueprints')
+  }
+
+  get sortButton() {
+    return this.sidebarContent.getByRole('button', { name: 'Sort' })
+  }
+
+  getFolder(folderName: string) {
+    return this.sidebarContent
+      .getByRole('treeitem', { name: folderName })
+      .first()
+  }
+
+  getNode(nodeName: string) {
+    return this.sidebarContent.getByRole('treeitem', { name: nodeName }).first()
+  }
+
+  async expandFolder(folderName: string) {
+    const folder = this.getFolder(folderName)
+    const isExpanded = await folder.getAttribute('aria-expanded')
+    if (isExpanded !== 'true') {
+      await folder.click()
+    }
+  }
+
+  override async open() {
+    await super.open()
+    await this.searchInput.waitFor({ state: 'visible' })
+  }
+}
+
 export class WorkflowsSidebarTab extends SidebarTab {
   constructor(public override readonly page: Page) {
     super(page, 'workflows')

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -0,0 +1,126 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Node library sidebar V2', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
+
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.open()
+  })
+
+  test('Can switch between tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+
+    await tab.blueprintsTab.click()
+    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'false')
+
+    await tab.allTab.click()
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  test('All tab displays node tree with folders', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.getFolder('sampling')).toBeVisible()
+  })
+
+  test('Can expand folder and see nodes in All tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+  })
+
+  test('Search filters nodes in All tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.getNode('KSampler (Advanced)')).not.toBeVisible()
+
+    await tab.searchInput.fill('KSampler')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
+      timeout: 5000
+    })
+    await expect(tab.getNode('CLIPLoader')).not.toBeVisible()
+  })
+
+  test('Drag node to canvas adds it', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    const canvasBoundingBox = await comfyPage.page
+      .locator('#graph-canvas')
+      .boundingBox()
+    expect(canvasBoundingBox).not.toBeNull()
+    const targetPosition = {
+      x: canvasBoundingBox!.x + canvasBoundingBox!.width / 2,
+      y: canvasBoundingBox!.y + canvasBoundingBox!.height / 2
+    }
+
+    const nodeLocator = tab.getNode('KSampler (Advanced)')
+    await nodeLocator.dragTo(comfyPage.page.locator('#graph-canvas'), {
+      targetPosition
+    })
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 5000 })
+      .toBe(initialCount + 1)
+  })
+
+  test('Right-click node shows context menu with bookmark option', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    const node = tab.getNode('KSampler (Advanced)')
+    await expect(node).toBeVisible()
+
+    await node.click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.getByRole('menuitem', {
+      name: /Bookmark Node/
+    })
+    await expect(contextMenu).toBeVisible({ timeout: 3000 })
+  })
+
+  test('Search clear restores folder view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.getFolder('sampling')).toBeVisible()
+
+    await tab.searchInput.fill('KSampler')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
+      timeout: 5000
+    })
+
+    await tab.searchInput.clear()
+    await tab.searchInput.press('Enter')
+
+    await expect(tab.getFolder('sampling')).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Sort dropdown shows sorting options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.sortButton.click()
+
+    // Reka UI DropdownMenuRadioItem renders with role="menuitemradio"
+    const options = comfyPage.page.getByRole('menuitemradio')
+    await expect(options.first()).toBeVisible({ timeout: 3000 })
+    await expect
+      .poll(() => options.count(), { timeout: 3000 })
+      .toBeGreaterThanOrEqual(2)
+  })
+})