Transcripted Summary
In this video, I'll demonstrate how to automate a typical dropdown menu.
On this Dropdown page in the test application, there is a single button on the page called “Dropdown button”.
Clicking this button exposes a dropdown menu. It has a list of all the components used in the test application. Clicking on a component in the dropdown list takes me to that component's page in the test application.
Let's write a test to automate selecting an option from the dropdown menu.
Going over to Atom, I'll start by creating a new test, which I'll name “dropdown_menu_test.rb”.
# Dropdown Menu Test Example Code
require "selenium-webdriver"
driver = Selenium::WebDriver.for :chrome
driver.navigate.to "https://formy-project.herokuapp.com/dropdown"
dropdown_menu = driver.find_element(id: 'dropdownMenuButton')
dropdown_menu.click
autocomplete_item = driver.find_element(id: 'autocomplete')
autocomplete_item.click
I'll start filling out the contents of this test class.
require "selenium-webdriver"
driver = Selenium::WebDriver.for :chrome
driver.navigate.to "https://formy-project.herokuapp.com/dropdown"
Now what I want to do is to create a new variable called “dropdown_menu” and tell my driver to find that element using a particular locator strategy. I'm going to hop back over to the test application and inspect this dropdown button. Looking at the HTML available, I'll go ahead and just select the ID and copy that. Then I can specify ID and go ahead and paste that ID value.
dropdown_menu = driver.find_element(id: 'dropdownMenuButton')
Then on line seven, I'll want to click on the dropdown menu
dropdown_menu.click
I'll go back over to the test now and show what it looks like when I click on this button with an ID of dropdown menu. This will expose all the options of the components of this test application.
I'm just going to go ahead and inspect that first option in the list. And I see that it has an ID of “autocomplete”. So, I'll go ahead and copy this to my clipboard.
Going back over the tests, I will skip a line and on line nine, I will define this autocomplete_item and tell the driver to find this element with this ID of “autocomplete”
autocomplete_item = driver.find_element(id: 'autocomplete')
And then what I can do is click on that “autocomplete_item”. Clicking on this “autocomplete_item” will redirect me to that component's page.
autocomplete_item.click
So now this test is complete, and I have a simple example for how to automate a dropdown menu.
I'll go ahead and save and then move onto the next example.
