E2E Testing in Node.js using cypress.io

what is cypress.io ?

Firstly,cypress is an automation test tool for the modern web and can be used for a different type of testing like

  • end to end test cases
  • Integration test cases
  • Unit test cases

we will be using cypress for E2E testing in node.js and E2E testing in node.js is an important part of software development in node.js

Above all, we are going to write a test case for a simple blog application: https://gentle-tor-26434.herokuapp.com/

source : https://github.com/ganeshmani/meanstack_task

Screenshot from 2019 04 16 11 32 41

Therefore, we need to figure out how it has to work and what logic we need to test

For this blog application, we simply going to test :

  • when the user enters the title, description and clicks the submit button
  • the blog should be added in the blog list

Firstly,we will setup the cypress in the project

1npm install cypress --save-dev

Once the installation gets completed, you will see the folder structure of cypress as

Screenshot from 2019 04 16 11 14 45

Let's breakdown the functionality of each folder that cypress has

Folder Structure:

  • fixtures - it contains external static data that we want to use in the test files
  • integration - this is the folder where we write all the test cases
  • plugins - it contains all the plugins that we want to use with cypress. some use cases are https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases
  • support - it contains all the reusable behavior of the custom commands. Example: You can define your behaviors in a beforeEach within any of the cypress/support files:
1beforeEach(function() {
2 cy.log("I run before every test in every spec file!!!!!!")

Firstly, create a file in the cypress/integration folder and add the following code.

1describe("Loading the homepage", function() {
2 it("successfully loads", function() {
3 cy.visit("https://gentle-tor-26434.herokuapp.com/")
4 })
7describe("adding blog post", function() {
8 it("creating a new blog post", function() {
9 cy.visit("https://gentle-tor-26434.herokuapp.com/")
11 cy.get("input").type("Cypress added blog post")
13 cy.get("textarea").type(
14 "Hey it is an automated testing blog post.please check it out the cypress.io...it' so cool"
15 )
17 cy.get("div.submit").click()
19 cy.get("div.item")
20 .last()
21 .should("contain", "Cypress added blog post")
22 })

After that, we can run the cypress command to start the cypress interface:

1$(npm bin)/cypress open

there are several other ways to do that https://docs.cypress.io/guides/getting-started/installing-cypress.html#Opening-Cypress

it will open a cypress interface like this.

Screenshot from 2019 04 16 11 38 21

select the test case that you want to run or you can select Run all specs

Output for the cypress test cases

In conclusion, cypress run the test cases and return the assertion in the browser. Yayyyy!.. we did it :-)

To learn more about cypress. https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html

To learn more about Node.js . https://cloudnweb.dev/category/web-dev/

Happy learning!!!!! :-)

To Read More

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...