> ## Documentation Index
> Fetch the complete documentation index at: https://docs.webapp.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Cypress

[Cypress](https://www.cypress.io/) is a fast, easy, and reliable end-to-end
testing solution for anything that runs in a browser.

### Example Layerfile

```docker Layerfile theme={null}
#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_14.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 UNORDERED 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](https://www.npmjs.com/package/http-server). When used in
conjuction with
[Cypress reporters](https://docs.cypress.io/guides/tooling/reporters) such as
[Mochawesome](https://github.com/adamgruber/mochawesome-report-generator) high
quality HTML test reports can be viewed in your browser.

### Example Layerfile

```docker Layerfile theme={null}
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_14.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](https://github.com/webappio/CypressMochawesomeExample).

## Setting up Cypress with webapp.io

[Documentation](https://docs.cypress.io/guides/continuous-integration/introduction#Setting-up-CI)
on how to run Cypress inside a CI pipeline and an
[example project](https://github.com/bahmutov/cypress-example-layerci) running
Cypress on webapp.io are also available.

Check out this [detailed tutorial](../integrations/cypress) on setting up
Cypress with webapp.io.