test

- Provides proper IDE hints and removes warnings from .vue SFC files.
- Replaces all the v2 info with v4.

.gitattributes

@@ -9,6 +9,7 @@
 *.mts text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
+*.yaml text eol=lf
 
 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true

.github/workflows/pr-playwright-deploy.yaml

@@ -56,39 +56,14 @@ jobs:
           fi
           echo "branch=${{ fromJSON(steps.pr-info.outputs.result).sanitized_branch }}" >> $GITHUB_OUTPUT
 
-      - name: Install pnpm
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v4
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        with:
-          node-version: lts/*
-
-      - name: Download playwright report shards
+      - name: Download playwright report
         if: fromJSON(steps.pr-info.outputs.result).number != null
         uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
-          pattern: playwright-report-${{ matrix.browser }}-shard-*
-          path: playwright-shards
-
-      - name: Install Playwright
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: npm install @playwright/test
-
-      - name: Merge reports
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: |
-          npx playwright merge-reports --reporter html ./playwright-shards
-          mv playwright-report merged-report
-
-      - name: Rename merged report
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: mv merged-report playwright-report
+          name: playwright-report-${{ matrix.browser }}
+          path: playwright-report
 
       - name: Install Wrangler
         if: fromJSON(steps.pr-info.outputs.result).number != null
@@ -103,20 +78,14 @@ jobs:
           RETRY_COUNT=0
           MAX_RETRIES=3
           SUCCESS=false
-          DEPLOYMENT_URL=""
           
           while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
             RETRY_COUNT=$((RETRY_COUNT + 1))
             echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
             
-            OUTPUT=$(npx wrangler pages deploy playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }} 2>&1)
-            EXIT_CODE=$?
-            
-            if [ $EXIT_CODE -eq 0 ]; then
+            if npx wrangler pages deploy playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
               SUCCESS=true
-              DEPLOYMENT_URL=$(echo "$OUTPUT" | grep -oE 'https://[^ ]+\.pages\.dev' | head -1)
               echo "Deployment successful on attempt $RETRY_COUNT"
-              echo "URL: $DEPLOYMENT_URL"
             else
               echo "Deployment failed on attempt $RETRY_COUNT"
               if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
@@ -130,25 +99,10 @@ jobs:
             echo "All deployment attempts failed"
             exit 1
           fi
-          
-          echo "deployment_url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
 
-      - name: Save deployment info
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        run: |
-          echo "${{ matrix.browser }}|${{ steps.cloudflare-deploy.outcome == 'success' && '0' || '1' }}|${{ steps.cloudflare-deploy.outputs.deployment_url || '#' }}" > deployment-info-${{ matrix.browser }}.txt
-
-      - name: Upload deployment info
-        if: fromJSON(steps.pr-info.outputs.result).number != null
-        uses: actions/upload-artifact@v4
-        with:
-          name: deployment-info-${{ matrix.browser }}
-          path: deployment-info-${{ matrix.browser }}.txt
-          retention-days: 1
-
   comment-tests-starting:
     runs-on: ubuntu-latest
     if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'requested'
@@ -190,14 +144,14 @@ jobs:
           echo "" >> comment.md
           echo "⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
           echo "" >> comment.md
-          echo "### 🚀 Running Tests (5 parallel shards per browser)" >> comment.md
-          echo "- 🧪 **chromium**: Running tests in 5 shards..." >> comment.md
-          echo "- 🧪 **chromium-0.5x**: Running tests in 5 shards..." >> comment.md
-          echo "- 🧪 **chromium-2x**: Running tests in 5 shards..." >> comment.md
-          echo "- 🧪 **mobile-chrome**: Running tests in 5 shards..." >> comment.md
+          echo "### 🚀 Running Tests" >> comment.md
+          echo "- 🧪 **chromium**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-0.5x**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-2x**: Running tests..." >> comment.md
+          echo "- 🧪 **mobile-chrome**: Running tests..." >> comment.md
           echo "" >> comment.md
           echo "---" >> comment.md
-          echo "⏱️ Tests are running in parallel across 20 jobs (4 browsers × 5 shards)..." >> comment.md
+          echo "⏱️ Please wait while tests are running across all browsers..." >> comment.md
 
       - name: Comment PR - Tests Started
         if: steps.pr.outputs.result != 'null'

.github/workflows/test-ui.yaml

@@ -12,6 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       cache-key: ${{ steps.cache-key.outputs.key }}
+      playwright-version: ${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
     steps:
       - name: Checkout ComfyUI
         uses: actions/checkout@v4
@@ -44,7 +45,6 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
 
-
       - name: Cache tool outputs
         uses: actions/cache@v4
         with:
@@ -67,6 +67,13 @@ jobs:
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
 
+      - name: Playwright Version
+        id: playwright-version
+        run:  |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq --raw-output '.[0].devDependencies["@playwright/test"].version')
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
+        working-directory: ComfyUI_frontend
+
       - name: Save cache
         uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
@@ -75,7 +82,8 @@ jobs:
             ComfyUI_frontend
           key: comfyui-setup-${{ steps.cache-key.outputs.key }}
 
-  playwright-tests:
+  # Sharded chromium tests
+  playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
     permissions:
@@ -83,33 +91,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        include:
-          # Chromium tests with 5 shards (optimized distribution)
-          - browser: chromium
-            shard: 1
-            shard-total: 5
-          - browser: chromium
-            shard: 2
-            shard-total: 5
-          - browser: chromium
-            shard: 3
-            shard-total: 5
-          - browser: chromium
-            shard: 4
-            shard-total: 5
-          - browser: chromium
-            shard: 5
-            shard-total: 5
-          # Other browser variants without sharding (faster tests)
-          - browser: chromium-2x
-            shard: 1
-            shard-total: 1
-          - browser: chromium-0.5x
-            shard: 1
-            shard-total: 1
-          - browser: mobile-chrome
-            shard: 1
-            shard-total: 1
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     steps:
       - name: Wait for cache propagation
         run: sleep 10
@@ -133,6 +116,85 @@ jobs:
           python-version: '3.10'
           cache: 'pip'
 
+      - name: Install requirements
+        run: |
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI
+
+
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+        id: playwright
+        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        working-directory: ComfyUI_frontend
+        env:
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: blob-report-chromium-${{ matrix.shardIndex }}
+          path: blob-report/
+          retention-days: 1
+
+  playwright-tests:
+    # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
+    timeout-minutes: 15
+    needs: setup
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+    steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
+      - name: Restore cached setup
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+          cache: 'pip'
 
       - name: Install requirements
         run: |
@@ -142,57 +204,83 @@ jobs:
           pip install wait-for-it
         working-directory: ComfyUI
 
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v4
+        id: cache-playwright-browsers
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-browsers-${{ needs.setup.outputs.playwright-version }}'
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Install Playwright Browsers (operating system dependencies)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps
+        working-directory: ComfyUI_frontend
+
       - name: Start ComfyUI server
         run: |
           python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
           wait-for-it --service 127.0.0.1:8188 -t 600
         working-directory: ComfyUI
 
-      - name: Cache Playwright browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ matrix.browser }}
-          restore-keys: |
-            playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
-            playwright-browsers-${{ runner.os }}-
-
-      - name: Install Playwright Browsers
-        run: npx playwright install chromium --with-deps
-        working-directory: ComfyUI_frontend
-
-      - name: Run Playwright tests (${{ matrix.browser }}${{ matrix.shard-total > 1 && format(', shard {0}/{1}', matrix.shard, matrix.shard-total) || '' }})
+      - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: |
-          if [ "${{ matrix.shard-total }}" -gt 1 ]; then
-            npx playwright test --project=${{ matrix.browser }} --shard=${{ matrix.shard }}/${{ matrix.shard-total }}
-          else
-            npx playwright test --project=${{ matrix.browser }}
-          fi
+        run: npx playwright test --project=${{ matrix.browser }} --reporter=html
         working-directory: ComfyUI_frontend
 
       - uses: actions/upload-artifact@v4
-        if: always() # note: use always() to allow results to be upload/report even tests failed.
+        if: always()
         with:
-          name: playwright-report-${{ matrix.browser }}-shard-${{ matrix.shard }}
+          name: playwright-report-${{ matrix.browser }}
           path: ComfyUI_frontend/playwright-report/
           retention-days: 30
 
+  # Merge sharded test reports
   merge-reports:
-    needs: playwright-tests
-    if: always()
+    needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
     steps:
-      - name: Download all workflow artifacts
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'pnpm'
+          cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: |
+          pnpm install --frozen-lockfile
+        working-directory: ComfyUI_frontend
+
+      - name: Download blob reports
         uses: actions/download-artifact@v4
         with:
-          pattern: playwright-report-*
-          path: all-reports/
+          path: ComfyUI_frontend/all-blob-reports
+          pattern: blob-report-chromium-*
+          merge-multiple: true
 
-      - name: Upload merged report
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+        working-directory: ComfyUI_frontend
+
+      - name: Upload HTML report
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-report-merged
-          path: all-reports/
+          name: playwright-report-chromium
+          path: ComfyUI_frontend/playwright-report/
           retention-days: 30
-

.github/workflows/update-electron-types.yaml

@@ -35,12 +35,12 @@ jobs:
             electron-types-tools-cache-${{ runner.os }}-
 
       - name: Update electron types
-        run: pnpm install @comfyorg/comfyui-electron-types@latest
+        run: pnpm install --workspace-root @comfyorg/comfyui-electron-types@latest
 
       - name: Get new version
         id: get-version
         run: |
-          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./pnpm-lock.yaml')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
+          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].version')
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request

.vscode/tailwind.json

@@ -2,12 +2,32 @@
   "version": 1.1,
   "atDirectives": [
     {
-      "name": "@tailwind",
-      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "name": "@import",
+      "description": "Use the `@import` directive to inline CSS files, including Tailwind itself, into your stylesheet.",
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#import"
+        }
+      ]
+    },
+    {
+      "name": "@theme",
+      "description": "Use the `@theme` directive to define custom design tokens like fonts, colors, and breakpoints.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme"
+        }
+      ]
+    },
+    {
+      "name": "@layer",
+      "description": "Use the `@layer` directive inside `@theme` to organize custom styles into different layers like `base`, `components`, and `utilities`.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#layer"
         }
       ]
     },
@@ -22,32 +42,32 @@
       ]
     },
     {
-      "name": "@responsive",
-      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "name": "@config",
+      "description": "Use the `@config` directive to load a legacy JavaScript-based Tailwind configuration file.",
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#config"
         }
       ]
     },
     {
-      "name": "@screen",
-      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "name": "@reference",
+      "description": "Use the `@reference` directive to import theme variables, custom utilities, and custom variants from other files without duplicating CSS.",
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#reference"
         }
       ]
     },
     {
-      "name": "@variants",
-      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "name": "@plugin",
+      "description": "Use the `@plugin` directive to load a legacy JavaScript-based Tailwind plugin.",
       "references": [
         {
           "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin"
         }
       ]
     }

browser_tests/SHARDING.md

@@ -1,87 +0,0 @@
-# Playwright Test Sharding Strategy
-
-## Overview
-
-This document describes the optimized sharding strategy for Playwright tests to achieve balanced execution times across parallel CI jobs.
-
-## Problem
-
-The original naive sharding approach (dividing tests equally by file count) resulted in imbalanced execution times:
-- Shard 5 (chromium): 9 minutes
-- Other shards: 2-6 minutes
-
-This was due to `interaction.spec.ts` containing 61 tests with 81 screenshot comparisons, making it significantly heavier than other test files.
-
-## Solution
-
-### 1. Weighted Test Distribution
-
-Tests are assigned weights based on:
-- Number of test cases
-- Screenshot comparisons (heavy operations)
-- Test complexity (DOM manipulation, async operations)
-- Historical execution time
-
-### 2. Optimized Shard Configuration
-
-The sharding configuration uses a greedy algorithm to distribute tests:
-1. Sort tests by weight (heaviest first)
-2. Assign each test to the shard with lowest total weight
-3. Result: ~4.5% imbalance vs. previous 80% imbalance
-
-### 3. Project-Specific Sharding
-
-- **chromium**: 5 shards with optimized distribution
-- **chromium-2x, chromium-0.5x**: No sharding (fast enough)
-- **mobile-chrome**: No sharding (fast enough)
-
-## Implementation
-
-### Generated Configuration
-
-Run `pnpm test:browser:optimize-shards` to regenerate the shard configuration based on current test weights.
-
-### Files
-
-- `shardConfig.generated.ts`: Auto-generated shard assignments
-- `playwright-sharded.config.ts`: Playwright config using optimized shards
-- `scripts/optimizeSharding.js`: Script to analyze and optimize distribution
-
-### CI Configuration
-
-The GitHub workflow uses a matrix strategy with explicit shard configurations:
-
-```yaml
-matrix:
-  include:
-    - browser: chromium
-      shard: 1
-      shard-total: 5
-    # ... etc
-```
-
-## Shard Distribution (Balanced)
-
-| Shard | Weight | Key Tests |
-|-------|--------|-----------|
-| 1 | 225 | interaction.spec.ts (heavy screenshots) |
-| 2 | 220 | subgraph.spec.ts, workflows, primitives |
-| 3 | 225 | widget.spec.ts, nodeLibrary, templates |
-| 4 | 215 | nodeSearchBox, rightClickMenu, colorPalette |
-| 5 | 215 | dialog, groupNode, remoteWidgets |
-
-## Monitoring
-
-After deployment, monitor CI execution times to ensure shards remain balanced. If new heavy tests are added, re-run the optimization script.
-
-## Maintenance
-
-1. When adding new heavy tests, update `TEST_WEIGHTS` in `optimizeSharding.js`
-2. Run `pnpm test:browser:optimize-shards`
-3. Commit the updated `shardConfig.generated.ts`
-
-## Expected Results
-
-- All chromium shards complete in 3-4 minutes (vs. 2-9 minutes)
-- Total CI time reduced from 9 minutes to ~4 minutes
-- Better resource utilization in CI runners

browser_tests/customTestRunner.ts

@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-/**
- * Custom test runner for optimized sharding
- * This script determines which tests to run based on shard configuration
- */
-import { spawn } from 'child_process'
-
-import { NO_SHARD_PROJECTS, getShardTests } from './shardConfig'
-
-const projectName = process.env.PLAYWRIGHT_PROJECT || 'chromium'
-const shardInfo = process.env.PLAYWRIGHT_SHARD
-
-// Parse shard information from environment variable (format: "current/total")
-let shardIndex = 1
-let totalShards = 1
-
-if (shardInfo) {
-  const [current, total] = shardInfo.split('/').map(Number)
-  shardIndex = current
-  totalShards = total
-}
-
-// Check if this project should skip sharding
-if (NO_SHARD_PROJECTS.includes(projectName)) {
-  // For projects that don't need sharding, only run on shard 1
-  if (shardIndex > 1) {
-    console.log(
-      `Skipping shard ${shardIndex}/${totalShards} for project ${projectName} (no sharding needed)`
-    )
-    process.exit(0)
-  }
-  console.log(`Running all tests for project ${projectName} (no sharding)`)
-} else {
-  console.log(
-    `Running shard ${shardIndex}/${totalShards} for project ${projectName}`
-  )
-}
-
-// Get the test files for this shard
-const shardTests = getShardTests(shardIndex, totalShards, projectName)
-
-// Build the Playwright command
-const args = ['playwright', 'test', `--project=${projectName}`]
-
-if (shardTests && shardTests.length > 0) {
-  // Add specific test files for this shard
-  shardTests.forEach((testFile) => {
-    args.push(`browser_tests/tests/${testFile}`)
-  })
-} else if (shardTests === null) {
-  // Run all tests (no custom sharding)
-  // Don't add any test file filters
-} else {
-  // Empty shard - no tests to run
-  console.log(`No tests assigned to shard ${shardIndex}/${totalShards}`)
-  process.exit(0)
-}
-
-// Add CI-specific options if running in CI
-if (process.env.CI) {
-  args.push('--reporter=github')
-}
-
-// Execute Playwright with the constructed arguments
-console.log(`Executing: npx ${args.join(' ')}`)
-const child = spawn('npx', args, {
-  stdio: 'inherit',
-  shell: true
-})
-
-child.on('exit', (code) => {
-  process.exit(code || 0)
-})

