Date picker interaction in Selenium Python - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a date picker in web testing?

A date picker is a user interface element that allows users to select a date from a calendar popup instead of typing it manually.

beginner

How do you locate a date picker element in Selenium?

You can locate a date picker using locators like ID, name, CSS selector, or XPath depending on the HTML structure of the date picker input or calendar popup.

intermediate

Why is it better to interact with the date picker UI instead of sending keys directly to the input field?

Interacting with the date picker UI simulates real user behavior and avoids issues with date format or input validation that may occur when sending keys directly.

beginner

What Selenium method can you use to click on a specific date in a calendar popup?

You can use the .click() method on the WebElement representing the date button or cell in the calendar popup.

advanced

How can you handle dynamic date pickers that change month or year?

You can write code to navigate the calendar by clicking next/previous month or year buttons until the desired date is visible, then select it.

Which Selenium locator is usually the most reliable for a date picker input?

A XPath with absolute path

B ID

C Class name with many siblings

D Tag name only

ID is unique and stable, making it the most reliable locator for elements like date picker inputs.

What is the best way to select a date in a date picker using Selenium?

A Click the date picker input, then click the date in the calendar popup

B Send keys with the date string to the input field

C Refresh the page and hope the date is pre-selected

D Use JavaScript to set the date value directly

Clicking the input and then the date simulates user behavior and avoids format issues.

If the date picker shows only the current month, how can you select a date in a future month?

A Send keys with the future date

B Reload the page

C Click the next month button until the desired month appears

D Use the browser console to change the date

Navigating the calendar UI by clicking next month is the correct way to reach future dates.

Which Selenium method is used to simulate a mouse click on a date element?

A get()

B send_keys()

C submit()

D click()

The click() method simulates a mouse click on a web element.

Why might sending keys directly to a date input fail in some date pickers?

A The input field is read-only or controlled by JavaScript

B The browser does not support send_keys()

C The date format is always MM/DD/YYYY

D Selenium cannot find the input field

Some date pickers use read-only inputs or JavaScript controls that ignore direct typing.

Explain how to automate selecting a specific date in a date picker using Selenium.

Think about simulating user clicks step-by-step.

Describe challenges you might face when automating date picker interactions and how to solve them.

Consider UI behavior and element properties.

Practice

1. What is the primary purpose of interacting with a date picker in Selenium tests?

easy

A. To test if the date picker changes color when clicked

B. To check if the date picker is visible on the page only

C. To select a date and verify it appears correctly in the input field

D. To verify the page title changes after selecting a date

Solution

1. Step 1: Understand date picker role

   Date pickers let users pick a date easily and show it in an input field.

2. Step 2: Verify date selection in tests

   Tests should select a date and check if the input field shows the chosen date correctly.

3. Final Answer:

   To select a date and verify it appears correctly in the input field -> Option C

4. Quick Check:

   Date picker test = select and verify date [OK]

Hint: Pick date, then check input value matches [OK]

Common Mistakes:

• Only checking visibility without selecting date
• Ignoring input field verification
• Testing unrelated UI changes like color
• Assuming page title changes after date pick

2. Which Selenium Python code snippet correctly clicks a date picker input and selects a date with locator by ID 'dateInput'?

easy

A. driver.find_element(By.ID, 'dateInput').send_keys('15')

B. driver.find_element(By.CLASS_NAME, 'dateInput').click()
driver.find_element(By.ID, '15').click()

C. driver.find_element(By.CSS_SELECTOR, '#dateInput').select('15')

D. driver.find_element(By.ID, 'dateInput').click()
driver.find_element(By.XPATH, "//td[text()='15']").click()

Solution

1. Step 1: Click date picker input by ID

   Use By.ID with 'dateInput' to click the input field correctly.

2. Step 2: Select date by visible text

   Use XPath to find the table cell with text '15' and click it to select the date.

3. Final Answer:

   driver.find_element(By.ID, 'dateInput').click()\ndriver.find_element(By.XPATH, "//td[text()='15']").click() -> Option D

