mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-20 06:20:11 +00:00

Files

Christian Byrne 1dcd7bca43 docs: add E2E testing gotchas for canvas overlay, context menus, and subgraph navigation (#9951 )

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>

2026-03-17 01:09:14 -07:00

2.8 KiB

Raw Blame History

E2E Testing Guidelines

See @docs/guidance/playwright.md for Playwright best practices (auto-loaded for *.spec.ts).

Directory Structure

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/.

2.8 KiB Raw Blame History