Selenium Datepicker Example

Omozegie AziegbeMarch 3rd, 2025Last Updated: February 27th, 2025

0 59 2 minutes read

Interacting with date pickers in web applications can be challenging due to their different implementations. Some date pickers allow direct text input, while others require selecting a date from a dropdown calendar. In this article, we will use Selenium WebDriver and JUnit to automate the selection of a date from the “Date of Birth” field on DemoQA’s Automation Practice Form.

1. Setting Up Selenium and JUnit

Add the following dependencies to your pom.xml file:

<dependencies>
    <!-- Selenium WebDriver -->
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.18.1</version>
    </dependency>
 
    <!-- JUnit 5 -->
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter-api</artifactId>
        <version>5.9.2</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter-engine</artifactId>
        <version>5.9.2</version>
    </dependency>
 
    <!-- WebDriver Manager for managing browser drivers -->
    <dependency>
        <groupId>io.github.bonigarcia</groupId>
        <artifactId>webdrivermanager</artifactId>
        <version>5.9.3</version>
    </dependency>
</dependencies>

These dependencies set up Selenium WebDriver for browser automation, JUnit 5 for testing, and WebDriverManager for automatic driver management. selenium-java provides the core API, while junit-jupiter-api and junit-jupiter-engine enable writing and running tests. WebDriverManager eliminates manual driver downloads, ensuring compatibility with the latest browser versions.

2. Writing the Selenium Test

Now, let’s write the JUnit test to open the DemoQA page and select a date from the date picker.

public class DatePickerTest {
     
    private WebDriver driver;
 
    @BeforeEach
    public void setUp() {
        WebDriverManager.chromedriver().setup();
        driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();
    }
 
    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
     
    @Test
    public void testDatePicker() {
        // Open the form
        driver.get("https://demoqa.com/automation-practice-form");
 
        // Click on the Date of Birth field to open the datepicker
        WebElement dateOfBirthField = driver.findElement(By.id("dateOfBirthInput"));
        dateOfBirthField.click();
 
        // Select the year from the dropdown
        WebElement yearDropdown = driver.findElement(By.xpath("//select[@class='react-datepicker__year-select']"));
        yearDropdown.click();
        yearDropdown.findElement(By.xpath("//option[text()='1995']")).click();
 
        // Select the month from the dropdown
        WebElement monthDropdown = driver.findElement(By.xpath("//select[@class='react-datepicker__month-select']"));
        monthDropdown.click();
        monthDropdown.findElement(By.xpath("//option[text()='December']")).click();
 
        // Select the day from the datepicker
        WebElement day = driver.findElement(By.xpath("//div[contains(@class,'react-datepicker__day') and text()='10']"));
        day.click();
 
        // Verify the selected date
        String selectedDate = dateOfBirthField.getAttribute("value");
        assertEquals("10 Dec 1995", selectedDate, "The selected date does not match!");
    }
     
}

The test starts by launching Google Chrome and navigating to DemoQA’s Automation Practice Form. It first finds the “Date of Birth” input field using its ID (dateOfBirthInput) and clicks it to open the datepicker. Since this datepicker does not allow direct text input, we interact with its dropdown elements instead.

To select the year (1995), the script locates the year dropdown using the XPath:

WebElement yearDropdown = driver.findElement(By.xpath("//select[@class='react-datepicker__year-select']"));

It then clicks on the dropdown and selects the required year using:

1	`yearDropdown.findElement(By.xpath("//option[text()='1995']")).click();`

Similarly, the month dropdown is located using XPath and the required month (December) is selected.

WebElement monthDropdown = driver.findElement(By.xpath("//select[@class='react-datepicker__month-select']"));
monthDropdown.findElement(By.xpath("//option[text()='December']")).click();

Finally, the script selects the 10th day of the month using XPath with contains() to make it more dynamic and resistant to changes:

WebElement day = driver.findElement(By.xpath("//div[contains(@class,'react-datepicker__day') and text()='10']"));
day.click();

After selecting the date, the test retrieves the value of the date input field using getAttribute("value") and verifies that it matches “10 Dec 1995”. If the selected date does not match, the test will fail.

Once the test completes, the tearDown() method ensures that the browser closes, preventing unnecessary resource usage.

3. Conclusion

In this article, we explored how to automate date selection from a Selenium datepicker using XPath in a JUnit test. We interacted with the datepicker UI by selecting the year, month, and day dynamically, ensuring accurate date selection. The test verified the chosen date by retrieving the input field’s value. By leveraging XPath locators, we created a flexible test that mimics real user interaction. This approach is particularly useful for handling complex web elements and improving test reliability.