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
- Cross-browser testing made simple and elegant
- No additional / complex configurations required
- No headaches of Starting/Stopping servers
- Zero-cost for infrastructure
- Disposable containers
- 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
- 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
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> .
docker build -t cypress .
Here is a video on the test execution –
So, this is how we execute the Cypress tests inside Docker containers in a simple way.