mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
8b1cf594d1
## Summary - Move error red border from TopMenuSection/ComfyActionbar to ErrorOverlay - Add error indicator (outline + StatusBadge dot) on right side panel toggle button when errors are present, the panel/overlay are closed, and the errors tab setting is enabled - Replace technical group titles (e.g. "Missing Node Packs") with user-friendly i18n messages in ErrorOverlay - Dynamically change action button label based on single error type (e.g. "Show missing nodes" instead of "See Errors") - Remove unused `hasAnyError` prop from ComfyActionbar - Fix `type="secondary"` → `variant="secondary"` on panel toggle button - Pre-wire `missing_media` error type support for #10309 - Migrate ErrorOverlay E2E selectors from `getByText`/`getByRole` to `data-testid` - Update E2E screenshot snapshots affected by TopMenuSection error state design changes ## Test plan - [x] Trigger execution error → verify red border on ErrorOverlay, no red border on TopMenuSection/ComfyActionbar - [x] With errors and right side panel closed → verify red outline + dot on panel toggle button - [x] Open right side panel or error overlay → verify indicator disappears - [x] Disable `Comfy.RightSidePanel.ShowErrorsTab` → verify no indicator even with errors - [x] Load workflow with only missing nodes → verify "Show missing nodes" button label and friendly message - [x] Load workflow with only missing models → verify "Show missing models" button label and count message - [x] Load workflow with mixed errors → verify "See Errors" fallback label - [x] E2E: `pnpm test:browser:local -- --grep "Error overlay"` ## Screenshots <img width="498" height="381" alt="스크린샷 2026-03-26 230252" src="https://github.com/user-attachments/assets/034f0f3f-e6a1-4617-b8f6-cd4c145e3a47" /> <img width="550" height="303" alt="스크린샷 2026-03-26 230525" src="https://github.com/user-attachments/assets/2958914b-0ff0-461b-a6ea-7f2811bf33c2" /> <img width="551" height="87" alt="스크린샷 2026-03-26 230318" src="https://github.com/user-attachments/assets/396e9cb1-667e-44c4-83fe-ab113b313d16" /> --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Dante <bunggl@naver.com>
118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
/**
|
|
* Centralized test selectors for browser tests.
|
|
* Use data-testid attributes for stable selectors.
|
|
*/
|
|
|
|
export const TestIds = {
|
|
sidebar: {
|
|
toolbar: 'side-toolbar',
|
|
nodeLibrary: 'node-library-tree',
|
|
nodeLibrarySearch: 'node-library-search',
|
|
workflows: 'workflows-sidebar',
|
|
modeToggle: 'mode-toggle'
|
|
},
|
|
tree: {
|
|
folder: 'tree-folder',
|
|
leaf: 'tree-leaf',
|
|
node: 'tree-node'
|
|
},
|
|
canvas: {
|
|
main: 'graph-canvas',
|
|
contextMenu: 'canvas-context-menu',
|
|
toggleMinimapButton: 'toggle-minimap-button',
|
|
toggleLinkVisibilityButton: 'toggle-link-visibility-button'
|
|
},
|
|
dialogs: {
|
|
settings: 'settings-dialog',
|
|
settingsContainer: 'settings-container',
|
|
settingsTabAbout: 'settings-tab-about',
|
|
confirm: 'confirm-dialog',
|
|
errorOverlay: 'error-overlay',
|
|
errorOverlaySeeErrors: 'error-overlay-see-errors',
|
|
errorOverlayDismiss: 'error-overlay-dismiss',
|
|
errorOverlayMessages: 'error-overlay-messages',
|
|
runtimeErrorPanel: 'runtime-error-panel',
|
|
missingNodeCard: 'missing-node-card',
|
|
errorCardFindOnGithub: 'error-card-find-on-github',
|
|
errorCardCopy: 'error-card-copy',
|
|
about: 'about-panel',
|
|
whatsNewSection: 'whats-new-section',
|
|
missingNodePacksGroup: 'error-group-missing-node',
|
|
missingModelsGroup: 'error-group-missing-model'
|
|
},
|
|
keybindings: {
|
|
presetMenu: 'keybinding-preset-menu'
|
|
},
|
|
topbar: {
|
|
queueButton: 'queue-button',
|
|
queueModeMenuTrigger: 'queue-mode-menu-trigger',
|
|
saveButton: 'save-workflow-button'
|
|
},
|
|
nodeLibrary: {
|
|
bookmarksSection: 'node-library-bookmarks-section'
|
|
},
|
|
propertiesPanel: {
|
|
root: 'properties-panel'
|
|
},
|
|
node: {
|
|
titleInput: 'node-title-input'
|
|
},
|
|
selectionToolbox: {
|
|
colorPickerButton: 'color-picker-button',
|
|
colorPickerCurrentColor: 'color-picker-current-color',
|
|
colorBlue: 'blue',
|
|
colorRed: 'red'
|
|
},
|
|
widgets: {
|
|
container: 'node-widgets',
|
|
widget: 'node-widget',
|
|
decrement: 'decrement',
|
|
increment: 'increment',
|
|
domWidgetTextarea: 'dom-widget-textarea',
|
|
subgraphEnterButton: 'subgraph-enter-button'
|
|
},
|
|
builder: {
|
|
ioItem: 'builder-io-item',
|
|
ioItemTitle: 'builder-io-item-title',
|
|
widgetActionsMenu: 'widget-actions-menu'
|
|
},
|
|
breadcrumb: {
|
|
subgraph: 'subgraph-breadcrumb'
|
|
},
|
|
templates: {
|
|
content: 'template-workflows-content',
|
|
workflowCard: (id: string) => `template-workflow-${id}`
|
|
},
|
|
user: {
|
|
currentUserIndicator: 'current-user-indicator'
|
|
},
|
|
errors: {
|
|
imageLoadError: 'error-loading-image',
|
|
videoLoadError: 'error-loading-video'
|
|
}
|
|
} as const
|
|
|
|
/**
|
|
* Helper type for accessing nested TestIds (excludes function values)
|
|
*/
|
|
export type TestIdValue =
|
|
| (typeof TestIds.sidebar)[keyof typeof TestIds.sidebar]
|
|
| (typeof TestIds.tree)[keyof typeof TestIds.tree]
|
|
| (typeof TestIds.canvas)[keyof typeof TestIds.canvas]
|
|
| (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs]
|
|
| (typeof TestIds.keybindings)[keyof typeof TestIds.keybindings]
|
|
| (typeof TestIds.topbar)[keyof typeof TestIds.topbar]
|
|
| (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
|
|
| (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
|
|
| (typeof TestIds.node)[keyof typeof TestIds.node]
|
|
| (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
|
|
| (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
|
|
| (typeof TestIds.builder)[keyof typeof TestIds.builder]
|
|
| (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
|
|
| Exclude<
|
|
(typeof TestIds.templates)[keyof typeof TestIds.templates],
|
|
(id: string) => string
|
|
>
|
|
| (typeof TestIds.user)[keyof typeof TestIds.user]
|
|
| (typeof TestIds.errors)[keyof typeof TestIds.errors]
|