test(e2e): align test default menu to Top; make legacy specs explicit (#5746)

## Summary
UseNewMenu has been defaulted to Top in the app for over a year;
Playwright’s test default lagged behind. This PR aligns the test default
with reality and keeps legacy specs stable.

## Changes
- tests(e2e): default to 'Top' via fixture; specs that previously relied
on the old implicit default now explicitly set 'Comfy.UseNewMenu' to
'Disabled'.
- docs(browser-tests): remove outdated README note suggesting tests set
'Top' manually.

## Review Focus
- Intentional uses of 'Top' and 'Bottom' remain unchanged.
- Confirm ComfyPage default remains 'Top' (see
browser_tests/fixtures/ComfyPage.ts).

## Screenshots (if applicable)
N/A

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5746-test-e2e-align-test-default-menu-to-Top-make-legacy-specs-explicit-2786d73d365081218d06c1346f3ae18e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Benjamin Lu
2025-09-24 18:43:22 -07:00
committed by GitHub
parent f3e68804e8
commit bc4549244e
37 changed files with 129 additions and 9 deletions

View File

@@ -56,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI
### Common Setup Issues ### Common Setup Issues
**Most tests require the new menu system** - Add to your test:
```typescript
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
})
```
### Release API Mocking ### Release API Mocking
By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions. By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.

View File

@@ -1643,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
try { try {
await comfyPage.setupSettings({ await comfyPage.setupSettings({
'Comfy.UseNewMenu': 'Disabled', 'Comfy.UseNewMenu': 'Top',
// Hide canvas menu/info/selection toolbox by default. // Hide canvas menu/info/selection toolbox by default.
'Comfy.Graph.CanvasInfo': false, 'Comfy.Graph.CanvasInfo': false,
'Comfy.Graph.CanvasMenu': false, 'Comfy.Graph.CanvasMenu': false,

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Background Image Upload', () => { test.describe('Background Image Upload', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
// Reset the background image setting before each test // Reset the background image setting before each test

View File

@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
}) })
} }
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Change Tracker', () => { test.describe('Change Tracker', () => {
test.describe('Undo/Redo', () => { test.describe('Undo/Redo', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {

View File

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
interface ChatHistoryEntry { interface ChatHistoryEntry {
prompt: string prompt: string
response: string response: string

View File

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
import type { Palette } from '../../src/schemas/colorPaletteSchema' import type { Palette } from '../../src/schemas/colorPaletteSchema'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
const customColorPalettes: Record<string, Palette> = { const customColorPalettes: Record<string, Palette> = {
obsidian: { obsidian: {
version: 102, version: 102,

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Keybindings', () => { test.describe('Keybindings', () => {
test('Should execute command', async ({ comfyPage }) => { test('Should execute command', async ({ comfyPage }) => {
await comfyPage.registerCommand('TestCommand', () => { await comfyPage.registerCommand('TestCommand', () => {

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Copy Paste', () => { test.describe('Copy Paste', () => {
test('Can copy and paste node', async ({ comfyPage }) => { test('Can copy and paste node', async ({ comfyPage }) => {
await comfyPage.clickEmptyLatentNode() await comfyPage.clickEmptyLatentNode()

View File

@@ -4,6 +4,10 @@ import { expect } from '@playwright/test'
import type { Keybinding } from '../../src/schemas/keyBindingSchema' import type { Keybinding } from '../../src/schemas/keyBindingSchema'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Load workflow warning', () => { test.describe('Load workflow warning', () => {
test('Should display a warning when loading a workflow with missing nodes', async ({ test('Should display a warning when loading a workflow with missing nodes', async ({
comfyPage comfyPage

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('DOM Widget', () => { test.describe('DOM Widget', () => {
test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => { test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
await comfyPage.loadWorkflow('widgets/collapsed_multiline') await comfyPage.loadWorkflow('widgets/collapsed_multiline')

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Execution', () => { test.describe('Execution', () => {
test('Report error on unconnected slot', async ({ comfyPage }) => { test('Report error on unconnected slot', async ({ comfyPage }) => {
await comfyPage.disconnectEdge() await comfyPage.disconnectEdge()

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Feature Flags', () => { test.describe('Feature Flags', () => {
test('Client and server exchange feature flags on connection', async ({ test('Client and server exchange feature flags on connection', async ({
comfyPage comfyPage

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Graph', () => { test.describe('Graph', () => {
// Should be able to fix link input slot index after swap the input order // Should be able to fix link input slot index after swap the input order
// Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348 // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Graph Canvas Menu', () => { test.describe('Graph Canvas Menu', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
// Set link render mode to spline to make sure it's not affected by other tests' // Set link render mode to spline to make sure it's not affected by other tests'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

View File

@@ -4,6 +4,10 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
import type { NodeReference } from '../fixtures/utils/litegraphUtils' import type { NodeReference } from '../fixtures/utils/litegraphUtils'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Group Node', () => { test.describe('Group Node', () => {
test.describe('Node library sidebar', () => { test.describe('Node library sidebar', () => {
const groupNodeName = 'DefautWorkflowGroupNode' const groupNodeName = 'DefautWorkflowGroupNode'

View File

@@ -9,6 +9,10 @@ import {
} from '../fixtures/ComfyPage' } from '../fixtures/ComfyPage'
import type { NodeReference } from '../fixtures/utils/litegraphUtils' import type { NodeReference } from '../fixtures/utils/litegraphUtils'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Item Interaction', () => { test.describe('Item Interaction', () => {
test('Can select/delete all items', async ({ comfyPage }) => { test('Can select/delete all items', async ({ comfyPage }) => {
await comfyPage.loadWorkflow('groups/mixed_graph_items') await comfyPage.loadWorkflow('groups/mixed_graph_items')

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Keybindings', () => { test.describe('Keybindings', () => {
test('Should not trigger non-modifier keybinding when typing in input fields', async ({ test('Should not trigger non-modifier keybinding when typing in input fields', async ({
comfyPage comfyPage

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
function listenForEvent(): Promise<Event> { function listenForEvent(): Promise<Event> {
return new Promise<Event>((resolve) => { return new Promise<Event>((resolve) => {
document.addEventListener('litegraph:canvas', (e) => resolve(e), { document.addEventListener('litegraph:canvas', (e) => resolve(e), {

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Load Workflow in Media', () => { test.describe('Load Workflow in Media', () => {
const fileNames = [ const fileNames = [
'workflow.webp', 'workflow.webp',

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('LOD Threshold', () => { test.describe('LOD Threshold', () => {
test('Should switch to low quality mode at correct zoom threshold', async ({ test('Should switch to low quality mode at correct zoom threshold', async ({
comfyPage comfyPage

View File

@@ -4,6 +4,10 @@ import type { ComfyApp } from '../../src/scripts/app'
import { NodeBadgeMode } from '../../src/types/nodeSource' import { NodeBadgeMode } from '../../src/types/nodeSource'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Node Badge', () => { test.describe('Node Badge', () => {
test('Can add badge', async ({ comfyPage }) => { test('Can add badge', async ({ comfyPage }) => {
await comfyPage.page.evaluate(() => { await comfyPage.page.evaluate(() => {

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
// If an input is optional by node definition, it should be shown as // If an input is optional by node definition, it should be shown as
// a hollow circle no matter what shape it was defined in the workflow JSON. // a hollow circle no matter what shape it was defined in the workflow JSON.
test.describe('Optional input', () => { test.describe('Optional input', () => {

View File

@@ -3,6 +3,10 @@ import {
comfyPageFixture as test comfyPageFixture as test
} from '../fixtures/ComfyPage' } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Node search box', () => { test.describe('Node search box', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box') await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box')

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Note Node', () => { test.describe('Note Node', () => {
test('Can load node nodes', async ({ comfyPage }) => { test('Can load node nodes', async ({ comfyPage }) => {
await comfyPage.loadWorkflow('nodes/note_nodes') await comfyPage.loadWorkflow('nodes/note_nodes')

View File

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
import type { NodeReference } from '../fixtures/utils/litegraphUtils' import type { NodeReference } from '../fixtures/utils/litegraphUtils'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Primitive Node', () => { test.describe('Primitive Node', () => {
test('Can load with correct size', async ({ comfyPage }) => { test('Can load with correct size', async ({ comfyPage }) => {
await comfyPage.loadWorkflow('primitive/primitive_node') await comfyPage.loadWorkflow('primitive/primitive_node')

View File

@@ -40,6 +40,7 @@ test.describe('Reroute Node', () => {
test.describe('LiteGraph Native Reroute Node', () => { test.describe('LiteGraph Native Reroute Node', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80) await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
}) })

View File

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
import { NodeBadgeMode } from '../../src/types/nodeSource' import { NodeBadgeMode } from '../../src/types/nodeSource'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Canvas Right Click Menu', () => { test.describe('Canvas Right Click Menu', () => {
test('Can add node', async ({ comfyPage }) => { test('Can add node', async ({ comfyPage }) => {
await comfyPage.rightClickCanvas() await comfyPage.rightClickCanvas()

View File

@@ -4,6 +4,9 @@ import { comfyPageFixture } from '../fixtures/ComfyPage'
const test = comfyPageFixture const test = comfyPageFixture
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
const BLUE_COLOR = 'rgb(51, 51, 85)' const BLUE_COLOR = 'rgb(51, 51, 85)'
const RED_COLOR = 'rgb(85, 51, 51)' const RED_COLOR = 'rgb(85, 51, 51)'

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Selection Toolbox - More Options Submenus', () => { test.describe('Selection Toolbox - More Options Submenus', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true) await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Settings Search functionality', () => { test.describe('Settings Search functionality', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
// Register test settings to verify hidden/deprecated filtering // Register test settings to verify hidden/deprecated filtering

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../../fixtures/ComfyPage' import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Vue Nodes - Delete Key Interaction', () => { test.describe('Vue Nodes - Delete Key Interaction', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
// Enable Vue nodes rendering // Enable Vue nodes rendering

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../../fixtures/ComfyPage' import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Vue Nodes - LOD', () => { test.describe('Vue Nodes - LOD', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

View File

@@ -3,6 +3,10 @@ import {
comfyPageFixture as test comfyPageFixture as test
} from '../../../fixtures/ComfyPage' } from '../../../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Vue Node Selection', () => { test.describe('Vue Node Selection', () => {
test.beforeEach(async ({ comfyPage }) => { test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

View File

@@ -3,6 +3,10 @@ import {
comfyPageFixture as test comfyPageFixture as test
} from '../../../fixtures/ComfyPage' } from '../../../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
const BYPASS_HOTKEY = 'Control+b' const BYPASS_HOTKEY = 'Control+b'
const BYPASS_CLASS = /before:bg-bypass\/60/ const BYPASS_CLASS = /before:bg-bypass\/60/

View File

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
import { comfyPageFixture as test } from '../fixtures/ComfyPage' import { comfyPageFixture as test } from '../fixtures/ComfyPage'
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
})
test.describe('Combo text widget', () => { test.describe('Combo text widget', () => {
test('Truncates text when resized', async ({ comfyPage }) => { test('Truncates text when resized', async ({ comfyPage }) => {
await comfyPage.resizeLoadCheckpointNode(0.2, 1) await comfyPage.resizeLoadCheckpointNode(0.2, 1)