Kunal8954 opened a new pull request, #72438:
URL: https://github.com/apache/airflow/pull/72438
closes: #72433
### What's the problem
`XComsPage.applyFilter()` locates the just-added filter pill's input with:
```ts
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.
---
<sub>Disclosure: this PR was prepared with the assistance of [Claude
Code](https://claude.com/claude-code) (the commit carries a `Co-Authored-By`
trailer). I reviewed the change and take responsibility for it.</sub>
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_015kAvbZ6SeKgp6jbGcvpXSh
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
