JavaScript: Synchronous or Asynchronous?

Anandteerth Onkar — Fri, 27 Aug 2021 23:26:47 +0000

Understanding the Synchronous and Asynchronous operations:

In synchronous operations, operation are performed one at a time. The next operation is unblocked only when the ongoing operation is completed.
Simple words, you need to wait for a operation in progress to finish, in order to start the next one in the queue.

In asynchronous operations, the next operation can be started before the previous one finishes.
Asynchronous programming allows to handling of multiple requests simultaneously, thereby allowing to accomplish more tasks within shorter time span.

So what is JavaScript?

At its core, JavaScript is by default Synchronous in nature.

Let's break it down:
It is Synchronous because it is Single-threaded. In single-thread one operation is executed at a time.
It blocks other operations in queue, as they need to wait until the previous operation has completed execution.

In nutshell:
In JavaScript, only one operation will be executed at a time and the successive operations in stack need to wait until the ongoing operation is completed.

Question: If JavaScript is Synchronous in nature, why on this earth Asynchronous JavaScript term so popular amongst JavaScript developers?

Answer: The developers manipulate JavaScript to behave Asynchronously. To make this manipulation, there are 3 techniques:

Callback function
Promises
Async/Await.

Resources I recommend to understand these asynchronous techniques:

Callbacks:
Watch this awesome video by Philip Roberts while referring to his Demo website

Callback Hell: Callback Hell is a Nightmare. Refer this if you want to dig deeper into callbacks

Promises:
Video by Codevolution

Async/Await:
Best article on this topic by Mostafa Gaafar

All 3 techniques in one video by codeSTACKr

I will be creating articles on each of these topics. Need feedback from bloggers & readers of dev community, that will help me to improve my work.

Cypress: Complete Setup Guide

Anandteerth Onkar — Sun, 08 Aug 2021 00:33:04 +0000

This blog post is a simple and easy guide for the first time Cypress users, who wish to setup Cypress on their Windows machines.

Environment Setup:

Install node.js and Set node_home (Open Environment Variables and add the node bin folder path to Paths).

Install Visual Studio Code a.k.a VS Code(Recommended IDE for JS/TS projects.

Install plugins highlighted in image below to VS Code, by going to plugins tab.

Installing & Setting up Cypress:.

Create a project folder (Note: Don't name it as Cypress).

Let's says you named it: 'CypressAutomationProject'.

Open the project folder in VS Code.

In VS Code terminal, run a command - npm init .

Enter the package name and just hit enter for other options leaving them blank.

This will create a new package.json file in your project folder.

In VS Code terminal, run a command - npm install --save-dev cypress.

This will install the latest Cypress version locally as a dev dependency for your project.
node_modules folder will be created in main project folder.

Note: At this moment you won't be able to see the Cypress folder in your project folder. This is a bit tricky, as the suspense reveals in the next command.

In VS Code terminal, run a command - ./node_modules/.bin/cypress open or npx cypress open.

When you run this command, the Cypress Test Runner is opened, and now you can see a Cypress folder created in your project folder.

You can click on any of the spec file listed in test runner, and see Cypress in action. ( I will include the details of test runner in my next blog article).

Cypress Project Configuration:

These configuration serve as the key aspects to the cypress project.

There are 3 main configuration files:

1) jsconfig.json

Not present by default, need to create.

Therefore the step here is to create a jsconfig.json file under main project folder - 'CypressAutomationProject'.

Enter below code & Save the file:

{
    "include": [
      "./node_modules/cypress",
      "cypress/**/*.js"
    ]
}

NOTE: The definition in this file helps us to populate all cypress commands (methods) to be used in project spec files (i.e. Test Scripts).

2) cypress.json

Present, nested under cypress folder inside main project folder. (Project Folder > cypress > cypress.json).

We use this file to view default settings or update the default project settings (Closely related to Cypress).

The settings can be viewed on Cypress Test Runner under Settings tab.

In cypress.json, the main line of code to be entered is:

{
   "$schema": "https://on.cypress.io/cypress.schema.json"
}

This acts as an intellisense that populates all cypress settings automatically (After type double quotes you can see the list).

3) package.json

Present, nested under main project folder. (Project Folder > cypress > package.json).

This is related to Node.js, where devDependencies and Scripts can be defined.

We are going to define scripts in this file to run the cypress in Head and Headless mode.

Remove the default test script present and enter below lines lines of code under the scripts object and save the file.

{
 "scripts" : {
    "cy:open": "./node_modules/.bin/cypress open",
    "cy:run": "./node_modules/.bin/cypress run"
   }
}

To run the scripts in Head mode, run command: npm run cy:open.
(Note: This actually opens up test runner).

To run the scripts in Headless mode, run command: npm run cy:run.

Hurray! Your machine is now setup to use Cypress. Enjoy every bit of it, It's really an awesome tool.
Any queries related to cypress, please post them in comments.

DEV Community: Anandteerth Onkar