DEV Community: Asheesh Misra

JavaScript for Testers - Part 2 (Callbacks, Promises and async-await)

Asheesh Misra — Sun, 15 Oct 2023 19:07:49 +0000

Namaskaar 🙏 🙂

This is a two part tutorial on getting up and running with JavaScript, for the testers, so that they can leverage this knowledge while writing test automation scripts.

The way this tutorial has been planned is

We begin with covering JavaScript Basics, especially ES6 (that’s part 1)
Then we deal with Asynchronous JS (that’s this tutorial)

This is a beginner friendly tutorial for the testers by a tester.

In this part of the tutorial, we focus on Asynchronous JavaScript. To understand the concepts myself, I referred to MDN Docs, multiple videos on Youtube, Udemy and Linkedin learning. I would like to make special mention of Colt Steele and his Udemy course, The Web Developer Bootcamp. Colt is one of the best out there and his this course is like a gold mine for any person who wants to learns Web Development. Some of the examples used in this tutorial draw inspiration from Colt's course.

If you feel lost or confused at any time while reading through this part of tutorial, don't feel bad. This part is indeed confusing. Most of the experts recommend doing it multiple times (reading the stuff and practicing) and it will start making sense. 👼

Introduction

JavaScript is a synchronous, single threaded and blocking language. Synchronous means that only one operation can be in progress at a time. Blocking means that no matter how long a previous process takes, the subsequent process won't start until former is completed. A Thread is simply a process that our JavaScript program can use to run a task. Each thread can do only one task at a time. JavaScript has just one thread called the main thread for executing any code.

In simple words this means that we can have only one operation in progress at a time.

Consider the following example

const founders = () => console.info("Batman founded the Justice League with Superman and Wonder Woman");
const team = () => console.info("Aquaman, Green Lantern, Shazam, Flash, Cyborg joined Justice League");
const war = () => console.info("Justice League fought the war with Darkseid and saved earth from his wrath");

founders();
team();
war();

/*
Output:
Batman founded the Justice League with Superman and Wonder  Woman
Aquaman, Green Lantern, Shazam, Flash, Cyborg joined Justice League
Justice League fought a war with Darkseid and saved earth from his wrath
*/

First we invoke the founders() function which gets added to the callstack. It returns a value and then gets popped off the callstack. Then we invoke team() function which gets pushed to the callstack, it returns a value and get popped out of the callstack. The same happens to the war() function.

Now, imagine that we had some function that fetched data from an API. We don't really know how long is it going to take. Let's assume that it takes 5 seconds for the server to respond. This would mean that the user will have to wait for 5 seconds with an unresponsive website. We would not like that to be the case and therefore, would want to make the function asynchronous in order to prevent the function from blocking the rest of our code.

Asynchronous means that the function(s) is running in the background, performing its tasks, while the other part of our code can still keep running. We should think of asynchronous tasks as tasks that can start now and finish their execution later.

To implement asynchronous code, JavaScript alone is not enough. We need new pieces which are outside the JavaScript to help us write asynchronous code an which is where Web Browsers come into play. Web Browsers define functions and APIs that allow us to register functions that should NOT be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs.

Event, for example, could be

Passage of time (setTimeOut or setInterval), OR
User's interaction with the mouse (addEventListener), OR
Arrival of data over the network (callbacks, promises and async-await)

We can make our code do several things at the same time instead of waiting for main thread to finish.

Common Patterns of Asynchronous Programming

3 most common patterns of asynchronous programming in JavaScript are:

Callbacks
Promises
async - await

Let's learn about them one by one.

Callbacks

What are they? In JavaScript, functions are first-class objects. That is, we can work with them in the same way we work with other objects, like assigning them to variables and passing them as arguments into other functions.

A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. (MDN Docs)

A callback function is a function that is passed as an argument to another function, to be 'called back' at a later time. That is, it is then invoked inside the outer function to complete some kind of routine or action.

Consider the following example. It shows a synchronous callback.

//Old Flash (somewhere in 1940s or 50s) was 'Jay Garrick'
const realNameOfDcHero= (name) =>{
    let realName = "Jay Garrick";
    if (name === "Superman")
        realName = "Clark Kent";
    else if (name == "Batman")
        realName = "Bruce Wayne";
    else if (name == "Wonder Woman")
        realName = "Diana";
    else if (name == "Flash")
        realName = "Barry Allen";
    console.log(`Real name of ${name} is ${realName}`);
}

const getHeroName= (whatsTheName, callback) =>{
    console.log("Getting the Hero's Name. Sit Tight.");
    callback(whatsTheName);
}

console.info("Start");
getHeroName("Wonder Woman", realNameOfDcHero);
console.info("End");

/*
Output:
Start
Getting the Hero's Name. Sit Tight.
Real name of Wonder Woman is Diana
End
*/

NOTE: We need not specify the realNameOfDcHero in the getHeroName function's definition. We could have passed anything, like heroName or callback or cb etc.

Before we see the asynchronous callback example, we need to understand setTimeout() function. The setTimeout is a JavaScript function that takes two parameters. The first parameter is another function, and the second is the time, in milliseconds, after which that function (passed as first parameter) should be executed.

Ok, now let's dive into the example,

//Example - Asynchronous Callback
const realNameOfDcHero= (name) =>{
    let realName = "Jay Garrick";
    if (name === "Superman")
        realName = "Clark Kent";
    else if (name == "Batman")
        realName = "Bruce Wayne";
    else if (name == "Wonder Woman")
        realName = "Diana";
    else if (name == "Flash")
        realName = "Barry Allen";
    console.log(`Real name of ${name} is ${realName}`);
}

