时间戳

首页 > 解决方案 > 如何使用量角器查找元素是否可见

javascript - 如何使用量角器查找元素是否可见

问题描述

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

元素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'有一个自定义方法，我们用它来识别元素。

期望(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”不是函数

请任何人帮忙。

标签： javascriptprotractor

解决方案

我注意到很多关于量角器的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);
})

推荐阅读