Select a date in a DatePicker with Selenium WebDriver

How to use Selenium WebDriver to select a date in a date picker

Many modern websites use date pickers to select dates. This article will show you how to use Selenium WebDriver to select a date via a date picker in an automated test script. I will script using raw Selenium WebDriver in RSpec. 

· Test Case 1: Select tomorrow’s date (Simple)
  ∘ Test Design
  ∘ Prepare
  ∘ Tasks
· Test Case 2: Select tomorrow’s date (edge cases)
  ∘ Complete Test Script
· Zhimin’s Review

Test Case 1: Select tomorrow’s date (Simple)

Test Page URL: https://fengyuanchen.github.io/datepicker/

Test Design

Following typical test design, do it manually first to come up with a test design. 

1. Click the text control to show the date picker

2. Select tomorrow’s date 

3. Close the date picker, if not auto-closed after the selection

4. Verify the selected date

Then implement the above in an automated test script.

Prepare 

From experience, picking a date involves date calculation, such as tomorrow and next week’s date. ActiveSupport (part of Rails) is very helpful on that.

require 'active_support/all'
Date.today
Date.today.advance(:days => 1)  # tomorrow
Date.today.next_week

Also, formatting a date.

Date.today.strftime("%m/%d/%Y") #=> 12/17/2022 if today is 2022-12-17

Tasks 

1. Populate the date picker.

Right-click the “Pick a date” text box and inspect (in Chrome). 

To get the date-picker to open up, click on the text-field.

driver.find_element(:name, "date").click

2. Select tomorrow’s date

Get the target date’s day (e.g. 18 of 2022–12–18), and click the “18” in the date picker.

Inspecting the date-picker, there is a days view (in a ul). Inside that ul, each day corresponds to a date on the datepicker.

To select a date, just select the item with the date text matching your target date’s day.

# calculate the day tomorrow
date_tomorrow = Date.today.advance(:days => 1)
day_tomorrow = date_tomorrow.strftime("%d")

# click the day on the date picker
driver.find_element(:xpath, "//ul[@data-view='days']/li[text()=#{day_tomorrow}]").click

3. Close the date picker

Click anywhere else on the page (outside the date-picker) will close it. The safest place to click is just the body element:

driver.find_element(:tag_name, "body").click

Zhimin: The close the popup is click elsewhere, not another actionable control of course. Courteny’s original version was driver.find_element(:tag_name, "h1") , it worked, but using body tag is better.

4. Verify the selected date

This is straightforward. Just assert that the value in the date-field matches the date you selected.

We can use strftime to format it in the same way for comparison (mm/dd/yyyy):

result = driver.find_element(:name, "date")["value"]
expect(result).to eq(date_tomorrow.strftime("%m/%d/%Y"))

Test Case 2: Select tomorrow’s date (edge cases)

If today is the last day of the month, then tomorrow’s date will fall on the next month.