Cypress is a fast, easy, and reliable end-to-end testing solution for anything that runs in a browser, and webapp.io enables you to review changes to your project within minutes instead of hours. On every commit, webapp.io gives you a customizable full-stack preview environment for your webapp. Leveraging the two together, we can get full-stack review environments that can run our Cypress tests.
Running Cypress tests in webapp.io is simple with Layerfiles. To run our Cypress tests on a preview environment, we simply need to install webapp.io onto our repository, and push a commit with our Layerfile.
First off, head over to webapp.io to sign-up/sign-in.
Once signed-in, head over to the “New Installation” tab on the dashboard, and follow the prompts to install webapp.io on your repository (GitHub, BitBucket, or GitLab).
After installed, we can click on the “End-to-end tests for a react app” card to get the link to fork the sample repository.
In this tutorial, we’ll go over a sample React app with a Cypress test. The sample React application can be found in the following repository React E2E Example.
To run the application, fork the repository, clone the repository to your local computer,
and run the command
npm install in the root folder to install the project dependencies.
Once installed, we can run
npm start to start the React project.
To view the file defining our Cypress test, we can navigate to
The Cypress test in this file checks the links in the React application to ensure
that they all work.
Before running the tests in our preview environment for webapp.io, let’s run it locally in another terminal with the following command:
npx cypress run
We can see the Cypress tests have passed in the terminal.
The next step, is to run this in our preview environment, but first let’s go through the Layerfile.
In our sample React application we have a file called
are a set of instructions that tell webapp.io how to build and run your
application as a preview environment. Let’s break down what the existing
This tells webapp.io what base to run tests from.
This installs all the dependencies needed to run our React E2E Application. For
more information on the
RUN command view the
MEMORY instruction allows you to reserve memory before you need it. In
particular, languages like nodejs might require memory to be available before
they are used, so we allocate more memory here.
COPY instruction copies all the files from your repository into the
Virtual Machine from webapp.io. After copied, we create a cypress directory to
store our results, install the dependencies with
npm install and start our
React app with
npm start. Please note that we use
RUN BACKGROUND here so
that webapp.io can proceed to the next step instead of hanging on the React
The above commands instructs webapp.io to enter the cypress directory and run a
server to display the files on port 8000. After serving, we run the command
npx cypress run to run our cypress tests.
Finally, the last command exposes port 8000 so we can access our tests in the preview environment.
Now that we’ve understood the Layerfile, simply push a commit from your local repository. After pushing your commit, head over to the webapp.io dashboard to the “Recent Commits” tab where you’ll see a new run starting.
We can click into the Layerfile to view the logs and see the output of each step. Once the Layerfile is finished running, click on the “View Website” button to view the preview environment with the associated Cypress tests.
If we want to improve the developer experience for the filebrowser in our preview environment, we can add filebrowser to our preview environment to display the cypress results. We can use the following Layerfile to do so:
The key differences are the following lines:
The above command installs filebrowser.
The above commands navigate to the
/cypress directory, run filebrowser on port
9000, and expose the website at port 9000.
After committing this Layerfile, we’ll get the following developer experience in the preview environment:
For more information on filebrowser, check out their documentation.
If your project has a large number of tests, it can take a long time for tests to complete running in series on one machine. Running tests in parallel across many virtual machines can save your team time and money when running tests.
This is where the webapp.io
SPLIT instruction comes in. The
instruction causes the runner to duplicate its entire state a number of times at
a specific point.
In order to run our tests in parallel and view the associated Cypress test results, we need to set up an account with Cypress and obtain a Cypress record key for our project. You can set up an account and project to obtain a key by going through the following documentation.
After receiving your project key, add the key to your webapp.io secrets by
navigating to the “Secrets” tab in the dashboard with the following name,
Once the secret is added, create a new file
test_correct_title.spec.js in the
tests folder with the following content: