How exactly does '.then' function work in the Protractor E2E testing of an angularjs?

Question

I am verifying an element is displayed or not in the webpage.

element(by.css('<css>')).isDisplayed()

if its displayed it should return with 'true'. but when for the code below

getElement = element(by.css('<css>'))
console.log(getElement.isDisplayed())

prints the entire element in the console output. like below

{ ptor_:
   { controlFlow: [Function],
     schedule: [Function],
     setFileDetector: [Function],
     getSession: [Function],
     getCapabilities: [Function],
     quit: [Function],
     actions: [Function],
     touchActions: [Function],
     executeScript: [Function],
     executeAsyncScript: [Function],
     call: [Function],
     wait: [Function],
     sleep: [Function],
     getWindowHandle: [Function],
     getAllWindowHandles: [Function],
     getPageSource: [Function],
     close: [Function],
     getCurrentUrl: [Function],

 .....................................................................

but, when used with .then function its working fine as expected..

getElement.isDisplayed().then(function(isVisible){
    if(isVisible){
        <code to run if element is visible>
    }
}

its working fine if the element is visible.

So,How exactly the .then(function()) is working here ??

Answer 1

The .then indicates that the function is a promise .

Every promise starts in a pending state and may either be successfully resolved with a value or it may be rejected to designate an error.

Promises are used when things happen asynchronously that is the case for example when you don't know how long it would take you to find a certain element on your page or fetch data from a server ( eg $http.get ). But you need this element or the data for your following code to work.

Take promise literally, you promise a value or an eventual value. The .then calls on this promise to be resolved and returns the value to be used after being resolved.

In Protractor a simple function call with a promise function always returns the Protractor driver (object) which is what you see in your log output. Almost all public Protractor functions are promises except the ElementFinder functions in the newer Protractor versions (2.0++).

Also Protractor's expect can resolve all (protractor) promise functions automatically.

expect(element(by.css('<css>')).isDisplayed()).toBe(true);

Anywhere else you would need to resolve the function manually. There is also a special case with the .isDisplayed() function, this function only works when the element is present in the DOM. If it's not (eg ngIf) .isDisplayed() throws an error, you would use .isElementPresent() instead.

Answer 2

always look for return type of methods you use in protractor API site ( https://angular.github.io/protractor/#/api ). This is what isDisplayed returns !webdriver.promise.Promise.(boolean) If it's a promise with a type in braces means it will return a value of mentioned type once promise is resolved using .then function will wait for the promise to complete and you can pass on the value (boolean) to function as a parameter you calling inside .then . Please note that it 's not necessary to always use .then but only when you would need to do something with the value you get after resolution of promise like asserting with expected value or printing in console or while debugging. Hope this helps