Feature Implemented: Warning displayed when frontend version mismatches (#4363)

Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>

Author: 3 people

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -0,0 +1,117 @@
+import { expect } from '@playwright/test'
+
+import { 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
+  }) => {
+    // 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()
+
+    // 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()
+  })
+})