[Kunal8954]

closes: #72433

What's the problem

XComsPage.applyFilter() locates the just-added filter pill's input with:

const filterPill = this.page
  .locator("div")
  .filter({ hasText: `${filterName}:` })
  .first();
const filterInput = filterPill.getByRole("textbox");

.filter({ hasText }) matches on descendant text, so it doesn't just match the specific filter pill div — it matches every ancestor div whose subtree happens to contain that text too. That used to be harmless because .first() happened to land on the right element, but #71554's DOM restructuring changed the filter bar's markup enough that .first() now resolves to a much broader ancestor, and getByRole("textbox") on it matches every textbox inside that ancestor instead of the one intended — hence "strict mode violation: locator resolved to 12 elements instead of 1".

The fix

Give the actively-editing pill's input a stable data-testid="filter-pill-input" (TextSearchFilter.tsx, passed straight through InputWithAddon's prop spread onto the underlying <Input>), and scope applyFilter() to page.getByTestId("filter-pill-input") directly instead of the ancestor-text search.

Only one filter pill is ever in edit mode at a time (an added pill enters edit mode immediately, and closes — collapsing to a chip — as soon as Enter/Escape is pressed or it loses focus), so a single, non-keyed testid is all applyFilter() needs; no per-filter key plumbing into the e2e layer.

Tests

Added a FilterBar test (FilterBar.test.tsx) asserting getByTestId("filter-pill-input") returns exactly the active pill's textbox. Verified it's a real regression test by temporarily reverting the data-testid locally — the new test (and only that test) failed with the same kind of "unable to find element" error this issue describes, confirming it actually exercises the bug.

Verification

• vitest run on src/components/FilterBar: 22/22 passing (including the new test).
• eslint --quiet on every touched file: clean.
• tsc -p tsconfig.app.json: clean.
• prettier --check: clean.
• Branch rebased onto current main before running all of the above.
• Could not run the actual Playwright e2e spec here (no live Airflow webserver/browser in this environment) — the added unit test exercises the same DOM-shape bug at the component level instead, and XComsPage.applyFilter()'s new locator is a straightforward, minimal change built directly on top of that verified testid.

---

_{Disclosure: this PR was prepared with the assistance of Claude Code (the commit carries a Co-Authored-By trailer). I reviewed the change and take responsibility for it.}

🤖 Generated with Claude Code

https://claude.ai/code/session_015kAvbZ6SeKgp6jbGcvpXSh

[boring-cyborg]

Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions.

[Kunal8954]

Thanks for the review @bbovenzi. Will pick up more in this area.