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 到 disappear/be "invisible" 它会检查得太快并且在 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

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

XPath 是一种定义元素位置的方法，供驱动程序查找元素并与之交互。 Css 选择器是在 DOM 的 xml 或 html 中查找元素的替代方法。所以不存在 "Css element" 或 "XPath element" 这样的东西。他们只是 "elements".

至于解决您遇到的问题，您可以试试这个：

    //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.

中阅读它们

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

CSS 元素正在模糊 Xpath 元素

CSS Element is obscuring Xpath element

css

c#

selenium

webdriverwait