如何使用量角器查找元素是否可见答案

【问题标题】：How to find whether an element is Visible or not using protractor如何使用量角器查找元素是否可见
【发布时间】：2020-06-25 10:03:48
【问题描述】：

在页面上需要检查一个元素是否可见。

元素HTML代码如下：

    <li ng-class="{active: (subview == 'add')}" ng-show="iSU || dp.ua" class="ng-hide">
      <a href="#/setup/users/all/add/" lid="users-submenu-create-user-tab" class="ng-binding">
        Create user
      </a>
   </li>

我需要检查元素“创建用户”是否可见。如果一个元素被隐藏，那么父类将是“ng-hide”。

我尝试了很多方法来检查元素，但都没有成功。

//'lid'有一个自定义方法，我们用它来识别元素。

expect(util.isCreateUserTabDisplayed()).toBe(false);

解决方案 1： “isCreateUserTabDisplayed()”的定义

this.isCreateUserTabDisplayed = function()
    {
       var createUserTab = elmenet(by.lid("users-submenu-create-user-tab"));
        return createUserTab.isPresent()
    }

isPresent() 返回“true”，因为元素存在于 DOM 中。

解决方案 2：

通过isDisplayed()函数验证的思路

this.isCreateUserTabDisplayed = function()
        {
           var createUserTab = elmenet(by.lid("users-submenu-create-user-tab")).getWebElement();
           var createUserParentEle = createUserTab.getDriver();
            createUserParentEle.isDisplayed().then(function(result){
               return result;
            });
        }

收到错误“createUserParentEle.isDisplayed”不是函数

解决方案 3： 想通过获取父元素类变量来验证并验证它应该是'ng-hide'

this.isCreateUserTabDisplayed = function()
    {
               var createUserTab = elmenet(by.lid("users-submenu-create-user-tab")).getWebElement();
               var createUserParentEle = createUserTab.getDriver();
              return createUserParentEle.getAttribute('class').then(function(attrValue){
                       if( attrValue  == 'ng-hide')
                          return false
                       else
                          return true;
                  });
     }

收到错误“createUserParentEle.getAttribute”不是函数

请任何人帮忙。

【问题讨论】：

标签： javascript protractor

【解决方案1】：

我注意到 stackoverflow 上有很多关于量角器的问题，因为用户倾向于使事情过于复杂，而解决方案可能相当简单

我强烈建议始终先从量角器文档开始，它包含您需要的所有示例

在您的情况下，isDisplayed() 就是您要查找的内容

this.isCreateUserTabDisplayed = function() {
  var createUserTab = elmenet(by.lid("users-submenu-create-user-tab"));
  return createUserTab.isDisplayed()
}

// and use like this
expect(await this.isCreateUserTabDisplayed()).toBe(true);

// or if you don't know how to use await/async, which I recommend to learn too
this.isCreateUserTabDisplayed().then(function(result){
   expect(result).toBe(true);
})

【讨论】：