const getHeroName= (whatsTheName, realNameOfDcHero) =>{
    console.log("Getting the Hero's Name. Sit Tight.");
    setTimeout(()=>{
        realNameOfDcHero(whatsTheName);
    },2000);
}

console.info("Start");
getHeroName("Flash", realNameOfDcHero);
console.info("End");

In the example above, we have used the setTimeout function which would execute the callback function after a delay of 2000 milliseconds (or 2 secs). This results in following output:

/*
Output:
Start
Getting the Hero's Name. Sit Tight.
End
Real name of Flash is Barry Allen
*/

As we can see the statement in the example above executed asynchronously. So now, we know how to simulate asynchronous behaviour in JS.

Let's see another example. For this example, we will need a web page and a .css file also apart from the .js file. Therefore, we will be creating following 3 files

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Learning Async JS - Callbacks</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <button>Click Me!</button>
    <script src="js/asyncJs.js"></script>
</body>
</html>

/* css/style.css */
button{
    background-color:aqua;
}

.secondaryColor{
    background-color: coral;
    font-family:'Segoe UI';
}

// js/asyncJs.js
const btn = document.querySelector('button');

function toggle(){
    btn.classList.toggle('secondaryColor');
}

toggle();

When we finish creating these files in the order as shown above and save changes and we load the html file in browser, we observe that the colour of button changes immediately. In other words, the toggle() is called instantaneously as soon as the page (re)loads.

What if we don't want this? What if we want it to be called when the button is clicked?

To accomplish this we will need to add an eventlistener and add a callback to it. How?

// js/asyncJs.js
const button = document.querySelector('button');

function toggle(){
    button.classList.toggle('secondaryColor');
}

//toggle();   

button.addEventListener('click', toggle);

We have used toggle() function as a callback function in the addEventListener() on button .

By the way, the above js code is same as this 😄

//we have used anonymous function
const button = document.querySelector('button');

button.addEventListener('click', function (){
    button.classList.toggle('secondaryColor');
});

and this 😃

// we have used arrow function
const button = document.querySelector('button');
button.addEventListener('click', () =>{
    button.classList.toggle('secondaryColor');
});

Nested Callbacks

Consider we want to see the rainbow colors displayed on our web page in the order : VIBGYOR.

To do so, we write the following code in our JS file

document.body.style.backgroundColor = "violet";
document.body.style.backgroundColor = "indigo";
document.body.style.backgroundColor = "blue";
document.body.style.backgroundColor = "green";
document.body.style.backgroundColor = "yellow";
document.body.style.backgroundColor = "orange";
document.body.style.backgroundColor = "red";

When we reload our web page, we see "red" color only. The script ran so fast that the background colour of web page changed to red before we could even blink.

Let's try to solve this problem by using asynchronous callbacks. We will start small. Delete the above code from the JS file, paste the code below, save changes and refresh the web page.

setTimeout(()=>{
    document.body.style.backgroundColor = "orange";
},1000);

setTimeout(()=>{
    document.body.style.backgroundColor = "red";
},2000);

Ok, it worked 🙌. We saw orange first and then after a second we saw red.

Let's scale it up.

setTimeout(()=>{
    document.body.style.backgroundColor = "violet";
},1000);

setTimeout(()=>{
    document.body.style.backgroundColor = "indigo";
},2000);

setTimeout(()=>{
    document.body.style.backgroundColor = "blue";
},3000);

setTimeout(()=>{
    document.body.style.backgroundColor = "green";
},4000);

setTimeout(()=>{
    document.body.style.backgroundColor = "yellow";
},5000);

setTimeout(()=>{
    document.body.style.backgroundColor = "orange";
},6000);

setTimeout(()=>{
    document.body.style.backgroundColor = "red";
},7000);

When we save the above change to our JS file and reload web page, we see the change in color happen gradually.

However, there is a problem in the above example 😟. We need to keep track of how many milliseconds do we need to wait before displaying a specific color. We can get rid of keeping track of this by nesting the callbacks, like so. Again, starting small

setTimeout(() => {
    document.body.style.backgroundColor = "violet";
    setTimeout(() => {
        document.body.style.backgroundColor = "indigo";
    }, 1000);
}, 1000);

This works!, let's paint the whole rainbow now 🌈.

setTimeout(() => {
    document.body.style.backgroundColor = "violet";
    setTimeout(() => {
        document.body.style.backgroundColor = "indigo";
        setTimeout(() => {
            document.body.style.backgroundColor = "blue";
            setTimeout(() => {
                document.body.style.backgroundColor = "green";
                setTimeout(() => {
                    document.body.style.backgroundColor = "yellow";
                    setTimeout(() => {
                        document.body.style.backgroundColor = "orange";
                        setTimeout(() => {
                            document.body.style.backgroundColor = "red";
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

Wow! this works. However, as we can see, we ended up writing something which is hard to read and difficult to maintain. Such a piece of code is referred to as 'Callback Hell' 😵.

Let's take one more example and then we will (re) solve the 'callback hell' problem, I 'promise' 😄. Consider making request(s) to a web API. We do not know how much time would it take for the response to come. We might want to do something based upon the response but we would need to wait for the response first. Also, it is not necessary that a response is returned (i.e., request is successful). Our request may timeout due to multiple reasons like network congestion, server busy, site down, incorrect credentials etc.. (request failed). A common pattern (before promises arrived) to make API requests was to pass in two call backs, one would execute if request was successful and other if request failed; and then if the request was successful we may do more request which would result in nesting and soon the code would look like this:

requestDataFromAPI(
    ()=>{
      //this would execute if successful
      requestDataFromAnotherAPI(
        ()=>{
            //this would execute if successful
            requestDataFromYetAnotherAPI(
                ()=>{
                    //this would execute if successful
                },

                () =>{
                    //this would execute if failed
                }
            );
          },
        () =>{
            //this would execute if failed
          }
        );  
    },
    () => {
    //this would execute if failed
    }
  );

This is not only very ugly looking spaghetti code but difficult to understand and maintain also. Let's see a practical implementation:

const requestDataFromAPI = (url, success, failure) => {
  const timeInterval = Math.floor(Math.random() * 3000) + 500;
  setTimeout(() => {
    if (timeInterval > 3000) {
      failure(`Couldn't get the data.`);
    } else {
      success(`Data Retrieved: ${url}`);
    }
  }, timeInterval);
};

The function above fakes request to a fictional API based on DC Comics characters. It also takes in two callbacks and inside the function we check for a variable timeInterval and based upon its value, execute the appropriate callback. Now, let's use it

requestDataFromAPI(
  "dccomics.com/trinity",
  () => {
    //this callback will execute when the request is successful
    console.log("DC Trinity: Superman, Wonder Woman, Batman");
    requestDataFromAPI(
      "dccomics.com/citizensOfThemyscira",
      () => {
        //this callback with execute when the request is successful
        console.log("Queen Hippolyta, Artemis, Cassie Wonder Girl, Donna Troy");
        requestDataFromAPI(
          "dccomics.com/greenlanterncorps",
          () => {
            console.log(
              "Members of Green Lantern Corps; John Stewart, Jessica Cruz, Hal Jordan, AbinSur, Alan Scott, Guy Gardener"
            );
          },
          () => {
            console.log(
              "Oh No!, Sinestro has brought the green lantern corps under his control of fear."
            );
          }
        );
      },
      () => {
        //this callback will execute when the request fails
        console.log("Alas!, Ares won and took over Themyscira");
      }
    );
  },
  () => {
    //this callback will execute when the request fails
    console.log("Trinity is gone, all hail Darkseid!.");
  }
);

In the code above, we first make request to an endpoint of our fictional API dccomics.com to fetch members of Justice League, popularly called as the 'trinity'. If the request is successful, we make request to a different endpoint and if that too is successful we make request to yet another endpoint. When we run this, this is what we see in the browser (the output is based upon random values and therefore is random, i.e. you may not get exactly the same output but it you run multiple times, you will see each of the possible combination).

If the above image is not clear to you, I would encourage you to paste the code for 'requestDataFromAPI()' definition and its usage in async.js file we created above, into your js file, save changes, refresh the web page and check the console tab in the browser.

In the code above we observe the nesting of callbacks and I am sure you would appreciate how difficult it is to understand and debug. 😶

ES 6 made a promise 😅 to get us out of this callback hell. Let's see what that is 😃

Promise

As per MDN docs,

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.

fulfilled: meaning that the operation was completed successfully.

rejected: meaning that the operation failed.

The lifecycle of a Promise is as follows:

To understand promise better let's use promise to write the above requestDataFromAPI function and then make use of it using promises.

const requestDataFromAPI = (url) => {
  return new Promise((resolve, reject) => {
    const timeInterval = Math.floor(Math.random() * 5000) + 500;
    setTimeout(() => {
      if (timeInterval > 3000) {
        reject(`Couldn't get the data.`);
      } else {
        resolve(`Data Retrieved: ${url}`);
      }
    }, timeInterval);
  });
};

The function above takes in url as a parameter. No callbacks here. Inside its body, the function returns a Promise, which however takes in two callbacks. One would be executed if the promise got resolved and other if it did not, in other words it got rejected.

Let's call this function in our browser's console and save the response to a variable to better understand. After a couple of rounds of execution, we observe, the promise is initially in pending state and after the timeInterval has elapsed, it resolves to either a fulfilled state or a rejected state.

Now, let's convert the callback hell in code examples above (well… almost) into promises.

For the rainbow example, let's first write the function to change the background colour of the webpage, in our JS file.

const paintTheSky = (colour, timeInterval) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = colour;
      resolve();
    }, timeInterval);
  });
};

The function paintTheSky takes two parameters the color and the timeInterval. Inside the function, we are creating a new promise which also takes in two parameters. First one is a callback which executes when the promise is resolved and the second is a callback which executes when the promise is rejected. They can have any names, not necessarily resolve and reject, but it's just that these names are intuitive and make our code readable. We are calling setTimeout(), which waits for 1 second, changes the color of web page and then resolves the promise.

Since paintTheSky function is returning a promise, we can call .then() on it, like so

paintTheSky("violet",1000)
  .then()

and in this then() we can add a callback for paintTheSky().

paintTheSky("violet",1000)
  .then(()=>{
      paintTheSky("indigo",1000);
});

If we add a return to the paintTheSky() called in the above fragment, we will effectively be returning a promise from .then(). So,

paintTheSky("violet",1000)
  .then(()=>{
      return paintTheSky("indigo",1000);
});

the code above is same as

paintTheSky("violet",1000)
  .then(()=> paintTheSky("indigo",1000)); /*using implicit return*/

Since we want more colours of the rainbow to be printed, we can simply chain more .then() for the purpose, effectively achieving the same result as we did above, when we used callbacks only.

const paintTheSky = (colour, timeInterval) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = colour;
      resolve();
    }, timeInterval);
  });
};

paintTheSky("violet", 1000)
  .then(() => paintTheSky("indigo", 1000))
  .then(() => paintTheSky("blue", 1000))
  .then(() => paintTheSky("green", 1000))
  .then(() => paintTheSky("yellow", 1000))
  .then(() => paintTheSky("orange", 1000))
  .then(() => paintTheSky("red", 1000));

In the above code we are calling paintTheSky() and then since its returns a promise, we are using .then() to call the it again and then again and again. We can immediately see that not only have we flattened out the code structure, it has become very easy to read as well.

This was easy. Why? we didn't reject the promise, there was no reason to. However, there will be situations when we might need to reject it as well. In the DC callback hell example above, we made provisions for what to do if the (fake) API responded in time and otherwise.

To rewrite that example, using promises, we will first rewrite the requestDataFromAPI(), like so,

const requestDataFromAPI = (url) => {
  return new Promise((resolve, reject) => {
    const timeInterval = Math.floor(Math.random() * 4000) + 500;
    setTimeout(() => {
      if (timeInterval > 3000) {
        reject(`Couldn't get the data.`);
      } else {
        resolve(`Data Retrieved: ${url}`);
      }
    }, timeInterval);
  });
};

The requestDataFromAPI() above takes in one parameter, the url (though we don't do anything with it, fake api request remember 😅). Inside the function, we are creating a new promise which takes in two parameters. First one is a callback which executes when the promise is resolved and the second is a callback which executes when the promise is rejected. Depending upon the if condition, that evaluates the comparison between timeInterval value and 3000, we either resolve the promise or reject it.

const requestDataFromAPI = (url) => {
  return new Promise((resolve, reject) => {
    const timeInterval = Math.floor(Math.random() * 4000) + 500;
    setTimeout(() => {
      if (timeInterval > 3000) {
        reject(`Couldn't get the data.`);
      } else {
        resolve(`Data Retrieved: ${url}`);
      }
    }, timeInterval);
  });
};

requestDataFromAPI("dccomics.com/trinity") //returns a thenable object
  /* if promise gets resolved, then() is executed.*/  
  .then(() => {
    console.log("DC Trinity: Superman, Wonder Woman, Batman");
  })
  /* if  promise gets rejected, catch() is executed */
  .catch(() => {
    console.log("Trinity is gone, all hail Darkseid!.");
  });

Since we have to either resolve or reject on each API endpoint call, we won't be able to chain the promises (we will see how can we chain the promises for this example and at what cost, a bit later). After adding code for the remaining two endpoints, the complete code looks like this

const requestDataFromAPI = (url) => {
  return new Promise((resolve, reject) => {
    const timeInterval = Math.floor(Math.random() * 4000) + 500;
    setTimeout(() => {
      if (timeInterval > 3000) {
        reject(`Couldn't get the data.`);
      } else {
        resolve(`Data Retrieved: ${url}`);
      }
    }, timeInterval);
  });
};

requestDataFromAPI("dccomics.com/trinity") //returns a thenable object
  .then(() => {
    console.log("DC Trinity: Superman, Wonder Woman, Batman");
  })
  .catch(() => {
    console.log("Trinity is gone, all hail Darkseid!.");
  });

requestDataFromAPI("dccomics.com/citizensOfThemyscira")
  .then(() => {
    console.log(
      "Citizens of Themyscira: Queen Hippolyta, Artemis, Cassie Wonder Girl, Donna Troy"
    );
  })
  .catch(() => {
    console.log("Alas!, Ares won and took over Themyscira");
  });

requestDataFromAPI("dccomics.com//greenlanterncorps")
  .then(() => {
    console.log(
      "Members of Green Lantern Corps; John Stewart, Jessica Cruz, Hal Jordan, AbinSur, Alan Scott, Guy Gardener"
    );
  })
  .catch(() => {
    console.log(
      "Oh No!, Sinestro has brought the green lantern corps under his control of fear."
    );
  });

and of course, we can further update it to this

const requestDataFromAPI = (url) => {
  return new Promise((resolve, reject) => {
    const timeInterval = Math.floor(Math.random() * 4000) + 500;
    setTimeout(() => {
      if (timeInterval > 3000) {
        reject(`Couldn't get the data.`);
      } else {
        resolve(`Data Retrieved: ${url}`);
      }
    }, timeInterval);
  });
};

requestDataFromAPI("dccomics.com/trinity") 
  .then(() => console.log("DC Trinity: Superman, Wonder Woman, Batman"))
  .catch(() => console.log("Trinity is gone, all hail Darkseid!."));

requestDataFromAPI("dccomics.com/citizensOfThemyscira")
  .then(() => console.log("Citizens of Themyscira: Queen Hippolyta, Artemis, Cassie Wonder Girl, Donna Troy"))
  .catch(() => console.log("Alas!, Ares won and took over Themyscira"));

requestDataFromAPI("dccomics.com//greenlanterncorps")
  .then(() => console.log("Members of Green Lantern Corps; John Stewart, Jessica Cruz, Hal Jordan, AbinSur, Alan Scott, Guy Gardener"))
  .catch(() => console.log("Oh No!, Sinestro has brought the green lantern corps under his control of fear."));

In the above code, we see how easy, clean and maintainable our code has become.

From a QA's point of view, we would, for most of our time be dealing with standard libraries (and the promises returned by their methods) like playwright, supertest, jest etc., and may never (or seldom) get to write ourselves something that creates and returns promises.
Therefore, instead of focusing on implementation of requestDataFromAPI(), we should be focusing on its usage. BUT then…, this is me, I leave the choice to you 😇

However, we can do the same stuff in a much neater way. Enter async-await 😇

async await

We will again read the MDN docs to learn what asyncand await are

The async function declaration declares an async function where the await keyword is permitted within the function body. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

In simpler words, what this means is that async and await are essentially syntactical sugar wrapped around promises to make them look easier. All we need to do is to put all of our asynchronous code inside a function, an async function. async functions allow us to write asynchronous code in a synchronous manner. How?

The async keyword allows the function to return a promise which would either get resolved or rejected, depending upon what we are doing inside that async function. That is, if the function returns a value, promise is said to be resolved with the returned value and if it throws an exception then it is said to be rejected with the exception value. Now, inside the async function, we write asynchronous statements using the keyword await. This keyword pauses the execution of the async function and waits for the promise to be resolved.

Consider the rainbow example, we can transform the promise based implementation to async-await, like this:

const paintTheSky = (colour, timeInterval) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = colour;
      resolve();
    }, timeInterval);
  });
};

