mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
## Summary Comprehensive Playwright E2E tests for the error systems: ErrorDialog, ErrorOverlay, and the errors tab (missing nodes, models, media, execution errors). ## Changes - **What**: - **ErrorDialog** (`errorDialog.spec.ts`, 7 tests): configure/prompt error triggers, Show Report, Copy to Clipboard, Find Issues on GitHub, Contact Support - **ErrorOverlay** (`errorOverlay.spec.ts`, 12 tests): error count labels, per-type button labels (missing nodes/models/media/multiple), See Errors flow (open panel, dismiss, close), undo/redo persistence - **Errors tab — common** (`errorsTab.spec.ts`, 3 tests): tab visibility, search/filter execution errors - **Errors tab — Missing nodes** (`errorsTabMissingNodes.spec.ts`, 5 tests): MissingNodeCard, packs group, expand/collapse, locate button - **Errors tab — Missing models** (`errorsTabMissingModels.spec.ts`, 6 tests): group display, model name, expand/referencing nodes, clipboard copy, OSS Copy URL/Download buttons - **Errors tab — Missing media** (`errorsTabMissingMedia.spec.ts`, 7 tests): migrated from `missingMedia.spec.ts` with detection, upload/library/cancel flows, locate - **Errors tab — Execution** (`errorsTabExecution.spec.ts`, 2 tests): Find on GitHub/Copy buttons, runtime error panel - **Shared helpers**: `ErrorsTabHelper.ts` (openErrorsTabViaSeeErrors), `clipboardSpy.ts` (interceptClipboardWrite/getClipboardText) - **Component changes**: added `data-testid` to `ErrorDialogContent.vue`, `FindIssueButton.vue`, `MissingModelRow.vue`, `MissingModelCard.vue` - **Selectors**: registered all new test IDs in `selectors.ts` - **Test assets**: `missing_nodes_and_media.json` (compound errors), `missing_models_with_nodes.json` (expand/locate) - **Migrations**: error tests from `dialog.spec.ts` → dedicated files, `errorOverlaySeeErrors.spec.ts` → `errorOverlay.spec.ts`, `missingMedia.spec.ts` → `errorsTabMissingMedia.spec.ts` ## Review Focus - OSS tests (`@oss` tag) verify Download/Copy URL buttons appear for models with embedded URLs. - The `missing_models.json` fixture must remain without nodes — adding `CheckpointLoaderSimple` nodes causes directory mismatch in `enrichWithEmbeddedMetadata` that prevents URL enrichment. A separate `missing_models_with_nodes.json` fixture is used for expand/locate tests. ## Cloud tests deferred Missing model cloud environment tests (`@cloud` tag — hidden buttons, import-unsupported notice) are deferred to a follow-up PR. The `comfyPage` fixture cannot bypass the Firebase auth guard in cloud builds, causing `window.app` initialization timeout. A separate infra PR is needed to add cloud auth bypass to the fixture. ## Bug Discovery During testing, a bug was found where the **Locate button for missing nodes in subgraphs fails on initial workflow load**. `collectMissingNodes` in `loadGraphData` captures execution IDs using pre-`configure()` JSON node IDs, but `configure()` triggers subgraph node ID deduplication (PR #8762, always-on since PR #9510) which remaps colliding IDs. This will be addressed in a follow-up PR. - Fixes #10847 (tracked, fix pending in separate PR) ## Testing - 42 new/migrated E2E tests across 8 spec files - All OSS tests pass locally and in CI ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10848-test-comprehensive-E2E-tests-for-error-dialog-overlay-and-errors-tab-3386d73d36508137a5e4cec8b12fa2fa) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import type { Page } from '@playwright/test'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
import type { ComfyPage } from '../fixtures/ComfyPage'
|
|
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
|
import { TestIds } from '../fixtures/selectors'
|
|
import {
|
|
interceptClipboardWrite,
|
|
getClipboardText
|
|
} from '../helpers/clipboardSpy'
|
|
|
|
async function triggerConfigureError(
|
|
comfyPage: ComfyPage,
|
|
message = 'Error on configure!'
|
|
) {
|
|
await comfyPage.page.evaluate((msg: string) => {
|
|
const graph = window.graph!
|
|
;(graph as { configure: () => void }).configure = () => {
|
|
throw new Error(msg)
|
|
}
|
|
}, message)
|
|
|
|
await comfyPage.workflow.loadWorkflow('default')
|
|
|
|
return comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
|
|
}
|
|
|
|
async function waitForPopupNavigation(page: Page, action: () => Promise<void>) {
|
|
const popupPromise = page.waitForEvent('popup')
|
|
await action()
|
|
const popup = await popupPromise
|
|
await popup.waitForLoadState()
|
|
return popup
|
|
}
|
|
|
|
test.describe('Error dialog', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
|
|
})
|
|
|
|
test('Should display an error dialog when graph configure fails', async ({
|
|
comfyPage
|
|
}) => {
|
|
const errorDialog = await triggerConfigureError(comfyPage)
|
|
await expect(errorDialog).toBeVisible()
|
|
})
|
|
|
|
test('Should display an error dialog when prompt execution fails', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.page.evaluate(async () => {
|
|
const app = window.app!
|
|
app.api.queuePrompt = () => {
|
|
throw new Error('Error on queuePrompt!')
|
|
}
|
|
await app.queuePrompt(0)
|
|
})
|
|
const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
|
|
await expect(errorDialog).toBeVisible()
|
|
})
|
|
|
|
test('Should display error message body', async ({ comfyPage }) => {
|
|
const errorDialog = await triggerConfigureError(
|
|
comfyPage,
|
|
'Test error message body'
|
|
)
|
|
await expect(errorDialog).toBeVisible()
|
|
await expect(errorDialog).toContainText('Test error message body')
|
|
})
|
|
|
|
test('Should show report section when "Show Report" is clicked', async ({
|
|
comfyPage
|
|
}) => {
|
|
const errorDialog = await triggerConfigureError(comfyPage)
|
|
await expect(errorDialog).toBeVisible()
|
|
await expect(errorDialog.locator('pre')).not.toBeVisible()
|
|
|
|
await errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport).click()
|
|
|
|
const reportPre = errorDialog.locator('pre')
|
|
await expect(reportPre).toBeVisible()
|
|
await expect(reportPre).toHaveText(/\S/)
|
|
await expect(
|
|
errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport)
|
|
).not.toBeVisible()
|
|
})
|
|
|
|
test('Should copy report to clipboard when "Copy to Clipboard" is clicked', async ({
|
|
comfyPage
|
|
}) => {
|
|
const errorDialog = await triggerConfigureError(comfyPage)
|
|
await expect(errorDialog).toBeVisible()
|
|
|
|
await errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport).click()
|
|
await expect(errorDialog.locator('pre')).toBeVisible()
|
|
|
|
await interceptClipboardWrite(comfyPage.page)
|
|
|
|
await errorDialog.getByTestId(TestIds.dialogs.errorDialogCopyReport).click()
|
|
|
|
const reportText = await errorDialog.locator('pre').textContent()
|
|
const copiedText = await getClipboardText(comfyPage.page)
|
|
expect(copiedText).toBe(reportText)
|
|
})
|
|
|
|
test('Should open GitHub issues search when "Find Issues" is clicked', async ({
|
|
comfyPage
|
|
}) => {
|
|
const errorDialog = await triggerConfigureError(comfyPage)
|
|
await expect(errorDialog).toBeVisible()
|
|
|
|
const popup = await waitForPopupNavigation(comfyPage.page, () =>
|
|
errorDialog.getByTestId(TestIds.dialogs.errorDialogFindIssues).click()
|
|
)
|
|
|
|
const url = new URL(popup.url())
|
|
expect(url.hostname).toBe('github.com')
|
|
expect(url.pathname).toContain('/issues')
|
|
|
|
await popup.close()
|
|
})
|
|
|
|
test('Should open contact support when "Help Fix This" is clicked', async ({
|
|
comfyPage
|
|
}) => {
|
|
const errorDialog = await triggerConfigureError(comfyPage)
|
|
await expect(errorDialog).toBeVisible()
|
|
|
|
const popup = await waitForPopupNavigation(comfyPage.page, () =>
|
|
errorDialog.getByTestId(TestIds.dialogs.errorDialogContactSupport).click()
|
|
)
|
|
|
|
const url = new URL(popup.url())
|
|
expect(url.hostname).toBe('support.comfy.org')
|
|
|
|
await popup.close()
|
|
})
|
|
})
|