refactor playwright tests based on platform/workbench/renderer

browser_tests/tests/platform/browserTabTitle.spec.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Browser tab title', () => {
+  test.describe('Beta Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Can display workflow name', async ({ comfyPage }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
+      })
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+    })
+
+    // Failing on CI
+    // Cannot reproduce locally
+    test.skip('Can display workflow name with unsaved changes', async ({
+      comfyPage
+    }) => {
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
+      })
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+
+      await comfyPage.menu.topbar.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
+
+      const textBox = comfyPage.widgetTextBox
+      await textBox.fill('Hello World')
+      await comfyPage.clickEmptySpace()
+      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
+
+      // Delete the saved workflow for cleanup.
+      await comfyPage.page.evaluate(async () => {
+        return window['app'].extensionManager.workflow.activeWorkflow.delete()
+      })
+    })
+  })
+
+  test.describe('Legacy Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Can display default title', async ({ comfyPage }) => {
+      expect(await comfyPage.page.title()).toBe('ComfyUI')
+    })
+  })
+})

browser_tests/tests/platform/loadWorkflowInMedia.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Load Workflow in Media', () => {
+  const fileNames = [
+    'workflow.webp',
+    'edited_workflow.webp',
+    'no_workflow.webp',
+    'large_workflow.webp',
+    'workflow.webm',
+    // Skipped due to 3d widget unstable visual result.
+    // 3d widget shows grid after fully loaded.
+    // 'workflow.glb',
+    'workflow.mp4',
+    'workflow.mov',
+    'workflow.m4v',
+    'workflow.svg'
+    // TODO: Re-enable after fixing test asset to use core nodes only
+    // Currently opens missing nodes dialog which is outside scope of AVIF loading functionality
+    // 'workflow.avif'
+  ]
+  fileNames.forEach(async (fileName) => {
+    test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDropFile(`workflowInMedia/${fileName}`)
+      await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+    })
+  })
+
+  const urls = [
+    'https://comfyanonymous.github.io/ComfyUI_examples/hidream/hidream_dev_example.png'
+  ]
+  urls.forEach(async (url) => {
+    test(`Load workflow from URL ${url} (drop from different browser tabs)`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDropURL(url)
+      const readableName = url.split('/').pop()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        `dropped_workflow_url_${readableName}.png`
+      )
+    })
+  })
+})

browser_tests/tests/platform/releaseNotifications.spec.ts

@@ -0,0 +1,368 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Release Notifications', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should show help center with release information', async ({
+    comfyPage
+  }) => {
+    // Mock release API with test data instead of empty array
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'medium',
+              content:
+                '## New Features\n\n- Added awesome feature\n- Fixed important bug',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Setup with release mocking disabled for this test
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section shows the release
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show the release version
+    await expect(
+      whatsNewSection.locator('text=Comfy v0.3.44 Release')
+    ).toBeVisible()
+
+    // Close help center by dismissable mask
+    await comfyPage.page.click('.help-center-backdrop')
+    await expect(helpMenu).not.toBeVisible()
+  })
+
+  test('should not show release notifications when mocked (default behavior)', async ({
+    comfyPage
+  }) => {
+    // Use default setup (mockReleases: true)
+    await comfyPage.setup()
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section shows no releases
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show "No recent releases" message
+    await expect(
+      whatsNewSection.locator('text=No recent releases')
+    ).toBeVisible()
+
+    // Should not show any popups or toasts
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.release-notification-toast')
+    ).not.toBeVisible()
+  })
+
+  test('should handle release API errors gracefully', async ({ comfyPage }) => {
+    // Mock API to return an error
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 500,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: 'Server error' })
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Setup with release mocking disabled
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center still works despite API error
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Should show no releases due to error
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(
+      whatsNewSection.locator('text=No recent releases')
+    ).toBeVisible()
+  })
+
+  test('should hide "What\'s New" section when notifications are disabled', async ({
+    comfyPage
+  }) => {
+    // Disable version update notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'high',
+              content: '## New Features\n\n- Added awesome feature',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section is hidden
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).not.toBeVisible()
+
+    // Should not show any popups or toasts
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.release-notification-toast')
+    ).not.toBeVisible()
+  })
+
+  test('should not make API calls when notifications are disabled', async ({
+    comfyPage
+  }) => {
+    // Disable version update notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Track API calls
+    let apiCallCount = 0
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        apiCallCount++
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Wait a bit to ensure any potential API calls would have been made
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Verify no API calls were made
+    expect(apiCallCount).toBe(0)
+  })
+
+  test('should show "What\'s New" section when notifications are enabled', async ({
+    comfyPage
+  }) => {
+    // Enable version update notifications (default behavior)
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', true)
+
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'medium',
+              content: '## New Features\n\n- Added awesome feature',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section is visible
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show the release
+    await expect(
+      whatsNewSection.locator('text=Comfy v0.3.44 Release')
+    ).toBeVisible()
+  })
+
+  test('should toggle "What\'s New" section when setting changes', async ({
+    comfyPage
+  }) => {
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'low',
+              content: '## Bug Fixes\n\n- Fixed minor issue',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Start with notifications enabled
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', true)
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify "What's New?" section is visible
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Close help center
+    await comfyPage.page.click('.help-center-backdrop')
+
+    // Disable notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Reopen help center
+    await helpCenterButton.click()
+
+    // Verify "What's New?" section is now hidden
+    await expect(whatsNewSection).not.toBeVisible()
+  })
+
+  test('should handle edge case with empty releases and disabled notifications', async ({
+    comfyPage
+  }) => {
+    // Disable notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Mock empty releases
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center still works
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Section should be hidden regardless of empty releases
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).not.toBeVisible()
+  })
+})