const paintTheRainbow = async function () {
  await paintTheSky("violet", 1000);
  await paintTheSky("indigo", 1000);
  await paintTheSky("blue", 1000);
  await paintTheSky("green", 1000);
  await paintTheSky("yellow", 1000);
  await paintTheSky("orange", 1000);
  await paintTheSky("red", 1000);
};
paintTheRainbow();

In the example above, paintTheRainbow is an async function. Inside this function, we have multiple await statements in the order in which we want the colour transition to happen (same as in the callback and promise examples). The first await statement calls the paintTheSky() function and waits for the promise returned by the function to be resolved. After that, the next await statement is executed and after its promise has been resolved, the next one and so on.

We see that the same asynchronous code that we wrote using the callbacks (which had multi level nesting, thus the phrase 'callback hell') and the promises (which had atleast one level of nesting) has been written as if we are writing synchronous code. That's the beauty of async-await.
When we use JavaScript for automation (frontend/ backend), in later tutorials, we shall write almost all of our tests (and most of the helpers/ utility functions) using async-await.

We can convert the promise version of DC example also into its corresponding async-await implementation, where we will observe that handling of promise rejection in case async- await is pretty similar to the way it was in the promise example above (async-await is just syntactic sugar on promises, remember 😅).

const dcUniverse = async () => {
  try {
    await requestDataFromAPI("dccomics.com/trinity");
    console.log("DC Trinity: Superman, Wonder Woman, Batman");
  } catch (error) {
    console.log(`${error} Trinity is gone, all hail Darkseid!.`);
  }

  try {
    await requestDataFromAPI("dccomics.com/citizensOfThemyscira");
    console.log(
      "Citizens of Themyscira: Queen Hippolyta, Artemis, Cassie Wonder Girl, Donna Troy"
    );
  } catch (error) {
    console.log(`${error} Alas!, Ares won and took over Themyscira`);
  }

  try {
    await requestDataFromAPI("dccomics.com/greenlanterncorps");
    console.log(
      "Members of Green Lantern Corps; John Stewart, Jessica Cruz, Hal Jordan, AbinSur, Alan Scott, Guy Gardener"
    );
  } catch (error) {
    console.log(
      `${error} Oh No!, Sinestro has brought the green lantern corps under his control of fear.`
    );
  } finally {
    console.log("Heroes shall rise again.");
  }
};

