limp_chimp limp_chimp - 5 months ago 509
AngularJS Question

How to use protractor to check if an element is visible?

I'm trying to test if an element is visible using protractor. Here's what the element looks like:

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


When in the chrome console, I can use this jQuery selector to test if the element is visible:

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


However, when I try to do the same in protractor, I get this error at runtime:

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


Why is this not valid? How can I check for visibility using protractor?

Answer

This should do it:

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

Remember protractor's $ isn't jQuery and :visible is not yet a part of available CSS selectors + pseudo-selectors

More info at http://stackoverflow.com/a/13388700/511069

Comments