mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 21:22:07 +00:00
1dcd7bca43
Documents 3 hard-learned gotchas from debugging subgraph context menu E2E tests across ~8 threads: - Canvas `z-999` overlay intercepting `click()` on DOM widgets → use `dispatchEvent` - Context menus requiring node selection before right-click - Subgraph node sizing minimum for reliable `navigateIntoSubgraph()` Added to both `browser_tests/AGENTS.md` (auto-loaded for agents working in that dir) and the Playwright test-writing skill's Common Issues table. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9951-docs-add-E2E-testing-gotchas-for-canvas-overlay-context-menus-and-subgraph-navigation-3246d73d3650819a928bf91d66e22c2c) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
52 lines
2.8 KiB
Markdown
52 lines
2.8 KiB
Markdown
# E2E Testing Guidelines
|
|
|
|
See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
|
|
|
|
## Directory Structure
|
|
|
|
```text
|
|
browser_tests/
|
|
├── assets/ - Test data (JSON workflows, images)
|
|
├── fixtures/
|
|
│ ├── ComfyPage.ts - Main fixture (delegates to helpers)
|
|
│ ├── ComfyMouse.ts - Mouse interaction helper
|
|
│ ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
|
|
│ ├── selectors.ts - Centralized TestIds
|
|
│ ├── components/ - Page object components
|
|
│ │ ├── ContextMenu.ts
|
|
│ │ ├── SettingDialog.ts
|
|
│ │ ├── SidebarTab.ts
|
|
│ │ └── Topbar.ts
|
|
│ ├── helpers/ - Focused helper classes
|
|
│ │ ├── CanvasHelper.ts
|
|
│ │ ├── CommandHelper.ts
|
|
│ │ ├── KeyboardHelper.ts
|
|
│ │ ├── NodeOperationsHelper.ts
|
|
│ │ ├── SettingsHelper.ts
|
|
│ │ ├── WorkflowHelper.ts
|
|
│ │ └── ...
|
|
│ └── utils/ - Utility functions
|
|
├── helpers/ - Test-specific utilities
|
|
└── tests/ - Test files (*.spec.ts)
|
|
```
|
|
|
|
## Gotchas
|
|
|
|
| Symptom | Cause | Fix |
|
|
| -------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
| `subtree intercepts pointer events` on DOM widgets | Canvas `z-999` overlay intercepts `click()` | Use Playwright's `locator.dispatchEvent('contextmenu', { bubbles: true, cancelable: true, button: 2 })` |
|
|
| Context menu empty or wrong items | Node not selected | Select node first: `vueNodes.selectNode()` or `nodeRef.click('title')` |
|
|
| `navigateIntoSubgraph` timeout | Node too small in test asset JSON | Use node size `[400, 200]` minimum |
|
|
|
|
## After Making Changes
|
|
|
|
- Run `pnpm typecheck:browser` after modifying TypeScript files in this directory
|
|
- Run `pnpm exec eslint browser_tests/path/to/file.ts` to lint specific files
|
|
- Run `pnpm exec oxlint browser_tests/path/to/file.ts` to check with oxlint
|
|
|
|
## Skill Documentation
|
|
|
|
A Playwright test-writing skill exists at `.claude/skills/writing-playwright-tests/SKILL.md`.
|
|
|
|
The skill documents **meta-level guidance only** (gotchas, anti-patterns, decision guides). It does **not** duplicate fixture APIs - agents should read the fixture code directly in `browser_tests/fixtures/`.
|