dcUniverse();

Outro

In this part of the tutorial, we covered the asynchronous javascript concepts including common patterns used for the purpose. The knowledge of JavaScript fundamentals, we acquired from the tutorial should help us immensely when we take our plunge in automation testing, both frontend and backend.

As always, please do share your thoughts and feedback on this tutorial. I will surely make amends where ever necessary and it will help me improve.

JavaScript for Testers - Part 1 (Basics)

Asheesh Misra — Fri, 22 Sep 2023 19:19:01 +0000

Namaskaar 🙏 🙂

This is a two part tutorial on getting up and running with JavaScript, for the testers, so that they can leverage this knowledge while writing test automation scripts.

The way this tutorial has been planned is

We begin with covering JavaScript Basics, especially ES6 (that’s this tutorial)
Then we deal with Asynchronous JS (that’s part 2)

Having laid the itinerary of what we are going to do and learn in this tutorial, there WILL be a lot of other things that we will do and learn as we progress through the tutorial.

This is a beginner friendly tutorial for the testers by a tester. Let’s start

Disclaimer

I have used DC Universe characters heavily in this multi part tutorial and purely for educational purposes 👼 . They are all proprietary to DC Comics.

Intro

Many of you may ask why should I even care about JavaScript, or why learn JavaScript before starting on an Automation Tool (Cypress, Playwright, Selenium)?

I would humbly say that if you are looking to really understand what every sentence of the automation script written by someone else means, if you want to be able to write one by yourself from scratch, if you want to write maintainable, reusable automation scripts, this is the way to go.

What do we need (aka Setup)

Node JS (install the LTS version that conforms to your OS and check for its successful installation by typing in your terminal node -v and npm -v. If you get corresponding version numbers back for both commands then Node JS has been installed successfully.

VS Code and then optionally install Prettier Extension for VS Code through VS Code extensions. Search for Prettier - Code formatter

That’s it 😄

JavaScript Basics

JavaScript (hereafter JS) has been the language of the web for a long long time and has evolved to meet the challenges of ever changing requirements of the users on the Internet.

According to MDN Web Docs

“JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.”

The umbrella term “JavaScript” as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model).

In this part of the tutorial, we will be learning about ES6 (ECMAScript 2015 and its successors) features which will be very helpful later when we start writing test automation scripts.

How and where shall we run the JS Code?

To answer this question, let’s start with creating a new NodeJS project, to store our JS files. We will open terminal (command prompt in Windows) and cd to the folder/ directory where we want/ can create a folder to keep the .js files we will be using for our learning.

