Can't select an md-select dropdown option using Selenium

Question

I have an angular-material dropdown with a set of options, and am attempting to select one of the options. I'm selecting them as follows:

html file:

<md-select name="myDropdown"
           ng-model="addCompany.details.someModel"
           ng-change="addCompany.swapDisplayedAreas()"
           required>

    <md-option value="Company A">Company A</md-option>
    <md-option value="Company B">Company B</md-option>
</md-select>

python test:

input = self.browser.find_element_by_name('myDropdown')
input.click()
choice = self.browser.find_element_by_xpath("//*[contains(text(), 'Company A')]")
choice.click()

However, no matter how I try to select the option, I either get the following error:

selenium.common.exceptions.WebDriverException: Message: Element is not clickable at point (750, 423). Other element would receive the click: <md-backdrop style="position: fixed;" class="md-select-backdrop md-click-catcher ng-scope"></md-backdrop> <md-backdrop style="position: fixed;" class="md-select-backdrop md-click-catcher ng-scope"></md-backdrop>

Or I can see that the element is clicked on, but that the dropdown still stays pulled out. Attempting to click on any other element on the page while the dropdown is still pulled out gives a similar md-backdrop would receive the click error.

Any idea how I can choose a dropdown selection for an md-select element? I've tried disabling md-backdrop for my input elements without any success.

Answer 1

You should try using WebDriverWait to wait until options open from the dropdown and getting visible and clickable before click as below :-

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

#find dropdown and click to open options 
input = self.browser.find_element_by_name('myDropdown')
input.click()

#now wait until options getting visible and clickable 
choice = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "md-option[value = 'Company A']")))
choice.click()

Answer 2

I would guess the issue may be one of the following:

1. There is another element on the page with the text "Company A" and that element is trying to be clicked even though the dropdown option is clearly the element you want selenium to click. This is because selenium clicks the first element that satisfies the identifier. To check if this is the problem I would use the find elements and check how many elements are found. If that is the problem try using the css selectors such as value.

2. If you are using chrome I came across a similar problem with the chrome webdriver when testing an angular application.

This is the issue https://code.google.com/p/selenium/issues/detail?id=2766 I tried elegant workarounds but nothing worked...in the end I used the solution by Lukeis.

In java

int n=10;
    String errorMessage;
    for (int i=1; i<=n; i++)
    {
        try {
            clickThis.click();
            break;
        } catch(WebDriverException driverException) {
            Thread.sleep(1000);
            errorMessage = driverException.toString();
        }
        if(i==n)
        {
            Assert.fail("Failed to click "+n+" times \n" + errorMessage);
        }
    }

It pretty much tries to click the element 10 times.