How to manually use a protractor ExpectedCondition?

Question

I'm new to protractor and I want to create an expect like this:

expect(elementIsVisible).toBe(true);

I saw that protractor has EC (expected conditions), namely EC.visibilityOf which seems to be what I'm looking for. However, I'm not entirely sure what visibilityOf returns.

I find the docs very obscure:

RETURNS
+-----------+-------------------------------------------------------------------------------------------+
|   Type    |                                        Description                                        |
+-----------+-------------------------------------------------------------------------------------------+
| !function | An expected condition that returns a promise representing whether the element is visible. |
+-----------+-------------------------------------------------------------------------------------------+

What it returns? A Promise or an expected condition?

Well, considering that chaining a .then triggers then is not a function, it seems it returns an expected condition. But what's that?

In all Protractor documentation examples, this return value is used in browser.wait functions.

I don't want to use it like that, I want to have a true/false value in my expect condition.

If I try to find more information from Selenium's examples, Protractor (a javascript implementation) redirects to Java documentation...

And why can't you use `browser.wait(EC.visibilityOf(xxx), 5000); expect(xxx.isDisplayed()).toBe(true)` where `EC` is `var EC = protractor.ExpectedConditions;`? — FCin, Apr 26 '18 at 12:56
`xxx.isDisplayed()` will do. Based on the docs, it is not clear that `EC.visibilityOf(xxx)` can exclusively be used in a `wait` or equivalent API method. So one cannot use it manually? Or is too hacky and not worth it? — Adelin, Apr 26 '18 at 12:58
You can look at the source code for [visiblityof](https://github.com/angular/protractor/blob/d74356b809feb0f1342d42622247e233860e30d3/lib/expectedConditions.ts#L393). It basically returns `elementFinder.isDisplayed().then(passBoolean, falseIfMissing);`, so you can play with this, but either way you will have to wait for the control to be visible, so I don't see a reason to overcomplicate this. `visibilityof` cannot wait in itself, it need a function `browser.wait` to wait, so you need this anyway. — FCin, Apr 26 '18 at 13:16

score 1 · Accepted Answer · answered Apr 27 '18 at 12:23

visibilityOf and all other ExpectedConditions return functions. You can call this function, and you will get Promise<boolean> . Basically all ExpectedConditions are predicates - functions, that when called return promise resolved to boolean (should be no exceptions thrown). So basically you can try to use something like this:

let shouldBeVisible = protractor.ExpectedConditions.visibilityOf
expect(
    shouldBeVisible($('div.button'))() // Notice () - this where we are manually calling predicate function to get boolean result
).toBeTruthy('Element div.button should be visible');

But lucky you - if you are using JasmineJS - you can try my lib to assert visibility of elements: https://github.com/Xotabu4/jasmine-protractor-matchers

So you will get not just checking element visibility, but matcher will automatically wait for a while to element to become visible. Check this:

expect($('div.button')).toAppear()

How to manually use a protractor ExpectedCondition?

1 Answers1