Message: Element <option> could not be scrolled into view while trying to click on an option within a dropdown menu through Selenium

Question

I am trying to select a drop down menu and choose an option. I am using the latest version of Selenium, the latest version of Firefox, the latest version of geckodriver, and the latest version of Python.

Here is my issue: When I try to choose an option, it gives me the following error:

selenium.common.exceptions.ElementNotInteractableException: Message: Element <option> could not be scrolled into view.

I have tried various ways to circumnavigate this issue, but none seem to work. Here are some of the approaches I tried.

mySelectElement = browser.find_element_by_id('providerTypeDropDown')
dropDownMenu = Select(mySelectElement)
dropDownMenu.select_by_visible_text('Professional')

mySelectElement = browser.find_element_by_id('providerTypeDropDown')
dropDown = Select(mySelectElement)
for option in dropDown.options:
    message = option.get_attribute('innerText')
    print(message)
    if message == 'Professional':
        print("Exists")
        dropDown.select_by_visible_text(message) 
        break

element = browser.find_element_by_id('providerTypeDropDown')
browser.execute_script("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", element, "Professional")

The HTML code follows the usual select tags and option tags. Any help is appreciated. The HTML code is included below.

<select data-av-chosen="providerTypes" id="providerTypeDropDown" data-placeholder="Please Select a Provider Type" name="providerTypeDropDown"
class="chzn-select input-full ng-pristine chzn-done ng-invalid ng-invalid-provider-type" data-ng-options="providerType.value for providerType in request.models.providerTypes"
data-ng-model="request.models.providerType" data-av-validator-field="providerType" data-disable-search-threshold="5" style="display; none;">
    <option value="" class="">Please Select a Provider Type</option>
    <option value="0">Professional</option>
    <option value="1">Institutional</option>
</select> 

The print statements are there for testing/code tracing purposed.

Answer 1

This error message...

selenium.common.exceptions.ElementNotInteractableException: Message: Element <option> could not be scrolled into view.

...implies that the <option> item which your program was trying to interact with could not be scrolled into view.

The HTML of the desired element would have given us some idea behind the error. However it seems the desired element was not clickable / within the Viewport. To address the issue you have to induce WebDriverWait for the element to be clickable and you can use the following solution:

mySelectElement = browser.find_element_by_id('providerTypeDropDown')
dropDownMenu = Select(mySelectElement)
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select[@id='providerTypeDropDown']//options[contains(.,'Professional')]")))
dropDownMenu.select_by_visible_text('Professional')

Note : You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.select import Select

Answer 2

Try to add a wait:

mySelectElement = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, "providerTypeDropDown")))
mySelectElement.click()

it will wait at least 10 seconds until element will be clickable and then click.

Also I don't see in your code, that you click on the dropdown button, which opens dropdown menu. Locate this button, also add a wait and click on it before you select the option. Hope it helps.

Note: for this code you have to add some imports:

from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC