Selenium with Ruby: Script not finding options in a drop-down

Question

This is my first post, so if I have missed any info that should be included, please let me know. I am self-learning selenium/ruby automation in my spare time with only a little programming background, so I'm still very new to this.

Issue:

I am currently attempting to implement a script that tests new account registration scenarios and have come across an issue where the script does not find the options in a drop-down to select a different country. I've been scouring the internet for the last 4 days trying to find a fix, but everything I've tried either returns an exception or allows the script to run, but doesn't select a new option.

Some Notes:

• The drop-down contains 251 country options and the one I need requires scrolling to find which could be the issue as I have gotten a few exceptions while attempting a fix which mention the element not being visible.
• The page uses bootstrap which, from what I understand, could be causing issues with the script.

HTML Code:

Here is a link of the full div code: http://codepad.org/Vm0EwMLp

Here is a shortened version:

<div class="col-xs-8 col-md-8">
 <select id="couCode" name="couCode" class="form-control border" autocomplete="country-name" x-autocompletetype="country" style="display:none;">
    <option value="AX">ALAND ISLANDS</option>
    <option value="AL">ALBANIA</option>
    <option value="DZ">ALGERIA</option>
    <option value="AS">AMERICAN SAMOA</option>
    <option value="AD">ANDORRA</option>
    <option value="GB">UNITED KINGDOM</option>
    <option value="US" selected="selected">UNITED STATES</option>
    <option value="UM">UNITED STATES MINOR OUT.</option>
    <option value="UY">URUGUAY</option>
    <option value="UZ">UZBEKISTAN</option>
    <option value="VU">VANUATU</option>
    <option value="VA">VATICAN CITY</option>
</select>
 <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-top" tabindex="0" id="couCode-button" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="couCode-menu" aria-haspopup="true" style="width: 276.922px;" aria-activedescendant="ui-id-488" aria-labelledby="ui-id-488" aria-disabled="false">
    <span class="ui-icon ui-icon-triangle-1-s">
    </span>
    <span class="ui-selectmenu-text">UNITED STATES</span>
    </span>
 <span class="form-control-feedback">
    <i class="material-icons priority_high"></i>
    <i class="material-icons done"></i>
 </span>
 <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-top" tabindex="0" id="couCode-button" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="couCode-menu" aria-haspopup="true" style="width: 276.922px;" aria-activedescendant="ui-id-487" aria-labelledby="ui-id-488" aria-disabled="false">
    <span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">
        UNITED STATES
    </span>
 </span>

Selenium/Ruby Snippets

# This resulted in Exception 1
open_menu = driver.find_element(:id, "couCode-button").click
select_list = driver.find_element(:id, "couCode")
options = select_list.find_elements(:tag_name, "option")
option = options.find_element(:value, "GB").click

# Also tried this, which resulted in Exception 2
# select_list = driver.find_element(:text, "UNITED KINGDOM").click

Also tried:

# This resulted in Exception 3
open_menu = driver.find_element(:id, "couCode-button").click
options = driver.find_element(:id, "couCode").find_elements(:tag_name, "option")

options.each { |option| option.click if (option.value == 'GB')}

Tried this, as well, which didn't throw any exceptions, but also didn't select anything in the drop-down:

cus_country = driver.find_element(:id, 'couCode-button')
cus_country.click
countries = cus_country.find_elements(:class, 'ui-selectmenu-text')
countries.each {|country| country.click if country.text == 'UNITED KINGDOM'}

I tried the following to see if the script was actually finding anything. The output just came back as a bunch of commas, no text for each of the tags, but also no exceptions came up when running this.

begin
  dropdown = driver.find_element(:id, "couCode-button").click
  select_list = driver.find_element(:id, "couCode")
  options = driver.find_elements(:tag_name, "option")
  options.each { |a|
    puts a.text + ', '
  }
end

Exceptions:

1

C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.13.0/lib/selenium/webdriver/common/search_context.rb:58:in `find_element': cannot find element by :text (ArgumentError)

2

C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.13.0/lib/selenium/webdriver/common/search_context.rb:58:in `find_element': cannot find element by :value (ArgumentError)

3

tester.rb:48:in `block in <main>': undefined method `value' for #<Selenium::WebDriver::Element:0x000000000384da70> (NoMethodError)
tester.rb:48:in `each'
tester.rb:48:in `<main>'

Thanks in advance for any help!

Answer 1

Add an explicit wait after you click your menu and then once the drop-down element is present refer below steps:

https://selenium.dev/docs/site/en/support_packages/working_with_select_elements/

Please refer to the above document:

You can use the select class in ruby to achieve this:

select_element = driver.find_element(id: 'couCode')
select_object = Select(select_element)

To select using text:

select_object.select_by(:text, 'URUGUAY')

Using Value:

select_object.select_by(:value, 'UY')

Using index:

select_object.select_by(:index, 1)

Issue with your code:

This also doesn't work, throws exception

options.find_element(:value, "GB").click

There is no element locator called "value" that is supported by find_elemnet method. So you are getting argument error saying :value is wrong.

Below are the only supported locators

   {
      :class             => 'ClassName',
      :class_name        => 'ClassName',
      :css               => 'CssSelector',
      :id                => 'Id',
      :link              => 'LinkText',
      :link_text         => 'LinkText',
      :name              => 'Name',
      :partial_link_text => 'PartialLinkText',
      :tag_name          => 'TagName',
      :xpath             => 'Xpath',
    }

THis throws error :

You could make below code work by changing:

options.each { |option| option.click if (option.value == 'GB')}

To

options.each { |option| option.click if (option.attribute("value")== 'GB')}

Because the option is just a web element and does not contain any method called value. So it throws an error if you call option.value.

This does not work and does throw error also,

country.click if country.text == 'UNITED KINGDOM'} 

Because it's not an element inside the drop-down, but won't throw any error as syntax is correct.

Prints just comma:

Here,

 options.each { |a|
    puts a.text + ', '
  }

instead of puts a.text + ', '. Try, puts a.attribute("textContent") +','