Cypress Docker Tutorial

Dockersimplifies application deployment by package software with all its dependencies into a single container. Cypress, a wide used tryout mechanisation tool, involve consistent version management for both the framework and the browser to ensure dependable test execution.

By runningCypress within Docker, teams can maintain a stable and reproducible test environment across local and CI/CD line, eliminating variant conflicts and streamlining test execution.

This guide explores how to set up and run Cypress trial using Docker efficiently.

Understanding Docker

Before delving further, it is essential to understand Docker architecture and the key concepts involved.

The architecture comprises of three key factor

• Docker Host
• Client
• Registry

Docker Host

Docker host consists of

• Docker daemon
• Images
• Containers

Docker Daemon takes input from Docker clients and does all the heavy lifting of edifice, running, and distributing the Docker containers.

The Docker daemon and client interact using REST API. The Docker demigod listens for Docker API requests and manages Docker target such as Images (blueprints of applications), Containers (runtime representative of persona), Networks (connections enabling communication between containers), and Volumes (unrelenting storage for container data) ..

Docker Client

Users interact with the Docker daemon utilize the client. The client takes the stimulus commands such asdocker run docker frame docker clout. The docker command expend theDocker APIand the docker client send these command to Docker Daemon usingREST API.

Docker Registry

Docker registryis the centralised place where picture are stored.Docker Hubis a public registry that anyone can use.

By nonremittal, Docker searches for images in the Docker Hub. A individual registry can be utilize as an alternative to Docker Hub.

Docker Desktop

Docker Desktop is an installation file for MAC, Windows, and Linux environments that enables the edifice and sharing of containers. It includes the docker daemon, docker client, docker compose, docker substance trust, Kubernetes, and credential helper.

Dockerfile Overview

To run an covering in Docker, an ikon must foremost be make, which can so be accomplish as a container.

To build the picture, docker refers to the dockerfile which contains the direction on how to progress the image.

Below is a simple example of how a docker file aspect

# Use an official Node.js ikon as the base

FROM node:14



# Set the working directory inside the container

WORKDIR /app



# Copy package.json and package-lock.json files to the container

COPYpackage * .json ./# Install dependencies

RUNnpm install# Copy the rest of the application codification to the container

COPY . .



# Expose the port the app runs on

EXPOSE 3000



# Command to start the application

CMD[`` node '', `` app.js '']

After placing this file in the origin directory, the undermentioned command can be executed to build the image.

docker build -t my-node-app.

• docker buildwill create the image
• -t my-node-appis to ply a tag for the image. In this case, the tag is my-node-app
• . at the end of the command specifies the build context. In this case, docker will use the current directory and all its content to build the ikon.

Docker image and Container

A docker image is an executable package that hold everything expect to run the application.

• A distinctive example that a docker persona would hold
• Application Code
• Runtime like Node.js, Python, etc.
• System creature
• Libraries/Dependencies
• Configuration Files

The docker icon is built in terms of layers. Every command in the dockerfile is a layer. These layers are stash and reused, making the images efficient.

The running illustration of the docker image is calledContainer. The covering will be running inside the container.

Here ’ s a dislocation of the command:

• docker run: Runs the persona as a container
• -d: Run the container in detached mode (Runs in background)
• -p 3000:3000: Maps the 3000 porthole on the machine where the container is run to the 3000 port inside the container.
• & # 8211; name my-running-app: Assigns the gens to the container
• my-node-app: name of the docker image

What is Cypress Docker

render docker images with a browser and a Cypress test runner pre-installed.

Running the Cypress tests using the Cypress docker containers ascertain that the tests & # 8217; performance remains consistent regarding browser, Cypress, and node.js versions.

Cypress furnish below images:

• cypress/factory: A base ikon guide which can be used with ARGs to create a usance docker ikon.
• cypress/base: All operating system dependencies, no Cypress, and no browsers.
• cypress/browsers: All operating scheme dependencies, no Cypress, and some browsers.
• cypress/included: All operating system dependencies, Cypress, and some browsers establish globally.

Out of these, the virtually democratic and regularly used is Cypress/included, as it comes with Cypress and has browsers installed.

Benefits of Using Cypress with Docker

Running Cypress in a Docker container ensures a stable, consistent, and scalable testing environment. Here are the key vantage:

