Select a date range in a DatePicker with Selenium WebDriver

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

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: https://demo.improvely.com/reports/webshop/ads

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…