Date picker interaction in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to find the date picker element by its ID.

Selenium Python

date_picker = driver.find_element(By.[1]("datePicker"))

Drag options to blanks, or click blank then click option'

ANAME

BCLASS_NAME

CTAG_NAME

DID

Attempts:

3 left

💡 Hint

Common Mistakes

Using CLASS_NAME or NAME instead of ID may not find the correct element.

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

The find_element method uses By.ID to locate the element with the specific ID "datePicker".

2fill in blank

medium

Complete the code to click the date picker element to open the calendar.

Selenium Python

date_picker = driver.find_element(By.ID, "datePicker")
date_picker.[1]()

Drag options to blanks, or click blank then click option'

Asend_keys

Bclick

Csubmit

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using send_keys instead of click to open the calendar.

Calling submit on a non-form element.

Clicking the date picker element opens the calendar popup.

3fill in blank

hard

Fix the error in the code to select a date by visible text from the dropdown.

Selenium Python

from selenium.webdriver.support.ui import Select

month_dropdown = Select(driver.find_element(By.ID, "month"))
month_dropdown.select_by_[1]("March")

Drag options to blanks, or click blank then click option'

Avisible_text

Btext

Cindex

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using select_by_value when the visible text is needed.

Using select_by_text which is not a valid method.

The correct method to select an option by its visible text is select_by_visible_text.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps each day element's text to its WebElement if the day is greater than 15.

Selenium Python

days = driver.find_elements(By.CLASS_NAME, "day")
day_dict = {day.text: day for day in days if int(day.[1]) [2] 15}

Drag options to blanks, or click blank then click option'

Atext

Bget_attribute

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_attribute without specifying an attribute.

Using less than operator instead of greater than.

We use day.text to get the day number as text, convert it to int, and check if it is greater than 15.

5fill in blank

hard

Fill all three blanks to create a test that asserts the selected date text matches the expected date.

Selenium Python

selected_date = driver.find_element(By.ID, [1]).text
expected_date = "2024-06-15"
assert selected_date [2] expected_date, "Date does not match"
print("Selected date is", [3])

Drag options to blanks, or click blank then click option'

A"selectedDate"

B==

Cselected_date

D"datePicker"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong element ID.

Using = instead of == in the assertion.

Printing the string literal instead of the variable.

The element ID is "selectedDate". We assert equality with ==. Finally, we print the variable selected_date.

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