browser_tests/fixtures/ComfyPage.ts

@@ -734,10 +734,39 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async zoom(deltaY: number, steps: number = 1) {
-    await this.page.mouse.move(10, 10)
+  async zoom(
+    deltaY: number,
+    steps: number = 1,
+    wheelDeltaY?: number,
+    position?: Position
+  ) {
+    const targetPos = position || { x: 10, y: 10 }
+    await this.page.mouse.move(targetPos.x, targetPos.y)
     for (let i = 0; i < steps; i++) {
-      await this.page.mouse.wheel(0, deltaY)
+      if (wheelDeltaY !== undefined) {
+        // Dispatch a custom wheel event with wheelDeltaY property
+        await this.page.evaluate(
+          ({ deltaY, wheelDeltaY, x, y }) => {
+            const canvas = document.getElementById('graph-canvas')
+            if (!canvas) return
+            const event = new WheelEvent('wheel', {
+              deltaY: deltaY,
+              deltaX: 0,
+              deltaMode: 0,
+              clientX: x,
+              clientY: y,
+              bubbles: true,
+              cancelable: true
+            })
+            // Add custom wheelDeltaY property
+            ;(event as any).wheelDeltaY = wheelDeltaY
+            canvas.dispatchEvent(event)
+          },
+          { deltaY, wheelDeltaY, x: targetPos.x, y: targetPos.y }
+        )
+      } else {
+        await this.page.mouse.wheel(0, deltaY)
+      }
     }
     await this.nextFrame()
   }

browser_tests/fixtures/UserSelectPage.ts

@@ -1,5 +1,4 @@
-import { test as base } from '@playwright/test'
-import { Page } from 'playwright'
+import { Page, test as base } from '@playwright/test'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,7 +1,7 @@
+import type { Request, Route } from '@playwright/test'
 import _ from 'es-toolkit/compat'
 import fs from 'fs'
 import path from 'path'
-import type { Request, Route } from 'playwright'
 import { v4 as uuidv4 } from 'uuid'
 
 import type {

browser_tests/scripts/optimizeSharding.js

@@ -1,201 +0,0 @@
-#!/usr/bin/env node
-/**
- * Script to analyze test distribution and create optimized shard configurations
- * Run with: node browser_tests/scripts/optimizeSharding.js
- */
-import { execSync } from 'child_process'
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// Test weights based on empirical data and test characteristics
-const TEST_WEIGHTS = {
-  'interaction.spec.ts': 180, // Very heavy - 61 tests with 81 screenshots
-  'subgraph.spec.ts': 60, // Heavy - 23 complex tests
-  'widget.spec.ts': 50, // Medium-heavy - screenshots
-  'nodeSearchBox.spec.ts': 45, // Medium-heavy - screenshots
-  'dialog.spec.ts': 40,
-  'groupNode.spec.ts': 40,
-  'rightClickMenu.spec.ts': 35,
-  'sidebar/workflows.spec.ts': 35,
-  'sidebar/nodeLibrary.spec.ts': 35,
-  'colorPalette.spec.ts': 30,
-  'nodeDisplay.spec.ts': 25,
-  'primitiveNode.spec.ts': 25,
-  'templates.spec.ts': 25,
-  'remoteWidgets.spec.ts': 25,
-  'useSettingSearch.spec.ts': 25,
-  'nodeHelp.spec.ts': 25,
-  'extensionAPI.spec.ts': 20,
-  'bottomPanelShortcuts.spec.ts': 20,
-  'featureFlags.spec.ts': 20,
-  'sidebar/queue.spec.ts': 20,
-  'graphCanvasMenu.spec.ts': 20,
-  'nodeBadge.spec.ts': 20,
-  'noteNode.spec.ts': 15,
-  'domWidget.spec.ts': 15,
-  'selectionToolbox.spec.ts': 15,
-  'execution.spec.ts': 15,
-  'rerouteNode.spec.ts': 15,
-  'copyPaste.spec.ts': 15,
-  'loadWorkflowInMedia.spec.ts': 15,
-  'menu.spec.ts': 15,
-  // Light tests
-  'backgroundImageUpload.spec.ts': 10,
-  'browserTabTitle.spec.ts': 10,
-  'changeTracker.spec.ts': 10,
-  'chatHistory.spec.ts': 10,
-  'commands.spec.ts': 10,
-  'customIcons.spec.ts': 10,
-  'graph.spec.ts': 10,
-  'keybindings.spec.ts': 10,
-  'litegraphEvent.spec.ts': 10,
-  'minimap.spec.ts': 10,
-  'releaseNotifications.spec.ts': 10,
-  'subgraph-rename-dialog.spec.ts': 10,
-  'userSelectView.spec.ts': 10,
-  'versionMismatchWarnings.spec.ts': 10,
-  'workflowTabThumbnail.spec.ts': 10,
-  'actionbar.spec.ts': 10
-}
-
-/**
- * Get all test files from the browser_tests directory
- */
-function getTestFiles() {
-  const testsDir = path.join(__dirname, '..', 'tests')
-  const files = []
-
-  function scanDir(dir, prefix = '') {
-    const items = fs.readdirSync(dir)
-    for (const item of items) {
-      const fullPath = path.join(dir, item)
-      const relativePath = prefix ? `${prefix}/${item}` : item
-
-      if (fs.statSync(fullPath).isDirectory()) {
-        scanDir(fullPath, relativePath)
-      } else if (item.endsWith('.spec.ts')) {
-        files.push(relativePath)
-      }
-    }
-  }
-
-  scanDir(testsDir)
-  return files
-}
-
-/**
- * Create balanced shards based on test weights
- */
-function createBalancedShards(testFiles, numShards) {
-  // Create test entries with weights
-  const tests = testFiles.map((file) => ({
-    file,
-    weight: TEST_WEIGHTS[file] || 15 // Default weight for unknown tests
-  }))
-
-  // Sort tests by weight (heaviest first)
-  tests.sort((a, b) => b.weight - a.weight)
-
-  // Initialize shards
-  const shards = Array.from({ length: numShards }, () => ({
-    tests: [],
-    totalWeight: 0
-  }))
-
-  // Distribute tests using a greedy algorithm (assign to shard with least weight)
-  for (const test of tests) {
-    // Find shard with minimum weight
-    let minShard = shards[0]
-    for (const shard of shards) {
-      if (shard.totalWeight < minShard.totalWeight) {
-        minShard = shard
-      }
-    }
-
-    // Add test to the lightest shard
-    minShard.tests.push(test.file)
-    minShard.totalWeight += test.weight
-  }
-
-  return shards
-}
-
-/**
- * Print shard configuration
- */
-function printShardConfig(shards) {
-  console.log('\n=== Optimized Shard Configuration ===\n')
-
-  shards.forEach((shard, index) => {
-    console.log(`Shard ${index + 1} (weight: ${shard.totalWeight})`)
-    console.log('  Tests:')
-    shard.tests.forEach((test) => {
-      const weight = TEST_WEIGHTS[test] || 15
-      console.log(`    - ${test} (weight: ${weight})`)
-    })
-    console.log()
-  })
-
-  // Print weight balance analysis
-  const weights = shards.map((s) => s.totalWeight)
-  const maxWeight = Math.max(...weights)
-  const minWeight = Math.min(...weights)
-  const avgWeight = weights.reduce((a, b) => a + b, 0) / weights.length
-
-  console.log('=== Balance Analysis ===')
-  console.log(`Max weight: ${maxWeight}`)
-  console.log(`Min weight: ${minWeight}`)
-  console.log(`Avg weight: ${avgWeight.toFixed(1)}`)
-  console.log(
-    `Imbalance: ${(((maxWeight - minWeight) / avgWeight) * 100).toFixed(1)}%`
-  )
-}
-
-/**
- * Generate TypeScript configuration file
- */
-function generateConfigFile(shards) {
-  const config = `/**
- * Auto-generated shard configuration for balanced test distribution
- * Generated on: ${new Date().toISOString()}
- */
-
-export const OPTIMIZED_SHARDS = ${JSON.stringify(
-    shards.map((s) => s.tests),
-    null,
-    2
-  )}
-
-export function getShardTests(shardIndex: number): string[] {
-  return OPTIMIZED_SHARDS[shardIndex - 1] || []
-}
-
-export function getShardPattern(shardIndex: number): string[] {
-  return getShardTests(shardIndex).map(test => \`**/\${test}\`)
-}
-`
-
-  const configPath = path.join(__dirname, '..', 'shardConfig.generated.ts')
-  fs.writeFileSync(configPath, config)
-  console.log(`\n✅ Generated configuration file: ${configPath}`)
-}
-
-// Main execution
-function main() {
-  const numShards = parseInt(process.argv[2]) || 5
-
-  console.log(`Analyzing test distribution for ${numShards} shards...`)
-
-  const testFiles = getTestFiles()
-  console.log(`Found ${testFiles.length} test files`)
-
-  const shards = createBalancedShards(testFiles, numShards)
-  printShardConfig(shards)
-  generateConfigFile(shards)
-}
-
-main()

browser_tests/shardConfig.generated.ts

@@ -1,71 +0,0 @@
-/**
- * Auto-generated shard configuration for balanced test distribution
- * Generated on: 2025-09-02T16:09:27.236Z
- */
-
-export const OPTIMIZED_SHARDS = [
-  [
-    'interaction.spec.ts',
-    'selectionToolbox.spec.ts',
-    'chatHistory.spec.ts',
-    'litegraphEvent.spec.ts',
-    'versionMismatchWarnings.spec.ts'
-  ],
-  [
-    'subgraph.spec.ts',
-    'sidebar/workflows.spec.ts',
-    'primitiveNode.spec.ts',
-    'bottomPanelShortcuts.spec.ts',
-    'nodeBadge.spec.ts',
-    'execution.spec.ts',
-    'rerouteNode.spec.ts',
-    'changeTracker.spec.ts',
-    'keybindings.spec.ts',
-    'userSelectView.spec.ts'
-  ],
-  [
-    'widget.spec.ts',
-    'sidebar/nodeLibrary.spec.ts',
-    'nodeHelp.spec.ts',
-    'templates.spec.ts',
-    'featureFlags.spec.ts',
-    'copyPaste.spec.ts',
-    'loadWorkflowInMedia.spec.ts',
-    'actionbar.spec.ts',
-    'commands.spec.ts',
-    'minimap.spec.ts',
-    'workflowTabThumbnail.spec.ts'
-  ],
-  [
-    'nodeSearchBox.spec.ts',
-    'rightClickMenu.spec.ts',
-    'colorPalette.spec.ts',
-    'useSettingSearch.spec.ts',
-    'graphCanvasMenu.spec.ts',
-    'domWidget.spec.ts',
-    'menu.spec.ts',
-    'backgroundImageUpload.spec.ts',
-    'customIcons.spec.ts',
-    'releaseNotifications.spec.ts'
-  ],
-  [
-    'dialog.spec.ts',
-    'groupNode.spec.ts',
-    'nodeDisplay.spec.ts',
-    'remoteWidgets.spec.ts',
-    'extensionAPI.spec.ts',
-    'sidebar/queue.spec.ts',
-    'noteNode.spec.ts',
-    'browserTabTitle.spec.ts',
-    'graph.spec.ts',
-    'subgraph-rename-dialog.spec.ts'
-  ]
-]
-
-export function getShardTests(shardIndex: number): string[] {
-  return OPTIMIZED_SHARDS[shardIndex - 1] || []
-}
-
-export function getShardPattern(shardIndex: number): string[] {
-  return getShardTests(shardIndex).map((test) => `**/${test}`)
-}

browser_tests/shardConfig.ts

@@ -1,158 +0,0 @@
-/**
- * Custom sharding configuration for Playwright tests
- * Balances test execution time across shards based on test complexity
- */
-
-export interface ShardConfig {
-  testFiles: string[]
-  weight: number // Estimated relative execution time
-}
-
-// Group tests by execution characteristics
-export const HEAVY_SCREENSHOT_TESTS = [
-  'interaction.spec.ts' // 61 tests, 81 screenshots - heaviest test file
-]
-
-export const MEDIUM_SCREENSHOT_TESTS = [
-  'widget.spec.ts', // 17 tests with screenshots
-  'rightClickMenu.spec.ts', // 11 tests with screenshots
-  'nodeSearchBox.spec.ts', // 23 tests with screenshots
-  'groupNode.spec.ts' // 17 tests with screenshots
-]
-
-export const LIGHT_SCREENSHOT_TESTS = [
-  'colorPalette.spec.ts',
-  'primitiveNode.spec.ts',
-  'nodeDisplay.spec.ts',
-  'graphCanvasMenu.spec.ts',
-  'nodeBadge.spec.ts',
-  'noteNode.spec.ts',
-  'domWidget.spec.ts',
-  'templates.spec.ts',
-  'selectionToolbox.spec.ts',
-  'execution.spec.ts',
-  'rerouteNode.spec.ts',
-  'copyPaste.spec.ts',
-  'loadWorkflowInMedia.spec.ts'
-]
-
-export const HEAVY_LOGIC_TESTS = [
-  'subgraph.spec.ts', // 23 tests, complex logic
-  'dialog.spec.ts', // 21 tests
-  'sidebar/workflows.spec.ts', // 18 tests
-  'sidebar/nodeLibrary.spec.ts' // 18 tests
-]
-
-export const MEDIUM_LOGIC_TESTS = [
-  'remoteWidgets.spec.ts', // 14 tests
-  'useSettingSearch.spec.ts', // 13 tests
-  'sidebar/queue.spec.ts', // 12 tests
-  'nodeHelp.spec.ts', // 12 tests
-  'extensionAPI.spec.ts', // 11 tests
-  'bottomPanelShortcuts.spec.ts', // 11 tests
-  'featureFlags.spec.ts', // 9 tests
-  'menu.spec.ts' // 9 tests
-]
-
-export const LIGHT_LOGIC_TESTS = [
-  'backgroundImageUpload.spec.ts',
-  'browserTabTitle.spec.ts',
-  'changeTracker.spec.ts',
-  'chatHistory.spec.ts',
-  'commands.spec.ts',
-  'customIcons.spec.ts',
-  'graph.spec.ts',
-  'keybindings.spec.ts',
-  'litegraphEvent.spec.ts',
-  'minimap.spec.ts',
-  'releaseNotifications.spec.ts',
-  'subgraph-rename-dialog.spec.ts',
-  'userSelectView.spec.ts',
-  'versionMismatchWarnings.spec.ts',
-  'workflowTabThumbnail.spec.ts',
-  'actionbar.spec.ts'
-]
-
-// Optimized shard distribution for chromium tests
-export const CHROMIUM_SHARDS: ShardConfig[] = [
-  {
-    // Shard 1: Heavy screenshot test (interaction.spec.ts alone)
-    testFiles: HEAVY_SCREENSHOT_TESTS,
-    weight: 100
-  },
-  {
-    // Shard 2: Medium screenshot tests
-    testFiles: MEDIUM_SCREENSHOT_TESTS,
-    weight: 80
-  },
-  {
-    // Shard 3: Light screenshot tests
-    testFiles: LIGHT_SCREENSHOT_TESTS,
-    weight: 70
-  },
-  {
-    // Shard 4: Heavy logic tests
-    testFiles: HEAVY_LOGIC_TESTS,
-    weight: 75
-  },
-  {
-    // Shard 5: Medium and light logic tests
-    testFiles: [...MEDIUM_LOGIC_TESTS, ...LIGHT_LOGIC_TESTS],
-    weight: 65
-  }
-]
-
-// No sharding needed for these projects
-export const NO_SHARD_PROJECTS = [
-  'mobile-chrome',
-  'chromium-0.5x',
-  'chromium-2x'
-]
-
-/**
- * Get the test files for a specific shard
- * @param shardIndex 1-based shard index
- * @param totalShards Total number of shards
- * @param projectName Name of the Playwright project
- */
-export function getShardTests(
-  shardIndex: number,
-  totalShards: number,
-  projectName: string
-): string[] | null {
-  // For projects that don't need sharding, return null to run all tests
-  if (NO_SHARD_PROJECTS.includes(projectName)) {
-    return null
-  }
-
-  // For chromium project, use custom sharding
-  if (projectName === 'chromium' && totalShards === 5) {
-    const shard = CHROMIUM_SHARDS[shardIndex - 1]
-    return shard ? shard.testFiles : []
-  }
-
-  // Fallback to default sharding for other configurations
-  return null
-}
-
-/**
- * Get a grep pattern to filter tests for a specific shard
- * @param shardIndex 1-based shard index
- * @param totalShards Total number of shards
- * @param projectName Name of the Playwright project
- */
-export function getShardGrep(
-  shardIndex: number,
-  totalShards: number,
-  projectName: string
-): RegExp | null {
-  const tests = getShardTests(shardIndex, totalShards, projectName)
-
-  if (!tests || tests.length === 0) {
-    return null
-  }
-
-  // Create a regex pattern that matches any of the test files
-  const pattern = tests.map((file) => file.replace(/\./g, '\\.')).join('|')
-  return new RegExp(pattern)
-}

browser_tests/tests/interaction.spec.ts

@@ -854,15 +854,14 @@ test.describe('Canvas Navigation', () => {
     })
 
     test('Mouse wheel should zoom in/out', async ({ comfyPage }) => {
-      await comfyPage.page.mouse.move(400, 300)
-      await comfyPage.page.mouse.wheel(0, -120)
-      await comfyPage.nextFrame()
+      const position = { x: 400, y: 300 }
+      // Use custom zoom method with wheelDeltaY to simulate mouse wheel
+      await comfyPage.zoom(-120, 1, 120, position)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-wheel-zoom-in.png'
       )
 
-      await comfyPage.page.mouse.wheel(0, 240)
-      await comfyPage.nextFrame()
+      await comfyPage.zoom(240, 1, -240, position)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-wheel-zoom-out.png'
       )
@@ -923,7 +922,23 @@ test.describe('Canvas Navigation', () => {
     test('Ctrl + mouse wheel should zoom in/out', async ({ comfyPage }) => {
       await comfyPage.page.mouse.move(400, 300)
       await comfyPage.page.keyboard.down('Control')
-      await comfyPage.page.mouse.wheel(0, -120)
+      // Dispatch custom wheel event with wheelDeltaY and Control key
+      await comfyPage.page.evaluate(() => {
+        const canvas = document.getElementById('graph-canvas')
+        if (!canvas) return
+        const event = new WheelEvent('wheel', {
+          deltaY: -120,
+          deltaX: 0,
+          deltaMode: 0,
+          clientX: 400,
+          clientY: 300,
+          ctrlKey: true,
+          bubbles: true,
+          cancelable: true
+        })
+        ;(event as any).wheelDeltaY = 120
+        canvas.dispatchEvent(event)
+      })
       await comfyPage.page.keyboard.up('Control')
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
@@ -931,7 +946,22 @@ test.describe('Canvas Navigation', () => {
       )
 
       await comfyPage.page.keyboard.down('Control')
-      await comfyPage.page.mouse.wheel(0, 240)
+      await comfyPage.page.evaluate(() => {
+        const canvas = document.getElementById('graph-canvas')
+        if (!canvas) return
+        const event = new WheelEvent('wheel', {
+          deltaY: 240,
+          deltaX: 0,
+          deltaMode: 0,
+          clientX: 400,
+          clientY: 300,
+          ctrlKey: true,
+          bubbles: true,
+          cancelable: true
+        })
+        ;(event as any).wheelDeltaY = -240
+        canvas.dispatchEvent(event)
+      })
       await comfyPage.page.keyboard.up('Control')
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
@@ -1017,10 +1047,26 @@ test.describe('Canvas Navigation', () => {
 
     await expect(comfyPage.canvas).toHaveScreenshot('standard-initial.png')
 
-    await comfyPage.page.mouse.move(400, 300)
+    const position = { x: 400, y: 300 }
 
+    // Pan right with Shift + wheel
     await comfyPage.page.keyboard.down('Shift')
-    await comfyPage.page.mouse.wheel(0, 120)
+    await comfyPage.page.evaluate(({ x, y }) => {
+      const canvas = document.getElementById('graph-canvas')
+      if (!canvas) return
+      const event = new WheelEvent('wheel', {
+        deltaY: 120,
+        deltaX: 0,
+        deltaMode: 0,
+        clientX: x,
+        clientY: y,
+        shiftKey: true,
+        bubbles: true,
+        cancelable: true
+      })
+      ;(event as any).wheelDeltaY = -120
+      canvas.dispatchEvent(event)
+    }, position)
     await comfyPage.page.keyboard.up('Shift')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
@@ -1028,7 +1074,22 @@ test.describe('Canvas Navigation', () => {
     )
 
     await comfyPage.page.keyboard.down('Shift')
-    await comfyPage.page.mouse.wheel(0, -240)
+    await comfyPage.page.evaluate(({ x, y }) => {
+      const canvas = document.getElementById('graph-canvas')
+      if (!canvas) return
+      const event = new WheelEvent('wheel', {
+        deltaY: -240,
+        deltaX: 0,
+        deltaMode: 0,
+        clientX: x,
+        clientY: y,
+        shiftKey: true,
+        bubbles: true,
+        cancelable: true
+      })
+      ;(event as any).wheelDeltaY = 240
+      canvas.dispatchEvent(event)
+    }, position)
     await comfyPage.page.keyboard.up('Shift')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
@@ -1036,7 +1097,22 @@ test.describe('Canvas Navigation', () => {
     )
 
     await comfyPage.page.keyboard.down('Shift')
-    await comfyPage.page.mouse.wheel(0, 120)
+    await comfyPage.page.evaluate(({ x, y }) => {
+      const canvas = document.getElementById('graph-canvas')
+      if (!canvas) return
+      const event = new WheelEvent('wheel', {
+        deltaY: 120,
+        deltaX: 0,
+        deltaMode: 0,
+        clientX: x,
+        clientY: y,
+        shiftKey: true,
+        bubbles: true,
+        cancelable: true
+      })
+      ;(event as any).wheelDeltaY = -120
+      canvas.dispatchEvent(event)
+    }, position)
     await comfyPage.page.keyboard.up('Shift')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(