如何关闭遮挡其他元素的永久元素？答案

【问题标题】：How to close a permanent element obscuring other elements?如何关闭遮挡其他元素的永久元素？
【发布时间】：2019-04-04 12:36:12
【问题描述】：

我无法点击某个元素，因为下拉菜单会遮挡所有其他元素。

在 Visual Studio 中使用 Selenium，我正在尝试构建一个测试用例，我首先单击下拉菜单中的复选框，然后单击下拉菜单之外的另一个元素。但是，单击第一个复选框后，下拉菜单不会自行关闭。

如果您在网络浏览器上手动关闭此下拉菜单，您只需按 Esc 或单击下拉菜单外的某个位置。但是当我尝试自动化它时它不起作用。

我曾尝试在脚本中像这样按 Esc 键：

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

但它不起作用。它不会发送有关发送 Esc 键的错误，而是在尝试单击被遮挡的元素时在下一行发送超时：

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

我也尝试过点击下拉菜单外部而不是发送 Esc 键，如下所示：

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

这在 Visual Studio 中不起作用，但它在 Selenium IDE 中起作用，只需使用命令 click 并将 //div[3]/div[3] 设置为目标。

Selenium IDE Example

我尝试使用 IDE 中的选择功能来识别下拉菜单中未包含的其他元素。我也尝试过使用萤火虫。但这是下拉菜单之外唯一可点击的元素。

Firebug view

总结一下：

如果我发送“Esc”的代码不正确，请告诉我。
为什么 Visual Studio 无法识别并单击 //div[3]/div[3]，即在下拉菜单之外，而在 Selenium IDE 中可以做到这一点？
还有其他方法可以关闭下拉菜单吗？
我已经读到，您始终可以单击使用 javascript 隐藏的元素，但我还没有找到如何在 C# 中执行此操作的指南。如果你们知道怎么做，请告诉我。

【问题讨论】：

您是否尝试过发送 TAB 以将焦点切换到新元素？那可能会关闭它。下拉菜单之外的某个地方是否有一个标题或一些纯文本元素，您可以单击它们不会触发另一个选项但会关闭下拉菜单？

标签： c# css selenium element sendkeys

【解决方案1】：

我总是尝试通过使用列表项的 xpath 或 css 直接选择列表项，而不是单击列表框并进行选择。通过这种方式，我们可以忽略这个麻烦，它也更快。怎么做：

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

这里是 Javascript 方法。参考以下2个链接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");

如果你想隐藏隐藏元素，这里是使用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);

【讨论】：

如何使用 JS 方法等待元素可见？
@MateMrše 可见是什么意思？显示或呈现在页面中？
已显示，因此它遮挡了另一个元素。
能否请您分享元素html代码，以便我可以检查是否有任何我们可以依赖的属性。一般可以使用displayed:属性来检查。
对不起，我被卷入了其他事情。好的，我将隐藏如下的模糊元素。 element = driver.findElement(By.Xpath("//div[@class="cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing")); 然后将元素传递给JS隐藏如下js.ExecuteScript("arguments[0].setAttribute("style","display: none;");",element);

【解决方案2】：

在这种情况下，解决方案是单击遮挡页面其余部分的元素：

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

当我这样做时，下拉菜单关闭了。

注意：我必须为 CSSSelector 使用另一种格式才能识别元素。

在我之前收到的错误消息中，隐藏元素是由 Visual Studio 编写的：

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

但我不能只是将它复制到 CSSSelector 中，似乎你总是必须添加一个“。”在 CSSSelector Id 的开头，并将元素名称中的任何空格替换为“.”

像这样：

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

【讨论】：