• Environment Consistency: Ensures consistent Cypress and browser variation across local and environments.
• Easy Setup & amp; Maintenance: Eliminates the motive to manually install and update Cypress or browser on different machines.
• Scalability: Supports parallel examination execution, optimize test performance in large projects.
• CI/CD Integration: Seamlessly integrates with, enable in a controlled environment.
• Isolation: Runs tests in isolated containers, prevent battle with system dependencies.
• Compatibility: Works across different work systems without requiring additional configurations.

By leveraging Cypress with Docker, teams can raise tryout reliability, reduce setup exploit, and streamline mechanisation workflows.

Setting up and Running Cypress tests using Cypress Docker

The setting up of docker is straightforward.

1. Download the docker desktop fromhereand install.
2. After successful installation, open the docker background (This will run the docker daimon)

To run the Cypress tests in docker container, fulfill the below docker command from the base of your Cypress task

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

docker run-it -v $ PWD: /e2e -w /e2e cypress/included:13.11.0

Note: $ PWD works in Linux, macOS, GitBash. For window scheme replace the $ PWD with % cd %(Ex: docker run -it -v % cd %: /e2e -w /e2e cypress/included:13.11.0)

Here ’ s a breakdown of the dictation

• docker run: This will start a new docker container (Note that this will appear for existing ikon and if the specified image and version of the cypress is not base then it will download)
• -it: This will run the container in interactive way and also show the output in real-time in the terminal
• -v $ PWD: /e2e: This will climb the current directory on the host machine into the container at /e2e (Note that $ PWD is an environs variable which indicate to current working directory from where the dictation is executed)
• -w /e2e: This will set the work directory inside the running container to /e2e folder where our tests resides
• cypress/included:13.11.0: Specifies the eccentric of image you want and its version. This image comes with Cypress pre-installed along with some browsers (Electron).

Once you execute the above command, the terminal will appear similar to the one below.

Cross Browser Testing with Cypress Docker

Cypress provides different browser in its image cypress/browser. Using this image, testing can be performed across all supported browsers running inside the container.

Below are the browser indorse in the cypress/browsers image.

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

With the like functionality can be validated across different browsers and ensure the behavior is consistent.

To start with cross browser testing, the below items are required:

• dockerfile
• docker-compose file
• pipeline yaml file

Creating dockerfile

In the source of your cypress project, create a new file and gens it asDockerfileand add the below bidding

FROMcypress/browsers: up-to-the-minuteWORKDIR /e2e



COPY./package.json.COPY./cypress.config.ts.COPY./cypress ./cypressRUNnpm install & amp; & amp; \ npx cypress informationENTRYPOINT[`` npx '', `` cypress '', `` run '']

Here ’ s a break down of the commands:

• FROM cypress/browsers: latest: This line specifies the base image and its version that must be used.
• WORKDIR /e2e: Sets the e2e folder as working directory
• COPY ./package.json.: copies the package.json file into the root of working directory
• COPY ./cypress.config.ts.: copies the cypress.config.ts file into the root of working directory
• COPY ./cypress ./cypress: copies the booklet cypress into the root of working directory as a folder with like name
• RUN npm install & amp; & amp; \
  npx cypress info: Installs the dependency and then prints the info from cypress (This is helpful to check the cypress version and browser particular)
