DEV Community

Cover image for JavaScript For Testers
Bushra Alam
Bushra Alam

Posted on

JavaScript For Testers

JavaScript is one of the most popular programming languages today. Here is a StackOverflow Survey Result showing popularity of various languages:

StackOverflow Developer Survey Results 2019

Testers might feel they won't be impacted by this but there are a lot of automation testing tools coming in the market which are based on JavaScript like Cypress, Protractor, Nightwatch, Puppeteer to name a few. You will have to learn JavaScript sooner or later. And I say, the sooner - the better.


If you prefer to watch and learn, hop on to my JS For Testers series on Youtube
Subscribe to my Youtube Channel - QA Camp!



Table of Contents


What is JavaScript?

JavaScript was initially created to “make web pages alive” and it was capable of running only in a web browser. Because browsers have JavaScript engine to execute JavaScript code.
But now, with the development of Node.js, JavaScript isn't restricted to only browsers.
Node is a JavaScript runtime environment that executes JavaScript code outside of a browser. Node.js is built on top of Chrome's open-source V8 JavaScript engine.

So now JS could be used as front-end (client-side) as well as back-end (or the server-side) language.


Install Node.js and Code Editor

Installing Node.js is essential and having a code editor provides so much of ease.

You can download Node.js from here: https://nodejs.org/en/download/

For code editor, you have got a number of options to choose from. But I recommend using Visual Studio Code.
You can download VS Code from here: https://code.visualstudio.com/download

To see installation in action you can follow my video:


JavaScript Basics

Let's learn how to create variables, constants, conditional operators, loops and functions in JS.

Variables

Variables are like named boxes that can hold value. These values can also be updated.

Variables in JS can be created using let keyword



let age = 30


Enter fullscreen mode Exit fullscreen mode

Note that we haven't mentioned any datatype and so our variable 'age' isn't bound to any datatype. And so, we can have it hold value of any data type.



age = 'thirty'


Enter fullscreen mode Exit fullscreen mode

Now, the variable holds a string instead of a number and JS won't complain.

Constants

Constants are variables whose value can't be updated. Constants can be created using const keyword.



const firstName = 'John'


Enter fullscreen mode Exit fullscreen mode

Conditional Operators

Conditional Operators are used when you would like to execute a piece of code only when a condition satisfies.

1. IF



let ageMoreThank18
if (age > 18){
    ageMoreThank18 = true
}
else{
    ageMoreThank18 = false
}


Enter fullscreen mode Exit fullscreen mode

2. ?



ageMoreThank18 = (age > 18) ? true : false


Enter fullscreen mode Exit fullscreen mode

Here, in both the cases, the variable 'ageMoreThank18' would be set to true if the variable 'age' has value greater than 18 else the variable 'ageMoreThank18' would be set to false.

Loops

Loops are used when you would like to execute a piece of code as long as the condition stays true.

1. WHILE LOOP



let i = 0
while (i < 5){
    console.log('i is now : '+ i)
    i++
}


Enter fullscreen mode Exit fullscreen mode

2. FOR LOOP



for (i=0; i<5; i++){
    console.log('i is now : '+ i)
}


Enter fullscreen mode Exit fullscreen mode

Here, in both the cases, the code in the loop body would be executed until i has value less than 5. As soon as i is set to 5, the loop condition would return false and the loop body wouldn't execute.

Functions

Functions are essential in any programming language. They take an input, process it and return an output.



function product (a,b){
   return a * b
}


Enter fullscreen mode Exit fullscreen mode

This is a function named 'product' that takes two values as input, multiplies them and return the result i.e. the product of two numbers.

To call the function:



product(5, 4)


Enter fullscreen mode Exit fullscreen mode


NPM - Node Package Manager

NPM is a very important concept in JavaScript and NPM is one of the most crucial factors behind the success of JavaScript.

NPM is Node Package Manager. Before understanding NPM, let's understand what a package manager is and before that - what are packages?

So, when you start a new project.. be it a development or testing project, you will almost never start from the blank slate and just never would you finish the project with having written 100% of the code yourself.
Imagine this.. you need to test an application.. the first things that you do is pick a tool, select a framework, think what reporting plugin you could use and so on. So these tools, frameworks, plugins that are available for you to pick and use in any project are Packages.

Now, there could be hundred or thousands of such packages in a language. So to manage how they would be published, installed, where would be store and things of that sort we need a Package Manager.

JS has many package managers. The two most popular are: NPM and Yarn.
NPM is the default package manager for JS. NPM is the world's largest software repository having more than a million packages.

NPM consists of three things:

  • the registry: for storing open-source JS projects
  • the command line interface: for publishing and installing packages
  • the website: for searching packages - https://www.npmjs.com

NPM is installed along with Node.js.
To verify NPM is installed, run:



npm -v


Enter fullscreen mode Exit fullscreen mode

If you see a version then NPM is installed on your machine.

package.json

package.json is the heart of NPM. It is a JSON format file that contains the list of packages that your project depends on.

A 'package.json' file provides these benefits:

  • it contain the list of packages your project depends on
  • it specifies the versions of those packages
  • it makes your build reproducible

Add package.json file to your project



npm init
or
npm init -y


Enter fullscreen mode Exit fullscreen mode

Install a package



npm install <packageName>


Enter fullscreen mode Exit fullscreen mode

Following things happen when you install a package:

  1. an entry is made in the package.json
  2. the package and its dependencies are downloaded in the node modules folder
  3. package-lock.json file makes entries of all the dependencies of package installed and their versions

To understand these concepts better, I highly recommend to watch the video (https://youtu.be/Yj4CNIMHn5E) [https://youtu.be/Yj4CNIMHn5E].

To install all the dependencies listed in package.json



npm install


Enter fullscreen mode Exit fullscreen mode

To install dependencies as devDependencies:



npm install <packageName> --save-dev


Enter fullscreen mode Exit fullscreen mode

devDependencies: packages that are necessary only while development and not necessary for the production build

NPX

NPX could be though as Node Package Runner. It is a very powerful concept. Here are a few benefits it provide:

  • Easily run local commands
  • Installation-less command execution
  • Run some code using a different Node.js version
  • Run arbitrary code snippets directly from a URL

Watch the video for more details on these benefits:


Arrow Functions

Arrow Functions are a very popular concept of JavaScript and they are very commonly used. If you are unaware of the syntax then they might confuse you and so it's better to familiarize yourself with them.

Arrow Function Syntax

Follow the video for examples on each of these syntax:


More content to be added soon...

Please suggest topics that you would like to see in this series.

If you prefer to watch and learn, hop on to my JS For Testers series on Youtube
Subscribe to my Youtube Channel - QA Camp!


Top comments (2)

Collapse
 
smlka profile image
Andrey Smolko

Hey=) Nice intro in JS, but I would like to leave one comment.
On arrow function picture In my opinion there will be better to modify comments like that:
a => { ... } // statements;
a => a * a // expression;

Coz in JS terms statement and expression have different meaning
BR

Collapse
 
asherirving profile image
Asher Irving

Another post from your account that's spamming about Cypress.
Nothing new here.