Part 5 - Hands-On Test Automation Project with Cypress + Cucumber + Docker

This article is a continuation of Part 4 - Reporting. The implementation of Part 4 can be found in my demo-cypress project tagged as v4.0. You can download this release to use it as a starting point for this part of the article.

Additional Requirement

In this article, we are going to configure a Cypress project to execute inside Docker. For this part, it is required that you have Docker on your computer.

If you have not used Docker before, I suggest you go over a basic tutorial to get an idea. Here is where you can Get Started with Docker.

Part 5 - Infrastructure

Infrastructure is something we should think about when we are setting up our automation project. In the beginning, it may be very simple to run the tests locally, but it is not viable in the long term. Sometimes we need to execute our tests in a specific browser/version or multiple browser/versions. 

Docker can be very helpful for that, because it gives the ability to run our tests in containers that are configured exactly the way we need. Docker is "an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on laptops, data center VMs, or the cloud.". In other words, Docker can help us run our automation tests in a distributed way.

Cypress provides public docker images that we can use to run our tests. The images available are:

• cypress/base:<node-version> has the operating system dependencies required to run Cypress.
• cypress/browsers:<tag> extends the base images with pre-installed browsers.
• cypress/included:<cypress-version> extends the base images with pre-installed Cypress versions.

The first step is to define the infrastructure that will support our test execution. Let's say we want to run our test on Electron, Chrome, and Firefox. We will need an infrastructure that will create a docker container with the official Cypress image and will execute our tests on all the browsers listed. 

The docker image that we will use is "cypress/included", which have pretty much all the dependencies we need to build our containers. This image contains all operating system dependencies required to run Cypress, a pre-installed Cypress, and pre-installed browsers. However, there is an additional dependency we need to add to this image to execute our tests which is the cypress-cucumber-preprocessor plugin we are using. For that we need to create a Dockerfile (which is a document that contains all the commands to assemble an image) on the root of the project with the following content that is simply adding the plugin on top of the official Cypress image.

FROM cypress/included:4.5.0

RUN npm install cypress-cucumber-preprocessor

We will use Docker Compose to run our tests. Docker Compose is a tool for defining and running multi-container Docker applications. With Docker Compose, we use a YAML file to configure each execution of the tests in a specific browser as a service. Then, with a single command, we create and start all the services from our configuration. It means we will be able to execute all tests in multiple browsers with one command. Let's create a docker-compose.yml file with the following content. 

version: '3'

services:

 electron:

  build:

   context: .

   dockerfile: Dockerfile

  volumes:

   - ./cypress:/cypress

   - ./cypress.json:/cypress.json

   - ./package.json:/package.json

   - ./cucumber_report/electron:/cucumber_report

 chrome:

  build:

   context: .

   dockerfile: Dockerfile

  command: "--browser chrome"

  volumes:

   - ./cypress:/cypress

   - ./cypress.json:/cypress.json

   - ./package.json:/package.json

   - ./cucumber_report/chrome:/cucumber_report

 firefox:

  build:

   context: .

   dockerfile: Dockerfile

  command: "--browser firefox --config video=false"

  environment:

   - DEBUG=cypress:server:browsers:firefox-util,cypress:server:util:process_profiler

  volumes:

   - ./cypress:/cypress

   - ./cypress.json:/cypress.json

   - ./package.json:/package.json

   - ./cucumber_report/firefox:/cucumber_report

We can observe in this file that we have 3 services:

• electron: it will build the image based on the Dockerfile file and execute the tests on the default browser which is Electron.
• chrome: it will build the image based on the Dockerfile file and execute the tests on Chrome browser.
• firefox: it will build the image based on the Dockerfile file and execute the tests on Firefox browser.

To test, open the terminal in the root of our project (where the docker-compose.yml file is located) and run the following command:

docker-compose up

To run the tests in a specific browser pass the service name as an argument, for example:

docker-compose up chrome

OR

docker-compose up electron chrome

We are done with Part 5 of this article. :)

Remember to commit your changes to Git:

git add .
git commit -m "Adding Docker"
git push

The implementation of this part can be found in my demo-cypress project tagged as v5.0. You can download this release to check how it looks. This is the last part of the series of Hands-On Test Automation Project with Cypress + Cucumber + Docker articles.

Thanks for reading! I hope you found it helpful.

If you enjoyed it, I appreciate your help in spreading it by sharing it with a friend.