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

fix: resolve CI failures in e2e tests

Browse Source 
- Fix strict mode violation in formDropdownPosition.spec.ts by excluding
  node-collapse-button from chevron-down selector
- Update imagePickerPopover locator in AppModeHelper to use data-testid
  instead of role-based selector
- Relax viewport check in appModeDropdownClipping.spec.ts to only verify
  top-left is visible (tall popover content may extend beyond viewport)
- Remove duplicate getter methods left over from stash conflict resolution
This commit is contained in:
bymyself
2026-04-10 17:14:21 -07:00
parent c5acfb0fd7
commit 48ea044927
3 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
browser_tests/fixtures/helpers/AppModeHelper.ts
View File

@@ -23,7 +23,7 @@ export class AppModeHelper {
public readonly outputPlaceholder: Locator
/** The linear-mode widget list container (visible in app mode). */
public readonly linearWidgets: Locator
/** The PrimeVue Popover for the image picker (renders with role="dialog"). */
/** The Reka UI Popover for the image picker (teleported to body). */
public readonly imagePickerPopover: Locator
/** The Run button in the app mode footer. */
public readonly runButton: Locator
@@ -54,10 +54,7 @@ export class AppModeHelper {
TestIds.builder.outputPlaceholder
)
this.linearWidgets = this.page.locator('[data-testid="linear-widgets"]')
this.imagePickerPopover = this.page
.getByRole('dialog')
.filter({ has: this.page.getByRole('button', { name: 'All' }) })
.first()
this.imagePickerPopover = this.page.getByTestId('form-dropdown-content')
this.runButton = this.page
.getByTestId('linear-run-button')
.getByRole('button', { name: /run/i })

22
browser_tests/tests/appModeDropdownClipping.spec.ts
View File

@@ -137,27 +137,25 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
const dropdownButton = imageRow.locator('button:has(> span)').first()
await dropdownButton.click()
// The unstyled PrimeVue Popover renders with role="dialog".
// Locate the one containing the image grid (filter buttons like "All", "Inputs").
// The Reka UI PopoverContent renders with role="dialog" and is
// teleported to <body> via PopoverPortal.
const popover = comfyPage.appMode.imagePickerPopover
await expect(popover).toBeVisible()
// Primary assertion: portal teleportation means no ancestor clips
await expect
.poll(() => popover.evaluate(isClippedByAnyAncestor))
.toBe(false)
// Secondary: popover top-left should be within the viewport
// (full containment may fail for tall content that gets constrained)
await expect
.poll(() =>
popover.evaluate((el) => {
const rect = el.getBoundingClientRect()
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
)
return rect.top >= 0 && rect.left >= 0
})
)
.toBe(true)
await expect
.poll(() => popover.evaluate(isClippedByAnyAncestor))
.toBe(false)
})
})

29
browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts
View File

@@ -14,14 +14,24 @@ test.describe('FormDropdown Position Under CSS Transforms', () => {
* Click the FormDropdown trigger button inside the LoadImage node.
* The trigger is a button with a chevron icon inside the dropdown widget.
*/
async function clickDropdownTrigger(
function getTriggerButton(
comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
) {
const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
const trigger = node.locator('button').filter({
has: comfyPage.page.locator('.icon-\\[lucide--chevron-down\\]')
})
await trigger.click()
return node
.locator('button')
.filter({
has: comfyPage.page.locator('.icon-\\[lucide--chevron-down\\]')
})
.and(
comfyPage.page.locator(':not([data-testid="node-collapse-button"])')
)
}
async function clickDropdownTrigger(
comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
) {
await getTriggerButton(comfyPage).click()
}
function getDropdownContent(
@@ -30,15 +40,6 @@ test.describe('FormDropdown Position Under CSS Transforms', () => {
return comfyPage.page.getByTestId('form-dropdown-content')
}
function getTriggerButton(
comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
) {
const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
return node.locator('button').filter({
has: comfyPage.page.locator('.icon-\\[lucide--chevron-down\\]')
})
}
test('dropdown menu appears near trigger at default zoom', async ({
comfyPage
}) => {