c# - 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 格式。或者 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 元素”或“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 中阅读它们.