测试某些元素是否可见

Question

如何确定某个元素是否可见或隐藏在唾液（茉莉花）中？

我的DOM的样子：

<div class="span5 value-entry"> 
    <input type="text" ng-model="query.value" placeholder="Enter value" class="input-large" ng-show="genericInput(criteria.attribute)"> 
    <select ng-model="query.value" ng-options="entry for entry in filteredValue(criteria.attribute)" class="input-medium" ng-show="!genericInput(criteria.attribute)"> 
     <option value="">-- Select Value --</option>. 
    </select> 
</div> 

要么选择显示或输入框，但不能同时使用。我想检查哪些元素是可见的（基于其他标准），但我似乎无法弄清楚如何让代码工作。我写了下面的代码：

expect(element('.value-entry input').is(':visible')).toBe(true); 

但我得到一个错误：

TypeError: Object #<Object> has no method 'is' 

如何检查，如果输入的是可见的，并且选择在同一时间（反之亦然）隐藏？

编辑：我想在这里补充一点，这是一个端到端的测试

Answer 1

这种行为在角因为ng-animate 1.2改变。

代码为ngShow是：

var ngShowDirective = ['$animate', function($animate) { 
    return function(scope, element, attr) { 
    scope.$watch(attr.ngShow, function ngShowWatchAction(value){ 
     $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide'); 
    }); 
    }; 
}]; 

，这意味着它会添加/删除ng-hide类隐藏/显示的元素。

因此，作为一个例子，为了测试正确的方式，如果被隐藏在元件将是：

expect(element.find('.value-entry input').hasClass('ng-hide')).toBe(true); 

Answer 2

能见度测试

默认情况下，显示设置为inline输入，并为inline-block选择。因此，您可以通过测试是否存在默认的CSS属性来确定当前是否显示。

expect(element('.value-entry input').css('display')).toBe('inline'); 
expect(element('.value-entry select').css('display')).toBe('inline-block'); 

要检查是否任一被隐藏，有用于none检查，这是怎么ngShow隐藏的元件替换inline和inline-block。

expect(element('.value-entry input').css('display')).toBe('none'); 
expect(element('.value-entry select').css('display')).toBe('none'); 

Answer 3

你很近。然而，这里是你应该如何测试知名度：

expect(element('#some-id:visible').count()).toBe(1);