diff --git a/.claude/skills/writing-playwright-tests/SKILL.md b/.claude/skills/writing-playwright-tests/SKILL.md index 5397a7ee0..7d0c16c55 100644 --- a/.claude/skills/writing-playwright-tests/SKILL.md +++ b/.claude/skills/writing-playwright-tests/SKILL.md @@ -22,7 +22,7 @@ description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creatin | 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 | +| **LiteGraph (Canvas)** | Testing canvas interactions, connections, legacy behavior | `comfyPage.getNodeRefsByTitle()[0]`, `NodeReference` methods | ### Vue Nodes 2.0 @@ -38,7 +38,7 @@ await comfyPage.page.getByText('Load Checkpoint').click() ### LiteGraph (Canvas) ```typescript -const node = comfyPage.getNodeRefByTitle('KSampler') // Returns NodeReference +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] // Returns NodeReference await node.click() const slot = node.getOutputSlot('MODEL') ``` diff --git a/.claude/skills/writing-playwright-tests/core/canvas.md b/.claude/skills/writing-playwright-tests/core/canvas.md index be5fdf905..90e52a37e 100644 --- a/.claude/skills/writing-playwright-tests/core/canvas.md +++ b/.claude/skills/writing-playwright-tests/core/canvas.md @@ -51,7 +51,7 @@ await comfyMouse.dragFromTo( await comfyPage.nextFrame() // Drag node -const node = comfyPage.getNodeRefByTitle('KSampler') +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await node.drag({ x: 50, y: 50 }) await comfyPage.nextFrame() ``` diff --git a/.claude/skills/writing-playwright-tests/core/nodes.md b/.claude/skills/writing-playwright-tests/core/nodes.md index a62b84518..3b989b7d7 100644 --- a/.claude/skills/writing-playwright-tests/core/nodes.md +++ b/.claude/skills/writing-playwright-tests/core/nodes.md @@ -2,18 +2,22 @@ > **⚠️ 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.getNodeRefsByTitle()[0]` | `node.click()`, `node.getWidget('seed')` | +> | Vue Nodes | `comfyPage.vueNodes.getNodeByTitle()` | Playwright locators, CSS classes | ## Getting Node References ### By Title (Preferred) ```typescript -// Stable across positions and reloads -const node = comfyPage.getNodeRefByTitle('KSampler') +// Use display names (e.g., 'KSampler', 'VAE Decode', 'CLIP Text Encode (Prompt)') +// These match the display_name from node definitions, not internal type names +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] + +// For multi-selection +await comfyPage.selectNodes(['KSampler', 'VAE Decode']) ``` ### By ID @@ -35,7 +39,7 @@ const lastNode = comfyPage.getLastNode() ### Click Node ```typescript -const node = comfyPage.getNodeRefByTitle('KSampler') +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await node.click() await comfyPage.nextFrame() ``` @@ -43,7 +47,7 @@ await comfyPage.nextFrame() ### Drag Node ```typescript -const node = comfyPage.getNodeRefByTitle('KSampler') +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await node.drag({ x: 100, y: 50 }) await comfyPage.nextFrame() ``` @@ -112,8 +116,8 @@ const position = await outputSlot.getPosition() ### Connect Slots ```typescript -const sourceNode = comfyPage.getNodeRefByTitle('Load Checkpoint') -const targetNode = comfyPage.getNodeRefByTitle('KSampler') +const sourceNode = (await comfyPage.getNodeRefsByTitle('Load Checkpoint'))[0] +const targetNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] const outputSlot = sourceNode.getOutputSlot('MODEL') const inputSlot = targetNode.getInputSlot('model') @@ -184,7 +188,7 @@ test.describe('Node Operations', { tag: ['@node'] }, () => { }) test('collapses and expands node', async ({ comfyPage }) => { - const node = comfyPage.getNodeRefByTitle('KSampler') + const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await node.collapse() await comfyPage.nextFrame() @@ -195,9 +199,9 @@ test.describe('Node Operations', { tag: ['@node'] }, () => { await expect(node).not.toBeCollapsed() }) - test('connects two nodes', async ({ comfyPage }) => { - const source = comfyPage.getNodeRefByTitle('Load Checkpoint') - const target = comfyPage.getNodeRefByTitle('KSampler') + test('connects two nodes', async ({ comfyPage, comfyMouse }) => { + const source = (await comfyPage.getNodeRefsByTitle('Load Checkpoint'))[0] + const target = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await comfyMouse.dragFromTo( await source.getOutputSlot('MODEL').getPosition(), diff --git a/.claude/skills/writing-playwright-tests/core/workflows.md b/.claude/skills/writing-playwright-tests/core/workflows.md index 36660b7e8..b86f8a470 100644 --- a/.claude/skills/writing-playwright-tests/core/workflows.md +++ b/.claude/skills/writing-playwright-tests/core/workflows.md @@ -59,7 +59,7 @@ const nodes = await comfyPage.getNodes() expect(nodes.length).toBe(5) // Check specific node exists -const node = comfyPage.getNodeRefByTitle('KSampler') +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] await expect(node.locator).toBeVisible() ``` @@ -80,7 +80,7 @@ test.describe('Workflow Operations', { tag: ['@workflow'] }, () => { await comfyPage.loadWorkflow('widgets/slider_widget') await comfyPage.nextFrame() - const node = comfyPage.getNodeRefByTitle('Preview Image') + const node = (await comfyPage.getNodeRefsByTitle('Preview Image'))[0] await expect(node.locator).toBeVisible() }) }) diff --git a/.claude/skills/writing-playwright-tests/reference/fixtures.md b/.claude/skills/writing-playwright-tests/reference/fixtures.md index 48a3f9da2..83f9bc5fc 100644 --- a/.claude/skills/writing-playwright-tests/reference/fixtures.md +++ b/.claude/skills/writing-playwright-tests/reference/fixtures.md @@ -49,13 +49,17 @@ test('drag example', async ({ comfyPage, comfyMouse }) => { ### Nodes -| Method | Description | -| -------------------------- | ------------------------- | -| `getNodeRefByTitle(title)` | Get node by display title | -| `getNodeRefById(id)` | Get node by numeric ID | -| `getFirstNode()` | Get first node | -| `getLastNode()` | Get last node | -| `getNodes()` | Get all nodes | +| Method | Description | +| ---------------------------- | ---------------------------------------- | +| `getNodeRefsByTitle(title)` | Get nodes by display title (returns `[]`)| +| `getNodeRefById(id)` | Get node by numeric ID | +| `getFirstNode()` | Get first node | +| `getLastNode()` | Get last node | +| `getNodes()` | Get all nodes | +| `selectNodes(titles[])` | Ctrl+click to select nodes by title | + +**Node titles**: Use display names like `'KSampler'`, `'VAE Decode'`, `'CLIP Text Encode (Prompt)'`. +These match the `display_name` from node definitions, not the internal type name. ### Settings @@ -79,7 +83,7 @@ test('drag example', async ({ comfyPage, comfyMouse }) => { ## NodeReference Methods -Returned by `getNodeRefByTitle()`, `getNodeRefById()`. +Returned by `getNodeRefsByTitle()[0]`, `getNodeRefById()`. | Method | Description | | --------------------- | --------------------------- | diff --git a/.claude/skills/writing-playwright-tests/testing/assets.md b/.claude/skills/writing-playwright-tests/testing/assets.md index ce4eb2698..44ce0f89c 100644 --- a/.claude/skills/writing-playwright-tests/testing/assets.md +++ b/.claude/skills/writing-playwright-tests/testing/assets.md @@ -170,7 +170,7 @@ test.describe('Combo Widget', { tag: ['@widget'] }, () => { }) test('changes combo selection', async ({ comfyPage }) => { - const node = comfyPage.getNodeRefByTitle('KSampler') + const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] const widget = node.getWidget('sampler_name') await widget.click() diff --git a/.claude/skills/writing-playwright-tests/testing/widgets.md b/.claude/skills/writing-playwright-tests/testing/widgets.md index 0c9586d51..fc4baee0d 100644 --- a/.claude/skills/writing-playwright-tests/testing/widgets.md +++ b/.claude/skills/writing-playwright-tests/testing/widgets.md @@ -10,7 +10,7 @@ ## Getting Widgets ```typescript -const node = comfyPage.getNodeRefByTitle('KSampler') +const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] const widget = node.getWidget('seed') ``` @@ -132,7 +132,7 @@ test.describe('Widget Operations', { tag: ['@widget'] }, () => { }) test('sets number widget value', async ({ comfyPage }) => { - const node = comfyPage.getNodeRefByTitle('KSampler') + const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] const seedWidget = node.getWidget('seed') await seedWidget.setValue(42) @@ -143,7 +143,7 @@ test.describe('Widget Operations', { tag: ['@widget'] }, () => { }) test('selects combo option', async ({ comfyPage }) => { - const node = comfyPage.getNodeRefByTitle('KSampler') + const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0] const samplerWidget = node.getWidget('sampler_name') await samplerWidget.click()