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格式。 或者，除了Visual Studio在我上面引用的错误消息中调用它之外，还调用CSS元素。

所以请告诉我，如果我在这里使用不正确的方法来识别这个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元素”或“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选择器完全无效。 我建议在像这样的教程中阅读它们。

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确认我怀疑我需要等待模糊元素首先加载然后再等待它消失。