如何使用量角器检查元素是否可见？

Question

我正在尝试使用量角器测试元素是否可见.这是元素的样子:

<i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i>

在chrome控制台中,我可以使用这个jQuery选择器来测试元素是否可见:

$('[ng-show=saving].icon-spin')
[
<i class=?"icon-spinner icon-spin ng-hide" ng-show=?"saving">?</i>?
]
> $('[ng-show=saving].icon-spin:visible')
[]

但是,当我尝试在量角器中执行相同操作时,我在运行时遇到此错误:

InvalidElementStateError: 
invalid element state: Failed to execute 'querySelectorAll' on 'Document': 
'[ng-show=saving].icon-spin:visible' is not a valid selector.

为什么这无效？如何使用量角器检查可见性？

Answer 1

这应该这样做:

expect($('[ng-show=saving].icon-spin').isDisplayed()).toBe(true);

记住量角器的$不是jQuery和:visible不尚的一部分提供CSS选择器+伪选择

更多信息,请访问/sf/answers/937209031/

Answer 2

使用Protractor检查元素可见性的正确方法是调用该isDisplayed方法.你应该小心,因为isDisplayed不返回布尔值,而是promise提供评估的可见性.我已经看到很多错误地使用这种方法的代码示例,因此不评估其实际可见性.

获取元素可见性的示例:

element(by.className('your-class-name')).isDisplayed().then(function (isVisible) {
    if (isVisible) {
        // element is visible
    } else {
        // element is not visible
    }
});

但是,如果你只是检查元素的可见性(而不是获取它),则不需要这样做,因为量角器补丁Jasmine expect()所以它总是等待promises得到解决.见github.com/angular/jasminewd

所以你可以这样做:

expect(element(by.className('your-class-name')).isDisplayed()).toBeTruthy();

由于您AngularJS用来控制该元素的可见性,您还可以检查其类属性,ng-hide如下所示:

var spinner = element.by.css('i.icon-spin');
expect(spinner.getAttribute('class')).not.toMatch('ng-hide'); // expect element to be visible

Answer 3

我有一个类似的问题,因为我只想要在页面对象中可见的返回元素.我发现我能够使用CSS :not.在这个问题的情况下,这应该是你......

expect($('i.icon-spinner:not(.ng-hide)').isDisplayed()).toBeTruthy();

在页面对象的上下文中,您只能获得以这种方式可见的元素.例如.给定一个包含多个项目的页面,其中只有一些是可见的,您可以使用:

this.visibileIcons = $$('i.icon:not(.ng-hide)'); 

这将返回所有可见i.icon的

Answer 4

如果DOM中有多个元素具有相同的类名.但只有一个元素是可见的.

element.all(by.css('.text-input-input')).filter(function(ele){
        return ele.isDisplayed();
    }).then(function(filteredElement){
        filteredElement[0].click();
    });

在此示例中,filter使用isDisplayed()获取元素集合并返回单个可见元素.