Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[automated] Apply ESLint and Oxfmt fixes

Browse Source
This commit is contained in:
GitHub Action
2026-02-01 00:01:36 +00:00
committed by bymyself
parent a1227aa0f9
commit 22422ae634
7 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
.claude/skills/writing-playwright-tests/SKILL.md
View File

@@ -19,47 +19,51 @@ description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creatin
**Choose your approach based on what you're testing:** **Choose your approach based on what you're testing:**
| Rendering Mode | When to Use | API Style | | Rendering Mode | When to Use | API Style |
|----------------|-------------|-----------| | ---------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------- |
| **Vue Nodes 2.0** | Testing Vue-rendered node UI, DOM widgets, CSS states | `comfyPage.vueNodes.*`, Playwright locators (`getByText`, `getByRole`) | | **Vue Nodes 2.0** | Testing Vue-rendered node UI, DOM widgets, CSS states | `comfyPage.vueNodes.*`, Playwright locators (`getByText`, `getByRole`) |
| **LiteGraph (Canvas)** | Testing canvas interactions, connections, legacy behavior | `comfyPage.getNodeRefByTitle()`, `NodeReference` methods | | **LiteGraph (Canvas)** | Testing canvas interactions, connections, legacy behavior | `comfyPage.getNodeRefByTitle()`, `NodeReference` methods |
### Vue Nodes 2.0 ### Vue Nodes 2.0
```typescript ```typescript
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
await comfyPage.vueNodes.waitForNodes() await comfyPage.vueNodes.waitForNodes()
const node = comfyPage.vueNodes.getNodeByTitle('KSampler') // Returns Locator const node = comfyPage.vueNodes.getNodeByTitle('KSampler') // Returns Locator
await comfyPage.page.getByText('Load Checkpoint').click() await comfyPage.page.getByText('Load Checkpoint').click()
``` ```
→ See [features/vue-nodes.md](features/vue-nodes.md) → See [features/vue-nodes.md](features/vue-nodes.md)
### LiteGraph (Canvas) ### LiteGraph (Canvas)
```typescript ```typescript
const node = comfyPage.getNodeRefByTitle('KSampler') // Returns NodeReference const node = comfyPage.getNodeRefByTitle('KSampler') // Returns NodeReference
await node.click() await node.click()
const slot = node.getOutputSlot('MODEL') const slot = node.getOutputSlot('MODEL')
``` ```
→ See [core/nodes.md](core/nodes.md) and [core/canvas.md](core/canvas.md) → See [core/nodes.md](core/nodes.md) and [core/canvas.md](core/canvas.md)
## Quick Reference ## Quick Reference
| Task | Load This File | | Task | Load This File |
| ------------------------- | -------------------------------------------------- | | ------------------------- | --------------------------------------------------------------- |
| **Start a new test** | [core/setup.md](core/setup.md) | | **Start a new test** | [core/setup.md](core/setup.md) |
| **Canvas interactions** | [core/canvas.md](core/canvas.md) | | **Canvas interactions** | [core/canvas.md](core/canvas.md) |
| **Node operations** | [core/nodes.md](core/nodes.md) | | **Node operations** | [core/nodes.md](core/nodes.md) |
| **Widget testing** | [testing/widgets.md](testing/widgets.md) | | **Widget testing** | [testing/widgets.md](testing/widgets.md) |
| **Vue Nodes 2.0** | [features/vue-nodes.md](features/vue-nodes.md) | | **Vue Nodes 2.0** | [features/vue-nodes.md](features/vue-nodes.md) |
| **Commands/keybindings** | [features/commands.md](features/commands.md) | | **Commands/keybindings** | [features/commands.md](features/commands.md) |
| **Templates dialog** | [features/templates.md](features/templates.md) | | **Templates dialog** | [features/templates.md](features/templates.md) |
| **Workflow execution** | [features/execution.md](features/execution.md) | | **Workflow execution** | [features/execution.md](features/execution.md) |
| **File upload/drag-drop** | [testing/file-upload.md](testing/file-upload.md) | | **File upload/drag-drop** | [testing/file-upload.md](testing/file-upload.md) |
| **API mocking** | [testing/mocking.md](testing/mocking.md) | | **API mocking** | [testing/mocking.md](testing/mocking.md) |
| **Test assets** | [testing/assets.md](testing/assets.md) | | **Test assets** | [testing/assets.md](testing/assets.md) |
| **Debug flaky tests** | [reference/debugging.md](reference/debugging.md) | | **Debug flaky tests** | [reference/debugging.md](reference/debugging.md) |
| **Async retry patterns** | [reference/debugging.md](reference/debugging.md#retry-patterns) | | **Async retry patterns** | [reference/debugging.md](reference/debugging.md#retry-patterns) |
| **All fixture methods** | [reference/fixtures.md](reference/fixtures.md) | | **All fixture methods** | [reference/fixtures.md](reference/fixtures.md) |
| **Quick cheatsheet** | [reference/cheatsheet.md](reference/cheatsheet.md) | | **Quick cheatsheet** | [reference/cheatsheet.md](reference/cheatsheet.md) |
## Running Tests ## Running Tests

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

@@ -1,6 +1,7 @@
# Canvas Interaction Patterns # 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 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 > - **LiteGraph:** Canvas-based, use `comfyPage.canvas.*`, `NodeReference`, coordinate-based interactions
> - **Vue Nodes:** DOM-based, use `comfyPage.vueNodes.*`, Playwright locators, CSS selectors > - **Vue Nodes:** DOM-based, use `comfyPage.vueNodes.*`, Playwright locators, CSS selectors

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

@@ -2,10 +2,10 @@
> **⚠️ 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). > **⚠️ 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 | > | Mode | Node Access | Example |
> |------|-------------|---------| > | --------- | ------------------------------------- | ---------------------------------------- |
> | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` | > | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` |
> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes | > | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes |
## Getting Node References ## Getting Node References

