Running Cypress Tests for Node.js Apps Inside a Docker Container

💡 Introduction

Welcome Dev to the world of testing and Containerisation. Today, we will be diving into an exciting project, where we will be testing a Node Js application using cypress and this whole project will be inside a docker container. So without further ado, Let’s get started!

💡 Pre-requisites

Before we delve into the project, we need to ensure that we have following requirements met in our system:

• Docker and Docker-Compose: Since we are working inside a container, we will be needing docker and docker-compose for that.
• Node installed: We are testing a node application, so we would be needing node to run in it.
• Basic Understanding of Docker: We will be creating a dockerfile and Docker-compose file, a prior understanding of both would be appreciated.

💡 Setting up the project

We will start the project by creating a project dir named book-app-testing, inside the directory, we will be creating a docker-compose file with the following content:

services:
 book-reader-app:
   image: rajudandigam/book-reader-node:v1
   container_name: book-reader-app
   ports:
     - "3000:3000" 
   networks:
     - test-network


 cypress:
   build:
     context: ./cypress-test
     dockerfile: Dockerfile
   container_name: cypress
   depends_on:
    - book-reader-app


   environment:
     - CYPRESS_baseUrl=http://book-reader-app:3000 
   volumes:
     - ./cypress-test:/e2e 
   networks:
     - test-network
   command: ["npx", "cypress", "run", "--spec", "cypress/e2e/book-app-heading.cy.js"]


networks:
 test-network:
   driver: bridge

Now inside the project dir, we will create a new dir, named cyprus-test. We will navigate inside it and run the following commands:

npm init -y
npm install cypress --save-dev
npx cypress open

This will open a new Window. Here Select E2e Testing and then click on continue and start testing E2E testing in Electron.

Now, Click on Create a new Spec File and in the name put cypress/e2e/book-app-heading.cy.js and click Okay and run the Spec file.

This will run a demo test. Now go to thebook-app-testing/cypress-test/cypress/e2e and here you will have your book-app-heading.cy.js file, remove the existing content and put the full information in it:

describe('Book Reader Node App', () => {
 it('should have a heading that includes "Book App"', () => {
   // Use the baseUrl from environment variable (preferred approach)
   cy.visit('/'); // This appends to CYPRESS_baseUrl (http://book-reader-app:3000)


   // Alternatively, hardcode the service name (less flexible):
   // cy.visit('http://book-reader-app:3000');


   // Check if any heading (h1, h2, etc.) contains "Book App"
   cy.get('h1, h2, h3, h4, h5, h6').should('contain.text', 'Book App');
 });
});

This is a simple test which will test whether the application heading has Book App in it.

💡 Creating the Dockerfile

Now, we will be creating a dockerfile for Cypress with our Test in it, for that, go inside the book-app-testing/cypress-test and create a Dockerfile and put the following content it:

#Use Cypress base image

FROM cypress/included:13.0.0


WORKDIR /e2e


# Copy project files
COPY . .


# Install dependencies
RUN npm install


# Run Cypress tests
CMD ["npx", "cypress", "run"]

Now, we will navigate to our project dir and run the following command to run the docker-container:

docker-compose up –build

This will give you the following output and in that, we can see that the test we provided is passed.

To enhance the testing process, you can add following test in the same file or create separate file for each test inside the cypress-test/cypress/e2e:

// Render Header component Properly
describe('Book Reader Node App', () => {
 beforeEach(() => {
   cy.visit('/');
 });


 it('should render the header component', () => {
   cy.get('header').should('be.visible');
 });


 it('should render the sidebar component', () => {
   cy.get('aside').should('be.visible');
 });
});

// Check Animation Tap and Hover
describe('Book Reader Node App - Animations', () => {
 beforeEach(() => {
   cy.visit('/');
 });


 it('should scale up on hover', () => {
   cy.get('ul li').first().trigger('mouseover')
     .should('have.css', 'transform')
     .and('contain', 'matrix');
 });


 it('should scale down on tap', () => {
   cy.get('ul li').first().trigger('mousedown')
     .should('have.css', 'transform')
     .and('contain', 'matrix');
 });
});

// Check Test Responses in various Devices
describe('Book Reader Node App - Responsiveness', () => {
 beforeEach(() => {
   cy.visit('/');
 });


 const sizes = [
   { width: 1280, height: 720 },  // Desktop
   { width: 768, height: 1024 },  // Tablet
   { width: 375, height: 812 }    // Mobile
 ];


 sizes.forEach((size) => {
   it(`should display correctly on ${size.width}x${size.height}`, () => {
     cy.viewport(size.width, size.height);
     cy.get('main').should('be.visible');
   });
 });
});

// Test Naviation
describe('Book Reader Node App - Navigation', () => {
 beforeEach(() => {
   cy.visit('/');
 });


 it('should navigate to book details page on click', () => {
   cy.get('ul li a').first().click();
   cy.url().should('include', '/book/');
 });


 it('should display book details on the details page', () => {
   cy.get('ul li a').first().click();
   cy.get('h1').should('be.visible');
   cy.get('img').should('be.visible');
 });
});

You can also visit __http://localhost:300__0 where our application is running.

💡 Conclusion

This marks the end of our blog. In today’s blog, we learnt how to use Cypress to test our Web Application built using Node. We started with a basic test to verify the heading contains "Book App" and gradually saw how we can expand our testing coverage with more complex and meaningful tests. By incorporating Cypress, we can ensure our app’s functionality, UI interactions, and navigation work as expected, making our web applications more robust and reliable.