How to integrate Cypress (with GUI) on Vue project using Docker

#vue #docker #testing

Hey! How are you ? I hope you doing well :)

This time I will show you how to run Cypress inside a Docker container (with GUI option), so you can make your e2e tests without need to install Cypress dependencies (browsers) in your host machine!

Pre-requisits:

Docker
X11 server
Vue project

I recommend you to use Linux. If you are using Windows I recommend you to use WSL2.

Let's do this!

Step 1 - Create docker-compose file for your project

Go to root project folder and create a file called: docker-compose.yml. Copy/paste this code:

version: '3.8'
services:
  app:
    image: node:20.1.0
    container_name: vue-project
    working_dir: /vue-app
    volumes:
      - ./:/vue-app
    command: bash -c
      " npm install
      && npm run dev"

This code creates a container with Node 20 for your Vue project.

command: this option runs npm install and npm run dev after. Make sure you have dev script on your package.json or just change the script here for your context.

Step 2 - Create docker-compose file for Cypress

Go to root project folder and create a file called: docker-compose-e2e.yml.

Put this code into this file:

version: '3.8'
services:
  cypress:
    image: cypress/included
    working_dir: /e2e
    container_name: vue-project-e2e
    entrypoint: "cypress open --project ."
    volumes:
      - ./tests/e2e:/e2e
      - /tmp/.X11-unix:/tmp/.X11-unix
    environment:
      - DISPLAY

This code create Cypress service with official Cypress Docker image that you can find on https://hub.docker.com/.

entrypoint: "cypress open --project .": It means this container will run this command when startup. Basically this command run Cypress inside the current folder.

- ./tests/e2e:/e2e: Creates a volume only for e2e tests folder. This is important because the code above will break without this. You can change the volume name on your host machine as you want.

- /tmp/.X11-unix:/tmp/.X11-unix: This is the basic GUI structure for Linux to make the connection between container and host for Cypress GUI can works.

- DISPLAY: It's Cypress enviroment variable for display GUI.

Step 3 - Running Cypress with GUI

Run this command:
docker compose -f docker-compose.yml -f docker-compose-e2e.yml up --exit-code-from cypress

You can put this into your package.json to make easy to use.

Now you are ready to create your own E2E tests. I will not cover Cypress configuration this time, maybe later if you like this post! ;)

Nice, right ?! :)
If you like this tutorial, please like, follow, and comment.

Thank you and I see you next time! ;)

DEV Community