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'")));

OR

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

OR

我能以某种方式确认模糊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选择器完全无效。我建议在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元素

2 个答案: