Comfy-Org / Comfy-Org/ComfyUI_frontend

test: Add E2E coverage for search bar layout and autocomplete clipping fixes

Open
#11,714 0 comments 0 reactions 1 assignee Claimed by @kaili-yang View on GitHub
area:search area:testing
Dominant language
TypeScript
Stars
2k
Forks
702
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

This issue tracks adding E2E (Playwright) test coverage for the visual fixes introduced in #11713, which were deferred because each case was impractical to cover at the time of the PR.

## Background

PR #11713 fixed three visual bugs in the Desktop app at small window sizes:

1. **`SearchAutocomplete` portal fix** – `ComboboxContent` is now wrapped in `ComboboxPortal` so the suggestions dropdown teleports to ``, escaping `overflow-hidden` ancestors and avoiding z-index clipping in the Manager dialog and other modals.
2. **`BaseModalLayout` header shrink** – Replaced `shrink-0` with `min-w-0` on the header content container so the search bar can shrink at narrow window sizes.
3. **`GraphCanvas` app-drag region** – Moved the native drag (`app-drag`) div before a mutually exclusive `v-if` block so Desktop window dragging works when workflow tabs are positioned in the Sidebar.

## Why tests were deferred

- **`SearchAutocomplete` portal**: Verifying the teleport fix requires the Manager dialog with a real/mocked extension list. The existing Playwright suite does not cover that dialog flow; adding it would be a substantial effort.
- **`BaseModalLayout` header shrink**: A viewport-resize test would be fragile and would test CSS layout rather than application behaviour.
- **`GraphCanvas` app-drag**: Desktop/Electron-only. `-webkit-app-region: drag` cannot be exercised in headless Chromium.

Unit tests for `SearchAutocomplete` were added in #11713 to cover `ComboboxPortal` rendering, suggestion display, and item selection.

## Desired coverage

- [ ] E2E test: Open the Manager dialog (or a modal using `BaseModalLayout`) and verify the `SearchAutocomplete` dropdown is not clipped by `overflow-hidden` ancestors (i.e., suggestions appear in `` portal).
- [ ] E2E test: Resize the viewport to a narrow width and verify the search bar in `BaseModalLayout` shrinks correctly without overflowing.

## References

- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11713
- Requested by: @kaili-yang

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11714-test-Add-E2E-coverage-for-search-bar-layout-and-autocomplete-clipping-fixes-3506d73d365081a8ae21e66a04042615) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.