Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-01 22:09:55 +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
parent 394c7d202d
commit 20cd18f3be
8 changed files with 59 additions and 55 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:**
| 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`) |
| **LiteGraph (Canvas)** | Testing canvas interactions, connections, legacy behavior | `comfyPage.getNodeRefByTitle()`, `NodeReference` methods |
| 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`) |
| **LiteGraph (Canvas)** | Testing canvas interactions, connections, legacy behavior | `comfyPage.getNodeRefByTitle()`, `NodeReference` methods |
### Vue Nodes 2.0
```typescript
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
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()
```
→ See [features/vue-nodes.md](features/vue-nodes.md)
### LiteGraph (Canvas)
```typescript
const node = comfyPage.getNodeRefByTitle('KSampler') // Returns NodeReference
const node = comfyPage.getNodeRefByTitle('KSampler') // Returns NodeReference
await node.click()
const slot = node.getOutputSlot('MODEL')
```
→ See [core/nodes.md](core/nodes.md) and [core/canvas.md](core/canvas.md)
## Quick Reference
| Task | Load This File |
| ------------------------- | -------------------------------------------------- |
| **Start a new test** | [core/setup.md](core/setup.md) |
| **Canvas interactions** | [core/canvas.md](core/canvas.md) |
| **Node operations** | [core/nodes.md](core/nodes.md) |
| **Widget testing** | [testing/widgets.md](testing/widgets.md) |
| **Vue Nodes 2.0** | [features/vue-nodes.md](features/vue-nodes.md) |
| **Commands/keybindings** | [features/commands.md](features/commands.md) |
| **Templates dialog** | [features/templates.md](features/templates.md) |
| **Workflow execution** | [features/execution.md](features/execution.md) |
| **File upload/drag-drop** | [testing/file-upload.md](testing/file-upload.md) |
| **API mocking** | [testing/mocking.md](testing/mocking.md) |
| **Test assets** | [testing/assets.md](testing/assets.md) |
| **Debug flaky tests** | [reference/debugging.md](reference/debugging.md) |
| Task | Load This File |
| ------------------------- | --------------------------------------------------------------- |
| **Start a new test** | [core/setup.md](core/setup.md) |
| **Canvas interactions** | [core/canvas.md](core/canvas.md) |
| **Node operations** | [core/nodes.md](core/nodes.md) |
| **Widget testing** | [testing/widgets.md](testing/widgets.md) |
| **Vue Nodes 2.0** | [features/vue-nodes.md](features/vue-nodes.md) |
| **Commands/keybindings** | [features/commands.md](features/commands.md) |
| **Templates dialog** | [features/templates.md](features/templates.md) |
| **Workflow execution** | [features/execution.md](features/execution.md) |
| **File upload/drag-drop** | [testing/file-upload.md](testing/file-upload.md) |
| **API mocking** | [testing/mocking.md](testing/mocking.md) |
| **Test assets** | [testing/assets.md](testing/assets.md) |
| **Debug flaky tests** | [reference/debugging.md](reference/debugging.md) |
| **Async retry patterns** | [reference/debugging.md](reference/debugging.md#retry-patterns) |
| **All fixture methods** | [reference/fixtures.md](reference/fixtures.md) |
| **Quick cheatsheet** | [reference/cheatsheet.md](reference/cheatsheet.md) |
| **All fixture methods** | [reference/fixtures.md](reference/fixtures.md) |
| **Quick cheatsheet** | [reference/cheatsheet.md](reference/cheatsheet.md) |
## Running Tests

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

@@ -1,6 +1,7 @@
# 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

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).
>
> | Mode | Node Access | Example |
> |------|-------------|---------|
> | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` |
> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes |
> | Mode | Node Access | Example |
> | --------- | ------------------------------------- | ---------------------------------------- |
> | LiteGraph | `comfyPage.getNodeRefByTitle()` | `node.click()`, `node.getWidget('seed')` |
> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes |
## 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.
| Issue | Solution | Details |
|-------|----------|---------|
| 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) |
| 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) |
| Flaky async assertions | Use `expect.poll()` or `toPass()` | [debugging.md](../reference/debugging.md#retry-patterns) |
| Issue | Solution | Details |
| ----------------------- | ---------------------------------- | --------------------------------------------------------------- |
| 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) |
| 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) |
| Flaky async assertions | Use `expect.poll()` or `toPass()` | [debugging.md](../reference/debugging.md#retry-patterns) |
## 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.
> **📋 This file covers Vue Nodes equivalents for:**
>
> - 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)
>
> 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
| Pattern | Use Case |
|---------|----------|
| `expect.poll()` | Single value polling, cleaner syntax |
| `expect().toPass()` | Multiple assertions that must all pass |
| `locator.waitFor()` | Waiting for element state changes |
| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. |
| Pattern | Use Case |
| ------------------------ | -------------------------------------- |
| `expect.poll()` | Single value polling, cleaner syntax |
| `expect().toPass()` | Multiple assertions that must all pass |
| `locator.waitFor()` | Waiting for element state changes |
| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. |
### ❌ 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).
>
> | Mode | Widget Access | Interaction Style |
> |------|---------------|-------------------|
> | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates |
> | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` |
> | Mode | Widget Access | Interaction Style |
> | --------- | -------------------------------------- | ---------------------------------------------- |
> | LiteGraph | `node.getWidget('seed')` | `setValue()`, `getValue()`, canvas coordinates |
> | Vue Nodes | `comfyPage.vueNodes.getWidgetByName()` | DOM locators, `click()`, `fill()` |
## Getting Widgets
@@ -91,9 +91,7 @@ await widget.setValue(100)
await comfyPage.nextFrame()
// Use poll for single value
await expect
.poll(() => widget.getValue(), { timeout: 2000 })
.toBe(100)
await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
```
See [debugging.md](../reference/debugging.md#retry-patterns) for more retry patterns.

16
browser_tests/AGENTS.md
View File

@@ -15,13 +15,13 @@ A Playwright test-writing skill exists at `.claude/skills/writing-playwright-tes
**When modifying test infrastructure** (fixtures, helpers, ComfyPage methods, etc.), update the corresponding skill documentation:
| Changed | Update |
|---------|--------|
| `fixtures/ComfyPage.ts` | `reference/fixtures.md` |
| `fixtures/ComfyMouse.ts` | `reference/fixtures.md` |
| `fixtures/components/*` | `reference/fixtures.md` |
| `fixtures/VueNodeHelpers.ts` | `features/vue-nodes.md` |
| New test patterns | Relevant `core/`, `testing/`, or `features/` file |
| New assets structure | `testing/assets.md` |
| Changed | Update |
| ---------------------------- | ------------------------------------------------- |
| `fixtures/ComfyPage.ts` | `reference/fixtures.md` |
| `fixtures/ComfyMouse.ts` | `reference/fixtures.md` |
| `fixtures/components/*` | `reference/fixtures.md` |
| `fixtures/VueNodeHelpers.ts` | `features/vue-nodes.md` |
| New test patterns | Relevant `core/`, `testing/`, or `features/` file |
| New assets structure | `testing/assets.md` |
This ensures agents can write tests correctly without needing to reverse-engineer the fixtures.