Date picker interaction in Selenium Python

Introduction

A date picker lets users choose a date easily. Testing it ensures users can select the right date without errors.

When testing a booking website where users pick check-in and check-out dates.

When filling forms that require a birthdate or appointment date.

When verifying that date inputs accept only valid dates.

When checking that the date picker closes after selecting a date.

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

Syntax

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

# Open browser and go to page
browser = webdriver.Chrome()
browser.get('URL_of_page_with_datepicker')

# Open date picker
datepicker = browser.find_element(By.ID, 'datepicker_id')
datepicker.click()

# Select date (example: 15th day)
day = browser.find_element(By.XPATH, "//td[text()='15']")
day.click()

Replace 'URL_of_page_with_datepicker' with the actual page URL.

Use unique locators like ID or XPath to find date picker elements.

Examples

Selects the 10th day from the date picker.

Selenium Python

datepicker = browser.find_element(By.ID, 'date_input')
datepicker.click()
day = browser.find_element(By.XPATH, "//td[text()='10']")
day.click()

Selects a specific date using an accessible button with aria-label.

Selenium Python

datepicker = browser.find_element(By.CSS_SELECTOR, '.calendar-input')
datepicker.click()
day = browser.find_element(By.XPATH, "//button[@aria-label='Choose Monday, March 20, 2023']")
day.click()

Sample Program

This script opens a sample date picker, selects the 15th day, and checks if the input shows the correct date.

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
import time

# Setup Chrome options
options = Options()
options.add_argument('--headless')  # Run without opening a window

# Setup Chrome driver
service = Service()
browser = webdriver.Chrome(service=service, options=options)

try:
    # Open sample page with date picker
    browser.get('https://jqueryui.com/datepicker/')

    # Switch to frame containing the date picker
    browser.switch_to.frame(browser.find_element(By.CLASS_NAME, 'demo-frame'))

    # Find the date input and click to open date picker
    date_input = browser.find_element(By.ID, 'datepicker')
    date_input.click()

    time.sleep(1)  # Wait for date picker to appear

    # Select the 15th day
    day_15 = browser.find_element(By.XPATH, "//a[text()='15']")
    day_15.click()

    # Verify the input value changed to the selected date
    selected_date = date_input.get_attribute('value')
    print(f'Selected date: {selected_date}')

    # Simple assertion
    assert '15' in selected_date, 'Date picker did not select the 15th day.'

finally:
    browser.quit()

Important Notes

Always wait briefly after opening the date picker to let it render.

Use assertions to confirm the date was selected correctly.

Use unique and stable locators to avoid flaky tests.

Summary

Date pickers help users select dates easily.

Test by opening the picker, choosing a date, and checking the input value.

Use clear locators and assertions to make tests reliable.