[test-helpers] Add EuiRangeObject - #9957
Merged
steliosmavro merged 6 commits intoAug 27, 2026
Merged
Conversation
Playwright Component Object for EuiRange/EuiDualRange, following the package CONTRIBUTING guide. Fixes a real EUI test-subj collision: a plain EuiRange rendered with showInput spreads the consumer's data-test-subj onto both the native range slider and the visible number input, so a plain getByTestId throws a Playwright strict-mode error. slider and numberInput disambiguate by class so each resolves to exactly one element. Deliberately excludes EuiDualRange's min/max inputs (need their own separate data-test-subj via minInputProps/maxInputProps, the consumer's own concern) and popover open/close mechanics (EuiPopover already exposes those synchronously).
Per Weronika's review feedback on the EuiDraggableObject PR (elastic#9936): comments should be short pointers to the README, not repeat the full rationale in the code too, and specs should not assert on EuiRange's own behavior (the number input mirroring the slider's value), only on this helper's own disambiguation.
weronikaolejniczak
requested changes
Aug 27, 2026
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
Contributor
There was a problem hiding this comment.
Found one blocker. Otherwise looks good 👌🏻
|
|
||
| | Member | Description | | ||
| |---|---| | ||
| | `slider` | `Locator` for the native `<input type="range">`. Always resolves to exactly one element. | |
Contributor
There was a problem hiding this comment.
slider is not “always exactly one element”. showInput: 'inputWithPopover' still puts data-test-subj on both the trigger input and the slider but the slider lives in the popover panel. EuiPopover only mounts that panel when open.
Comment on lines
+29
to
+30
| - **`EuiDualRange`'s min/max number inputs**: rendered only with `showInput`, and need their own `data-test-subj` via `minInputProps`/`maxInputProps`. That is the consumer's own test-subj to target directly, not ambiguous the way the plain `EuiRange` case is. | ||
| - **`EuiDualRange`'s `inputWithPopover` open/close**: its popover only opens by clicking a number input, not the delimiter between them. That is a real EUI behavioral quirk, but a single documented fact rather than DOM ambiguity, and popover mechanics are already exposed synchronously by `EuiPopover` itself (`aria-expanded`/`aria-controls`). Drive it from your test directly. |
Contributor
There was a problem hiding this comment.
I understand the limitation around min/max, we cannot query it. But I think we're making EuiDualRange depend on EuiRange semantics too much where these are 2 separate components and we should actually separately also navigate to EuiDualRange story and test it.
Weronika found slider does not always resolve to exactly one element: with showInput=inputWithPopover it lives inside the popover panel and is not mounted until the popover opens. Corrected the README and object.ts docs and added a spec proving it. Also added a spec that navigates to EuiDualRange's own Playground story instead of assuming its behavior from EuiRange's, per her second comment.
weronikaolejniczak
approved these changes
Aug 27, 2026
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
Contributor
There was a problem hiding this comment.
LGTM! 🟢 Thanks, Stelios 💪🏻
💚 Build Succeeded
History
|
steliosmavro
enabled auto-merge (squash)
August 27, 2026 13:52
💚 Build Succeeded
History
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
EuiRangeObject, a Playwright Component Object for EuiRange andEuiDualRange, following the package's CONTRIBUTING guide.No live Scout consumer exists yet for this either, so this is Storybook-validated only, same as
EuiFilterButtonObject(#9942).A real EUI gap this fixes
On a plain
EuiRangerendered withshowInput, EUI spreads the consumer'sdata-test-subjonto both the native range slider and the visible number input. A plainpage.getByTestId(x)then resolves to two elements and throws in Playwright's strict mode. Confirmed by reading the source and reproducing it against Storybook, not just inferred. Full rationale, including whyEuiDualRangedoes not have this problem, is in the component README.API
slider: aLocatorfor the native<input type="range">, always resolving to exactly one element.numberInput: aLocatorfor the visible number input, present only on a plainEuiRangewithshowInput.Deliberately excludes
EuiDualRange's min/max inputs and popover mechanics. See the README's "Deliberately out of scope" section for why.Testing
tsc --noEmitclean. 3 Playwright validation specs pass against Storybook (Forms/EuiRange, Playground story), 9/9 on a repeat-3 flake check. Specs assert only on this helper's own disambiguation (element counts), not on EuiRange's own behavior.