如何使用Selenium(或Seleno)检测Angular是否显示DOM元素 [英] How to use Selenium (or Seleno) to detect if a DOM element is displayed by Angular

问题描述

单击我的按钮时， ng-hide 指令将使隐藏的div在页面上可见.我正在使用 Seleno 编写Angular应用程序的UI测试.

When my button is clicked, the ng-hide directive will turn a hidden div to be visible on page. I am using Seleno to write UI test for an Angular application.

我已经检查了该元素上的 display css值:

I have checked the display css value on that element:

var cssValue = SelectById(elementId).GetCssValue("display");

此 cssValue 始终返回 none .

还检查了 class 属性.

var cls = SelectById(elementId).GetAttribute("class");

我希望从该元素的类中删除 ng-hide .

I am expecting ng-hide should be removed from the classes of this element.

return !SelectById(elementId).GetAttribute("class").Contains("ng-hide");

但是每次 class 仍然包含 ng-hide ！

以防有人问，这是我的 SelectById .只是为了在Selenium Page对象上返回一个Web元素.

In case someone may ask, here is my SelectById. Just to return a Web Element on the Selenium Page Object.

    protected IWebElement SelectById(string id)
    {
        return Find.Element(By.Id(id));
    }

---

如答案部分所述，我可能没有等到Angular以正确的方式更新类.我所做的只是让 Thread Sleep 一段时间.

    public static void Pause(int durationInMilisecond = 2000)
    {
        if (SelenoSettings.EnablePausing) 
            Thread.Sleep(durationInMilisecond);
    }

---

任何人都可以给我一些建议吗?谢谢.

---

Anyone can give me some advice? Thanks.

推荐答案

这是我们的解决方案，这要归功于ABucin和Arran的投入.感谢您为我们指出正确的方向.在这种情况下，我们应该研究 WebDriverWait .

Here is our solution, thanks to the input from ABucin and Arran. Thank you for pointing to the right direction for us. WebDriverWait is the thing we should look into in this case.

public bool Displayed(string elementId)
{
    try
    {
    var wait=new WebDriverWait(BrowserFactory.Chrome(),new TimeSpan(0,2,0));
    wait.Until(d => !SelectById(elementId).GetAttribute("class").Contains("ng-hide"));

    // then there is all types of checking start to work:
    var bySelenoDisplayed =SelectById(elementId).Displayed;
    return bySelenoDisplayed;

    var byCss = SelectById(elementId).GetCssValue("display");
    return !byCss.Equals("hidden");

    var byClass = SelectById(elementId).GetAttribute("class");
    return !byClass.Contains("ng-hide");
    }

    catch (Exception)
    {
        // 2min timeout reached.
        return false;
    }
}

这篇关于如何使用Selenium(或Seleno)检测Angular是否显示DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！