Files
ComfyUI_frontend/browser_tests/tests/toastNotifications.spec.ts
Christian Byrne b22c646910 test: E2E coverage for toasts, error overlay, selection toolbox, linear mode (#9555)
## Summary

Add 26 E2E tests across 5 spec files covering high-impact,
frequently-used UI flows: toast notifications, error overlay navigation,
selection toolbox actions, linear mode layout, and selection rectangle
multi-select.

## Tests

| Spec file | Tests | Coverage |
|---|---|---|
| `toastNotifications.spec.ts` | 5 | Toast lifecycle, dismiss, severity
levels |
| `errorOverlaySeeErrors.spec.ts` | 6 | Error overlay → errors panel
navigation flow |
| `selectionToolboxActions.spec.ts` | 4 | Delete, info,
convert-to-subgraph, multi-delete |
| `linearMode.spec.ts` | 5 | Linear layout toggle, widget rendering,
persistence |
| `selectionRectangle.spec.ts` | 6 | Vue node multi-selection via
rectangle drag |

## Review Focus

- Selection toolbox tests use `force: true` clicks due to CSS transform
positioning — is this acceptable or should we find a more robust
approach?
- 2 additional toolbox tests (bypass, refresh) were split to draft PR
#9768 due to flaky CI visibility issues with
`useSelectionToolboxPosition`.

## Stack

Depends on #9554 for FeatureFlagHelper/QueueHelper infrastructure.

- #9554: Test infrastructure helpers
- **→ This PR**: Toasts, error overlay, selection toolbox, linear mode,
selection rectangle
- #9556: Node search, bottom panel, focus mode, job history, side panel
- #9557: Errors tab, node headers, queue notifications, settings sidebar
- #9558: Minimap, widget copy, floating menus, node library essentials

---------

Co-authored-by: GitHub Action <action@github.com>
2026-03-16 23:37:40 -07:00

74 lines
2.1 KiB
TypeScript

import {
comfyPageFixture as test,
comfyExpect as expect
} from '../fixtures/ComfyPage'
test.describe('Toast Notifications', { tag: '@ui' }, () => {
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
await comfyPage.setup()
})
async function triggerErrorToast(comfyPage: {
page: { evaluate: (fn: () => void) => Promise<void> }
nextFrame: () => Promise<void>
}) {
await comfyPage.page.evaluate(() => {
window.app!.extensionManager.toast.add({
severity: 'error',
summary: 'Error',
detail: 'Test execution error',
life: 30000
})
})
await comfyPage.nextFrame()
}
test('Error toast appears when triggered', async ({ comfyPage }) => {
await triggerErrorToast(comfyPage)
await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
})
test('Toast shows correct error severity class', async ({ comfyPage }) => {
await triggerErrorToast(comfyPage)
const errorToast = comfyPage.page.locator(
'.p-toast-message.p-toast-message-error'
)
await expect(errorToast.first()).toBeVisible()
})
test('Toast can be dismissed via close button', async ({ comfyPage }) => {
await triggerErrorToast(comfyPage)
await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
const closeButton = comfyPage.page.locator('.p-toast-close-button').first()
await closeButton.click()
await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
})
test('All toasts cleared via closeToasts helper', async ({ comfyPage }) => {
await triggerErrorToast(comfyPage)
await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
await comfyPage.toast.closeToasts()
expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
})
test('Toast error count is accurate', async ({ comfyPage }) => {
await triggerErrorToast(comfyPage)
await expect(
comfyPage.page.locator('.p-toast-message.p-toast-message-error').first()
).toBeVisible()
const errorCount = await comfyPage.toast.getToastErrorCount()
expect(errorCount).toBeGreaterThanOrEqual(1)
})
})