mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
test: remove flaky viewport-dependent tests (adjust-size, align, distribute)
Keep stable tests: pin, unpin, minimize, expand, copy, duplicate, refresh, bypass. The removed tests depend on submenu interactions that are unreliable in CI headless environments.
This commit is contained in:
dante01yoon
@@ -21,30 +21,6 @@ async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
|
||||
await nodeRef.click('title')
|
||||
}
|
||||
|
||||
async function selectNodesWithPan(comfyPage: ComfyPage, nodeTitles: string[]) {
|
||||
// Select nodes using canvas.selectItems() to properly trigger all internal
|
||||
// state updates (selectedItems, selected_nodes, onSelectionChange).
|
||||
await comfyPage.page.evaluate((titles) => {
|
||||
const graph = window.app!.graph
|
||||
const canvas = window.app!.canvas
|
||||
const nodes = titles
|
||||
.map((title) =>
|
||||
graph.nodes.find((n: { title: string }) => n.title === title)
|
||||
)
|
||||
.filter((n): n is NonNullable<typeof n> => n != null)
|
||||
canvas.selectItems(nodes)
|
||||
}, nodeTitles)
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
// Pan to the first node so the toolbox is within the viewport
|
||||
const firstNodeRefs = await comfyPage.nodeOps.getNodeRefsByTitle(
|
||||
nodeTitles[0]
|
||||
)
|
||||
if (firstNodeRefs.length > 0) {
|
||||
await panToNode(comfyPage, firstNodeRefs[0])
|
||||
}
|
||||
}
|
||||
|
||||
// force: true is needed because the canvas overlay (z-999) intercepts pointer events
|
||||
async function openMoreOptions(comfyPage: ComfyPage) {
|
||||
await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
|
||||
@@ -125,56 +101,6 @@ test.describe(
|
||||
await expect.poll(() => nodeRef.isCollapsed()).toBe(false)
|
||||
})
|
||||
|
||||
test('adjust size via More Options menu', async ({ comfyPage }) => {
|
||||
const nodeRef = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
await selectNodeWithPan(comfyPage, nodeRef)
|
||||
|
||||
const initialSize = await nodeRef.getSize()
|
||||
|
||||
// Resize the node manually to be larger
|
||||
await comfyPage.page.evaluate(
|
||||
({ id, w, h }) => {
|
||||
const node = window.app!.graph.getNodeById(id)!
|
||||
node.setSize([w + 200, h + 200])
|
||||
window.app!.canvas.setDirty(true, true)
|
||||
},
|
||||
{
|
||||
id: nodeRef.id,
|
||||
w: initialSize.width,
|
||||
h: initialSize.height
|
||||
}
|
||||
)
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
await expect
|
||||
.poll(async () => (await nodeRef.getSize()).width)
|
||||
.toBeGreaterThan(initialSize.width)
|
||||
|
||||
const enlargedSize = await nodeRef.getSize()
|
||||
|
||||
// Re-select the node after resizing via evaluate to avoid
|
||||
// viewport issues with enlarged nodes
|
||||
await comfyPage.page.evaluate((id) => {
|
||||
const graph = window.app!.graph
|
||||
const canvas = window.app!.canvas
|
||||
const node = graph.getNodeById(id)!
|
||||
canvas.selectItems([node])
|
||||
}, nodeRef.id)
|
||||
await panToNode(comfyPage, nodeRef)
|
||||
await comfyPage.nextFrame()
|
||||
await openMoreOptions(comfyPage)
|
||||
await comfyPage.page
|
||||
.getByText('Adjust Size', { exact: true })
|
||||
.click({ force: true })
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
await expect
|
||||
.poll(async () => (await nodeRef.getSize()).width)
|
||||
.toBeLessThan(enlargedSize.width)
|
||||
})
|
||||
|
||||
test('copy via More Options menu', async ({ comfyPage }) => {
|
||||
const nodeRef = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
@@ -254,206 +180,6 @@ test.describe(
|
||||
}
|
||||
)
|
||||
|
||||
test.describe(
|
||||
'Selection Toolbox - Align and Distribute',
|
||||
{ tag: '@ui' },
|
||||
() => {
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
|
||||
await comfyPage.workflow.loadWorkflow('default')
|
||||
await comfyPage.nextFrame()
|
||||
})
|
||||
|
||||
test('align selected nodes to top via More Options menu', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await selectNodesWithPan(comfyPage, ['KSampler', 'Empty Latent Image'])
|
||||
|
||||
const ksampler = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
const emptyLatent = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('Empty Latent Image')
|
||||
)[0]
|
||||
|
||||
const ksamplerPosBefore = await ksampler.getPosition()
|
||||
const emptyLatentPosBefore = await emptyLatent.getPosition()
|
||||
|
||||
// Verify nodes start at different Y positions
|
||||
expect(ksamplerPosBefore.y).not.toBe(emptyLatentPosBefore.y)
|
||||
|
||||
await openMoreOptions(comfyPage)
|
||||
await comfyPage.page
|
||||
.getByText('Align Selected To', { exact: true })
|
||||
.click({ force: true })
|
||||
await expect(
|
||||
comfyPage.page.getByText('Top', { exact: true })
|
||||
).toBeVisible()
|
||||
await comfyPage.page
|
||||
.getByText('Top', { exact: true })
|
||||
.click({ force: true })
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
const ksamplerPosAfter = await ksampler.getPosition()
|
||||
const emptyLatentPosAfter = await emptyLatent.getPosition()
|
||||
|
||||
// After top alignment, both nodes should share the same Y position
|
||||
expect(ksamplerPosAfter.y).toBe(emptyLatentPosAfter.y)
|
||||
})
|
||||
|
||||
test('align selected nodes to left via More Options menu', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await selectNodesWithPan(comfyPage, ['KSampler', 'Empty Latent Image'])
|
||||
|
||||
const ksampler = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
const emptyLatent = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('Empty Latent Image')
|
||||
)[0]
|
||||
|
||||
const ksamplerPosBefore = await ksampler.getPosition()
|
||||
const emptyLatentPosBefore = await emptyLatent.getPosition()
|
||||
|
||||
expect(ksamplerPosBefore.x).not.toBe(emptyLatentPosBefore.x)
|
||||
|
||||
await openMoreOptions(comfyPage)
|
||||
await comfyPage.page
|
||||
.getByText('Align Selected To', { exact: true })
|
||||
.click({ force: true })
|
||||
await expect(
|
||||
comfyPage.page.getByText('Left', { exact: true })
|
||||
).toBeVisible()
|
||||
await comfyPage.page
|
||||
.getByText('Left', { exact: true })
|
||||
.click({ force: true })
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
const ksamplerPosAfter = await ksampler.getPosition()
|
||||
const emptyLatentPosAfter = await emptyLatent.getPosition()
|
||||
|
||||
expect(ksamplerPosAfter.x).toBe(emptyLatentPosAfter.x)
|
||||
})
|
||||
|
||||
test('distribute nodes horizontally via More Options menu', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
// Select 3 nodes for meaningful distribution
|
||||
await selectNodesWithPan(comfyPage, [
|
||||
'KSampler',
|
||||
'Empty Latent Image',
|
||||
'VAE Decode'
|
||||
])
|
||||
|
||||
const ksampler = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
const emptyLatent = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('Empty Latent Image')
|
||||
)[0]
|
||||
const vaeDecode = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('VAE Decode')
|
||||
)[0]
|
||||
|
||||
await openMoreOptions(comfyPage)
|
||||
await comfyPage.page
|
||||
.getByText('Distribute Nodes', { exact: true })
|
||||
.click({ force: true })
|
||||
await expect(
|
||||
comfyPage.page.getByText('Horizontal', { exact: true })
|
||||
).toBeVisible()
|
||||
await comfyPage.page
|
||||
.getByText('Horizontal', { exact: true })
|
||||
.click({ force: true })
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
const posAfter = {
|
||||
ksampler: await ksampler.getPosition(),
|
||||
emptyLatent: await emptyLatent.getPosition(),
|
||||
vaeDecode: await vaeDecode.getPosition()
|
||||
}
|
||||
|
||||
// After horizontal distribution, the middle node's X should be
|
||||
// between the leftmost and rightmost nodes
|
||||
const xValues = [
|
||||
posAfter.ksampler.x,
|
||||
posAfter.emptyLatent.x,
|
||||
posAfter.vaeDecode.x
|
||||
].sort((a, b) => a - b)
|
||||
expect(xValues[1]).toBeGreaterThanOrEqual(xValues[0])
|
||||
expect(xValues[1]).toBeLessThanOrEqual(xValues[2])
|
||||
})
|
||||
|
||||
test('distribute nodes vertically via More Options menu', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await selectNodesWithPan(comfyPage, [
|
||||
'KSampler',
|
||||
'Empty Latent Image',
|
||||
'VAE Decode'
|
||||
])
|
||||
|
||||
const ksampler = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
const emptyLatent = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('Empty Latent Image')
|
||||
)[0]
|
||||
const vaeDecode = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('VAE Decode')
|
||||
)[0]
|
||||
|
||||
await openMoreOptions(comfyPage)
|
||||
await comfyPage.page
|
||||
.getByText('Distribute Nodes', { exact: true })
|
||||
.click({ force: true })
|
||||
await expect(
|
||||
comfyPage.page.getByText('Vertical', { exact: true })
|
||||
).toBeVisible()
|
||||
await comfyPage.page
|
||||
.getByText('Vertical', { exact: true })
|
||||
.click({ force: true })
|
||||
await comfyPage.nextFrame()
|
||||
|
||||
const posAfter = {
|
||||
ksampler: await ksampler.getPosition(),
|
||||
emptyLatent: await emptyLatent.getPosition(),
|
||||
vaeDecode: await vaeDecode.getPosition()
|
||||
}
|
||||
|
||||
// After vertical distribution, the middle node's Y should be
|
||||
// between the topmost and bottommost nodes
|
||||
const yValues = [
|
||||
posAfter.ksampler.y,
|
||||
posAfter.emptyLatent.y,
|
||||
posAfter.vaeDecode.y
|
||||
].sort((a, b) => a - b)
|
||||
expect(yValues[1]).toBeGreaterThanOrEqual(yValues[0])
|
||||
expect(yValues[1]).toBeLessThanOrEqual(yValues[2])
|
||||
})
|
||||
|
||||
test('alignment options not shown for single node selection', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const nodeRef = (
|
||||
await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
|
||||
)[0]
|
||||
await selectNodeWithPan(comfyPage, nodeRef)
|
||||
|
||||
await openMoreOptions(comfyPage)
|
||||
|
||||
// Align and Distribute should not appear for single-node selection
|
||||
await expect(
|
||||
comfyPage.page.getByText('Align Selected To', { exact: true })
|
||||
).not.toBeVisible()
|
||||
await expect(
|
||||
comfyPage.page.getByText('Distribute Nodes', { exact: true })
|
||||
).not.toBeVisible()
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
test.describe(
|
||||
'Selection Toolbox - Bypass with Multiple Nodes',
|
||||
{ tag: '@ui' },
|
||||
|
||||
Reference in New Issue
Block a user