mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-28 16:27:32 +00:00
Compare commits
5 Commits
refactor/a
...
playwright
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
684261d592 | ||
|
|
1d231bd988 | ||
|
|
d370b182e7 | ||
|
|
1a8a2be4c3 | ||
|
|
026bd4d757 |
148
browser_tests/tests/errorsTab.spec.ts
Normal file
148
browser_tests/tests/errorsTab.spec.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
import type { Page } from '@playwright/test'
|
||||
|
||||
import {
|
||||
comfyPageFixture as test,
|
||||
comfyExpect as expect
|
||||
} from '../fixtures/ComfyPage'
|
||||
|
||||
async function triggerExecutionError(comfyPage: {
|
||||
canvasOps: { disconnectEdge: () => Promise<void> }
|
||||
page: Page
|
||||
command: { executeCommand: (cmd: string) => Promise<void> }
|
||||
}) {
|
||||
await comfyPage.canvasOps.disconnectEdge()
|
||||
await comfyPage.page.keyboard.press('Escape')
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
}
|
||||
|
||||
test.describe('Errors tab in right side panel', { tag: '@ui' }, () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
await comfyPage.settings.setSetting(
|
||||
'Comfy.RightSidePanel.ShowErrorsTab',
|
||||
true
|
||||
)
|
||||
await comfyPage.setup()
|
||||
})
|
||||
|
||||
test('Errors tab appears after execution error', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
// Dismiss the error overlay
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /Dismiss/i }).click()
|
||||
|
||||
await comfyPage.actionbar.propertiesButton.click()
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
await expect(
|
||||
propertiesPanel.root.getByRole('tab', { name: 'Errors' })
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
test('Error card shows locate button', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /See Errors/i }).click()
|
||||
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
|
||||
const locateButton = propertiesPanel.root.locator(
|
||||
'button .icon-\\[lucide--locate\\]'
|
||||
)
|
||||
await expect(locateButton.first()).toBeVisible()
|
||||
})
|
||||
|
||||
test('Clicking locate button focuses canvas', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /See Errors/i }).click()
|
||||
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
|
||||
const locateButton = propertiesPanel.root
|
||||
.locator('button')
|
||||
.filter({ has: comfyPage.page.locator('.icon-\\[lucide--locate\\]') })
|
||||
.first()
|
||||
await locateButton.click()
|
||||
|
||||
await expect(comfyPage.canvas).toBeVisible()
|
||||
})
|
||||
|
||||
test('Collapse all button collapses error groups', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /See Errors/i }).click()
|
||||
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
|
||||
const collapseButton = propertiesPanel.root.getByRole('button', {
|
||||
name: 'Collapse all'
|
||||
})
|
||||
|
||||
// The collapse toggle only appears when there are multiple groups.
|
||||
// If only one group exists, this test verifies the button is not shown.
|
||||
const count = await collapseButton.count()
|
||||
if (count > 0) {
|
||||
await collapseButton.click()
|
||||
const expandButton = propertiesPanel.root.getByRole('button', {
|
||||
name: 'Expand all'
|
||||
})
|
||||
await expect(expandButton).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('Search filters errors', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /See Errors/i }).click()
|
||||
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
|
||||
// Search for a term that won't match any error
|
||||
await propertiesPanel.searchBox.fill('zzz_nonexistent_zzz')
|
||||
|
||||
await expect(
|
||||
propertiesPanel.root.locator('.icon-\\[lucide--locate\\]')
|
||||
).toHaveCount(0)
|
||||
|
||||
// Clear the search to restore results
|
||||
await propertiesPanel.searchBox.fill('')
|
||||
|
||||
await expect(
|
||||
propertiesPanel.root.locator('.icon-\\[lucide--locate\\]').first()
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
test('Errors tab shows error message text', async ({ comfyPage }) => {
|
||||
await triggerExecutionError(comfyPage)
|
||||
|
||||
const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(overlay).toBeVisible()
|
||||
await overlay.getByRole('button', { name: /See Errors/i }).click()
|
||||
|
||||
const { propertiesPanel } = comfyPage.menu
|
||||
await expect(propertiesPanel.root).toBeVisible()
|
||||
|
||||
// Error cards contain <p> elements with error messages
|
||||
const errorMessage = propertiesPanel.root
|
||||
.locator('.whitespace-pre-wrap')
|
||||
.first()
|
||||
await expect(errorMessage).toBeVisible()
|
||||
await expect(errorMessage).not.toHaveText('')
|
||||
})
|
||||
})
|
||||
71
browser_tests/tests/queueNotificationBanners.spec.ts
Normal file
71
browser_tests/tests/queueNotificationBanners.spec.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import {
|
||||
comfyPageFixture as test,
|
||||
comfyExpect as expect
|
||||
} from '../fixtures/ComfyPage'
|
||||
|
||||
test.describe('Queue Notification Banners', { tag: '@ui' }, () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
await comfyPage.settings.setSetting(
|
||||
'Comfy.RightSidePanel.ShowErrorsTab',
|
||||
true
|
||||
)
|
||||
await comfyPage.setup()
|
||||
})
|
||||
|
||||
test('Banner appears when prompt is queued', async ({ comfyPage }) => {
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const banner = comfyPage.page.locator('[role="status"][aria-live="polite"]')
|
||||
await expect(banner).toBeVisible()
|
||||
})
|
||||
|
||||
test('Banner shows queuing text initially', async ({ comfyPage }) => {
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const banner = comfyPage.page.locator('[role="status"][aria-live="polite"]')
|
||||
await expect(banner).toBeVisible()
|
||||
await expect(banner).toContainText(/Job queuing|Job queued/)
|
||||
})
|
||||
|
||||
test('Error overlay appears on failed execution', async ({ comfyPage }) => {
|
||||
await comfyPage.canvasOps.disconnectEdge()
|
||||
await comfyPage.page.keyboard.press('Escape')
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(errorOverlay).toBeVisible()
|
||||
})
|
||||
|
||||
test('Error overlay contains error description', async ({ comfyPage }) => {
|
||||
await comfyPage.canvasOps.disconnectEdge()
|
||||
await comfyPage.page.keyboard.press('Escape')
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(errorOverlay).toBeVisible()
|
||||
await expect(errorOverlay).not.toHaveText('')
|
||||
})
|
||||
|
||||
test('Error overlay can be dismissed', async ({ comfyPage }) => {
|
||||
await comfyPage.canvasOps.disconnectEdge()
|
||||
await comfyPage.page.keyboard.press('Escape')
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
|
||||
await expect(errorOverlay).toBeVisible()
|
||||
|
||||
await errorOverlay.getByRole('button', { name: /Dismiss/i }).click()
|
||||
await expect(errorOverlay).toBeHidden()
|
||||
})
|
||||
|
||||
test('Banner auto-dismisses after display', async ({ comfyPage }) => {
|
||||
await comfyPage.command.executeCommand('Comfy.QueuePrompt')
|
||||
|
||||
const banner = comfyPage.page.locator('[role="status"][aria-live="polite"]')
|
||||
await expect(banner).toBeVisible()
|
||||
|
||||
// Banner auto-dismisses after ~4 seconds
|
||||
await expect(banner).toBeHidden({ timeout: 10000 })
|
||||
})
|
||||
})
|
||||
57
browser_tests/tests/settingsSidebar.spec.ts
Normal file
57
browser_tests/tests/settingsSidebar.spec.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import {
|
||||
comfyExpect as expect,
|
||||
comfyPageFixture as test
|
||||
} from '../fixtures/ComfyPage'
|
||||
|
||||
test.describe('Settings Sidebar', { tag: '@ui' }, () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
await comfyPage.setup()
|
||||
})
|
||||
|
||||
test('Settings button is visible in sidebar', async ({ comfyPage }) => {
|
||||
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await expect(settingsButton).toBeVisible()
|
||||
})
|
||||
|
||||
test('Clicking settings button opens settings dialog', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await settingsButton.click()
|
||||
await expect(comfyPage.settingDialog.root).toBeVisible()
|
||||
})
|
||||
|
||||
test('Settings dialog shows categories', async ({ comfyPage }) => {
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await settingsButton.click()
|
||||
await expect(comfyPage.settingDialog.root).toBeVisible()
|
||||
await expect(comfyPage.settingDialog.categories.first()).toBeVisible()
|
||||
expect(await comfyPage.settingDialog.categories.count()).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
test('Settings dialog can be closed with Escape', async ({ comfyPage }) => {
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await settingsButton.click()
|
||||
await expect(comfyPage.settingDialog.root).toBeVisible()
|
||||
await comfyPage.page.keyboard.press('Escape')
|
||||
await expect(comfyPage.settingDialog.root).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('Settings search box is functional', async ({ comfyPage }) => {
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await settingsButton.click()
|
||||
await expect(comfyPage.settingDialog.root).toBeVisible()
|
||||
await comfyPage.settingDialog.searchBox.fill('color')
|
||||
await expect(comfyPage.settingDialog.searchBox).toHaveValue('color')
|
||||
})
|
||||
|
||||
test('Settings dialog can navigate to About panel', async ({ comfyPage }) => {
|
||||
const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
|
||||
await settingsButton.click()
|
||||
await expect(comfyPage.settingDialog.root).toBeVisible()
|
||||
await comfyPage.settingDialog.goToAboutPanel()
|
||||
await expect(comfyPage.page.locator('.about-container')).toBeVisible()
|
||||
})
|
||||
})
|
||||
69
browser_tests/tests/vueNodes/nodeHeaderActions.spec.ts
Normal file
69
browser_tests/tests/vueNodes/nodeHeaderActions.spec.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
comfyExpect as expect,
|
||||
comfyPageFixture as test
|
||||
} from '../../fixtures/ComfyPage'
|
||||
|
||||
test.describe('Vue Node Header Actions', { tag: '@node' }, () => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
|
||||
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
|
||||
await comfyPage.setup()
|
||||
await comfyPage.vueNodes.waitForNodes()
|
||||
})
|
||||
|
||||
test('Collapse button is visible on node header', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
await expect(vueNode.collapseButton).toBeVisible()
|
||||
})
|
||||
|
||||
test('Clicking collapse button hides node body', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
await expect(vueNode.body).toBeVisible()
|
||||
|
||||
await vueNode.toggleCollapse()
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
await expect(vueNode.body).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('Clicking collapse button again expands node', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
|
||||
await vueNode.toggleCollapse()
|
||||
await comfyPage.nextFrame()
|
||||
await expect(vueNode.body).not.toBeVisible()
|
||||
|
||||
await vueNode.toggleCollapse()
|
||||
await comfyPage.nextFrame()
|
||||
await expect(vueNode.body).toBeVisible()
|
||||
})
|
||||
|
||||
test('Double-click header enters title edit mode', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
|
||||
await vueNode.header.dblclick()
|
||||
await expect(vueNode.titleInput).toBeVisible()
|
||||
})
|
||||
|
||||
test('Title edit saves on Enter', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
|
||||
await vueNode.setTitle('My Custom Sampler')
|
||||
expect(await vueNode.getTitle()).toBe('My Custom Sampler')
|
||||
})
|
||||
|
||||
test('Title edit cancels on Escape', async ({ comfyPage }) => {
|
||||
const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
|
||||
await vueNode.setTitle('Renamed Sampler')
|
||||
expect(await vueNode.getTitle()).toBe('Renamed Sampler')
|
||||
|
||||
await vueNode.header.dblclick()
|
||||
await vueNode.titleInput.fill('This Should Be Cancelled')
|
||||
await vueNode.titleInput.press('Escape')
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
expect(await vueNode.getTitle()).toBe('Renamed Sampler')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user