如何关闭一个隐藏其他元素的永久元素？

Question

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

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

如果您在Web浏览器上手动关闭此下拉列表，则只需要点击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中不起作用，但它仅在使用命令单击并将//div[3]/div[3]设置为目标时在Selenium IDE中起作用。

Selenium IDE Example

我尝试使用IDE中的select函数来识别下拉菜单中未包含的其他元素。我也尝试过使用萤火虫。但这是唯一可以在下拉菜单外单击的元素。

Firebug view

总结一下：

1. 请告诉我发送“Esc”的代码是否错误。
2. 为什么Visual Studio不能识别并点击//div[3]/div[3]，即在Selenium IDE中可以在下拉列表外点击它？
3. 还有其他方法可以关闭下拉菜单吗？
4. 我已经读过你可以随时点击使用javascript隐藏的元素，但我还没有找到如何在C＃中执行此操作的指南。如果你们知道怎么做，请告诉我。

Answer 1

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

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);

Answer 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