mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-07 16:40:05 +00:00
f2d5bfab73
## Summary Major refactoring of browser tests to improve reliability, maintainability, and type safety. ## Changes ### Test Infrastructure Decomposition - Decomposed `ComfyPage.ts` (~1000 lines) into focused helpers: - `CanvasHelper`, `DebugHelper`, `SubgraphHelper`, `NodeOperationsHelper` - `SettingsHelper`, `WorkflowHelper`, `ClipboardHelper`, `KeyboardHelper` - Created `ContextMenu` page object, `BaseDialog` base class, and `BottomPanel` page object - Extracted `DefaultGraphPositions` constants ### Locator Stability - Added `data-testid` attributes to Vue components (sidebar, dialogs, node library) - Created centralized `selectors.ts` with test ID constants - Replaced fragile CSS selectors (`.nth()`, `:nth-child()`) with `getByTestId`/`getByRole` ### Performance & Reliability - Removed `setTimeout` anti-patterns (replaced with `waitForFunction`) - Replaced `waitForTimeout` with retrying assertions - Replaced hardcoded coordinates with computed `NodeReference` positions - Enforced LF line endings for all text files ### Type Safety - Enabled `no-explicit-any` lint rule for browser_tests via oxlint - Purged `as any` casts from browser_tests - Added Window type augmentation for standardized window access - Added proper type annotations throughout ### Bug Fixes - Restored `ExtensionManager` API contract - Removed test-only settings from production schema - Fixed flaky selectors and missing test setup ## Testing - All browser tests pass - Typecheck passes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Tests** * Overhauled browser E2E test infrastructure with many new helpers/fixtures, updated test APIs, and CI test container image bumped for consistency. * **Chores** * Standardized line endings and applied stricter lint rules for browser tests; workspace dependency version updated. * **Documentation** * Updated Playwright and TypeScript testing guidance and test-run commands. * **UI** * Added stable data-testids to multiple components to improve testability. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
78 lines
2.2 KiB
TypeScript
78 lines
2.2 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',
|
|
about: 'about-panel',
|
|
whatsNewSection: 'whats-new-section'
|
|
},
|
|
topbar: {
|
|
queueButton: 'queue-button',
|
|
saveButton: 'save-workflow-button'
|
|
},
|
|
nodeLibrary: {
|
|
bookmarksSection: 'node-library-bookmarks-section'
|
|
},
|
|
propertiesPanel: {
|
|
root: 'properties-panel'
|
|
},
|
|
node: {
|
|
titleInput: 'node-title-input'
|
|
},
|
|
widgets: {
|
|
decrement: 'decrement',
|
|
increment: 'increment',
|
|
subgraphEnterButton: 'subgraph-enter-button'
|
|
},
|
|
templates: {
|
|
content: 'template-workflows-content',
|
|
workflowCard: (id: string) => `template-workflow-${id}`
|
|
},
|
|
user: {
|
|
currentUserIndicator: 'current-user-indicator'
|
|
}
|
|
} 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.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.widgets)[keyof typeof TestIds.widgets]
|
|
| Exclude<
|
|
(typeof TestIds.templates)[keyof typeof TestIds.templates],
|
|
(id: string) => string
|
|
>
|
|
| (typeof TestIds.user)[keyof typeof TestIds.user]
|