Transcripted Summary
In this video I'll demonstrate an example of automating an autocomplete field.
From the home page of the test application, I will select the item "Autocomplete" and this will redirect me to a page where I see different address fields.
How this page works is that I will start to enter an address into the address field and the Google Places API will return addresses based on what I'm typing. Once I select an address, this will auto populate the rest of the fields on the page.
So, let's go ahead and start writing a test to automate the auto complete functionality. Going back over to Atom, I will select to create a new test file by pressing “command N” and then I'm going to save this file by pressing “command S” and I'm going to call this test “autocomplete_test.rb”.
# Autocomplete Test Example Code
require "selenium-webdriver"
driver = Selenium::WebDriver.for :chrome
driver.navigate.to "https://formy-project.herokuapp.com/autocomplete"
autocomplete = driver.find_element(id: 'autocomplete')
autocomplete.send_keys('1555 park blvd, palo alto, ca, usa')
# implicit
driver.manage.timeouts.implicit_wait = 5
# explicit
wait = selenium::webdriver::wait.new(timeout: 5)
wait.until { driver.find_element(class: 'pac-item').displayed? }
autocomplete_result = driver.find_element(class: 'pac-item')
autocomplete_result.click
Let’s walk through this test.
I'm going to start out this test by requiring the Selenium WebDriver gem
require "selenium-webdriver"Then on line 3, I will create a new instance of the driver by specifying
driver = Selenium::WebDriver.for :chromeAnd then I want to tell the driver to navigate to the auto complete page and then I will go and copy this URL and paste it in here
driver.navigate.to "https://formy-project.herokuapp.com/autocomplete"Next, what I want to do is to start automating the first field. So, I will define a new variable called “autocomplete”, which I will tell the driver to find this element by a particular locator type. So, once I'm back at the test application, I will right click to inspect that field and I see that it has an ID of autocomplete. Going back to the test, I'm going to type in parentheses ID and paste that autocomplete ID name
autocomplete = driver.find_element(id: 'autocomplete')Next, what I want to do is to send some keys to this autocomplete address form. So, let's go ahead and refresh the page and I'm going to start typing in some address in here. I've already played around with this a little bit, so I have an idea of a specific address that I want to use, which is 1555 Park Boulevard in Palo Alto, California. So now with this address typed in, I'm going to go ahead and copy that and then put it in my test. So, I want to send keys to that particular field and go ahead and paste that address in there
autocomplete.send_keys('1555 park blvd, palo alto, ca, usa')
And now what I need to do is to select this autocomplete result that's shown down below to populate the rest of the fields on the page.
It's a little difficult because I can't exactly inspect this element. So, we'll have to do some manual searching here. What I'm going to do is to scroll down in my inspector and highlight over this class, “pac-container pac-logo hdpi”.
And I see that this in return highlights the autocomplete results. So, what I can do next, is choose to expand that. And I see that down here inside of this “pac-container”, there was only one “pac-item”. And this is accurate because when I typed in this address, there was only one result.
So, what I can do now is to copy that “pac-item” class and go back over to my test.
And what I want to do now is to define a new variable and I'm going to specify the class in the situation since that's the only thing there was for this element and then paste in the pack item
autocomplete_result = driver.find_element(class: 'pac-item')And then what I can do is simply click on that auto complete result and populate the rest of the field
autocomplete_result.click
One thing that you might notice is that if you were running this test as is, it might actually fail. And that is because once an address is entered, it might take a moment for results to appear below. So, what I'll need to do in that situation is wait. Waits will wait for a specific amount of time, or wait for a specific element to appear, before moving on.
There are a couple of different types of waits. First, I want to talk about this example of an implicit wait.
So, what I want to do here is to find a new implicit wait. So, after sending the keys to search for an address in line 7, I can then wait before selecting a result. In order to do that, what I would need to do is to tell the driver to manage timeouts. Five seconds should be more than enough time in this case to wait before moving on to the next step to find the auto complete result item
driver.manage.timeouts.implicit_wait = 5There's also another concept of explicit waits. Explicit waits will wait for a specific element to appear or some other condition to happen. What I can do to define an explicit wait is to find a new variable called wait and tell and then I need to specify specific timeout, which we can just say five seconds again
wait = selenium::webdriver::wait.new(timeout: 5)And then what I can do is to use that wait to wait until a specific condition or action happens. So, inside these curly brackets, and then we're going to actually wait until this item is displayed
wait.until { driver.find_element(class: 'pac-item').displayed? }
So now what will happen is with this type of wait, we will poll to determine if this element with the class of “pac-item” is displayed. And so as soon as the item is displayed, the tests will move on to find the autocomplete results item.
Explicit waits are often the better option because they will wait more intelligently for a condition to happen rather than waiting more time than they possibly need to.
That's a quick example of implicit and explicit waits. I'm going to go ahead and save this example, and with that, this autocomplete test is complete.
Resources
Quiz
The quiz for Chapter 3 can be found at the end of Section 3.5
