How can I check if an element is visible using Protractor?

Question

I am using the Protractor software for my end to end tests. Some elements are being set with ng-show.

Can someone tell me how I can check if these elements are visible or not with Protractor ?

score 14 · Accepted Answer · answered Jun 18 '14 at 17:35

14

Assuming that your element has the ID "foo", you could do, for example

expect($('#foo').isDisplayed()).toBe(true); // or false to test that it's hidden

or

expect(element(by.id('foo')).isDisplayed()).toBe(true);

answered Jun 18 '14 at 17:35

JB Nizet

678,734
91
1,224
1,255

If it is false, how can we turn element visibility to true? – Emna Ayadi May 02 '16 at 10:24
protractor is a web browser. You would do, programmatically, what an end user would do with his browser to make is visible. – JB Nizet May 02 '16 at 13:58
The problem, the button is visible but the click isn't performed here is my problem, i'm using Appium with protractor and i've recently considered that in inspector visible = false, i have a doubt if this is the problem origin or not ? http://stackoverflow.com/questions/36871071/click-function-isnt-working-in-protractor-scripts – Emna Ayadi May 02 '16 at 14:00

score 2 · Answer 2 · answered Apr 16 '15 at 18:51

2

I've found that isDisplayed() returns a promise, and in the .then, you are passed the boolean. So looks more like this:

$('#foo').isDisplayed().then(function(isDisplaying) {
    expect(isDisplaying).toBe(true);
  });

answered Apr 16 '15 at 18:51

Matt Goo

1,118
1
11
12

1

That's true but in this case, expect will automatically resolve the promise and only then do the actual assertion, so there is no need to use `then()` here. – finspin Jul 27 '15 at 08:28
ah so it with expect its implied? So what would I expect for in that case? What would it look like? I won't have a handle on the boolean passed back from the `.then`. – Matt Goo Jul 27 '15 at 22:23
This works for me, however I couldn't use .toBe(true/false) on expect, it said it wasn't a property, expect(!isDisplaying) worked though. – ConorJohn Jul 25 '17 at 09:56

score 1 · Answer 3 · answered Jul 07 '15 at 11:23

1

expect knows to deal with promise so the following works.

expect($('#foo').isDisplayed()).toBe(true);

answered Jul 07 '15 at 11:23

Eyal

46
3

score 1 · Answer 4 · answered Dec 14 '15 at 16:58

Assuming you have many elements by the same id/class and you want to assert on the count of number of visible elements

var elements = element.all(by.id('foo'))
               .filter(function(el){
                    return el.isDisplayed();
                });

expect(elements.count()).toEqual(2);

How can I check if an element is visible using Protractor?

4 Answers4