JavaScript For Testers
Bushra Alam
Posted on May 14, 2020
JavaScript is one of the most popular programming languages today. Here is a StackOverflow Survey Result showing popularity of various languages:
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?
- Install Node.js and Code Editor
- JavaScript Basics
- NPM - Node Package Manager
- Arrow Functions
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
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'
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'
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
}
2. ?
ageMoreThank18 = (age > 18) ? true : false
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++
}
2. FOR LOOP
for (i=0; i<5; i++){
console.log('i is now : '+ i)
}
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
}
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)
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
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
Install a package
npm install <packageName>
Following things happen when you install a package:
- an entry is made in the package.json
- the package and its dependencies are downloaded in the node modules folder
- 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
To install dependencies as devDependencies:
npm install <packageName> --save-dev
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.
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!
Posted on May 14, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.