💡 Introduction 💡 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 💡 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. Docker and Docker-Compose: Since we are working inside a container, we will be needing docker and docker-compose for that. Docker and Docker-Compose: Node installed: We are testing a node application, so we would be needing node to run in it. Node installed: Basic Understanding of Docker: We will be creating a dockerfile and Docker-compose file, a prior understanding of both would be appreciated. Basic Understanding of Docker: 💡 Setting up the project 💡 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 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 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. cypress/e2e/book-app-heading.cy.js 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: book-app-testing/cypress-test/cypress/e2e book-app-heading.cy.js 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');
 });
}); 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: book-app-testing/cypress-test #Use Cypress base image #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"] 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 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: 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');
 });
}); // 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 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');
   });
 });
}); // 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');
 });
}); // 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. http://localhost:300 💡 Conclusion 💡 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.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch before making any investment decisions or decisions regarding your health or security. (Do not regard any of this content as professional investment advice, or health advice)

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Cut Load Times in Half with These Next.js Tweaks

Offline-First JavaScript for Space Missions: How JS Thrives in Low-Connectivity Environments

How Daniel Akpan Uses Data to Drive Business Transformation

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

Cut Load Times in Half with These Next.js Tweaks

Offline-First JavaScript for Space Missions: How JS Thrives in Low-Connectivity Environments

How Daniel Akpan Uses Data to Drive Business Transformation

10 Indications That You Should Invest in Automation Via APIs

10 Commandments for AI-Assisted Social Media Marketers

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps