[feat] Respect Vite config in Playwright i18n tests using ctViteConfig

- Use @playwright/experimental-ct-vue for proper Vite integration
- Import and reuse existing vite.config.mjs settings via ctViteConfig
- Include plugins, resolve, define, optimizeDeps, esbuild, and server config
- Add webServer configuration to auto-start dev server if needed
- Use type assertion to handle Vite version compatibility issues
- Fix type errors in vite.config.mts plugins array

This ensures i18n collection tests run with the same Vite configuration
as the main application, including all plugins and build settings.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.cursorrules

@@ -0,0 +1,61 @@
+# Vue 3 Composition API Project Rules
+
+## Vue 3 Composition API Best Practices
+- Use setup() function for component logic
+- Utilize ref and reactive for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+- Use vue 3.5 style of default prop declaration. Example:
+
+```typescript
+const { nodes, showTotal = true } = defineProps<{
+  nodes: ApiNodeCost[]
+  showTotal?: boolean
+}>()
+```
+
+- Organize vue component in <template> <script> <style> order
+
+## Project Structure
+```
+src/
+  components/
+  constants/
+  composables/
+  views/
+  stores/
+  services/
+  App.vue
+  main.ts
+```
+
+## Styling Guidelines
+- Use Tailwind CSS for styling
+- Implement responsive design with Tailwind CSS
+
+## PrimeVue Component Guidelines
+DO NOT use deprecated PrimeVue components. Use these replacements instead:
+- Dropdown → Use Select (import from 'primevue/select')
+- OverlayPanel → Use Popover (import from 'primevue/popover')
+- Calendar → Use DatePicker (import from 'primevue/datepicker')
+- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
+- Sidebar → Use Drawer (import from 'primevue/drawer')
+- Chips → Use AutoComplete with multiple enabled and typeahead disabled
+- TabMenu → Use Tabs without panels
+- Steps → Use Stepper without panels
+- InlineMessage → Use Message component
+
+## Development Guidelines
+1. Leverage VueUse functions for performance-enhancing styles
+2. Use es-toolkit for utility functions
+3. Use TypeScript for type safety
+4. Implement proper props and emits definitions
+5. Utilize Vue 3's Teleport component when needed
+6. Use Suspense for async components
+7. Implement proper error handling
+8. Follow Vue 3 style guide and naming conventions
+9. Use Vite for fast development and building
+10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Never use deprecated PrimeVue components listed above

.github/workflows/ci-tests-e2e.yaml

@@ -124,19 +124,12 @@ jobs:
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: |
-          # Run tests with blob reporter first
-          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
-        env:
-          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
-
-      - name: Generate HTML and JSON reports
-        if: always()
-        run: |
-          # Generate HTML report from blob
-          pnpm exec playwright merge-reports --reporter=html ./blob-report
-          # Generate JSON report separately with explicit output path
+          # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./blob-report
+          pnpm exec playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4

.github/workflows/i18n-update-core.yaml

@@ -9,10 +9,14 @@ on:
     branches: [main]
     types: [opened, synchronize, reopened]
 
+  push:
+    branches: 
+      - sno-* # for test only, remove before merge
+
 jobs:
   update-locales:
     # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
+    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-')) || (github.event_name == 'push')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository

.github/workflows/release-weekly-comfyui.yaml

@@ -63,7 +63,7 @@ jobs:
           set -euo pipefail
 
           # Run the resolver script
-          if ! RESULT=$(pnpm exec tsx scripts/cicd/resolve-comfyui-release.ts ../comfyui .); then
+          if ! RESULT=$(tsx scripts/cicd/resolve-comfyui-release.ts ../comfyui .); then
             echo "Failed to resolve release information"
             exit 1
           fi

AGENTS.md

@@ -1,225 +1,38 @@
 # Repository Guidelines
 
 ## Project Structure & Module Organization
-
-- Source: `src/`
-  - Vue 3.5+
-  - TypeScript
-  - Tailwind 4
-  - Key areas:
-    - `components/`
-    - `views/`
-    - `stores/` (Pinia)
-    - `composables/`
-    - `services/`
-    - `utils/`
-    - `assets/`
-    - `locales/`
-- Routing: `src/router.ts`,
-- i18n: `src/i18n.ts`,
-- Entry Point: `src/main.ts`.
-- Tests:
-  - unit/component in `tests-ui/` and `src/**/*.test.ts`
-  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
-- Public assets: `public/`
-- Build output: `dist/`
-- Configs
-  - `vite.config.mts`
-  - `vitest.config.ts`
-  - `playwright.config.ts`
-  - `eslint.config.ts`
-  - `.prettierrc`
-  - etc.
-
-## Monorepo Architecture
-
-The project uses **Nx** for build orchestration and task management
+- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
+- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
+- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
+- Public assets: `public/`. Build output: `dist/`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
 
 ## Build, Test, and Development Commands
-
 - `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks
-- `pnpm build`: Type-check then production build to `dist/`
-- `pnpm preview`: Preview the production build locally
-- `pnpm test:unit`: Run Vitest unit tests
-- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
-- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: Prettier
-- `pnpm typecheck`: Vue TSC type checking
+- `pnpm dev:electron`: Dev server with Electron API mocks.
+- `pnpm build`: Type-check then production build to `dist/`.
+- `pnpm preview`: Preview the production build locally.
+- `pnpm test:unit`: Run Vitest unit tests.
+- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
+- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
+- `pnpm typecheck`: Vue TSC type checking.
 
 ## Coding Style & Naming Conventions
-
-- Language:
-  - TypeScript (exclusive, no new JavaScript)
-  - Vue 3 SFCs (`.vue`)
-    - Composition API only
-  - Tailwind 4 styling
-    - Avoid `<style>` blocks
-- Style: (see `.prettierrc`)
-  - Indent 2 spaces
-  - single quotes
-  - no trailing semicolons
-  - width 80
-- Imports:
-  - sorted/grouped by plugin
-  - run `pnpm format` before committing
-- ESLint:
-  - Vue + TS rules
-  - no floating promises
-  - unused imports disallowed
-  - i18n raw text restrictions in templates
-- Naming:
-  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
-  - composables `useXyz.ts`
-  - Pinia stores `*Store.ts`
+- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
+- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
+- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
+- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
 
 ## Testing Guidelines
-
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-- Coverage: text/json/html reporters enabled
-  - aim to cover critical logic and new features
-- Playwright:
-  - optional tags like `@mobile`, `@2x` are respected by config
-- Tests to avoid
-  - Change detector tests
-    - e.g. a test that just asserts that the defaults are certain values
-  - Tests that are dependent on non-behavioral features like utility classes or styles
-  - Redundant tests
+- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
+- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
+- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
+- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
 
 ## Commit & Pull Request Guidelines
-
-- PRs:
-  - Include clear description
-  - Reference linked issues (e.g. `- Fixes #123`)
-  - Keep it extremely concise and information-dense
-  - Don't use emojis or add excessive headers/sections
-  - Follow the PR description template in the `.github/` folder.
-- Quality gates:
-  - `pnpm lint`
-  - `pnpm typecheck`
-  - `pnpm knip`
-  - Relevant tests must pass
-- Never use `--no-verify` to bypass failing tests
-  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
-- Keep PRs focused and small
-  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
+- Commits: Use `[skip ci]` for locale-only updates when appropriate.
+- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
+- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
 
 ## Security & Configuration Tips
-
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-
-## Vue 3 Composition API Best Practices
-
-- Use `<script setup lang="ts">` for component logic
-- Utilize `ref` for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-  - Avoid using a `ref` and a `watch` if a `computed` would work instead
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-  - Do not use dependency injection if a Store or a shared composable would be simpler
-- Use Vue 3.5 TypeScript style of default prop declaration
-  - Example:
-
-    ```typescript
-    const { nodes, showTotal = true } = defineProps<{
-    nodes: ApiNodeCost[]
-    showTotal?: boolean
-    }>()
-    ```
-
-  - Prefer reactive props destructuring to `const props = defineProps<...>`
-  - Do not use `withDefaults` or runtime props declaration
-  - Do not import Vue macros unnecessarily
-  - Prefer `useModel` to separately defining a prop and emit
-  - Be judicious with addition of new refs or other state
-    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
-    - If it's possible to use the `ref` or prop directly, don't add a `computed`
-    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
-
-## Development Guidelines
-
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
-5. In Vue Components, implement proper props and emits definitions
-6. Utilize Vue 3's Teleport component when needed
-7. Use Suspense for async components
-8. Implement proper error handling
-9. Follow Vue 3 style guide and naming conventions
-10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
-12. Avoid new usage of PrimeVue components
-13. Write tests for all changes, especially bug fixes to catch future regressions
-14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-15. Do not add or retain redundant comments, clean as you go
-16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. Refactoring should be used to make complex code simpler
-18. Try to minimize the surface area (exported values) of each module and composable
-19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
-20. Keep functions short and functional
-21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
-22. Avoid mutable state, prefer immutability and assignment at point of declaration
-23. Favor pure functions (especially testable ones)
-24. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
-
-## External Resources
-
-- Vue: <https://vuejs.org/api/>
-- Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
-- VueUse: <https://vueuse.org/functions.html>
-- shadcn/vue: <https://www.shadcn-vue.com/>
-- Reka UI: <https://reka-ui.com/>
-- PrimeVue: <https://primevue.org>
-- ComfyUI: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-## Repository Navigation
-
-- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use the `dark:` tailwind variant
-  - Instead use a semantic value from the `style.css` theme
-    - e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names
-  - Always use `import { cn } from '@/utils/tailwindUtil'`
-    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
-  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value

CLAUDE.md

@@ -1,19 +1,44 @@
-# Claude Code specific instructions
-
-@Agents.md
+# ComfyUI Frontend Project Guidelines
 
 ## Repository Setup
 
 For first-time setup, use the Claude command:
-
-```sh
+```
 /setup_repo
 ```
-
 This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
 
 **Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
 
+## Quick Commands
+
+- `pnpm`: See all available commands
+- `pnpm dev`: Start development server (port 5173, via nx)
+- `pnpm typecheck`: Type checking
+- `pnpm build`: Build for production (via nx)
+- `pnpm lint`: Linting (via nx)
+- `pnpm oxlint`: Fast Rust-based linting with Oxc
+- `pnpm format`: Prettier formatting
+- `pnpm test:unit`: Run all unit tests
+- `pnpm test:browser`: Run E2E tests via Playwright
+- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+- `pnpm storybook`: Start Storybook development server (port 6006)
+- `pnpm knip`: Detect unused code and dependencies
+
+## Monorepo Architecture
+
+The project now uses **Nx** for build orchestration and task management:
+
+- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
+- **Caching**: Nx provides intelligent caching for faster rebuilds
+- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
+- **Dependencies**: Nx handles dependency graph analysis and parallel execution
+
+Key Nx features:
+- Build target caching and incremental builds
+- Parallel task execution across the monorepo
+- Plugin-based architecture for different tools
+
 ## Development Workflow
 
 1. **First-time setup**: Run `/setup_repo` Claude command
@@ -25,6 +50,87 @@ This bootstraps the monorepo with dependencies, builds, tests, and dev server ve
 
 ## Git Conventions
 
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
+- Use [prefix] format: [feat], [bugfix], [docs]
 - Add "Fixes #n" to PR descriptions
 - Never mention Claude/AI in commits
+
+## External Resources
+
+- PrimeVue docs: <https://primevue.org>
+- ComfyUI docs: <https://docs.comfy.org>
+- Electron: <https://www.electronjs.org/docs/latest/>
+- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+
+## Project Philosophy
+
+- Follow good software engineering principles
+  - YAGNI
+  - AHA
+  - DRY
+  - SOLID
+- Clean, stable public APIs
+- Domain-driven design
+- Thousands of users and extensions
+- Prioritize clean interfaces that restrict extension access
+
+## Repository Navigation
+
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
+- Prefer running single tests for performance
+- Use --help for unfamiliar CLI tools
+
+## GitHub Integration
+
+When referencing Comfy-Org repos:
+
+1. Check for local copy
+2. Use GitHub API for branches/PRs/metadata
+3. Curl GitHub website if needed
+
+## Settings and Feature Flags Quick Reference
+
+### Settings Usage
+```typescript
+const settingStore = useSettingStore()
+const value = settingStore.get('Comfy.SomeSetting')     // Get setting
+await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
+```
+
+### Dynamic Defaults
+```typescript
+{
+  id: 'Comfy.Example.Setting',
+  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
+}
+```
+
+### Version-Based Defaults
+```typescript
+{
+  id: 'Comfy.Example.Feature',
+  defaultValue: 'legacy',
+  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
+}
+```
+
+### Feature Flags
+```typescript
+if (api.serverSupportsFeature('feature_name')) {  // Check capability
+  // Use enhanced feature
+}
+const value = api.getServerFeature('config_name', defaultValue)  // Get config
+```
+
+**Documentation:**
+- Settings system: `docs/SETTINGS.md`
+- Feature flags system: `docs/FEATURE_FLAGS.md`
+
+## Common Pitfalls
+
+- NEVER use `any` type - use proper TypeScript types
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`

