E2E Testing in Node.js using cypress.io 
Tags: node, webdev
Published: 2019-04-16 19:11:52


---
title: E2E Testing in Node.js using cypress.io 
published: true
description: E2E Testing in Node.js using cypress.io
tags: node,webdev
---
<p>
 This is my first blog post in dev.to. Please correct me if there is any mistake in the post. I will keep refactoring for better understanding.

  To support more .. please read this blog from original source <a href="https://cloudnweb.dev/2019/04/e2e-testing-in-node-js-using-cypress-io/">E2E Testing in Node.js using cypress.io</a>
</p>

<!-- wp:heading {"level":3} -->
<h3>what is cypress.io ?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>cypress is an automation test tool for the modern web and can be used for a different type of testing like</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>end to end test cases</li><li>Integration test cases</li><li>Unit test cases</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Above all, we are going to write a test case for a simple blog application: <a href="https://gentle-tor-26434.herokuapp.com/">https://gentle-tor-26434.herokuapp.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>source : <a href="https://github.com/ganeshmani/meanstack_task">https://github.com/ganeshmani/meanstack_task</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":239} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/04/Screenshot-from-2019-04-16-11-32-41-1024x483.png" alt="" class="wp-image-239"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Therefore, we need to figure  out how it has to work and what logic we need to test</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For this blog application, we simply going to test :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>when the user enters the title, description and clicks the submit button</li><li>the blog should be added in the blog list</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Firstly,we will setup the cypress in the project</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install cypress --save-dev</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once the installation gets completed, you will see the folder structure of cypress as</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":238} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/04/Screenshot-from-2019-04-16-11-14-45.png" alt="" class="wp-image-238"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's breakdown the functionality of each folder that cypress has</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Folder Structure:</h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>fixtures</strong> - it contains external static data that we want to use in the test files</li><li><strong>integration </strong>- this is the folder where we write all the test cases</li><li><strong>plugins </strong>- it contains all the plugins that we want to use with cypress. some use cases are <a href="https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases">https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases</a></li><li><strong>support </strong>- it contains all the reusable behavior of the custom commands. Example: You can define your behaviors in a <code>beforeEach</code>&nbsp;within any of the&nbsp;<code>cypress/support</code> files: </li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>beforeEach(function () {
  cy.log('I run before every test in every spec file!!!!!!')
})</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Firstly, create a file in the <strong>cypress/integration</strong> folder and add the following code.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>describe('Loading the homepage', function() {
    it('successfully loads', function() {
      cy.visit('https://gentle-tor-26434.herokuapp.com/') 
    })
  })


describe('adding blog post',function(){
    it('creating a new blog post', function(){
        cy.visit('https://gentle-tor-26434.herokuapp.com/');
        
        cy.get('input')
            .type('Cypress added blog post')

        cy.get('textarea')
            .type('Hey it is an automated testing blog post.please check it out the cypress.io...it\' so cool');
            
        cy.get('div.submit')
            .click()
        
        cy.get('div.item').last().should('contain','Cypress added blog post')    
    })
})</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that,  we can run the cypress command to start the cypress interface:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$(npm bin)/cypress open</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>there are several other ways to do that <a href="https://docs.cypress.io/guides/getting-started/installing-cypress.html#Opening-Cypress">https://docs.cypress.io/guides/getting-started/installing-cypress.html#Opening-Cypress</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>it will open a cypress interface like this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":240} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/04/Screenshot-from-2019-04-16-11-38-21.png" alt="" class="wp-image-240"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>select the test case that you want to run or you can select <strong>Run all specs</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":242} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/04/ezgif.com-video-to-gif.gif" alt="" class="wp-image-242"/><figcaption>Output for the cypress test cases</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In conclusion, cypress run the test cases and return the assertion in the browser. Yayyyy!.. we did it :-)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn more about cypress. <a href="https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html">https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy learning!!!!! :-)</p>
<!-- /wp:paragraph -->