Integrate Cypress with Docker in 5 minutes

In this article, we are going to see how to run Cypress tests in Docker containers. This is an exciting topic, so I thought I would document it for the benefit of others.

But, before we start, let’s understand –

• What is Docker?
• Why do we need to execute Cypress tests in Docker?
• Benefits of running Cypress tests in Docker

What is Docker?

In simple terms, Docker is an isolated and virtual ecosystem/environment which can be tailored according to our requirements. Docker creates this ecosystem inside something called as containers. So, containers are like virtual machines.

You can customise these containers like installing software, setting up environments, etc., via Docker Images. See here for more info.

Why do we need to execute Cypress tests in Docker?

Until now, we have seen executing the Cypress tests via Test Runner or CLI commands. When we execute them, the tests take advantage of the host machine resources like browsers, memory, etc., and runs the tests.

The browser versions in our machines are restricted. When we execute tests, it runs only in 1 version of the browser, but what if we need to execute the tests against different browser versions? Usually, we try to execute our tests in a different machine (virtual or physical).

But, with Docker, it is easy for us to execute the tests with different browser vBut, with Docker, it is easy for us to execute the tests with different browser versions without having any extra infrastructure. We can create Containers (virtual devices) on the fly with the browser versions we require and run the tests.

Benefits of running Cypress tests in Docker

1. Cross-browser testing made simple and elegant
2. No additional / complex configurations required
3. No headaches of Starting/Stopping servers
4. Zero-cost for infrastructure
5. Disposable containers
6. Create containers of your own choice of browsers

Now, it’s time for us to kick start.

Step 1: Download and install Docker

You can download Docker from this link. Please note that I am using Mac version of Docker and Windows Docker might need some extra configuration. So, please have a look at here for installation for Windows OS.

Once installed, start the Docker…

Step 2: Cypress Tests

I assume you are aware about Cypress. If not, familiarise from this tutorial.

I have created a simple project, and added 2 tests. One under samples and another under parabank.

I added 2 extra files, dockerfile & .dockerIgnore. We will see in detail about these in next steps.

Note: Make sure you added tests. I have added 2 for now, but you can add how much ever you want.

Step 3: Docker Configuration

1. dockerfile – This is a mandatory file and you need this to configure the container with images and browser versions

# Repo for Cypress Browsers Images:
# https://github.com/cypress-io/cypress-docker-images/tree/master/browsers

#---------------------------Config One---------------------------

# Chrome 80 & Firefox 72

# pull image
FROM cypress/browsers:node13.6.0-chrome80-ff72
# make directory inside container
RUN mkdir /app
WORKDIR /app
# copy cypress code from host to container
COPY . /app
# execute the tests
RUN npm install
RUN $(npm bin)/cypress verify
RUN $(npm bin)/cypress run --browser firefox
RUN $(npm bin)/cypress run --browser chrome


#----------------------------Config Two--------------------------

# Chrome 79 & Firefox 71
FROM cypress/browsers:node12.14.0-chrome79-ff71
RUN mkdir /app
WORKDIR /app
COPY . /app
RUN npm install
RUN $(npm bin)/cypress verify
RUN $(npm bin)/cypress run --browser firefox
RUN $(npm bin)/cypress run --browser chrome

2. .dockerIgnore – A Docker config file to ignore several artefacts

node_modules

We use this file to ignore copying “node_modules” folder from host to container.

Step 4: Executing tests

That’s it! We are good to run the tests now. To trigger the tests to run in the containers, execute the below command from root folder –

docker build -t <BUILD_NAME> .

Example:

docker build -t cypress .

Here is a video on the test execution –

Conclusion:

So, this is how we execute the Cypress tests inside Docker containers in a simple way.