Select a date in a DatePicker with Selenium WebDriver

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

A repost of my daughter’s article with permission. I added a few notes. This is also included in my “How to in Selenium WebDriver” series.

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, using TestWise IDE.

For some date-pickers, we may be able to set the selected date (the hidden text field) directly, or use JavaScript. In this exercise, I will drive the data-picker UI (as a user would) using Selenium.

· 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 a 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
# even better
3.days.ago

Also, formatting a date.

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

Tasks