Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-22 07:44:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add Vue Nodes vs LiteGraph mode banners to canvas, nodes, widgets

Browse Source 
- Add prominent warning banners clarifying LiteGraph mode patterns
- Include comparison tables showing API differences
- Cross-link between LiteGraph and Vue Nodes documentation
- Add scope clarification to vue-nodes.md

Amp-Thread-ID: https://ampcode.com/threads/T-019c165d-cebf-7393-847a-914e5858bd9a
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
bymyself
2026-01-31 15:39:18 -08:00
parent 977bcea8d3
commit b528e3e62b
4 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.claude/skills/writing-playwright-tests/core/canvas.md
View File

@@ -1,5 +1,9 @@
# Canvas Interaction Patterns
> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering. For Vue Nodes 2.0 (DOM-based rendering), see [vue-nodes.md](../features/vue-nodes.md). Check which mode you're testing:
> - **LiteGraph:** Canvas-based, use `comfyPage.canvas.*`, `NodeReference`, coordinate-based interactions
> - **Vue Nodes:** DOM-based, use `comfyPage.vueNodes.*`, Playwright locators, CSS selectors
## Critical: Always Use nextFrame()
Canvas changes don't render immediately. **Always** call `nextFrame()` after canvas operations:

7
.claude/skills/writing-playwright-tests/core/nodes.md
View File

@@ -1,5 +1,12 @@
# Node Patterns
> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering. For Vue Nodes 2.0 (DOM-based rendering), see [vue-nodes.md](../features/vue-nodes.md).
>
> | Mode | Node Access | Example |
> |------|-------------|---------|
> | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` |
> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes |
## Getting Node References
### By Title (Preferred)

7
.claude/skills/writing-playwright-tests/features/vue-nodes.md
View File

@@ -2,6 +2,13 @@
Vue Nodes 2.0 is an alternative rendering mode for nodes. Tests need to explicitly enable it.
> **📋 This file covers Vue Nodes equivalents for:**
> - Canvas interactions → [LiteGraph version](../core/canvas.md)
> - Node operations → [LiteGraph version](../core/nodes.md)
> - Widget testing → [LiteGraph version](../testing/widgets.md)
>
> Vue Nodes uses **DOM elements** instead of canvas drawing. Test with Playwright locators, not coordinate-based clicks.
## Enabling Vue Nodes
```typescript

7
.claude/skills/writing-playwright-tests/testing/widgets.md
View File

@@ -1,5 +1,12 @@
# Widget Patterns
> **⚠️ LiteGraph Mode:** These patterns apply to the default LiteGraph canvas rendering where widgets are drawn on canvas. For Vue Nodes 2.0 (DOM-based widgets), see [vue-nodes.md](../features/vue-nodes.md#dom-based-widget-access).
>
> | Mode | Widget Access | Interaction Style |
> |------|---------------|-------------------|
> | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates |
> | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` |
## Getting Widgets
```typescript