Testing EuiComboBox
<EuiComboBox> exposes multiple ARIA and data-test-subj attribute based selectors you can use to safely interact
with the component and read information it displays.
Quick reference
Single vs multi selection
EuiComboBox has two different selection modes - single and multi selection, controlling how many options a user
can select. Enabling single selection mode by passing the singleSelection={true} prop changes the resulting
DOM slightly, and you should always check what mode the <EuiComboBox> component you're testing has enabled before
writing any value assertions.
Multi selection (default)
When multi selection is enabled (singleSelection={true}) prop is not passed), the selected options should
be queried using the [data-test-subj="euiComboBoxPill"] selector.
Single selection
When single selection is enabled (singleSelection={true} prop is passed), the selected value should be accessed
by reading the value of the <input> HTML element that can be queried using
the [data-test-subj="comboBoxSearchInput"] selector.
Please note that the same <input> element is being used as the options search input. To ensure the value
is equal to one of the available options and not a random string, verify that aria-invalid="false".
Available selectors
| Selector | Description |
|---|---|
[data-test-subj="euiComboBoxPill"] | Selected options When using singleSelection={true} read this first |
[data-test-subj="comboBoxSearchInput"] | Search input field |
[data-test-subj="comboBoxClearButton"] | Clear selection button |
[data-test-subj="comboBoxToggleListButton"] | Toggle list of options button |
[data-test-subj=”comboBoxOptionsList”] | Options list |
[role=”option”] | Options list items |
[role=”option”][aria-selected=”true”] | Selected options list items |
Support
Please note that only the selectors listed above are officially supported by EUI. Using different selectors based on this component's DOM structure, and especially on the auto-generated class names, is not recommended and may break your tests in the future.
If you find that your tests require using unsupported selectors, please open an issue, so we can add them, or even better - contribute to EUI and try adding them yourself!