Cypress: Build Cypress docker image for simple CI

[bahmutov]

Most CI allow using custom Docker image as base. It would be really cool to have official public Cypress docker image. We have built one, here is our docker file

FROM node:6
RUN apt-get update
RUN apt-get install libgtk2.0-0 libnotify4 libgconf2-4 libnss3 xvfb --yes
RUN npm set progress=false
RUN npm i -g cypress-cli
ARG CYPRESS_VERSION
ENV CYPRESS_VERSION ${CYPRESS_VERSION:-0.16.2}
RUN echo Cypress version to install $CYPRESS_VERSION
RUN cypress install
RUN cypress verify

One could use specific cypress-cli version inside if needed.

To build and tag the image, we use this script

set e+x

# build image with everything needed to run Cypress
VERSION=0.16.2
LOCAL_NAME=front-end/cypress-ci
docker build --build-arg CYPRESS_VERSION=${VERSION} -t $LOCAL_NAME .

# tag and push the build to the registry
# https://docs.docker.com/mac/step_six/
IMAGE_ID=$(docker images -q $LOCAL_NAME)
NAME=<docker hub>/$LOCAL_NAME:$VERSION
docker tag $IMAGE_ID $NAME
docker push $NAME

We are pushing to internal Docker hub, but public is obviously the goal here.
Then a Gitlab CI runner just uses that image as the base

image: <docker hub>/front-end/cypress-ci:0.16.2
# caching node_modules folder
# https://about.gitlab.com/2016/03/01/gitlab-runner-with-docker/
cache:
  paths:
  - node_modules/
before_script:
  - cypress verify
stages:
  - test
e2e_test:
  stage: test
  script:
    - npm install
    - npm test
    - npm run build
    - cypress ci

We have spec file bundle build step, otherwise we could just do

e2e_test:
  stage: test
  script:
    - cypress ci

[bahmutov]

We have just open sourced tool that rolls multiple specs (that use ES6 import statements) into individual output specs, and creates a Gitlab CI file that runs specs in parallel: https://github.com/kensho/multi-cypress

[jayfresh]

Does this let you open a VNC window and see the interactions with the browser?

[RandallKent]

@jayfresh - VNC functionality will actually come as a part of our cloud platform which will integrate directly into the Desktop Application.

[jheijkoop]

I modified your Dockerfile to run in jenkins CI

FROM node:6

RUN adduser --disabled-password --uid 1000 --shell /bin/bash ubuntu

RUN apt-get update --yes &&  apt-get install -y --force-yes \
  sudo \
  libgtk2.0-0 \
  libnotify4 \
  libgconf2-4 \
  libnss3 \
  xvfb \
  libasound2 \
  libxss1

RUN npm set progress=false
RUN npm i -g cypress-cli

ARG CYPRESS_VERSION
ENV CYPRESS_VERSION ${CYPRESS_VERSION:-0.16.5}
WORKDIR /home/ubuntu
RUN sudo -u ubuntu cypress install --cypress-version=$CYPRESS_VERSION
RUN sudo -u ubuntu cypress verify

# Clean up APT when done.
RUN SUDO_FORCE_REMOVE=yes apt-get remove -y sudo
RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

I added a ubuntu user, because jenkins running under the ubuntu user jumps into the container with ids 1000:1000, which resulted in it not finding the cypress executable or not having write access for the .config it tries to create in / and I think I needed the extra libraries libasound2 libxss1

[jayfresh]

@RandallKent it would still be good to be able to run locally under Docker (we're on a mixed Windows and Mac environment), and plug VNC into that. But exciting to hear there's a cloud offering

[bahmutov]

Official docker images with dependencies https://github.com/cypress-io/cypress-docker-images