CSS 元素掩盖了 Xpath 元素

Question

临时 CSS 元素遮挡了我要单击的 xpath 元素。

在 Visual Studio 中使用 Selenium 我正在编写一个要单击元素的测试用例。但是当我运行这个测试用例时，我收到一条错误消息告诉我：

OpenQA.Selenium.ElementClickInterceptedException Element <a href="#/app/customer/handling/devices"> is not clickable at point (105,221) because another element <div class="showbox layout-align-center-center layout-row ng-star-inserted"> obscures it

模糊元素似乎是一个 CSS 元素。但是当我手动转到此页面，检查代码并搜索此 css 元素时 <div class="showbox layout-align-center-center layout-row ng-star-inserted">，我没有得到任何结果。

因此，我假设这个 CSS 元素是临时的，并且只能在页面加载时被识别几秒钟。Task.Delay(4000).Wait();如果我在这个测试用例中放置一个静态等待方法，我就能够完成这个测试用例，这一事实证实了这个假设。

但是我对在代码中使用静态等待方法的解决方案不感兴趣。我希望能够等待临时 css 消失，这样我就可以点击我想要的 xpath 元素。

这是我的代码：

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));

wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));

//Waiting for temporary CSS element to be visible

            wait.Until(ExpectedConditions.InvisibilityOfElementLocated(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));

//Waiting for temporary CSS element to disappear

wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div/div[2]/nav[2]/div/ul/li[1]/a"))).Click();

//Click on "Handle Tools" link

正如您在我的代码中的注释中看到的那样，我在这里做了三件事：

1. I wait for the temporary CSS to be loaded

2. I wait for it to disappear

3. I click on the xpath element.

当我这样做时，我收到一条错误消息，告诉我我要查找的 CSS 选择器无效。

如果我跳过第一步，只是等待 CSS 消失/“不可见”，它会检查得太快，并在 CSS 元素开始加载之前查看。

所以要么我没有正确编写 By.CssSelector 格式。或者 CSS 元素被称为不同于 Visual Studio 在我上面引用的错误消息中调用它的东西。

所以请告诉我，如果我在这里使用不正确的方式来识别这个 CSS 元素：

wait.Until(ExpectedConditions.InvisibilityOfElementLocated(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));

或者

还有另一种动态等待临时 CSS 元素的方法吗？

或者

我能以某种方式确认隐藏 CSS 元素的名称实际上称为“div class='showbox layout-align-center-center layout-row ng-star-inserted'”吗？

Answer 1

这种情况下的问题是我的 CSS 选择器确实无效。删除开头的“div class=”并添加“.”&nbsp;解决了问题。前："div&nbsp;class='showbox&nbsp;layout-align-center-center&nbsp;layout-row&nbsp;ng-star-inserted'"后：".showbox.layout-align-center-center.layout-row.ng-star-inserted"感谢 Asyranok 为我的 CSS 选择器提供了正确的格式。在这种情况下，我不需要你的其余代码，而是我只是将正确的 CSS 格式从你的代码复制到我的解决方案中，它就起作用了。:)我通常只在尝试识别元素时使用 xpath，所以我不习惯 CSS 和使用什么格式。还要感谢 JeffC 证实了我的怀疑，即我需要等待模糊元素首先加载，然后再次等待它消失。

Answer 2

所以我不是 100% 确定你所说的 CSS 元素是什么意思。但我认为这只是您可能用词不当。但是 CSS 是级联样式表。它是定义文档对象模型 (DOM) 元素外观的标记。XPath 是一种为驱动程序定义元素位置以找到它并与之交互的方法。Css 选择器是在 DOM 的 xml 或 html 中查找元素的另一种方法。所以不存在“Css 元素”或“XPath 元素”这样的东西。它们只是“元素”。至于解决你所看到的问题，你可以试试这个：&nbsp; &nbsp; //This is called an extension method. It adds methods to an existing class. This should go in a static class that is accessible to your driver.&nbsp; &nbsp; private static void WaitUntil(this IWebDriver driver, Func<bool> Condition, float timeout)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; float timer = timeout;&nbsp; &nbsp; &nbsp; &nbsp; while (!Condition.Invoke() && timer > 0f)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; System.Threading.Thread.Sleep(500);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer -= 0.5f;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; System.Threading.Thread.Sleep(500);&nbsp; &nbsp; }driver.WaitUntil(() => driver.FindElementsBy(By.CssSelector(".showbox.layout-align-center-center.layout-row.ng-star-inserted").length == 0);另请注意，您描述中的 CSS 选择器完全无效。我建议在像这样的教程中阅读它们。