Date picker strategies in Selenium Java

Introduction

Date pickers let users select dates easily. Testing them ensures the right date is chosen and the app works well.

When testing booking or reservation forms that need a date.

When verifying that date inputs accept only valid dates.

When checking that the calendar popup opens and closes correctly.

When ensuring the selected date appears correctly in the input field.

When automating tests that require setting specific dates.

Syntax

Selenium Java

WebElement dateInput = driver.findElement(By.id("datePicker"));
dateInput.click();
// Select date by clicking calendar elements or sending keys
// Example: dateInput.sendKeys("2024-06-15");

Use locators like By.id or By.cssSelector to find the date picker input.

Some date pickers allow typing the date, others require clicking calendar days.

Examples

Directly types the date into the input field if allowed.

Selenium Java

WebElement dateInput = driver.findElement(By.id("datePicker"));
dateInput.sendKeys("2024-06-15");

Clicks the input to open the calendar, then clicks the day '15' in the calendar.

Selenium Java

dateInput.click();
WebElement day = driver.findElement(By.xpath("//td[text()='15']"));
day.click();

Opens calendar, navigates to next month, then selects day 10.

Selenium Java

dateInput.click();
WebElement nextMonth = driver.findElement(By.cssSelector(".calendar-next"));
nextMonth.click();
WebElement day = driver.findElement(By.xpath("//td[text()='10']"));
day.click();

Sample Program

This test opens a page with a date picker, clicks the input to open the calendar, selects day 15, then checks if the input value matches the expected date.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class DatePickerTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/date-picker");

            WebElement dateInput = driver.findElement(By.id("datePicker"));
            dateInput.click();

            WebElement day = driver.findElement(By.xpath("//td[text()='15']"));
            day.click();

            String selectedDate = dateInput.getAttribute("value");
            if ("2024-06-15".equals(selectedDate)) {
                System.out.println("Test Passed: Correct date selected.");
            } else {
                System.out.println("Test Failed: Date selected is " + selectedDate);
            }
        } finally {
            driver.quit();
        }
    }
}

Important Notes

Always wait for the calendar to be visible before clicking days to avoid errors.

Some date pickers use iframes; switch to the iframe first if needed.

Use explicit waits to handle dynamic loading of calendar elements.

Summary

Date picker testing ensures users can select dates correctly.

Use clicking or typing strategies depending on the date picker design.

Verify the selected date matches what you expect in your tests.