QA Automation Labs

How to run Cypress Test cases in Docker Container in Just “5” Steps


How to run Cypress Test cases in Docker Container in Just “5” Steps

This blog covered how we can use the Docker container to run our Cypress tests suite.

Why Docker?
Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity.
Docker simplifies and accelerates your workflow while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project.
To understand more about docker please follow the link Docker Understanding

Docker is already set up /installed (*if not please install from here )
Cypress Project is already set up (*if not please install from here)

Install Docker image and run test cases
Step 1
Open the terminal and type docker images you will see there is no image available

Step 2:
Next step is to Install the docker image. We can pull images from the link.

Available Cypress Images
cypress/base: All operating system dependencies, no Cypress, and no browsers.
cypress/browsers: All operating system dependencies and some browsers.
cypress/included: All operating system dependencies, Cypress, and some browsers installed globally.

Let’s pull Cypress Image 9.7.0
Run command “docker pull cypress/included:9.7.0” on the terminal

Once the Image is pulled we can see Cypress image is installed in your system

Step 3:
Let’s run the below command to know what are the available Os and/or browsers in the above docker image

Run command
docker run -it — entrypoint=cypress cypress/included:9.7.0
Here we can see we have three browsers (Chrome, Edge, and Firefox)

Step 4:
Create the below script which will search the results on the site

/// <reference types=”cypress” />
describe(“Verify Drop down — Without Select Class “, () => {
it(“Open URL”, () => {
it(“Click on Read More “, () => {
it(“Verify Particular Blog “, () => {
cy.contains(“How to Setup And Run Cypress Test Cases in Google Cloud?”);});
it(“Click on Blogs”, () => {
cy.contains(“Blogs”).scrollIntoView().click({ force: true });});
it(“Search the data”, () => {
.click({ force: true }).type(“cypress”);
cy.get(‘[id=”search-icon”]’).click({ force: true });
cy.contains(“Search Results for: cypress”);});});

Below screenshot of the folder structure

Step 5:
Run Cypress test case locally in Docker

To run the cypress script in the container we have to run the below commands
docker run -it -v $PWD :/e2e -w /e2e cypress/included:9.7.0 — spec cypress/integration/*.js — browser chrome

Explanation of the above command line
-it: Run test case in interactive mode
v: The -v argument to docker run is for creating storage space inside a container
$PWD: Current directory, in our case its cypress_9.7.0_dockers
:/e2e : map current folder to /e2e inside the container
-w /e2e : set working directory to /e2e
cypress/included:9.7.0 : cypress docker image
— spec: The specs that we want to run

Report for Pass Test case
Once the command docker run -it -v $PWD :/e2e -w /e2e cypress/included:9.7.0 — spec cypress/integration/*.js — browser chrome executed successfully
The below report is generated in the terminal

Report for Failed Test case
One test case failed where content is not match
In the below screenshot, we can see failed test cases display in the finally generated report


Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More