ComfyUI_frontend/browser_tests/tests/badgeVisual.spec.ts

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')
      })
    })
  }
)