CSS 元素遮挡了 Xpath 元素答案

【问题标题】：CSS Element is obscuring Xpath elementCSS 元素遮挡了 Xpath 元素
【发布时间】：2019-04-01 14:00:33
【问题描述】：

一个临时的 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

正如您在我的代码中的 cmets 所看到的，我在这里做了三件事：

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'”？

【问题讨论】：

仅供参考 - 当发生此类问题时，您可以使用 Javascript 单击元素。

标签： c# css selenium webdriverwait

【解决方案1】：

所以我不能 100% 确定你所说的 CSS 元素是什么意思。但我认为这只是你可能已经掌握的用词不当。但是 CSS 是级联样式表。它是定义文档对象模型 (DOM) 元素外观的标记。

XPath 是一种定义元素位置的方法，以便驱动程序找到它并与之交互。 Css 选择器是在 DOM 的 xml 或 html 中查找元素的另一种方法。所以不存在“Css 元素”或“XPath 元素”之类的东西。它们只是“元素”。

至于解决你看到的问题，你可以试试这个：

    //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.
    private static void WaitUntil(this IWebDriver driver, Func<bool> Condition, float timeout)
    {

        float timer = timeout;
        while (!Condition.Invoke() && timer > 0f)
        {

            System.Threading.Thread.Sleep(500);
            timer -= 0.5f;

        }
        System.Threading.Thread.Sleep(500);

    }

driver.WaitUntil(() => driver.FindElementsBy(By.CssSelector(".showbox.layout-align-center-center.layout-row.ng-star-inserted").length == 0);

另外请注意，您的描述中的 CSS 选择器完全无效。我建议在tutorial like this one 中阅读它们。

【讨论】：

我同意你的代码之前的一切。主要问题是，如果弹出窗口需要几分之一秒的时间出现，您的等待就会过去并继续，OP 仍然会遇到同样的问题。他的方法是正确的，但他的 CSS 选择器无效。
这段代码可以正常工作。如果它需要时间出现，还有其他方法可以等待它，就像一个额外的步骤。我并不是说他的代码使用 Selenium 等待是错误的。我只是向他展示我使用的东西。我使用的允许任何布尔条件。不仅仅是 Selenium 特定条件，这就是使用它的原因。
第一次进入WaitUntil() 方法时存在竞争条件...如果弹出窗口不可见，则条件将通过，它会通过，然后可能会进入弹出窗口。您必须等待弹出窗口可见，然后不可见以删除此竞争条件。
是的，你刚刚说过。并且说，可以简单地添加一行额外的代码来处理这种可能性。等待它存在的一行，然后添加第二行以等待它不再存在。并且可以在很短的等待时间内处理它的出现。等待 1 秒以使其存在。例如，等待 5 秒以使其不存在。用我上面的例子解决这个问题并不难。无论如何，您关于为什么这不起作用的全部主张都是基于一个预设。无论哪种方式，这都很容易解决。
...但您仍然没有更正您的答案。你不是在等待它出现和消失，你只是在等待它成为count == 0，这可能发生在第一次传递甚至在元素存在之前。如果你明白这一点，为什么不'你确定你的答案了吗？

【解决方案2】：

这种情况下的问题是我的 CSS 选择器确实无效。删除开头的“div class=”并添加“。”解决了问题。

之前：

"div class='showbox layout-align-center-center layout-row ng-star-inserted'"

之后：

".showbox.layout-align-center-center.layout-row.ng-star-inserted"

感谢 Asyranok 为我的 CSS 选择器提供了正确的格式。在这种情况下，我不需要您的其余代码，而是将正确的 CSS 格式从您的代码复制到我的解决方案中，并且它有效。 :)

我通常只在尝试识别元素时使用 xpath，所以我不习惯 CSS 和使用什么格式。

还要感谢 JeffC 证实了我的怀疑，即我需要等待模糊元素首先加载并然后再次等待它消失。

【讨论】：