Search code examples
c#cssseleniumelementsendkeys

How to close a permanent element obscuring other elements?

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.

Solution

  • 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