Date picker interaction in Selenium Python - Build an Automation Script

Select a specific date using the date picker

Preconditions (1)

Step 1: Locate the date picker input field by its id 'datePickerInput'

Step 2: Click on the date picker input field to open the calendar widget

Step 3: Navigate to the desired month and year if not currently displayed

Step 4: Click on the day '15' in the calendar to select the date

Step 5: Verify that the input field value updates to '2024-07-15'

✅ Expected Result: The date picker input field shows the selected date '2024-07-15' after selection

Automation Requirements - Selenium with Python

Assertions Needed:

Verify the date picker input field value equals '2024-07-15' after selection

Best Practices:

Use explicit waits to wait for elements to be clickable or visible

Use By.ID or other stable locators instead of brittle XPath

Avoid hardcoded sleeps; use WebDriverWait

Structure code clearly with comments for each step

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Initialize the Chrome driver
with webdriver.Chrome() as driver:
    driver.get('https://example.com/date-picker')  # Replace with actual URL

    wait = WebDriverWait(driver, 10)

    # Step 1: Locate the date picker input field
    date_input = wait.until(EC.element_to_be_clickable((By.ID, 'datePickerInput')))

    # Step 2: Click to open the calendar widget
    date_input.click()

    # Step 3: Navigate to the desired month and year if needed
    # For simplicity, assume the calendar shows July 2024 by default

    # Step 4: Click on the day '15'
    day_15 = wait.until(EC.element_to_be_clickable((By.XPATH, "//td[@role='gridcell' and text()='15']")))
    day_15.click()

    # Step 5: Verify the input field value updates
    selected_date = date_input.get_attribute('value')
    assert selected_date == '2024-07-15', f"Expected date '2024-07-15' but got '{selected_date}'"

    print('Test passed: Date picker selected date correctly.')

This script uses Selenium WebDriver with Python to automate the date picker interaction.

We start by opening the browser and navigating to the page with the date picker.

We wait explicitly for the date picker input field to be clickable, then click it to open the calendar.

Assuming the calendar shows the correct month and year, we locate the day '15' cell and click it.

Finally, we get the value of the input field and assert it matches the expected date '2024-07-15'.

Explicit waits ensure the elements are ready before interacting, avoiding flaky tests.

Common Mistakes - 3 Pitfalls

Using time.sleep() instead of explicit waits

Using brittle XPath locators like absolute paths

{'mistake': 'Not verifying the input field value after selecting the date', 'why_bad': 'The test may pass without confirming the date was actually selected.', 'correct_approach': "Always assert the input field's value matches the expected date."}

Bonus Challenge

Now add data-driven testing to select three different dates: '2024-07-15', '2024-08-01', and '2024-12-25'.

Show Hint