• ENTRYPOINT [& # 8220; npx & # 8221;, & # 8220; cypress & # 8221;, & # 8220; run & # 8221;]: This is the nonremittal command that will be executed when the container start

Creating docker-compose file

Create a new file named docker-compose.yml and paste the below command

version: ' 3.8' services: e2e-chrome: anatomy:. command: `` -b chrome '' e2e-firefox: flesh:. dictation: `` -b firefox -c video=false ''

Here ’ s a break down of the commands

• version: & # 8216; 3.8 & # 8217;: This is the docker-compose file variation
• e2e-chrome: This is the service name which will use the container to run the cypress tests
• build: This will ensure to use the Dockerfile to build the image for each service
• command: This is to surpass the optional commands to the Entry point command specified in the Dockerfile. “ -b chrome ” is to ensure cypress uses browser chrome to run exam

Another service has been create to test on Firefox using the like command cube.

Create github workflow to run the tests across browser in Github

In the root of the project, make a new pamphlet named.github & gt; workflows & gt; crossbrowserTest.yml

Paste the below in the file and save

gens: cross browser testing on: push: branches: - 'main' jobs: cypress-run: runs-on: ubuntu-latest timeout-minutes: 5 steps: - name: check uses: actions/checkout @ v3 - gens:rundocker-composerun: docker compose up -d e2e-chrome e2e-firefox - gens: wait for services to startrun: docker compose log -f

Here is a break down of the commands:

name: Specifies the gens of the workflow

Below block specifies to trigger this workflow when any codification is pushed to chief branch

on: push: branches: - 'main '

• cypress-run: This is the job gens
• Runs-on: This is to specify in which OS the tryout involve to be run
• timeout-minutes: Maximum time allowed to dispatch this job

Below block is a step within the job to insure out the code

steps: - name: check uses: actions/checkout @ v3

Below cube is a step to make the ikon and run the containers under the services define in the docker-compose file in parallel

- name: rundocker-composerun: docker compose up -d e2e-chrome e2e-firefox

Below block is a step to create the image and run the containers under the services defined in the docker-compose file in parallel

- name: rundocker-composerun: docker write up -d e2e-chrome e2e-firefox

Below block is to wait for containers to start and then publish the logs

- name: wait for services to startrun: docker compose logs -f

The file structure in the project should look like below

Once this is pushed to github and you navigate to Actions tab, the workflow will look like below

The log can be checked to ensure the services and containers have been created with the specified browser.

Why use BrowserStack Automate for Cypress Tests?

Here ’ s why you should run your Cypress tests on Real Devices & amp; Browsers using BrowserStack Automate:

• Diverse Environment Testing: It enables the execution of Cypress tests across a broad selection of browsers and operating systems, annihilate the requisite for preserve local testing infrastructure. This ensures consistent coating performance across various platforms.

• : BrowserStack Automate significantly reduces total testing time by allowing co-occurrent execution of multiple Cypress test suites, facilitating faster iterative feedback and accelerated deployment cycles.

• Integration: The platform seamlessly incorporate with major CI/CD systems, include GitHub Actions, Azure Pipelines, GitLab CI/CD, CircleCI, Jenkins, and Bitbucket, automating the try process within the growing pipeline.
• Diagnostic Tools for Better Debugging: BrowserStack provide comprehensive diagnostic capabilities, including detailed logs, screenshots, and video recordings of test sessions, help in the swift identification and resolution of issues.
• Testing on Existent Devices: Beyond simulated environments, BrowserStack also supports essay on real device and browsers on the cloud, offering more precise and real-world test issue.
• Customizable Test Execution: Users can tailor test executing to meet specific needs through BrowserStack ’ s user interface or APIs, enable adaptable and controlled test runs.

cy.wrapis a versatile and essential command in Cypress that allows you to handle non-Cypress objects, functions, and promises effectively. By enwrap objects or responses, you can seamlessly integrate Cypress & # 8217; s native averment and commands into your test scripts, enhancing both flexibility and readability.

Whether dealing with API responses, asynchronous operations, or international functions, subdue cy.wrap can significantly improve your workflow and control more reliable results in your screen process.

is an excellent choice for running Cypress tests because it offers a scalable, cloud-based infrastructure that decimate the need for complex local setups.

BrowserStack supports real-time cross-browser examination, parallel executing, and integrations with CI/CD pipelines, ensuring quicker test runs and streamline workflow.

Talk to an Expert

Top Useful Docker Commands

Here is a list of some of the most utile docker bid:

• docker inspect & lt; container_or_image_name_or_id & gt;: To regard detailed info about docker ikon or Container
• docker stats: To view resource use of all the running containers
• docker history & lt; image_name_or_id & gt;: To reckon the history of how the persona is built
• docker volume ls: To view all the volumes within the container
• docker-compose down: To stop the running docker compose services
• docker run -it & # 8211; rm & # 8211; memory= & # 8221; 512m & # 8221; & # 8211; cpus= & # 8221; 1 & # 8243; my-app: To limit the memory and CPU usage

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Conclusion

Cypress docker effectively ensures that parameters like node.js, cypress, and browser version are used as needed and remain the same across test performance environment.

Effective pipelines can be built with Cypress Docker to ensure the application behaves systematically across various browser during cross-browser testing.

Related Guides