如何使用 Selenium（或 Seleno）检测 DOM 元素是否由 Angular 显示

Question

当我的按钮被点击时，ng-hide 指令会将隐藏的 div 转换为在页面上可见。我正在使用 Seleno 为 Angular 应用程序编写 UI 测试。

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

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

这个cssValue 总是返回一个none。

还检查了class 属性。

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

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

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

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

---

如果有人可能会问，这是我的SelectById。只是为了在 Selenium 页面对象上返回一个 Web 元素。

    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);
    }

---

谁能给我一些建议？谢谢。

Answer 1

感谢 ABucin 和 Arran 的意见，这是我们的解决方案。感谢您为我们指明了正确的方向。 WebDriverWait 是我们在这种情况下应该研究的东西。

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;
    }
}

Answer 2

根据 Angular ngHide 文档 (https://docs.angularjs.org/api/ng/directive/ngHide)，“通过在元素上移除或添加 ng-hide CSS 类来显示或隐藏元素。”。因此，解决此问题的最佳方法是：

• 点击按钮
• 等待课程关闭
• 检查类不存在

我相信你的问题是类删除不会立即发生，而是在一段时间后发生。我在 Java 上使用 Selenium 时遇到了几个问题，我认为这也是你的问题。