test: add visual regression tests for Badge component

Add screenshot tests for SearchFilterChip and node library tree
to catch unintended sizing/styling regressions.

browser_tests/tests/badgeVisual.spec.ts

@@ -0,0 +1,89 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Badge visual regression',
+  { tag: ['@screenshot', '@ui'] },
+  () => {
+    async function dismissToasts(comfyPage: { page: Page }) {
+      // Dismiss all toast notifications that may block interaction
+      const toastCloseButtons = comfyPage.page.locator('.p-toast-close-button')
+      const count = await toastCloseButtons.count()
+      for (let i = 0; i < count; i++) {
+        await toastCloseButtons
+          .nth(i)
+          .click()
+          .catch(() => {})
+      }
+      if (count > 0) {
+        await comfyPage.page
+          .locator('.p-toast-message')
+          .first()
+          .waitFor({ state: 'hidden', timeout: 3000 })
+          .catch(() => {})
+      }
+    }
+
+    test.describe('SearchFilterChip badge', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting(
+          'Comfy.NodeSearchBoxImpl',
+          'v1 (legacy)'
+        )
+        await dismissToasts(comfyPage)
+      })
+
+      test('Single filter chip renders correctly', async ({ comfyPage }) => {
+        await comfyPage.canvasOps.doubleClick()
+        await comfyPage.searchBox.addFilter('CONDITIONING', 'Input Type')
+
+        const searchContainer = comfyPage.page.locator(
+          '.comfy-vue-node-search-container'
+        )
+        await expect(searchContainer).toHaveScreenshot(
+          'filter-chip-conditioning.png'
+        )
+      })
+
+      test('Multiple filter chips render correctly', async ({ comfyPage }) => {
+        await comfyPage.canvasOps.doubleClick()
+        await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+        await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+
+        const searchContainer = comfyPage.page.locator(
+          '.comfy-vue-node-search-container'
+        )
+        await expect(searchContainer).toHaveScreenshot(
+          'filter-chips-multiple.png'
+        )
+      })
+    })
+
+    test.describe('Node library tree badge', () => {
+      test('Folder node count badge renders correctly', async ({
+        comfyPage
+      }) => {
+        await dismissToasts(comfyPage)
+
+        // Open the Node Library sidebar
+        const sidebarButton = comfyPage.page.getByRole('button', {
+          name: 'Node Library'
+        })
+        await sidebarButton.click()
+
+        // Wait for tree folders to load
+        const sidebar = comfyPage.page.getByRole('complementary', {
+          name: 'Sidebar'
+        })
+        await sidebar
+          .getByRole('treeitem')
+          .first()
+          .waitFor({ state: 'visible', timeout: 10000 })
+
+        await expect(sidebar).toHaveScreenshot('node-library-tree-badges.png')
+      })
+    })
+  }
+)