browser_tests/tests/platform/userSelectView.spec.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test'
+
+import { userSelectPageFixture as test } from '../../fixtures/UserSelectPage'
+
+/**
+ * Expects ComfyUI backend to be launched with `--multi-user` flag.
+ */
+test.describe('User Select View', () => {
+  test.beforeEach(async ({ userSelectPage, page }) => {
+    await page.goto(userSelectPage.url)
+    await page.evaluate(() => {
+      localStorage.clear()
+      sessionStorage.clear()
+    })
+  })
+
+  test('Redirects to user select view if no user is logged in', async ({
+    userSelectPage,
+    page
+  }) => {
+    await page.goto(userSelectPage.url)
+    await expect(userSelectPage.container).toBeVisible()
+    expect(page.url()).toBe(userSelectPage.selectionUrl)
+  })
+
+  test('Can create new user', async ({ userSelectPage, page }) => {
+    const randomUser = `test-user-${Math.random().toString(36).substring(2, 7)}`
+    await page.goto(userSelectPage.url)
+    await expect(page).toHaveURL(userSelectPage.selectionUrl)
+    await userSelectPage.newUserInput.fill(randomUser)
+    await userSelectPage.nextButton.click()
+    await expect(page).toHaveURL(userSelectPage.url)
+  })
+
+  test('Can choose existing user', async ({ userSelectPage, page }) => {
+    await page.goto(userSelectPage.url)
+    await expect(page).toHaveURL(userSelectPage.selectionUrl)
+    await userSelectPage.existingUserSelect.click()
+    await page.locator('.p-select-list .p-select-option').first().click()
+    await userSelectPage.nextButton.click()
+    await expect(page).toHaveURL(userSelectPage.url)
+  })
+})

browser_tests/tests/platform/versionMismatchWarnings.spec.ts

@@ -0,0 +1,123 @@
+import { expect } from '@playwright/test'
+
+import type { SystemStats } from '../../../src/schemas/apiSchema'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Version Mismatch Warnings', () => {
+  const ALWAYS_AHEAD_OF_INSTALLED_VERSION = '100.100.100'
+  const ALWAYS_BEHIND_INSTALLED_VERSION = '0.0.0'
+
+  const createMockSystemStatsRes = (
+    requiredFrontendVersion: string
+  ): SystemStats => {
+    return {
+      system: {
+        os: 'posix',
+        ram_total: 67235385344,
+        ram_free: 13464207360,
+        comfyui_version: '0.3.46',
+        required_frontend_version: requiredFrontendVersion,
+        python_version: '3.12.3 (main, Jun 18 2025, 17:59:45) [GCC 13.3.0]',
+        pytorch_version: '2.6.0+cu124',
+        embedded_python: false,
+        argv: ['main.py']
+      },
+      devices: [
+        {
+          name: 'cuda:0 NVIDIA GeForce RTX 4070 : cudaMallocAsync',
+          type: 'cuda',
+          index: 0,
+          vram_total: 12557156352,
+          vram_free: 2439249920,
+          torch_vram_total: 0,
+          torch_vram_free: 0
+        }
+      ]
+    }
+  }
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should show version mismatch warnings when installed version lower than required', async ({
+    comfyPage
+  }) => {
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_AHEAD_OF_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Expect a warning toast to be shown
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).toBeVisible()
+  })
+
+  test('should not show version mismatch warnings when installed version is ahead of required', async ({
+    comfyPage
+  }) => {
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_BEHIND_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Expect no warning toast to be shown
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).not.toBeVisible()
+  })
+
+  test('should persist dismissed state across sessions', async ({
+    comfyPage
+  }) => {
+    test.setTimeout(30_000)
+    // Mock system_stats route to indicate that the installed version is always ahead of the required version
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(
+          createMockSystemStatsRes(ALWAYS_AHEAD_OF_INSTALLED_VERSION)
+        )
+      })
+    })
+    await comfyPage.setup()
+
+    // Locate the warning toast and dismiss it
+    const warningToast = comfyPage.page
+      .locator('div')
+      .filter({ hasText: 'Version Compatibility' })
+      .nth(3)
+    await warningToast.waitFor({ state: 'visible' })
+    const dismissButton = warningToast.getByRole('button', { name: 'Close' })
+    await dismissButton.click()
+
+    // Wait for the dismissed state to be persisted
+    await comfyPage.page.waitForFunction(
+      () => !!localStorage.getItem('comfy.versionMismatch.dismissals')
+    )
+
+    // Reload the page, keeping local storage
+    await comfyPage.setup({ clearStorage: false })
+
+    // The same warning from same versions should not be shown to the user again
+    await expect(
+      comfyPage.page.getByText('Version Compatibility Warning')
+    ).not.toBeVisible()
+  })
+})