Skip to main content

_ruby

TL;DR - Show Me The Code

5-select-from-a-dropdown/code/ruby/dropdown.rb
require 'selenium-webdriver'
require 'rspec/expectations'
include RSpec::Matchers

def setup
@driver = Selenium::WebDriver.for(:firefox)
end

def teardown
@driver.quit
end

def run
setup
yield
teardown
end

run do
@driver.get 'https://the-internet.herokuapp.com/dropdown'

dropdown_list = @driver.find_element(id: 'dropdown')
options = dropdown_list.find_elements(tag_name: 'option')
options.each { |option| option.click if option.text == 'Option 1' }

selected_option = options.map { |option| option.text if option.selected? }.join
expect(selected_option).to eql 'Option 1'
end

run do
@driver.get 'https://the-internet.herokuapp.com/dropdown'

dropdown = @driver.find_element(id: 'dropdown')
select_list = Selenium::WebDriver::Support::Select.new(dropdown)
select_list.select_by(:text, 'Option 1')

selected_option = select_list.selected_options[0].text
expect(selected_option).to eql 'Option 1'
end

Code Walkthrough

Importing Libraries, Setup and Teardown

We'll first need to pull in our requisite libraries (selenium-webdriver to drive the browser, and rspec/expecations & RSpec::Matchers to perform our assertions) and wire up some simple setup, teardown, and run methods.

Example 1

After visiting the example application we find the dropdown list by its ID and store it in a variable. We then find each clickable element in the dropdown list (e.g., each option) with find_elements.

Grabbing all the options returns a collection that we iterate over and when the text matches what we want it will click on it.

We finish the test by performing a check to see that our selection was made correctly. This is done by reiterating over the dropdown options collection one more time. This time we're getting the text of the item that was selected, storing it in a variable, and making an assertion against it.

While this works, there is a more accessible way to do this.

Example 2

Similar to the first example, we are finding the dropdown list by its ID. Instead of iterating over its option elements and clicking based on a conditional check, we are leveraging a built-in helper function of Selenium, Select, and it's select_by method to choose the item we want.

We then ask the select_list what option was selected by using the selected_options method. This returns an array of Selenium Elements (which in this case is an array of just one element). So we need to reference the first element by it's index (e.g., [0]), ask for it's text, and store it in a variable (e.g., selected_option).

Then we perform our assertion against this variable (just like in the previous example).

In addition to selecting by text, you can also select by value.

    select_list.select_by(:value, '1')

Executing the Test

Before executing the test, we need to make sure the required dependencies are declared on the Gemfile file.

Toggle to see the Gemfile file.
5-select-from-a-dropdown/code/ruby/Gemfile
source 'https://rubygems.org'

gem 'rspec', '~> 3.10'
gem 'selenium-webdriver', '~> 4.26.0'

Finally, we can run the test by executing ruby dropdown.rb from the command-line.