'Unable to click option in dropdown list selenium

I tried using the Select module, but when I do the Element is either not interactable or it is "not visible". Here are the relevant codes.

HTML

    < head >
    < script >

        function onChangeCardType() {
            var value = $('#card_type').val();
            $('#img_' + value).siblings().hide();
            $('#img_' + value).show();
        }

    </script>

</head>

<body>
    <table>
        <thead>

            <tr>
                <th align="left">Card type</th>
                <td colspan="2" style="font-size:12px;">
                    <select name="requestDTO.vpc_card" id="card_type" onchange="onChangeCardType()"
                            class="select required"
                            style="width: 342px; font-size:12px;">
                        <option value="Amex" >American Express</option>
                        <option value="Mastercard" >MasterCard</option>
                        <option value="Visa" >Visa</option>
                        <option value="JCB" >JCB</option>
                    </select>
                    <a class="ui-selectmenu ui-widget ui-state-default select required ui-selectmenu-dropdown ui-corner-all" id="card_type_button_435" role="button" href="#" aria-haspopup="true" aria-owns="card_type_menu_435" aria-expanded="false" tabindex="0" style="width: 336px;"><span class="ui-selectmenu-status">Visa</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>
                        <span class="ui-selectmenu-status">Visa</span>

                        <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
                   
                </td>
            </tr>

         </thead>
    </table>
</body>

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("card_type"))
cardtype.select_by_value("Mastercard")
sleep(1)
driver.implicitly_wait(2)


Using Firefox: ElementNotInteractableException:
Element <option> 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...

I also tried just clicking on the box (not using the select tag, I could click on it using the class="ui-selectmenu", but .send_keys(KEYS.ARROW_DOWN) doesn't work (gives an AttributeError).

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?

Solution 1:^[1]

thanks so much for the responses! Unfortunately, the problem was really not with wait in this case:/

What did work for me however, was Action Chains. Actions Chains works because you don't have to target an element. So in my post I mentioned I could click the dropdown list, and that down arrows didn't work because it gave an AttributeError. However, that was because I tried targeting the element!

So here's the answer that worked for me:

cardtype = driver.find_elements_by_class_name("ui-selectmenu-status")
cardtype.click()

actions = ActionChains(driver)
actions.send_keys(Keys.ARROW_DOWN)
actions.send_keys(Keys.ENTER)
actions.perform()

Solution 2:^[2]

You can use select_by_index. I personally recommend instead of value

cardtype = Select(driver.find_element_by_id("card_type"))
cardtype.select_by_index(1)  // 0 - AMEX , 1 - MasterCard and so on

Solution 3:^[3]

You can try this code :

WebDriverWait(driver, 20).until(
EC.visibility_of_element_located((By.ID, "card_type")))  
cardtype = Select(driver.find_element_by_id('card_type'))
cardtype.select_by_value("Mastercard")  
#OR  

cardtype.select_by_visible_text('MasterCard')

Hope this will be helpful.

Solution 4:^[4]

Try this.

your_choice=driver.find_element_by_xpath("//select[@id='card_type']/option[@value='Mastercard']")
your_choice.click()

Solution 5:^[5]

You need to wait for a while(2 Seconds), Before Select actions. You can use Explicit Wait or sleep. That will solve Firefox as well as Chrome problem.

Explicit Wait :

from selenium.webdriver.support import expected_conditions as EC
element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "card_type")))

Sleep:

import time
time.sleep( 5 )

Solution 6:^[6]

First click on the dropdown,

accountspageobj.select_user_dropdown_on_assign_eventpage().click();

Use the below actions class to select the values in a dynamic dropdown.

Actions s= new Actions(driver);
s.sendKeys(accountspageobj.select_user_dropdown_on_assign_eventpage(), Keys.chord(Keys.DOWN,Keys.DOWN,Keys.ENTER)).build().perform();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	cruisepandey
Solution 4	Pygirl
Solution 5
Solution 6	Angel F Syrus

'Unable to click option in dropdown list selenium

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]