Testing whether certain elements are visible or not

All we need is an easy explanation of the problem, so here it is.

How do I find out if an element is visible or hidden in testacular (jasmine)?

My DOM looks like:

<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>

Either the select is shown or the input box, but not both. I wish to check which element is visible (based on some other criteria), but I can’t seem to figure out how to get the code working. I have written the following code:

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

But I get an error:

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

How do I check if the input is visible and the select is hidden at the same time (and vice versa)?

EDIT : I wish to add here that this is an end to end test

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

This behavior has changed in Angular 1.2 because of ng-animate.

The code for ngShow is:

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');
    });
  };
}];

Which means that it will add/remove class ng-hide to hide/show the element.

Thus, as an example, the right way to test if the element is hidden would be:

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

Method 2

You were close. However, here is how you should test visibility:

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

Method 3

Visibility Test

By default, display is set to inline for input, and inline-block for select. Therefore, you can determine if either are currently shown by testing for the existence of the default CSS property.

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

To check if either are hidden, replace inline and inline-block with a check for none, which is how ngShow hides an element.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply