为了账号安全,请及时绑定邮箱和手机立即绑定

CSS 元素掩盖了 Xpath 元素

CSS 元素掩盖了 Xpath 元素

C#
jeck猫 2022-11-21 21:35:22

临时 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'”吗?


查看完整描述

2 回答

?
慕森王

TA贡献1491条经验 获得超3个赞

这种情况下的问题是我的 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 证实了我的怀疑,即我需要等待模糊元素首先加载,然后再次等待它消失。


查看完整回答
反对 回复 2022-11-21
?
拉莫斯之舞

TA贡献1502条经验 获得超10个赞

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


查看完整回答
反对 回复 2022-11-21
  • 2 回答
  • 0 关注
  • 7 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信