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 disappearwait.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 loaded2. I wait for it to disappear3. 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=”并添加“.” 解决了问题。

前：

"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 证实了我的怀疑，即我需要等待模糊元素首先加载，然后再次等待它消失。

Answer 2

所以我不是 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 选择器完全无效。我建议在像这样的教程中阅读它们。