Now I'm going to demonstrate how to automate a Datepicker in a Web Driver test.
For this video, I'll be using the test application at the Datepicker page.
This example utilizes a pretty typical Datepicker. When clicking on the date field, it opens up a Datepicker with today's date highlighted. When I hover over other dates in the calendar, those dates are highlighted as well. When I selected the Datepicker closes and the field is populated with the selected date.
Now I'm going to start writing a test to automate this component.
Going over to Atom, I'll start by creating a new class, and saving that, and giving the class a name of “datepicker test.rb”.
require "selenium-webdriver" driver = Selenium::WebDriver.for :chrome driver.navigate.to "https://formy-project.herokuapp.com/datepicker" datefield = driver.find_element(id: 'datepicker') datefield.send_keys('03/04/2022') datefield.send_keys :return
I'm going to start filling in the details.
At the top, I require Selenium Webdriver
Then I went to create a new instance of the driver
driver = Selenium::WebDriver.for :chrome
And navigate that driver to the Datepicker page
Now, I want to start filling in the details for my test.
I'm going to start by defining a new variable called “datefield” and tell the driver to find this element using some locator strategy. So, now I'll go back to the test application and inspect this date field. And I see that it has an ID of
datepicker, so I'll go ahead and choose that. Back at line six of the test, I can specify to find the date field ID by looking for this datepicker
datefield = driver.find_element(id: 'datepicker')
Now with Datepickers, there are a couple different ways that we could automate this field.
We could open up the Datepicker and click on a specific filter date. You can also just go ahead and send these directly to this field here. So, say for example, I just go ahead and copy a date, and then I can just directly pace that new date into this field and it'll populate that field just fine.
On line 7, what I want to do is send keys directly to the date field variable, so I can send the keys of any random date. I'm just going to pick some random date in the future. Let's say March 4th, 2022.
After that, I need to actually close the Datepicker. Just by sending keys to the date field is not actually close the Datepicker, because I'm not actually selecting a date from the calendar. What I'll need to do is press enter on the field to close the calendar. To do that, I can simply send the keys to return.
On line 8, what I'll do is enter the return key on this datefield
And just like that, this example is complete. So, I'll save this test now and move on to the next example.
The quiz for Chapter 3 can be found at the end of Section 4.3