Saturday, May 2, 2020 - webdev | gitpod | cypress | sapper
Develop Cypress end-to-end tests on Gitpod.io - Virtual Desktop included
Run the Cypress UI on Gitpod.io without the need of a local development environment.
Experience it for yourself
Before we go into the details, you can experience Cypress end-to-end tests running in a virtual environment in your browser with the following link:
Click the ”Login with GitHub & Launch Workspace” button, follow the instructions and you will be up and running in a moment.
npm install completes automatically, a development server starts in one terminal and Cypress starts in a second terminal. Besides that, a second browser tab will open with a virtual desktop where, after a minute or so, you will see the Cypress UI.
The first browser tab shows the editor (the errors in the console can safely be ignore):
Whereas the second browser tab provides the Cypress UI (in this case, it’s a default Sapper application):
If you like the simplicity of a one-click development environment, you can use the coupon code
MIKENIKLES to get 30% off for the first 3 months of your Gitpod subscription.
What is required to make it work? (Pull Request)
The source code is available at https://github.com/mikenikles/cypress-on-gitpod.
The first thing is to add
cypress as a dev dependency with
npm i -D cypress. This ensures it gets installed like any other dependency when
npm install runs.
Next, we need a
.gitpod.yml configuration file to configure a custom docker image (more on that in a minute), a few tasks to run when the development environment loads and some port definitions. Let’s look at that file section by section:
image: file: .gitpod.Dockerfile
This instructs Gitpod to use a custom Docker image, as defined in the specified file.
tasks: - init: | touch /tmp/.npm-lock npm install rm /tmp/.npm-lock command: npm run dev - init: sleep 1 && while [ -f /tmp/.npm-lock ]; do sleep 1; done command: npm run cy:open
The two tasks (as seen by their
-) tell Gitpod to open two terminals. In the first terminal, a temporary file is created,
npm install executed and eventually, the temporary file is deleted.
In the second terminal, the
init command waits until the temporary file is no longer available. When that’s the case, we can be sure
npm install completed in the first terminal and all dependencies are available. We then open Cypress with the provided
cy:open NPM script.
To wrap up the
.gitpod.yml file, we define three ports and instruct Gitpod what to do.
10000 are ignored,
6080 is opened in a new tab - that’s the virtual desktop.
ports: - port: 5900 onOpen: ignore - port: 6080 onOpen: open-browser - port: 10000 onOpen: ignore
A custom Docker image
As defined in the
.gitpod.yml configuration above, we define a custom Docker image in
.gitpod.Dockerfile as follows:
FROM gitpod/workspace-full-vnc # Install Cypress dependencies. RUN sudo apt-get update && sudo DEBIAN_FRONTEND=noninteractive apt-get install -y libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb && sudo rm -rf /var/lib/apt/lists/*
A few lines of configuration and we’re up and running with Cypress on Gitpod.io. Make sure you have a look at the pull request where I provided a few annotations in the code.
I’m writing a book, Cloud Native Web Development
If you want to learn how to develop modern, cloud-native web applications end-to-end, please sign up for updates at https://gumroad.com/mikenikles or follow me on Twitter @mikenikles. The book features content such as this blog post with more details and additional stories based on my two decades of experience in developing software.