1. Examples
  2. Cypress Example

Cypress is a fast, easy, and reliable end-to-end testing solution for anything that runs in a browser.

Example Layerfile

Layerfile
#This is an example webapp.io configuration for React!
FROM vm/ubuntu:18.04

# To note: Layerfiles create entire VMs, *not* containers!

RUN curl -fSsL https://deb.nodesource.com/setup_12.x | bash && \\
    apt-get install nodejs python3 make gcc build-essential

# Cypress OS dependencies
# https://on.cypress.io/ci#Dependencies
RUN apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev \\
    libnotify-dev libgconf-2-4 libnss3 libxss1 \\
    libasound2 libxtst6 xauth xvfb

# node is a memory hog
MEMORY 2G
ENV NODE_OPTIONS=--max-old-space-size=8192

RUN node --version
RUN npm --version

# Typically we would need to cache
# the NPM modules and the Cypress binary folder
# in the folders ~/.npm and ~/.cache/Cypress
# but webapp.io literally makes and stores Docker containers
# after each command, thus if there were no changes
# the layers would not be rebuilt
# BUT we still want to cache some folders to avoid
# reinstalling Cypress for example when just some source files have changed
# https://webapp.io/docs/layerfile-reference/cache#cache
COPY package.json ./
COPY package-lock.json ./
CACHE ~/.npm ~/.cache/Cypress

# copy the rest of the files
COPY . .
RUN npm ci

# shows where Cypress was installed and what's available
RUN npx cypress info

# print webapp.io variables
# https://webapp.io/docs/layerfile-reference/build-env
# using https://github.com/bahmutov/print-env
# https://github.com/cypress-io/cypress/issues/16101
RUN npx @bahmutov/print-env GIT CI RETRY USER SPLIT

RUN BACKGROUND npm start

# Create a unique link to share the app in this runner.
# Every time someone clicks the link, we'll wake up this staging server.
EXPOSE WEBSITE http://localhost:8888

SECRET ENV CYPRESS_RECORD_KEY

# execute the tests against the same machine (?) on N machines
SPLIT 3
RUN npx cypress run --record --parallel --ci-build-id $JOB_ID-$RETRY_INDEX

Displaying Cypress Results From VM

To serve and view media created by Cypress we suggest using http-server. When used in conjuction with Cypress reporters such as Mochawesome high quality HTML test reports can be viewed in your browser.

Example Layerfile

Layerfile
FROM vm/ubuntu:18.04

# Install Cypress dependencies
RUN apt update
RUN apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

# Install node
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash && \\
    apt install nodejs && \\
    rm -f /etc/apt/sources.list.d/nodesource.list
RUN npm install -g http-server

RUN npm install mochawesome mochawesome-merge mochawesome-report-generator

COPY / /root

RUN npm install

RUN BACKGROUND http-server -p 9000

EXPOSE WEBSITE http://localhost:9000 /cypress

RUN BACKGROUND npm start

RUN npm test

View our example repository, that embeds Cypress test results in pull requests here.

Setting up Cypress with webapp.io

Documentation on how to run Cypress inside a CI pipeline and an example project running Cypress on webapp.io are also available.

Check out this detailed tutorial on setting up Cypress with webapp.io.