ComfyUI_frontend/.claude/skills/writing-playwright-tests/core/setup.md

Test Setup Patterns

Essential Imports

// ALWAYS use these custom fixtures - never vanilla Playwright
import {
  comfyPageFixture as test,
  comfyExpect as expect
} from './fixtures/ComfyPage'

Quick Start Template

import {
  comfyPageFixture as test,
  comfyExpect as expect
} from './fixtures/ComfyPage'

test.describe('FeatureName', { tag: ['@screenshot', '@canvas'] }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
  })

  test('should do something', async ({ comfyPage }) => {
    await comfyPage.loadWorkflow('myWorkflow')
    await comfyPage.nextFrame()

    // Test logic here

    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
  })
})

Test Tags

Add appropriate tags to every test:

Tag	When to Use
@smoke	Quick essential tests
@slow	Tests > 10 seconds
@screenshot	Visual regression tests
@canvas	Canvas interactions
@node	Node-related
@widget	Widget-related
@mobile	Mobile viewport tests

test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {

Common Settings

// Menu mode
await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')

// Vue Nodes 2.0
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

// UI elements
await comfyPage.setSetting('Comfy.Minimap.Visible', false)
await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)

// Warnings
await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', false)

// Locale
await comfyPage.setSetting('Comfy.Locale', 'fr')

Loading Workflows

// Load from browser_tests/assets/
await comfyPage.loadWorkflow('widgets/combo_widget')
await comfyPage.nextFrame()

// Always use premade workflows, don't create programmatically

Common Gotchas

See debugging.md for detailed fixes.

Issue	Solution	Details
Canvas not updating	Add nextFrame() after canvas ops	canvas.md
Double-click unreliable	Use { delay: 5 } option	canvas.md
Screenshot mismatch	Linux-only, use PR label	debugging.md
Keyboard not working	Focus canvas first	canvas.md
Flaky async assertions	Use expect.poll() or toPass()	debugging.md

Fresh Page Setup

For tests that need clean state:

test('first-time user experience', async ({ comfyPage }) => {
  await comfyPage.setup({ clearStorage: true })
  // localStorage/sessionStorage cleared
})