mkdir JSBasics
cd JSBasics

Then we will do

npm init

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (jsbasics)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/asheesh/Desktop/JSBasics/package.json:

{
 "name": "jsbasics",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}


Is this OK? (yes)

On being asked about package name, version, test command, etc., simply press ‘Enter’ to accept the default value (or to leave it blank). Since all of this information being asked, is going to be stored in a file called package.json (created by NodeJS in the current working directory), we can always edit it later, if needed, for our purpose.

The command code . loads the VS Code with our current working directory as the ‘open folder’.

We will create a couple of folders inside our JSBasics folder, namely js, css and then within _js folder create a .js file (I have named it concepts101.js, you may use name of your choice). To run the JS file we will open a terminal in VS Code itself by pressing Ctrl + Shift + BackTick (press the tilde(~) key) . In the terminal, type

node js/concepts101.js

(you will obviously be using the name of your .js file instead of concepts.js) and observe the output.

const, let and var

All of these keywords are used to declare variables in JS. let and const keywords got introduced in ES6.

const variables cannot be reassigned. For example,

const name="Hal Jordan";
console.log(name);
name = "Green Lantern";    // will give an error


-------------------------------------------------------------
Output:
asheesh@Asheeshs-MacBook-Pro concepts % node js/concepts101.js
Hal Jordan
/Users/asheesh/D/D/JSWorkspace/concepts/js/concepts101.js:7
name = "Green Lantern";
    ^
TypeError: Assignment to constant variable.

notice the TypeError line.

let variables can be reassigned. For example,

for(let i=0;i<5;i++){
   console.log("JS is good but TS is awesome");
}

but if we update the above example as following, the last line will error out

for(let i=0;i<5;i++){
     console.log("JS is good but TS is awesome");
}
console.log("Current value of i is: ", i); //will give an error

//-----------------------------------------------------------
Output:
asheesh@Asheeshs-MacBook-Pro concepts % node js/concepts101.js
JS is good but TS is awesome
JS is good but TS is awesome
JS is good but TS is awesome
JS is good but TS is awesome
JS is good but TS is awesome
/Users/asheesh/D/D/JSWorkspace/concepts/js/concepts101.js:16
console.log("Current value of i is: ", i);
                                      ^

ReferenceError: i is not defined

this is so because both let and const variables are ‘block scoped’. They do not exist outside the block in which they have been declared.

var variables can be reassigned and are not block scoped. This keyword was the only way to declare variables in JS before 2015. Consider the following example,

for(var i=0;i<5;i++){
console.log("JS is good and learning it make me feel awesome");
}
console.log("Current value of i is: ", i);

//-----------------------------------------------------------
Output:
JS is good and learning it make me feel  awesome
JS is good and learning it make me feel  awesome
JS is good and learning it make me feel  awesome
JS is good and learning it make me feel  awesome
JS is good and learning it make me feel  awesome
Current value of i is:  5

Arrow Functions

In ES6, very simple and concise syntax for creating functions was introduced. To be precise they are arrow function expressions and are much cleaner, shorter than functions in classic JS. Let’s see an example

// Normal JS Function
function heroIdentity(heroName, realName){
   return `Name: ${heroName}, Age: ${realName}`;
}
console.log(heroIdentity('Batman','Bruce Wayne'));

// Arrow Function
const heroIdentity = (heroName, realName) =>{
   return `Name: ${heroName}, Age: ${realName}`;
}

console.log(heroIdentity('Batman','Bruce Wayne'));

The normal JS function takes in two parameters and returns their values in a formatted manner. Observe the _single ‘tick’ _used in the return statement. This is called a ‘template literal’. We will talk about it in a bit. For now just understand it helps us print text plus value of the variables specified in it.

The arrow function as you would observe is anonymous (i.e. without any name) and is assigned to a const variable. That big fat arrow (=>) indicates it is an arrow function. It also takes in two parameters and returns their values in a formatted manner.

We can write the same function as below (since it has only one line of code in it). As you would observe that we removed the braces and put the function in a single line.

// arrow function
const heroIdentity = (name, age) => `Name: ${name}, Age: ${age}`;

// its usage
console.log(heroIdentity('Batman','Bruce Wayne'));

If only one parameter is being passed to the arrow function, we can remove the parentheses also. For example

// arrow function
const heroIdentity = name => `Name: ${name}`;
// its usage
console.log(heroIdentity("Bruce Wayne"));

Template Literals

According to MDN Docs,

Template literals are literals delimited with backtick characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

We have already used template literals in our previous examples. Let’s see one more example

// 'api.nationalize.io' is a free API which tries to predict the nationality of the input name.
const baseUrl ="https://api.nationalize.io"

fetch(`${baseUrl}?name=Asheesh`) // => "https://api.nationalize.io?name=Asheesh"
.then(res => res.json())
.then(json => console.log(json));

fetch(`${baseUrl}/?name=Ronaldo`)
.then(res => res.json())
.then(json => console.log(json));

fetch(`${baseUrl}/?name=Ratnasinghe`)
.then(res => res.json())
.then(json => console.log(json));


//-----------------------------------------------------------
Output
(node:66694) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

{
 country: [ { country_id: 'LK', probability: 1 } ],
 name: 'Ratnasinghe'
}
{
 country: [
   { country_id: 'BR', probability: 0.277 },
   { country_id: 'PH', probability: 0.09 },
   { country_id: 'GT', probability: 0.03 },
   { country_id: 'PE', probability: 0.028 },
   { country_id: 'JP', probability: 0.023 }
 ],
 name: 'Ronaldo'
}
{
 country: [
   { country_id: 'IN', probability: 0.554 },
   { country_id: 'AE', probability: 0.092 },
   { country_id: 'SQ', probability: 0.075 },
   { country_id: 'KE', probability: 0.029 },
   { country_id: 'AU', probability: 0.026 }
 ],
 name: 'Asheesh'
}

