Selenium: Dropdown cannot be clicked as it is obscured by button

Question

I have test cases which selects each option in a dropdown but no matter what I do currently I'm getting this error.

Result Message: System.InvalidOperationException : Element is not clickable at point (1170.0333251953125,405.4250030517578) because another element obscures it

<div class="btn-group bootstrap-select">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="year" title="2018" aria-expanded="false">
        <span class="filter-option pull-left">2018</span>&nbsp;
        <span class="bs-caret">
            <span class="caret" />
        </span>
    </button>
    <div class="dropdown-menu open" role="combobox" style="max-height: 272px; overflow: hidden; min-height: 0px;">
        <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 260px; overflow-y: auto; min-height: 0px;">
            <li data-original-index="0" class="selected">
                <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true">
                    <span class="text">2018</span><span class="glyphicon glyphicon-ok check-mark" />
                </a>
            </li>
            <li data-original-index="1">
                <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                    <span class="text">2017</span><span class="glyphicon glyphicon-ok check-mark" />
                </a>
            </li>
        </ul>
    </div>
    <select aria-label="view all previous payments" class="selectpicker" data-val="true" data-val-number="The field Year must be a number." data-val-required="The Year field is required."  id="year" name="Year" tabindex="-98">
        <option selected="selected" value="2018">2018</option>
        <option value="2017">2017</option>
    </select>
</div>

Currently trying to change the year with this code -

 SelectElement DropDown = new SelectElement(ObjectIdentification);
 DropDown.SelectByValue(ValueToBeSelected);
 return true;

With the WebElement being defined like this -

 [FindsBy(How = How.XPath, Using = "//*[contains(@class, 'selectpicker')]")]
 private IWebElement DropDownYear { get; set; }

This is what the dropdown looks like when selenium is trying to select pick. Nothing obscuring it that I can see.

Are you maximizing your browser ? – Prany Jun 26 '18 at 16:06 — Prany, Jun 26 '18 at 16:06

score 0 · Answer 1 · answered Jun 26 '18 at 15:31

0

XPath needs to be changed as below

//select[@id='year']

else,

use the ID or Name locator to select the element

answered Jun 26 '18 at 15:31

Subburaj

2,294
3
20
37

cruisepandey · Answer 2 · 2018-06-26T16:03:50.313

0

Try this code :

var down= driver.FindElement(By.id("year"));
var DropDown = new SelectElement(down);  

//select by value
DropDown .SelectByValue("2017"); 
 // select by text
 DropDown .SelectByText("2017");

You can have web element like this :

 [FindsBy(How = How.id, Using = "year")]
 private IWebElement DropDownYear { get; set; }

UPDATE :

IList<IWebElement> options= webDriver.FindElements(By.CssSelector("select[id='year']>option"));  
foreach (IWebElement element in options){  
     if(element.GetText().Equals("2017")){  

        element.Click();
    }
    }

edited Jun 26 '18 at 16:03

answered Jun 26 '18 at 15:39

cruisepandey

28,520
6
20
38

Nope, still being obscured by the button apparently. Thanks anyway – johnc489 Jun 26 '18 at 15:49
When you run your script , would you able to see the drop down being clicked , or you have to do some kind of manual intervention to see that happening ? – cruisepandey Jun 26 '18 at 15:51
I can see the firefox window if thats what you mean. – johnc489 Jun 26 '18 at 15:52
Yes you can see the Firefox window, in which you must be seeing your script being running. So when your script try to click on drop down and wants to select some value , do you do anything ,any manual intervention ? – cruisepandey Jun 26 '18 at 15:54
Nope, usually I just let the script run through no manual intervention. This code used to work but I guess the front end devs changed something. – johnc489 Jun 26 '18 at 15:56
So how do you handle drop down which is obscured by the button manually ? – cruisepandey Jun 26 '18 at 15:57
I added an image of the dropdown to main post. There's no actual button obscuring it that I can see, so I just click on the dropdown – johnc489 Jun 26 '18 at 15:58
Your question title says it is obscured when trying to click on drop down. There is one more way take every options from drop down in a list and click on element which you want to select. – cruisepandey Jun 26 '18 at 16:01
Yes that's the error that selenium gives me though, I can't actually see anything obscuring it, but in the front end code it looks like there is. And yes getting every element in the list was to be my last resort but I guess I will have to. – johnc489 Jun 26 '18 at 16:03
Updated the answer with that , you can get the code from there. – cruisepandey Jun 26 '18 at 16:05
Got the same error on the click with the new code too. -_- – johnc489 Jun 28 '18 at 09:47

Prany · Accepted Answer · 2018-06-28T11:12:29.550

0

ok, Here are few options

Check if you are maximizing the window -
```
 driver.Manage().Window.Maximize();
```
OR

Use action class to locate and action the element

IWebElement element = driver.FindElement(By.Id("year"));
Actions action = new Actions(driver);
action.MoveToElement(element);
var DropDown = new SelectElement(element);
DropDown.SelectByText("2017");

Update

IJavscript executor

IWebElement element = driver.FindElement(By.Id("year"));
((IJavaScriptExecutor)driver).ExecuteScript("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, "2017");

edited Jun 28 '18 at 11:12

answered Jun 26 '18 at 16:12

Prany

2,078
2
13
31

what about option 2 ? – Prany Jun 27 '18 at 14:54
Its always on the selectbytext line – johnc489 Jun 28 '18 at 09:29
@johnc489- Have you tried select by index , select by value ? – Prany Jun 28 '18 at 10:15
Ah Cool, you can mark it as an answer for future references – Prany Jun 28 '18 at 12:38
Sure done, also just noticed that this only happens on firefox. Google chrome can use the selectby. – johnc489 Jun 28 '18 at 13:21
refer - https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS. well ideally, the dev's should refer these so that they code it based on cross browsers – Prany Jun 28 '18 at 13:24

score 0 · Answer 4 · answered Jun 27 '18 at 05:17

Based on Exception type, You can solve it by using one of the following click method:

Actions builder = new Actions(driver);
builder.MoveToElement("Your target element").click().Perform();

OR

JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript("arguments[0].click();","Target Webelement");

Selenium: Dropdown cannot be clicked as it is obscured by button

4 Answers4