Testing EuiSuperDatePicker
<EuiSuperDatePicker> exposes many data-test-subj attributes you can use when writing automated tests to safely
control and read date picker values.
Setting date and time
Updating the date and time in EuiSuperDateSelect can be done multiple ways and depends on whether you want to set an absolute or a relative date and time.
Absolute
When relying on an absolute date and time (e.g., January 1st, 2023), we recommend using the Absolute tab (by clicking
on the [data-test-subj="superDatePickerAbsoluteTab"] element), and updating the date <input> element value
([data-test-subj="superDatePickerAbsoluteDateInput"]). Please ensure you're entering a supported date format.
Relative
When using a relative date (e.g., the past 15 minutes), we recommend using the Relative tab (by clicking
on the [data-test-subj="superDatePickerRelativeTab"] element), and selecting the value using the <input>
date input element ([data-test-subj="superDatePickerRelativeDateInputNumber"]) as well as the <input> date input
unit element ([data-test-subj="superDatePickerRelativeDateInputUnitSelector"]).
Now
When you want to use the current date and time, we recommend using the Now tab (by clicking
on the [data-test-subj="superDatePickerNowTab"] element) and clicking on the "Set time to now" button (
[data-test-subj="superDatePickerNowButton"]).
Closing the selection popover
You can close the popover by clicking the Escape key or clicking outside the popover. The selected value will remain set.
Available selectors
| Description | Selector |
|---|---|
| Start date button | [data-test-subj="superDatePickerstartDatePopoverButton"] |
| End date button | [data-test-subj="superDatePickerendDatePopoverButton"] |
| Quick menu toggle button | [data-test-subj="superDatePickerToggleQuickMenuButton"] |
| Quick menu popover | [data-test-subj="superDatePickerToggleQuickMenuButton"] |
| Quick menu previous time window | - |
| Quick menu next time window | - |
| Quick menu quick select inputs | - |
| Quick menu commonly used - Today option | [data-test-subj="superDatePickerCommonlyUsed_Today"] |
| Quick menu commonly used - This week option | [data-test-subj="superDatePickerCommonlyUsed_This_week"] |
| Quick menu commonly used - This month option | [data-test-subj="superDatePickerCommonlyUsed_This_month"] |
| Quick menu commonly used - This year option | [data-test-subj="superDatePickerCommonlyUsed_This_year"] |
| Quick menu commonly used - Yesterday option | [data-test-subj="superDatePickerCommonlyUsed_Yesterday"] |
| Quick menu commonly used - Week to date option | [data-test-subj="superDatePickerCommonlyUsed_Week_to date"] |
| Quick menu commonly used - Month to date option | [data-test-subj="superDatePickerCommonlyUsed_Month_to date"] |
| Quick menu commonly used - Year to date option | [data-test-subj="superDatePickerCommonlyUsed_Year_to date"] |
| Absolute tab button | [data-test-subj="superDatePickerAbsoluteTab"] |
| Absolute tab date input | [data-test-subj="superDatePickerAbsoluteDateInput"] |
| Relative tab button | [data-test-subj="superDatePickerRelativeTab"] |
| Relative tab input | [data-test-subj="superDatePickerRelativeDateInputNumber"] |
| Relative tab input unit | [data-test-subj="superDatePickerRelativeDateInputUnitSelector"] |
| Relative tab round value switch | [data-test-subj="superDatePickerRelativeDateRoundSwitch"] |
| Now tab button | [data-test-subj="superDatePickerNowTab"] |
| Now tab "Set time to now" button | [data-test-subj="superDatePickerNowButton"] |