This example shows yet another application of template literals. ‘tagged templates’ are beyond the scope of our context, however, interested reader may visit here.

Rest Parameters (…)

We can add two numbers like so

function addThemAll(a, b){
   return a + b;
}
console.log(`Sum is: ${addThemAll(5,6)}`);

but what if we had to add N numbers?

ES6 introduced an effective way to handle function parameters (…). Rest parameters are used to create functions that accept any number of arguments. By specifying …<param_name> in a function we can force that function to accepts any number of parameters. For this to happen the rest parameter MUST be the last parameter in the function definition. Also, rest parameters are of array type. For example,

function addThemAll(a, b, ...numbers){
   console.log(numbers);
   let sum = a+b;
   numbers.forEach(number => sum +=number);
   return sum;
}
console.log(`Sum is: ${addThemAll(3,4,-5,6,7,-1)}`);

//-----------------------------------------------------------
Output:
[ -5, 6, 7, -1 ]
Sum is: 14

In the example above, numbers is the rest parameter and accepts all parameters after second parameter in the function call. Also notice that when we try to console log numbers, it prints a list/ array.

Spread Operator

The spread (…) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax “expands” an array into its elements, while rest syntax collects multiple elements and “condenses” them into a single element.

Consider the following examples showing application of Spread operator

let charName={name: "Batman"};
let charPowers ={
   skills: "Trained in various martial arts and combat techniques",
   weapon: "Batrangs, Smoke Bomb",
   gadgets: "Kevlar Suite, Utility Belt"
}
let charAssociations={
   family: "Robin, Nightwing, Batgirl, Alfred",
   friends: "SuperMan, Wonder Woman, Green Arrow",
   enemies: "Joker, Penguin, Poison Ivy, Dr. Freeze, R'as Al Ghul, Deathstroke"
}

const myFavoriteChar={
   ...charName,
   ...charPowers,
   ...charAssociations
}

console.log(myFavoriteChar);

//-----------------------------------------------------------
Output:
{
 name: 'Batman',
 skills: 'Trained in various martial arts and combat techniques',
 weapon: 'Batrangs, Smoke Bomb',
 gadgets: 'Kevlar Suite, Utility Belt',
 family: 'Robin, Nightwing, Batgirl, Alfred',
 friends: 'SuperMan, Wonder Woman, Green Arrow',
 enemies: "Joker, Penguin, Poison Ivy, Dr. Freeze, R'as Al Ghul, Deathstroke"
}

In the above example, we used spread operator to combine multiple objects in to one bigger object.

let heroes= ["Batman", "Superman","Wonder Woman"];
let sidekicks=["Robin", "SuperBoy", "Wondergirl"];
let dcChars = [...heroes,...sidekicks];
console.log(`Heroes: ${heroes} \nSidekicks: ${sidekicks} \nDC Chars:${dcChars}`);

//-----------------------------------------------------------
Output:
Heroes: Batman,Superman,Wonder Woman
Sidekicks: Robin,SuperBoy,Wondergirl
DC Chars:Batman,Superman,Wonder Woman,Robin,SuperBoy,Wondergirl

In the above example, we used spread operator to concatenate multiple arrays.

Now, consider the example below. We are copying arrays without Spread operator

let justiceLeague=["Batman","Superman", "Wonder Woman", "Green Lantern"];
let justiceLeagueOfAmerica = justiceLeague;

console.log("Justice League: ", justiceLeague);

justiceLeagueOfAmerica.push("Shazam");
console.log("Justice League: ", justiceLeague);
console.log("Justice League of America: ",justiceLeagueOfAmerica);

/*
Output:
Justice League:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern' ]
Justice League:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern', 'Shazam' ]
Justice League of America:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern', 'Shazam' ]

We first assigned justiceLeague to justiceLeagueOfAmerica and then added a new hero ‘Sahazam’ to justiceLeagueOfAmerica. However, when we printed both the arrays, we found that ‘Sahazam’ got added to both arrays. This happened so because they way we assigned the arrays, both of them pointed to the same memory location. Therefore, when we added a new element to one array, it started showing up in the other array too.

We can get rid of this problem if we use Spread Operator to copy arrays, like so.

let justiceLeague=["Batman","Superman", "Wonder Woman", "Green Lantern"];
let justiceLeagueOfAmerica = [...justiceLeague];

console.log("Justice League: ", justiceLeague);

justiceLeagueOfAmerica.push("Shazam");
console.log("Justice League: ", justiceLeague);
console.log("Justice League of America: ",justiceLeagueOfAmerica);

//-----------------------------------------------------------
Output:
Justice League:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern' ]
Justice League:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern' ]
Justice League of America:  [ 'Batman', 'Superman', 'Wonder Woman', 'Green Lantern', 'Shazam' ]

As we can see in the above example, the original array was not impacted.

let dcHeroes=["Martian Manhunter","Flash","Atom", "Tornado"];
// let moreDcHeroes = [dcHeroes, "Dr. Fate", "Zatana", "Swamp Thing"];
// console.log(moreDcHeroes);

let multipleDcHeroes = [...dcHeroes, "Starfire", "Spectre", "Constantine", "Etrigan"];
console.log(multipleDcHeroes);

//-----------------------------------------------------------
Output:
[
 'Martian Manhunter',
 'Flash',
 'Atom',
 'Tornado',
 'Starfire',
 'Spectre',
 'Constantine',
 'Etrigan'
]

The above example shows another application of Spread Operator. We expanded the array using the spread operator.

console.log(Math.min(1,6,-7,-1,0));

//Now consider
let arr =[1,6,-7,-1,0];
//console.log(Math.min(arr)); //this would fail
console.log(Math.min(...arr));

//-----------------------------------------------------------
Output:
-7
-7

Observe that in the above example, the first line console logs the minimum number from the list of number supplied to to the Math.min() method of ‘Math’ object. However, if we were to find the minimum number from an array, this function won’t help. However, usage of spread operator helps us pass the array as a list of numbers to the function and we get the minimum number.

Destructuring

According to MDN docs,

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

To unpack an array

const [var1, var2, ...] = arrayName;

Consider the example below. We are unpacking elements of an array to different variables and then logging them to the console. Observe that only those many elements of the array were unpacked that we specified.

const greenLanternCorps=["Hal Jordan", "AbinSur", "Mogo", "Medphyll", "John Stewart", "Kilowog"];
let [human, mentor, planet, broccolli]= greenLanternCorps
console.log(`${human}, ${mentor}, ${planet}, ${broccolli}`);

//-----------------------------------------------------------
Output:
Hal Jordan, AbinSur, Mogo, Medphyll

Similarly, we can unpack an object also.

const dcChar={
 name: "Desaad",
 allegiance: "Darkseid"
}

We can unpack this object in to two variables like this

const {name, allegiance}=dcChar

This is same as writing

const name = dcChar.name;
const allegiance = dcChar.allegiance;

Now, consider that we do not want the variables to be of the same name as those of object properties. In such a case we would need to do something like this

const {name: charName, allegiance: charAllegiance} = dcChar;

We can use rest parameters while destructuring. Consider we have an array which lists the prime villain and his minions. We can destructure such an array like

const apokolipsVillians=[
{name: "Darkseid"},
{name: "De Saad"},
{name: "SteppenWolf"},
{name: "Granny Goodness"}
]

const [leader, ...minions]=apokolipsVillians;
console.log(leader);
console.log(minions);

//-----------------------------------------------------------
Output:
{ name: 'Darkseid' }
[
 { name: 'De Saad' },
 { name: 'SteppenWolf' },
 { name: 'Granny Goodness' }
]

Export

In ES 5, we could export a module and then require in some other file to make use of it. We can do the same in ES 6 but in a more neater and easier way. For example, in the code fragment below, we export a function written in some module and then import it in our index.js

 //index.js
 import { getRandomHero } from "./dcChars.js";
 console.log(getRandomHero());

 //dcChars.js
 const dcHeroes=["Superman", "Batman", "Wonder Woman", "Flash", "Green Lantern", "Shazam"];

 const getRandomIntFromRange = (min, max) =>{
   return Math.floor(Math.random() * (max - min + 1) + min);
 }

 export function getRandomHero(){
   let heroIndex = getRandomIntFromRange(0, dcHeroes.length-1);
   return dcHeroes[heroIndex];
 }

Note: both index.js and dcChars.js are in the same folder. We could have exported getRandomIntFromRange function and the dcHeroes array too by prepending export to them.

Let’s add one more function to dcChars.js, export it and then import it in our index.js

//index.js
import { getRandomHero, getRandomVillain } from "./dcChars.js";
console.log(`DC Hero: ${getRandomHero()}`);
console.log(`DC Villain: ${getRandomVillain()}`);

//dcChars.js
const dcHeroes=["Superman", "Batman", "Wonder Woman", "Flash", "Green Lantern", "Shazam"];
const dcVillains = ["Darkseid", "Joker", "Cheetah", "Captain Cold", "Sinestro", "Black Adam"];
const getRandomIntFromRange = (min, max) =>{
   return Math.floor(Math.random() * (max - min + 1) + min);
}

export function getRandomHero(){
   let heroIndex = getRandomIntFromRange(0, dcHeroes.length-1);
   return dcHeroes[heroIndex];

}

export function getRandomVillain(){
   let villainIndex = getRandomIntFromRange(0, dcVillains.length-1);
   return dcVillains[villainIndex];
}

We see that we can specify multiple items to be imported from a module in curly braces. If we had specified default along with export for any one of the function above, then we could have imported it without specifying it between curly braces.

//index.js
import getRandomHero, { getRandomVillain } from "./dcChars.js";
...

//dcChars.js
...
...
export default function getRandomHero(){
   let heroIndex = getRandomIntFromRange(0, dcHeroes.length-1);
   return dcHeroes[heroIndex];
}
...

Another thing with default export is that we can export it with any name and it would still work. This implies that instead of

import getRandomHero, { getRandomVillain } from "./dcChars.js";
...
console.log(getRandomHero());

if we wrote this

import getRandomDCHero, { getRandomVillain } from "./dcChars.js";
...
console.log(getRandomDCHero());

it would still work.

Remember that we can have only one default export.

Note: With the `import` keyword all imported modules are pre parsed. This implies that they get executed before the code where they have been imported. With `exports` keyword (ES 5) the exported module(s) get executed only when it is invoked.

This is the different between require (ES 5)and import(ES 6). Using require we can load the dependency ‘on demand’.

Conclusion

We breezed through some of the most important concepts of modern JavaScript. Our ultimate objective is to have a better understanding of JavaScript, so that later on we can easily read and write test automation script(s) easily.

Please do share your thoughts and feedback on this tutorial. I will surely make amends where ever necessary and it will help me improve.