1

I can't click on a element because of a drop-down-menu obscuring all other elements.

Using Selenium in Visual Studio, I'm trying to build a testcase where I first click on a checkbox in a drop-down-menu and then click on another element outside the drop-down. However the drop-down-menu does not close itself after you clicked on the first checkbox.

If you close this drop-down manually on the web-browser you only need to either hit Esc or just click somewhere outside the dropdown menu. But when I try to automate this it doesn't work.

I have tried hitting the Esc-key like this in the script:

Actions action = new Actions(driver);
action.SendKeys(OpenQA.Selenium.Keys.Escape);

But it doesn't work. It does not send an error about sending the Esc-key instead sends a time-out on the next row when trying to click on the obscured element:

OpenQA.Selenium.ElementClickInterceptedException : Element <div class="mat-radio-outer-circle"> is not clickable at point (116,608) because another element <div class="cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing"> obscures it

I have also tried to instead of sending the Esc-key, clicking outside of the drop-down menu like this:

wait.Until(ExpectedConditions.ElementIsVisible(By.XPath("//div[3]/div[3]"))).Click();

This does not work in Visual Studio, but it does work in Selenium IDE just using the command click and setting //div[3]/div[3] as the target.

Selenium IDE Example

I have tried using the select function in IDE to identify other elements not included in the drop down-menu. I've also tried using firebug. But this is the only element that is clickable outside of the drop down-menu.

Firebug view

To summarize:

  1. Please tell me if my code for sending "Esc" is incorrect.

  2. Why can't Visual Studio recognize and click on //div[3]/div[3] i.e outside the drop-down, when it is possible to do it in Selenium IDE?

  3. Is there another way to close the dropdown menu?

  4. I have read that you can always click on elements that are obscured using javascript but I haven't found a guide how to do that in C#. Please tell me if you guys know how to do that.

David
  • 145
  • 1
  • 1
  • 12
  • Have you tried sending a TAB to switch focus to a new element? That might close it. Is there a title or some text only element somewhere outside the dropdown that you can click that won't trigger another option but will close the dropdown? – JeffC Apr 05 '19 at 04:36

2 Answers2

2

I would always try to select the list items by using xpath or css direct of the list item rather clicking on the listbox and selecting. By that way we can ignore this hassle and it's faster too. How to do it:

driver.FindElement(By.Xpath("//select[@attribute='attributeValue']/li[@attribute='attributeValue'])).click

Here is the Javascript approach. Ref to below 2 links https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/JavascriptExecutor.html

https://seleniumhq.github.io/selenium/docs/api/dotnet/html/M_OpenQA_Selenium_IJavaScriptExecutor_ExecuteScript.htm

IWebDriver driver; // assume assigned elsewhere
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
// if you want to click on element
IWebElement element = driver.FindElement(By.CssSelector("your css locator goes here")) 

// if you want to return value from javascript and store
string title = (string)js.ExecuteScript("return document.title");

If you want to hide the obscursing element,here is the logic using js.

element = driver.FindElement(By.Xpath("//div[@class='cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing']")); // this is the obscuring element in your case.
js.ExecuteScript("arguments[0].setAttribute("style","display: none;");",element);
supputuri
  • 13,644
  • 2
  • 21
  • 39
  • How would you wait for element visible using JS approach? – Mate Mrše Apr 04 '19 at 13:27
  • @MateMrše what do you mean by visible? display or present in the page? – supputuri Apr 04 '19 at 13:34
  • Displayed, so it is obscuring another element. – Mate Mrše Apr 04 '19 at 13:37
  • Can you please share the element html code, so that I can check if there is any property that we can rely on. Generally you can use `displayed:` attribute to check this. – supputuri Apr 04 '19 at 13:45
  • Sorry I was pulled into something else. Ok, I would just hide the obscuring element as below. `element = driver.findElement(By.Xpath("//div[@class="cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing"));` and then pass the element to JS to hide as below `js.ExecuteScript("arguments[0].setAttribute("style","display: none;");",element);` – supputuri Apr 04 '19 at 15:01
  • If I understand the above code correctly, this will set the display to none, effectively hiding the element? What I was looking for is a way to wait for the element to disappear – Mate Mrše Apr 05 '19 at 07:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191321/discussion-between-supputuri-and-mate-mrse). – supputuri Apr 05 '19 at 12:31
  • I tried your first solution like this: `wait.Until(ExpectedConditions.ElementIsVisible(By.XPath("//select[@attribute='//div[2]/div[2]/mat-form-field/div/div/div/mat-select/div/div[2]/div']/li[@attribute='//html/body/div[3]/div[4]/div/div/div/mat-option[2]/span']"))).Click();` I assumed that I'm suppose to first give the xpath for the DropDown element and then give the xpath for the checkbox I want to be checked, correct? Visual Studio could not find the two elements I typed here. I used a position xpath, and not a "attribute value" because I could not find one. – David Apr 10 '19 at 13:20
  • Been digging further into the select method you suggested. And I don't think I can use it with html code on this page since html structure is using a
    instead of
    – David Apr 11 '19 at 13:42
  • You should be able to do it though it’s div – supputuri Apr 11 '19 at 15:24
2

The solution in this case was to click on the element obscuring the rest of the page:

driver.FindElement(By.CssSelector(".cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing")).Click();

When I did this, the dropdown closed.

Note: I had to use another format for the CSSSelector to be able to identify the element.

In the error message I got earlier the obscuring element was written like this by Visual Studio:

cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing

But I could not just copy that into a CSSSelector, It seems like you always have to add a "." in the beginning of a CSSSelector Id, and replace any spaces in the element name with a "."

Like this:

.cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing
David
  • 145
  • 1
  • 1
  • 12