4. Quick Check:

   Correct locators and click actions = driver.find_element(By.ID, 'dateInput').click() driver.find_element(By.XPATH, "//td[text()='15']").click() [OK]

Hint: Use By.ID for input, XPath for date cell text [OK]

Common Mistakes:

• Using CLASS_NAME instead of ID for input
• Trying to send_keys directly to date cell
• Using non-existent select() method
• Wrong locator for date cell

3. What will be the output of this Selenium Python code snippet if the date picker input initially is empty and user selects date '10'?

driver.find_element(By.ID, 'dateInput').click()
driver.find_element(By.XPATH, "//td[text()='10']").click()
selected_date = driver.find_element(By.ID, 'dateInput').get_attribute('value')
print(selected_date)

medium

A. 2024-10-10

B. 10

C. Empty string

D. None

Solution

1. Step 1: Click input and select date '10'

   The code clicks the input and selects the date cell with text '10'.

2. Step 2: Get input value attribute

   After selection, the input's value attribute usually holds the full date string, e.g., '2024-10-10'.

3. Final Answer:

   2024-10-10 -> Option A

4. Quick Check:

   Input value after date pick = full date string [OK]

Hint: Date pickers set full date string in input value [OK]

Common Mistakes:

• Expecting only day number as input value
• Assuming input remains empty
• Confusing None with empty string
• Not retrieving 'value' attribute

4. Given this Selenium Python code snippet, what is the main error preventing date selection?

date_input = driver.find_element(By.ID, 'dateInput')
date_input.click()
driver.find_element(By.XPATH, "//td[text()='25']").send_keys(Keys.ENTER)

medium

A. Using send_keys(Keys.ENTER) on a non-input element

B. Missing import for Keys

C. Wrong locator for date input

D. Not waiting for date picker to open

Solution

1. Step 1: Identify element receiving send_keys

   The code sends ENTER key to a table cell (td), which is not an input field.

2. Step 2: Understand send_keys usage

   send_keys works on input or editable elements, not on static table cells; clicking is needed instead.

3. Final Answer:

   Using send_keys(Keys.ENTER) on a non-input element -> Option A

4. Quick Check:

   send_keys on non-input element causes failure [OK]

Hint: Click date cell, don't send_keys to it [OK]

Common Mistakes:

• Trying to send_keys to non-input elements
• Forgetting to import Keys
• Assuming locator is wrong without checking
• Ignoring wait for picker visibility

5. You want to write a Selenium Python test that selects the date '1' of next month in a date picker. The date picker shows current month by default and has a 'Next' button with ID 'nextMonthBtn'. Which sequence correctly selects the date?

hard

A. driver.find_element(By.XPATH, "//td[text()='1']").click()
driver.find_element(By.ID, 'nextMonthBtn').click()

B. driver.find_element(By.ID, 'nextMonthBtn').click()
driver.find_element(By.XPATH, "//td[text()='1']").click()

C. driver.find_element(By.ID, 'dateInput').send_keys('1')

D. driver.find_element(By.ID, 'nextMonthBtn').send_keys(Keys.ENTER)
driver.find_element(By.XPATH, "//td[text()='1']").click()

Solution

1. Step 1: Click 'Next' button to go to next month

   Click the button with ID 'nextMonthBtn' to change the calendar to next month.

2. Step 2: Click date '1' in the updated calendar

   After calendar updates, click the table cell with text '1' to select the date.

3. Final Answer:

   driver.find_element(By.ID, 'nextMonthBtn').click()\ndriver.find_element(By.XPATH, "//td[text()='1']").click() -> Option B

4. Quick Check:

   Navigate then select date = driver.find_element(By.ID, 'nextMonthBtn').click() driver.find_element(By.XPATH, "//td[text()='1']").click() [OK]

Hint: Click next month first, then pick date [OK]

Common Mistakes:

• Selecting date before navigating to next month
• Using send_keys instead of click on buttons
• Ignoring calendar update after clicking next
• Wrong order of actions