title: Unable to click option in dropdown list selenium
body: <p>I tried using the Select module, but when I do the Element is either not interactable or it is &quot;not visible&quot;. Here are the relevant codes.</p>
  <p>HTML</p>
  <pre><code>    &lt; head &gt;
      &lt; script &gt;
  
          function onChangeCardType() {
              var value = $('#card_type').val();
              $('#img_' + value).siblings().hide();
              $('#img_' + value).show();
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;thead&gt;
  
              &lt;tr&gt;
                  &lt;th align=&quot;left&quot;&gt;Card type&lt;/th&gt;
                  &lt;td colspan=&quot;2&quot; style=&quot;font-size:12px;&quot;&gt;
                      &lt;select name=&quot;requestDTO.vpc_card&quot; id=&quot;card_type&quot; onchange=&quot;onChangeCardType()&quot;
                              class=&quot;select required&quot;
                              style=&quot;width: 342px; font-size:12px;&quot;&gt;
                          &lt;option value=&quot;Amex&quot; &gt;American Express&lt;/option&gt;
                          &lt;option value=&quot;Mastercard&quot; &gt;MasterCard&lt;/option&gt;
                          &lt;option value=&quot;Visa&quot; &gt;Visa&lt;/option&gt;
                          &lt;option value=&quot;JCB&quot; &gt;JCB&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;a class=&quot;ui-selectmenu ui-widget ui-state-default select required ui-selectmenu-dropdown ui-corner-all&quot; id=&quot;card_type_button_435&quot; role=&quot;button&quot; href=&quot;#&quot; aria-haspopup=&quot;true&quot; aria-owns=&quot;card_type_menu_435&quot; aria-expanded=&quot;false&quot; tabindex=&quot;0&quot; style=&quot;width: 336px;&quot;&gt;&lt;span class=&quot;ui-selectmenu-status&quot;&gt;Visa&lt;/span&gt;&lt;span class=&quot;ui-selectmenu-icon ui-icon ui-icon-triangle-1-s&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;span class=&quot;ui-selectmenu-status&quot;&gt;Visa&lt;/span&gt;
  
                          &lt;span class=&quot;ui-selectmenu-icon ui-icon ui-icon-triangle-1-s&quot;&gt;&lt;/span&gt;
                     
                  &lt;/td&gt;
              &lt;/tr&gt;
  
           &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Code</p>
  <pre><code>from selenium import webdriver
  from selenium.webdriver.common.keys import Keys
  from selenium.webdriver.common.by import By
  
  from time import sleep
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  from selenium.webdriver.support.ui import Select
  
  #testing on a website that's not public yet, so I won't show the set-up here,but if it's required I can too
  
  cardtype = Select(driver.find_element_by_id(&quot;card_type&quot;))
  cardtype.select_by_value(&quot;Mastercard&quot;)
  sleep(1)
  driver.implicitly_wait(2)
  
  
  Using Firefox: ElementNotInteractableException:
  Element &lt;option&gt; could not be scrolled into view
  
  
  Using Chrome:
  ElementNotVisibleException: element not visible: 
  Element is not currently visible and may not be manipulated
  
  # sleep nor implicitly_wait doesn't help too...
  </code></pre>
  <p>I also tried just clicking on the box (not using the select tag, I could click on it using the <code>class=&quot;ui-selectmenu&quot;</code>, but <code>.send_keys(KEYS.ARROW_DOWN)</code> doesn't work (gives an <code>AttributeError</code>).</p>
  <p>Is there a way I can identify the text in an option and click on it without using the Select module? Or is there a way I can get the Select module to work in this case?</p>