Understanding of Protractor Promises

Table of contents

Reading Time: 3 minutes

Introduction

In the previous blog, we discussed how can the UI elements be detected using the Protractor locator strategies.

Now that we know that protractor works with Javascript, which is asynchronous in nature, so the sequence of execution is sometimes disrupted and thus the expected results are not returned. Javascript is a single-threaded scripting language, this means that two bits of code cannot run at the same time; they have to run one after another and also activity of one sometimes hampers the activity of another. That’s when a Promise comes into the picture.

Let us consider a real-life programming example.

There is some ‘generating code’ that loads the data over a network and ‘engrossing code’ that wants the results when it is ready. So the engrossing code’s input is dependent on the generating code’s output.

A promise is a significant Javascript code that links or channels the generating code and engrossing code.

The generating/producing code takes as long as the time required to produce the promised result and “Protractor promise” makes that result available to all the consuming codes.

However, this analogy is not up to the mark as it is not that easy in terms of java script promise mechanism.

They have over-and-above aspects and drawbacks.

Syntax

To begin with basics, let us first see the contructor syntax :

let promise = new Promise(executor);

Here, executer is any function which is passed with resolve or reject. A promise is not necessarily recognized when it is created. It helps the code to associate you to handle the asynchronous events and thus making their execution successful by promising to supply the value needed by the code. When executed receives the result (sooner or later), it calls one of the callbacks :

• resolve: It is the expected VALUE, returned by the executor.
• reject: It is an ERROR object, returned by the executor.

States of a Promise

A promise can be:

fulfilled – The action relating to the promise is successful
rejected – The action relating to the promise is failed
pending – Hasn’t fulfilled or rejected yet
settled – Has fulfilled or rejected

Initially, every promise is the pending state. It then changes to fulfilled when resolved callback is called otherwise it changes to rejected.

Example

Here for an instance, I will be injecting setTimeout in the generating code. This is an example of fulfilled promise.

let promise = new Promise(function(resolve, reject) {
// the function is executed automatically when the promise is constructed
// after 1 second signal that the job is done with the result "done"
setTimeout(()=>resolve("done"),1000);
});

Here, executor is rejecting the promise

let promise = new Promise(function(resolve, reject) {
// after 1 second signal that the job is finished with an error
setTimeout(()=>reject(newError("Whoops!")),1000);
});

Grossing code : then, catch, finally

• .then

let promise =new Promise(function(resolve, reject){
setTimeout(()=> resolve("done!"),1000);
});
// resolve runs the first function in .then
promise.then(
result => alert(result),// shows "done!" after 1 second
error => alert(error)// doesn't run
);

• .catch

let promise = new Promise((resolve, reject) => {
setTimeout(()=> reject(new Error("Whoops!")),1000);
});
// .catch(f) is the same as .then(null, f)
promise.catch(alert);// shows "Error: Whoops!" after 1 second

• .finally

new Promise((resolve, reject) => {
/* do something that takes time, and then call resolve/reject */
})
// runs when the promise is settled, doesn't matter successfully or not
.finally(()=> stop loading indicator)
.then(result => show result, err => show error)