14
.claude/skills/writing-playwright-tests/core/setup.md
View File

@@ -87,13 +87,13 @@ await comfyPage.nextFrame()
See [debugging.md](../reference/debugging.md) for detailed fixes. See [debugging.md](../reference/debugging.md) for detailed fixes.
| Issue | Solution | Details | | Issue | Solution | Details |
|-------|----------|---------| | ----------------------- | ---------------------------------- | --------------------------------------------------------------- |
| Canvas not updating | Add `nextFrame()` after canvas ops | [canvas.md](canvas.md#critical-always-use-nextframe) | | Canvas not updating | Add `nextFrame()` after canvas ops | [canvas.md](canvas.md#critical-always-use-nextframe) |
| Double-click unreliable | Use `{ delay: 5 }` option | [canvas.md](canvas.md#click-operations) | | Double-click unreliable | Use `{ delay: 5 }` option | [canvas.md](canvas.md#click-operations) |
| Screenshot mismatch | Linux-only, use PR label | [debugging.md](../reference/debugging.md#debugging-screenshots) | | Screenshot mismatch | Linux-only, use PR label | [debugging.md](../reference/debugging.md#debugging-screenshots) |
| Keyboard not working | Focus canvas first | [canvas.md](canvas.md#focus-before-keyboard) | | Keyboard not working | Focus canvas first | [canvas.md](canvas.md#focus-before-keyboard) |
| Flaky async assertions | Use `expect.poll()` or `toPass()` | [debugging.md](../reference/debugging.md#retry-patterns) | | Flaky async assertions | Use `expect.poll()` or `toPass()` | [debugging.md](../reference/debugging.md#retry-patterns) |
## Fresh Page Setup ## Fresh Page Setup

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

@@ -3,8 +3,9 @@
Vue Nodes 2.0 is an alternative rendering mode for nodes. Tests need to explicitly enable it. Vue Nodes 2.0 is an alternative rendering mode for nodes. Tests need to explicitly enable it.
> **📋 This file covers Vue Nodes equivalents for:** > **📋 This file covers Vue Nodes equivalents for:**
>
> - Canvas interactions → [LiteGraph version](../core/canvas.md) > - Canvas interactions → [LiteGraph version](../core/canvas.md)
> - Node operations → [LiteGraph version](../core/nodes.md) > - Node operations → [LiteGraph version](../core/nodes.md)
> - Widget testing → [LiteGraph version](../testing/widgets.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. > Vue Nodes uses **DOM elements** instead of canvas drawing. Test with Playwright locators, not coordinate-based clicks.

12
.claude/skills/writing-playwright-tests/reference/debugging.md
View File

@@ -149,12 +149,12 @@ await expect(async () => {
### When to Use Each ### When to Use Each
| Pattern | Use Case | | Pattern | Use Case |
|---------|----------| | ------------------------ | -------------------------------------- |
| `expect.poll()` | Single value polling, cleaner syntax | | `expect.poll()` | Single value polling, cleaner syntax |
| `expect().toPass()` | Multiple assertions that must all pass | | `expect().toPass()` | Multiple assertions that must all pass |
| `locator.waitFor()` | Waiting for element state changes | | `locator.waitFor()` | Waiting for element state changes |
| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. | | Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. |
### ❌ Never Use waitForTimeout ### ❌ Never Use waitForTimeout

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

@@ -2,10 +2,10 @@
> **⚠️ 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). > **⚠️ 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 | > | Mode | Widget Access | Interaction Style |
> |------|---------------|-------------------| > | --------- | -------------------------------------- | ---------------------------------------------- |
> | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates | > | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates |
> | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` | > | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` |
## Getting Widgets ## Getting Widgets
@@ -91,9 +91,7 @@ await widget.setValue(100)
await comfyPage.nextFrame() await comfyPage.nextFrame()
// Use poll for single value // Use poll for single value
await expect await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
.poll(() => widget.getValue(), { timeout: 2000 })
.toBe(100)
``` ```
See [debugging.md](../reference/debugging.md#retry-patterns) for more retry patterns. See [debugging.md](../reference/debugging.md#retry-patterns) for more retry patterns.