apps/desktop-ui/src/i18n.ts

@@ -1,13 +1,13 @@
 // Import only English locale eagerly as the default/fallback
 // ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
 // but these are properly configured in tsconfig.json and resolved by Vite at build time.
-
+// eslint-disable-next-line import-x/no-unresolved
 import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import en from '@frontend-locales/en/main.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
 import { createI18n } from 'vue-i18n'
 
@@ -27,7 +27,7 @@ function buildLocale<
 
 // Locale loader map - dynamically import locales only when needed
 // ESLint cannot statically resolve these dynamic imports, but they are valid at build time
-
+/* eslint-disable import-x/no-unresolved */
 const localeLoaders: Record<
   string,
   () => Promise<{ default: Record<string, unknown> }>

browser_tests/fixtures/ComfyPage.ts

@@ -13,7 +13,6 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { QueueList } from './components/QueueList'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
@@ -28,32 +27,18 @@ dotenv.config()
 
 type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
-class ComfyPropertiesPanel {
-  readonly root: Locator
-  readonly panelTitle: Locator
-  readonly searchBox: Locator
-
-  constructor(readonly page: Page) {
-    this.root = page.getByTestId('properties-panel')
-    this.panelTitle = this.root.locator('h3')
-    this.searchBox = this.root.getByPlaceholder('Search...')
-  }
-}
-
 class ComfyMenu {
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
-  public readonly propertiesPanel: ComfyPropertiesPanel
   public readonly themeToggleButton: Locator
   public readonly saveButton: Locator
 
   constructor(public readonly page: Page) {
     this.sideToolbar = page.locator('.side-tool-bar-container')
     this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
-    this.propertiesPanel = new ComfyPropertiesPanel(page)
     this.saveButton = page
       .locator('button[title="Save the current workflow"]')
       .nth(0)
@@ -152,7 +137,6 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
-  public readonly queueList: QueueList
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
@@ -185,7 +169,6 @@ export class ComfyPage {
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
     this.searchBox = new ComfyNodeSearchBox(page)
-    this.queueList = new QueueList(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
@@ -327,6 +310,19 @@ export class ComfyPage {
     }
     await this.goto()
 
+    // Unify font for consistent screenshots.
+    await this.page.addStyleTag({
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
+    })
+    await this.page.addStyleTag({
+      url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
+    })
+    await this.page.addStyleTag({
+      content: `
+      * {
+        font-family: 'Roboto Mono', 'Noto Color Emoji';
+      }`
+    })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
       () =>
@@ -1262,6 +1258,9 @@ export class ComfyPage {
         }, 'image/png')
       })
     }, filename)
