title: Selecting an option from a drop down (multiple class calls involved) using Python and Selenium
body: <p>I have been struggling with this issue for several days, and tried various implementations having searched through stack overflow recomendations achieving various degrees of success. </p>
  
  <p>I am trying to select an option from a drop down box automatically using Python and Selenium. I've been successful with more simple site implementations, like Facebook when picking the day, year, month for DOB e.g.  </p>
  
  <pre><code>chosen_homepage = "https://www.facebook.com/"
  browser = webdriver.Chrome()
  browser.maximize_window()
  browser.get(chosen_homepage)
  
  the_month_id = "month"
  the_day_id = "day"
  the_year_id = "year"
  
  element5 = WebDriverWait(browser, 10).until(EC.presence_of_element_located((By.ID, the_month_id)))
  
  from selenium.webdriver.support.select import Select
  
  the_month = Select(browser.find_element_by_id(the_month_id))
  the_month.select_by_visible_text("Mar")
  
  the_day = Select(browser.find_element_by_id(the_day_id))
  the_day.select_by_visible_text("15")
  
  the_year = Select(browser.find_element_by_id(the_year_id))
  the_year.select_by_visible_text("1985")
  </code></pre>
  
  <p>However, this website is proving to be trickier. Im trying to login into <a href="https://online.citi.com/US/JRS/pands/detail.do?ID=AOProductSelection&amp;JFP_TOKEN=W7SFNZKR" rel="nofollow noreferrer">here</a></p>
  
  <p>To automatically select a Region from the drop down e.g. "AK" which is option 3 in this instance. I can select (click) the drop down box and have its value options displayed on the GUI using: </p>
  
  <pre><code># Successfully manages to click on the drop down and displays the drop down list
  region_option = "rpOptionCheck"
  wait_region = WebDriverWait(browser, 5).until(EC.element_to_be_clickable((By.ID, region_option)))
  menu_accounts = browser.find_element_by_id(region_option)
  menu_accounts.click()
  </code></pre>
  
  <p>This is where it gets trickier, Ive tried several alternative approaches to selecting an option inside of this list e.g. using sendkeys() using values and even down arrow action (to step through the list) without success. </p>
  
  <p>So I tried to break the issue down some more. It seems there are several nested object calls, Ive tried to list the main components I can see as being triggered when picked from the dropdown list i.e. <strong>reOptionCheck => jfpw-select=wrapper => jfpw-select-wrapper jfpw-select-list-container</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="rpOptionCheck"&gt;
  
  &lt;div class="jfpw-select-wrapper"&gt;
  
  &lt;div class="jfpw-select-wrapper jfpw-select-list-container"
  &lt;ul class="ui-selectmenu-menu ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom jfpw-select ui-selectmenu-open" aria-hidden="false" role="listbox" aria-labelledby="RegionalPricingLocation-snapshot-button" id="RegionalPricingLocation-snapshot-menu" aria-activedescendant="RegionalPricingLocation-snapshot-menu-option-4" tabindex="0" style="width: 258px; max-height: 160px; float: left; overflow: hidden; outline: none; z-index: 1002; top: 0px; left: 0px; position: relative; border-style: none;"&gt;&lt;li role="option" tabindex="-1" aria-selected="false" id="RegionalPricingLocation-snapshot-menu-option-0" class=""&gt;&lt;span class="ui-selectmenu-item-header"&gt;Select a State&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="false" id="RegionalPricingLocation-snapshot-menu-option-1" class=""&gt;&lt;span class="ui-selectmenu-item-header"&gt;AA&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="false" id="RegionalPricingLocation-snapshot-menu-option-2" class=""&gt;&lt;span class="ui-selectmenu-item-header"&gt;AE&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="false" id="RegionalPricingLocation-snapshot-menu-option-3" class=""&gt;&lt;span class="ui-selectmenu-item-header"&gt;AK&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="true" id="RegionalPricingLocation-snapshot-menu-option-4" class="ui-selectmenu-item-selected"&gt;&lt;span class="ui-selectmenu-item-header"&gt;AL&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="false" id="RegionalPricingLocation-snapshot-menu-option-5"&gt;&lt;span class="ui-selectmenu-item-header"&gt;AP&lt;/span&gt;&lt;/li&gt;&lt;li role="option" tabindex="-1" aria-selected="false" 
  ...</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've managed to be able to cycle through the elements writing this code </p>
  
  <pre><code>region_option3 = "RegionalPricingLocation-snapshot-menu"        # Called in last component listed above
  html_list = browser.find_element_by_id(region_option3)
  items = html_list.find_elements_by_tag_name("li")               # Collects all List Elements
  # items.get(1).click()
  
  option_no3 = "RegionalPricingLocation-snapshot-menu-option-3"    # As a test look for 3rd item "AK"
  for item in items:
      print(item.get_attribute("value"), item.get_attribute("text"), item.get_attribute("id"))
      if item.get_attribute("id") == option_no3:
          print("Found 3rd Item - Option 3")
          break   
  </code></pre>
  
  <p>The output to this piece of code is: 
  <a href="https://i.stack.imgur.com/Q4Epd.png" rel="nofollow noreferrer">Output Results</a></p>
  
  <p>As you can see the output does not match the real world values seen in the list, more like positional indicators e.g. "RegionalPricingLocation-snapshot-menu-option-3" I suspect I am coming in at this the from the wrong level, but have tried to set the focus and select at the higher object levels in various ways all which seem to throw exceptions. I can see that <strong>aria-selected</strong>="true" for the option selected, in this instance its for the third list item (<strong>RegionalPricingLocation-snapshot-menu-option-3</strong>) but not sure how to set it as it looks like its an input that is passed. </p>
  
  <p>Going back to the top level (<strong>rpOptionCheck</strong>) and looking at the generated HTML, I can see the list values inside of a Select Option as seen on the screen, which is what let me to believe I could use the same approach as the Facebook example above using the Select() approach. </p>
  
  <p>I'm tying myself into knots at the moment, not quite sure how to approach this. I am new to Python and Selenium and this will be my first posting. Hopefully its in the right format. More than happy to amend as required to fit the standards. </p>
  
  <p>Thank you in advance for any ideas or pointers towards articles that could help shed light onto what I am missing / where I am going wrong. </p>
  
  <p><strong>Update 1:</strong> 
  I found this topic which looks to be similar in issue re. class calls with non standard Select implementations<br>
  <a href="https://stackoverflow.com/questions/27772350/selenium-selecting-an-element-inside-of-a-span">Selenium, Selecting an element inside of a &lt;span&gt;</a> </p>
  
  <p>So tried this </p>
  
  <pre><code># &lt;div class="jfpw-select-wrapper jfpw-select-list-container" Note: sits above ul class 
  # &lt;ul class="ui-selectmenu ui-widget ui-state-default jfpw-select ui-selectmenu-dropdown ui-corner-all
  jfpw_select = "jfpw-select"
  find_call = browser.find_element_by_class_name(jfpw_select)
  # find_call.send_keys('AK')
  find_call.send_keys(Keys.DOWN)
  #Error Message "selenium.common.exceptions.ElementNotVisibleException: Message: element not visible"
  </code></pre>
  
  <p>This is a bit different to the google example as it seems like there are two class calls from what I can work out (I think) ... </p>