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

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

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!!!!!!")
3})

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  })
5})
6
7describe("adding blog post", function() {
8  it("creating a new blog post", function() {
9    cy.visit("https://gentle-tor-26434.herokuapp.com/")
10
11    cy.get("input").type("Cypress added blog post")
12
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    )
16
17    cy.get("div.submit").click()
18
19    cy.get("div.item")
20      .last()
21      .should("contain", "Cypress added blog post")
22  })
23})