+
+    // Wait a bit for the download to process
+    await this.page.waitForTimeout(500)
   }
 
   /**

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -60,6 +60,9 @@ export class ComfyNodeSearchBox {
     await this.input.waitFor({ state: 'visible' })
     await this.input.fill(nodeName)
     await this.dropdown.waitFor({ state: 'visible' })
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await this.page.waitForTimeout(500)
     await this.dropdown
       .locator('li')
       .nth(options?.suggestionIndex || 0)

browser_tests/fixtures/components/QueueList.ts

@@ -1,57 +0,0 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-export class QueueList {
-  constructor(public readonly page: Page) {}
-
-  get toggleButton() {
-    return this.page.getByTestId('queue-toggle-button')
-  }
-
-  get inlineProgress() {
-    return this.page.getByTestId('queue-inline-progress')
-  }
-
-  get overlay() {
-    return this.page.getByTestId('queue-overlay')
-  }
-
-  get closeButton() {
-    return this.page.getByTestId('queue-overlay-close-button')
-  }
-
-  get jobItems() {
-    return this.page.getByTestId('queue-job-item')
-  }
-
-  get clearHistoryButton() {
-    return this.page.getByRole('button', { name: /Clear History/i })
-  }
-
-  async open() {
-    if (!(await this.overlay.isVisible())) {
-      await this.toggleButton.click()
-      await expect(this.overlay).toBeVisible()
-    }
-  }
-
-  async close() {
-    if (await this.overlay.isVisible()) {
-      await this.closeButton.click()
-      await expect(this.overlay).not.toBeVisible()
-    }
-  }
-
-  async getJobCount(state?: string) {
-    if (state) {
-      return await this.page
-        .locator(`[data-testid="queue-job-item"][data-job-state="${state}"]`)
-        .count()
-    }
-    return await this.jobItems.count()
-  }
-
-  getJobAction(actionKey: string) {
-    return this.page.getByTestId(`job-action-${actionKey}`)
-  }
-}

browser_tests/fixtures/components/SidebarTab.ts

@@ -116,6 +116,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
   async switchToWorkflow(workflowName: string) {
     const workflowLocator = this.getOpenedItem(workflowName)
     await workflowLocator.click()
+    await this.page.waitForTimeout(300)
   }
 
   getOpenedItem(name: string) {
@@ -137,6 +138,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
     await this.page.keyboard.type(newName)
     await this.page.keyboard.press('Enter')
+    await this.page.waitForTimeout(300)
   }
 
   async insertWorkflow(locator: Locator) {

browser_tests/fixtures/components/Topbar.ts

@@ -95,6 +95,7 @@ export class Topbar {
   }
 
   async openTopbarMenu() {
+    await this.page.waitForTimeout(1000)
     await this.menuTrigger.click()
     await this.menuLocator.waitFor({ state: 'visible' })
     return this.menuLocator

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -462,6 +462,7 @@ export class NodeReference {
   async convertToSubgraph() {
     await this.clickContextMenuOption('Convert to Subgraph')
     await this.comfyPage.nextFrame()
+    await this.comfyPage.page.waitForTimeout(256)
     const nodes = await this.comfyPage.getNodeRefsByTitle('New Subgraph')
     if (nodes.length !== 1) {
       throw new Error(
@@ -510,6 +511,7 @@ export class NodeReference {
         // Double-click to enter subgraph
         await this.comfyPage.canvas.dblclick({ position, force: true })
         await this.comfyPage.nextFrame()
+        await this.comfyPage.page.waitForTimeout(500)
 
         // Check if we successfully entered the subgraph
         isInSubgraph = await this.comfyPage.page.evaluate(() => {

browser_tests/fixtures/ws.ts

@@ -1,11 +1,7 @@
 import { test as base } from '@playwright/test'
 
-import type { StatusWsMessage } from '../../src/schemas/apiSchema'
-
-export type WsMessage = { type: 'status'; data: StatusWsMessage }
-
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: WsMessage, url?: string): Promise<void> }
+  ws: { trigger(data: any, url?: string): Promise<void> }
 }>({
   ws: [
     async ({ page }, use) => {

browser_tests/helpers/actionbar.ts

@@ -5,18 +5,14 @@ import type { AutoQueueMode } from '../../src/stores/queueStore'
 export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
-  public readonly propertiesButton: Locator
 
   constructor(public readonly page: Page) {
-    this.root = page.locator('.actionbar-container')
+    this.root = page.locator('.actionbar')
     this.queueButton = new ComfyQueueButton(this)
-    this.propertiesButton = this.root.getByLabel('Toggle properties panel')
   }
 
   async isDocked() {
-    const className = await this.root
-      .locator('.actionbar')
-      .getAttribute('class')
+    const className = await this.root.getAttribute('class')
     return className?.includes('static') ?? false
   }
 }

browser_tests/tests/actionbar.spec.ts

@@ -1,9 +1,9 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
-import type { WsMessage } from '../fixtures/ws'
+import type { StatusWsMessage } from '../../src/schemas/apiSchema.ts'
+import { comfyPageFixture } from '../fixtures/ComfyPage.ts'
+import { webSocketFixture } from '../fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -61,7 +61,7 @@ test.describe('Actionbar', () => {
 
     // Trigger a status websocket message
     const triggerStatus = async (queueSize: number) => {
-      const message = {
+      await ws.trigger({
         type: 'status',
         data: {
           status: {
@@ -70,9 +70,7 @@ test.describe('Actionbar', () => {
             }
           }
         }
-      } satisfies WsMessage
-
-      await ws.trigger(message)
+      } as StatusWsMessage)
     }
 
     // Extract the width from the queue response

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -75,6 +75,9 @@ test.describe('Background Image Upload', () => {
     // Upload the test image
     await fileChooser.setFiles(comfyPage.assetPath('image32x32.webp'))
 
+    // Wait for upload to complete and verify the setting was updated
+    await comfyPage.page.waitForTimeout(500) // Give time for file reading
+
     // Verify the URL input now has an API URL
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
     const inputValue = await urlInput.inputValue()
@@ -188,11 +191,14 @@ test.describe('Background Image Upload', () => {
     )
     await uploadButton.hover()
 
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
     const uploadTooltip = comfyPage.page.locator('.p-tooltip:visible')
     await expect(uploadTooltip).toBeVisible()
 
     // Move away to hide tooltip
     await comfyPage.page.locator('body').hover()
+    await comfyPage.page.waitForTimeout(100)
 
     // Set a background to enable clear button
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
@@ -203,6 +209,8 @@ test.describe('Background Image Upload', () => {
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
     await clearButton.hover()
 
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
     const clearTooltip = comfyPage.page.locator('.p-tooltip:visible')
     await expect(clearTooltip).toBeVisible()
   })

browser_tests/tests/colorPalette.spec.ts

@@ -203,6 +203,7 @@ test.describe('Node Color Adjustments', () => {
     comfyPage
   }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.page.waitForTimeout(128)
 
     // Drag mouse to force canvas to redraw
     await comfyPage.page.mouse.move(0, 0)
@@ -210,6 +211,7 @@ test.describe('Node Color Adjustments', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
 
     await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.page.waitForTimeout(128)
 
     await comfyPage.page.mouse.move(8, 8)
     await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
@@ -233,6 +235,7 @@ test.describe('Node Color Adjustments', () => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.setSetting('Comfy.ColorPalette', 'light')
     const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
     const workflow = await comfyPage.page.evaluate(() => {
       return localStorage.getItem('workflow')
     })

browser_tests/tests/dialog.spec.ts

@@ -43,6 +43,7 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
 
   // Wait for any async operations to complete after dialog closes
   await comfyPage.nextFrame()
+  await comfyPage.page.waitForTimeout(100)
 
   // Make a change to the graph
   await comfyPage.doubleClickCanvas()

browser_tests/tests/execution.spec.ts

@@ -36,6 +36,10 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
+    // @note: Wait for the execution to finish. We might want to move to a more
+    // reliable way to wait for the execution to finish. Workflow in this test
+    // is simple enough that this is fine for now.
+    await comfyPage.page.waitForTimeout(200)
 
     expect(await (await input.getWidget(0)).getValue()).toBe('foo')
     expect(await (await output1.getWidget(0)).getValue()).toBe('foo')

browser_tests/tests/featureFlags.spec.ts

@@ -94,6 +94,9 @@ test.describe('Feature Flags', () => {
   test('Server feature flags are received and accessible', async ({
     comfyPage
   }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
       return window['app'].api.serverFeatureFlags
@@ -113,6 +116,9 @@ test.describe('Feature Flags', () => {
   test('serverSupportsFeature method works with real backend flags', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test serverSupportsFeature with real backend flags
     const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
       return window['app'].api.serverSupportsFeature(
@@ -164,6 +170,9 @@ test.describe('Feature Flags', () => {
   test('getServerFeature method works with real backend data', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test getServerFeature method
     const previewMetadataValue = await comfyPage.page.evaluate(() => {
       return window['app'].api.getServerFeature('supports_preview_metadata')
@@ -190,6 +199,9 @@ test.describe('Feature Flags', () => {
   test('getServerFeatures returns all backend feature flags', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test getServerFeatures returns all flags
     const allFeatures = await comfyPage.page.evaluate(() => {
       return window['app'].api.getServerFeatures()
@@ -236,6 +248,9 @@ test.describe('Feature Flags', () => {
   test('Server features are immutable when accessed via getServerFeatures', async ({
     comfyPage
   }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
     const immutabilityTest = await comfyPage.page.evaluate(() => {
       // Get a copy of server features
       const features1 = window['app'].api.getServerFeatures()

browser_tests/tests/groupNode.spec.ts

@@ -104,6 +104,8 @@ test.describe('Group Node', () => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
@@ -318,12 +320,14 @@ test.describe('Group Node', () => {
     test('Convert to group node, no selection', async ({ comfyPage }) => {
       expect(await comfyPage.getVisibleToastCount()).toBe(0)
       await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
       expect(await comfyPage.getVisibleToastCount()).toBe(1)
     })
     test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
       expect(await comfyPage.getVisibleToastCount()).toBe(0)
       await comfyPage.clickTextEncodeNode1()
       await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
       expect(await comfyPage.getVisibleToastCount()).toBe(1)
     })
   })

browser_tests/tests/interaction.spec.ts

@@ -307,6 +307,8 @@ test.describe('Node Interaction', () => {
       position: numberWidgetPos
     })
     await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
+    // Wait for 1s so that it does not trigger the search box by double click.
+    await comfyPage.page.waitForTimeout(1000)
     await comfyPage.canvas.click({
       position: {
         x: 10,
@@ -330,6 +332,7 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'prompt-dialog-opened-text.png'
     )
+    await comfyPage.page.waitForTimeout(1000)
     await comfyPage.canvas.click({
       position: {
         x: 10,
@@ -660,6 +663,9 @@ test.describe('Load workflow', () => {
     await comfyPage.loadWorkflow('nodes/single_ksampler')
     const node = (await comfyPage.getFirstNodeRef())!
     await node.click('collapse')
+    // Wait 300ms between 2 clicks so that it is not treated as a double click
+    // by litegraph.
+    await comfyPage.page.waitForTimeout(300)
     await comfyPage.clickEmptySpace()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'