DatePickerElement
Playwright element wrapper for <vaadin-date-picker>. Adds convenience methods for LocalDate values and lookup by label.
Component Tag
vaadin-date-picker
Implements
HasInputFieldElementHasValidationPropertiesElementHasClearButtonElementHasPlaceholderElementHasThemeElementFocusableElementHasAriaLabelElementHasEnabledElementHasTooltipElementHasLabelElementHasHelperElement
Factory Methods
getByLabel (Page)
public static DatePickerElement getByLabel(Page page, String label)
DatePickerElement by its label. Uses ARIA role COMBOBOX.
The accessible label of the field
DatePickerElement
getByLabel (Locator)
public static DatePickerElement getByLabel(Locator locator, String label)
DatePickerElement by its label within a given scope.
The locator to search within
The accessible label of the field
DatePickerElement
Constructor
DatePickerElement
public DatePickerElement(Locator locator)
DatePickerElement.
The locator for the <vaadin-date-picker> element
Methods
setValue (LocalDate)
public void setValue(LocalDate date)
LocalDate formatted as ISO-8601.
setValue (String)
@Override
public void setValue(String value)
Value formatted as in the view (dd/mm/yyyy)
getValueAsLocalDate
public LocalDate getValueAsLocalDate()
LocalDate.
Returns: The parsed date or null when empty
assertValue (String)
@Override
public void assertValue(String value)
Expected value formatted as in the view (dd/mm/yyyy)
assertValue (LocalDate)
public void assertValue(LocalDate value)
Expected LocalDate or null for empty
getAriaLabelLocator
@Override
public Locator getAriaLabelLocator()
getFocusLocator
@Override
public Locator getFocusLocator()
getEnabledLocator
@Override
public Locator getEnabledLocator()
Usage Examples
Basic Date Selection
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Appointment date");
datePicker.assertVisible();
datePicker.assertHelperHasText("Enter the appointment date");
LocalDate testDate = LocalDate.of(2025, 9, 20);
datePicker.setValue(testDate);
datePicker.assertValue(testDate);
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
LocalDate testDate = LocalDate.of(2025, 9, 20);
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Appointment date");
datePicker.setValue(testDate);
datePicker.assertValue(formatter.format(testDate));
Min/Max Validation
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Vacation date");
LocalDate today = LocalDate.now();
LocalDate initialDate = today.plusDays(7);
LocalDate maxDate = today.plusDays(30);
datePicker.assertValue(initialDate);
// Valid date within bounds
LocalDate validDate = today.plusDays(15);
datePicker.setValue(validDate);
datePicker.assertValue(validDate);
datePicker.assertValid();
// Invalid date (after max)
LocalDate invalidDate = maxDate.plusDays(1);
datePicker.setValue(invalidDate);
datePicker.assertInvalid();
datePicker.assertErrorMessage("Maximum number of days exceeded.");
// Invalid date (before min)
LocalDate anotherInvalidDate = today.minusDays(1);
datePicker.setValue(anotherInvalidDate);
datePicker.assertInvalid();
datePicker.assertErrorMessage("Minimum number of days exceeded.");
Theme
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Appointment date");
datePicker.assertVisible();
datePicker.assertTheme("small");
Focus
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Appointment date");
DatePickerElement secondPicker = DatePickerElement.getByLabel(page, "Vacation date");
datePicker.assertIsFocused();
secondPicker.assertIsNotFocused();
secondPicker.focus();
secondPicker.assertIsFocused();
datePicker.assertIsNotFocused();
ARIA Label
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Invisible label");
datePicker.assertVisible();
datePicker.assertAriaLabel("Invisible label");
Enabled/Disabled
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Enabled/Disabled Field");
datePicker.assertDisabled();
page.locator("#enable-disable-button").click();
datePicker.assertEnabled();
DatePickerElement datePicker = DatePickerElement.getByLabel(page, "Appointment date");
datePicker.assertVisible();
datePicker.assertTooltipHasText("Tooltip for datepicker");