Chapter 4.2 - Interacting with Components: Datepickers

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”.

# Datepicker Test Example Code

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
```
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

driver.navigate.to "https://formy-project.herokuapp.com/datepicker"

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.
```
datefield.send_keys('03/04/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
```
datefield.send_keys :return
```

And just like that, this example is complete. So, I'll save this test now and move on to the next example.

Resources

Quiz

The quiz for Chapter 3 can be found at the end of Section 4.3

Add AI to your existing test scripts in minutes!