Select a date range in a DatePicker with Selenium WebDriver

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

Courtney Zhan


Date pickers are common on modern websites. There are two types of date selections: a specific date or a date range. I have written “Select a date in a DatePicker with Selenium WebDriver” for one date, this article covers the range.

Test page URL:

Test Case 1: Select a pre-defined date range

Some datepickers come with a pre-defined date range such as “Last 30 days” or “This Month”.

For this test, select one of these date ranges and verify the dates set are correct.

For the date verification, we need to calculate dynamic dates (relative to today’s date). Thanks to the brilliant ActiveSupport library in Ruby, it is very easy to do.

it "Select a pre-defined Last 7 Days" do
driver.find_element(:id, "daterange").click
driver.find_element(:xpath, "//div[@class='ranges']//li[@data-range-key='Last 7 Days']").click
# verify
start_date = => -7).tomorrow
today_date =
expected = "#{start_date.strftime("%B %-d, %Y")} - #{today_date.strftime("%B %-d, %Y")}"
expect(driver.find_element(:id, "daterange").text).to eq(expected)

Test Case 2: Select a custom date range in the same month

Selecting a custom date range means choosing specific start and end dates.

First, we determine the two dates first_date and second_date, which shall be dynamic (i.e. relative to today’s date). For this example, I’ll choose from 5 days ago to 5 days in the future.

Next, find the elements for those dates, using XPath //td[text()="..." , and click them in order.