Cypress

​

What you’ll learn:

1. How to run Cypress tests with webapp.io as part of a CI/CD pipeline
2. How to make the filebrowser experience better for your developers
3. How to parallelize Cypress test runs within webapp.io

​

Video Tutorial:

​

Overview

1. Webapp.io + Cypress
2. Running Cypress Tests in webapp.io
3. Sample App Overview
4. Understanding Layerfiles
5. Viewing Cypress Results
6. Running Tests in Parellel

​

1. Webapp.io + Cypress:

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.

​

2. Running Cypress Tests in webapp.io

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.

​

3. Sample App Overview:

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 react-e2e-example/tests/test_navigation.spec.js. 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.

​

4. Understanding Layerfiles

In our sample React application we have a file called Layerfile. Layerfiles 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 Layerfile does.

FROM vm/ubuntu:18.04

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 RUN Documentation.

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.

The first 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 start process.

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.

​

5. Viewing Cypress Results

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.

​

6. Running Tests in Parellel

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 SPLIT 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, CYPRESS_RECORD_KEY.

Once the secret is added, create a new file test_correct_title.spec.js in the tests folder with the following content: