Date picker strategies in Selenium Java - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Selenium code selecting a date

What will be the output of this Selenium Java code snippet when selecting a date from a date picker widget?

Selenium Java

WebElement dateInput = driver.findElement(By.id("datePicker"));
dateInput.click();
WebElement dateToSelect = driver.findElement(By.xpath("//td[@data-date='2024-06-15']"));
dateToSelect.click();
String selectedDate = dateInput.getAttribute("value");
System.out.println(selectedDate);

A 2024-06-15

B null

C 2024/06/15

D Throws NoSuchElementException

💡 Hint

Check how the date is stored in the input field after selection.

The code clicks the date input, then clicks the date cell with data-date attribute '2024-06-15'. The input's value attribute updates to '2024-06-15', so printing it outputs that string.

❓ assertion

intermediate

Correct assertion to verify date selection

Which assertion correctly verifies that the date '2024-12-25' is selected in the date picker input field?

Selenium Java

WebElement dateInput = driver.findElement(By.id("datePicker"));
String selectedDate = dateInput.getAttribute("value");

A assertEquals(selectedDate, "2024-12-25");

B assertTrue(selectedDate.contains("12-25-2024"));

C assertNotNull(selectedDate);

D assertFalse(selectedDate.isEmpty());

💡 Hint

Check the exact expected date format in the input value.

The input's value attribute stores the date as 'YYYY-MM-DD'. The assertion must check exact equality to confirm the correct date is selected.

❓ locator

advanced

Best locator for dynamic date picker day cell

Given a date picker where day cells have dynamic classes but a stable data-date attribute in 'YYYY-MM-DD' format, which locator is best to select the day '2024-11-05'?

A By.cssSelector("td.day[data-date='2024-11-05']")

B By.className("day-2024-11-05")

C By.id("day-2024-11-05")

D By.xpath("//td[@data-date='2024-11-05']")

💡 Hint

Focus on stable attributes that do not change dynamically.

The data-date attribute is stable and unique for each day cell. Using XPath to select by this attribute is reliable. Class names and IDs are dynamic or not guaranteed.

🔧 Debug

advanced

Debugging date picker selection failure

A test script fails to select a date in a date picker. The code is: WebElement dateInput = driver.findElement(By.id("datePicker")); dateInput.sendKeys("2024-07-20"); Why might this fail to select the date properly?

A The element with id 'datePicker' is not interactable.

B The date format '2024-07-20' is invalid for sendKeys.

C The date picker requires clicking the calendar UI, sendKeys does not trigger selection events.

D sendKeys is deprecated for date inputs.

💡 Hint

Think about how date pickers update their internal state.

Many date pickers require user interaction with the calendar UI to update internal state and trigger events. sendKeys may set the input value but not trigger these events, causing selection failure.

❓ framework

expert

Designing a reusable date picker selection method

You want to create a reusable Selenium Java method to select any date in a date picker widget that uses a calendar UI with data-date attributes. Which method signature and approach is best?

A

public void selectDate(String date) {
  driver.findElement(By.id("datePicker")).sendKeys(date);
}

B

public void selectDate(LocalDate date) {
  driver.findElement(By.id("datePicker")).click();
  String dateStr = date.toString();
  driver.findElement(By.xpath("//td[@data-date='" + dateStr + "']")).click();
}

C

public void selectDate(int year, int month, int day) {
  driver.findElement(By.id("datePicker")).click();
  driver.findElement(By.xpath("//td[@data-year='" + year + "' and @data-month='" + month + "' and text()='" + day + "']")).click();
}

D

public void selectDate(String date) {
  driver.findElement(By.cssSelector("input.date-picker")).clear();
  driver.findElement(By.cssSelector("input.date-picker")).sendKeys(date);
}

💡 Hint

Consider maintainability and triggering UI events properly.

Option B uses a LocalDate parameter for type safety, clicks the input to open the calendar, then clicks the day cell by data-date attribute, ensuring UI events trigger properly. Other options rely on sendKeys or less stable locators.

Practice

1. What is the main reason to use a date picker in a web form during testing?

easy

A. To speed up page loading time

B. To allow users to select a date easily and avoid manual input errors

C. To change the website's theme colors

D. To validate user passwords

Solution

1. Step 1: Understand the purpose of a date picker

   A date picker helps users select dates without typing, reducing errors.

2. Step 2: Identify the testing goal

   Testing ensures the date picker works correctly and inputs valid dates.

3. Final Answer:

   To allow users to select a date easily and avoid manual input errors -> Option B

4. Quick Check:

   Date picker purpose = Easy date selection [OK]

Hint: Date pickers help avoid typing mistakes [OK]

Common Mistakes:

• Confusing date picker with unrelated UI elements
• Thinking date picker changes page speed
• Assuming date picker validates passwords

2. Which Selenium Java code snippet correctly clicks a date picker input field using its id 'dateInput'?

easy

A. driver.findElement(By.tagName("dateInput")).click();

B. driver.findElement(By.name("dateInput")).click();

C. driver.findElement(By.className("dateInput")).click();

D. driver.findElement(By.id("dateInput")).click();

Solution

1. Step 1: Identify the locator strategy for id

   Use By.id("dateInput") to find element by its id attribute.

2. Step 2: Use click() method on the found element

   Calling click() simulates user clicking the date picker input.

3. Final Answer:

   driver.findElement(By.id("dateInput")).click(); -> Option D

4. Quick Check:

   Use By.id for id attribute [OK]

Hint: Use By.id for id locators in Selenium [OK]

Common Mistakes:

• Using By.name when id is given
• Using By.className incorrectly
• Using By.tagName with id value

3. Given this Selenium Java code snippet, what will be the output if the date picker input's value is set correctly?

WebElement dateInput = driver.findElement(By.id("dateInput"));
dateInput.click();
dateInput.sendKeys("2024-07-15");
String selectedDate = dateInput.getAttribute("value");
System.out.println(selectedDate);

medium

A. 2024/07/15

B. null

C. 2024-07-15

D. Date picker not found

Solution

1. Step 1: Understand sendKeys sets input value

   sendKeys("2024-07-15") inputs the date string into the field.

2. Step 2: getAttribute("value") retrieves the current input value

   This returns the exact string typed, which is "2024-07-15".

3. Final Answer:

   2024-07-15 -> Option C

4. Quick Check:

   sendKeys sets value, getAttribute reads it [OK]

Hint: sendKeys sets input, getAttribute("value") reads it [OK]

Common Mistakes:

• Expecting formatted date different from input
• Assuming getText() returns input value
• Confusing null with empty string

4. You wrote this Selenium Java code to select a date but the test fails with NoSuchElementException:

driver.findElement(By.xpath("//input[@id='dateInput']")).sendKeys("2024-12-01");

What is the most likely cause and fix?

medium

A. The date picker input is inside an iframe; switch to iframe before accessing it

B. The xpath syntax is incorrect; use By.id instead

C. sendKeys cannot be used on input fields

D. The date format "2024-12-01" is invalid

Solution

1. Step 1: Understand NoSuchElementException means element not found

   This often happens if element is inside an iframe or not visible yet.

2. Step 2: Check if date picker is inside iframe and switch context

   Switching to iframe with driver.switchTo().frame(...) allows access to elements inside it.

3. Final Answer:

   The date picker input is inside an iframe; switch to iframe before accessing it -> Option A

4. Quick Check:

   Switch to iframe to find elements inside [OK]

Hint: Check if element is inside iframe before locating [OK]

Common Mistakes:

• Assuming xpath is always wrong
• Thinking sendKeys can't be used on inputs
• Blaming date format for element not found

5. You want to select a date 10 days from today using Selenium Java on a date picker that only allows clicking days (no typing). Which strategy is best?

hard

A. Calculate the target date, open the date picker, then click the day button matching that date

B. Use sendKeys to type the date string directly into the input field

C. Reload the page and hope the default date is correct

D. Use JavaScript to set the input value without clicking

Solution

1. Step 1: Calculate the date 10 days from today in Java

   Use LocalDate.now().plusDays(10) to get the target date.

2. Step 2: Open the date picker and click the day matching the target date

   Locate the day button by text or attribute and click it to select.

3. Final Answer:

   Calculate the target date, open the date picker, then click the day button matching that date -> Option A

4. Quick Check:

   Click matching day for pickers without typing [OK]

Hint: Click the correct day button after calculating date [OK]

Common Mistakes:

• Trying to type date when input disallows it
• Ignoring date calculation and clicking wrong day
• Using JavaScript to set value without UI interaction