How to do end-to-end browser testing on Gitpod

Pauline Narvas DevRel + Community at Gitpod

Jan 31, 2024

Combining the power of Cypress for automated testing with the convenience of Gitpod’s cloud development environments can streamline your development workflow. From consistent dev environments across your team eliminating the “it works on my machine” problem, offloading resources off of your local machine to the cloud, and seamless real-time collaboration.

In this tutorial, I’ll guide you through how to set up end-to-end browser testing on Gitpod using Cypress. All you need is to create the configuration files once and every single time you start a new workspace, 👏it 👏just 👏works.

Want to see it in action now? Open a Gitpod workspace with just a click of a button or dive into our demo repo to start experimenting.

Setting up Cypress in Gitpod

Setting up Cypress on Gitpod involves a few steps to ensure that your development environment is correctly configured for running Cypress tests. Here’s a general guide on how to do this:

1. Configuring the `.gitpod.Dockerfile`

Open up a new Gitpod workspace, and create a .gitpod.Dockerfile.

We’re using the gitpod/workspace-full-vnc Docker image as our base. Read more about using Docker images in Gitpod from our documentation.

Gitpod is designed to provide a full development environment without requiring you to install software on your local machine. When running graphical applications like Cypress, which opens a real browser to run tests, there’s a challenge: Gitpod’s environment doesn’t natively support graphical output in the same way a local desktop does.

This is why we use a Virtual Network Computing (VNC).

It allows you to run applications with a graphical interface (like Cypress’s test runner) in Gitpod and view the output in your local web browser. Similar to using Remote Desktop. Essentially, VNC creates a bridge between the graphical output of your tests running in Gitpod and your local machine, enabling you to see and interact with the Cypress test runner as if it were running locally.

A VNC facilitates the display of Cypress’s graphical test runner, allowing developers to visually debug and interact with applications during test runs, even on headless servers where direct visual feedback is not available.

yml

FROM gitpod/workspace-full-vnc

ENV CYPRESS_CACHE_FOLDER=/workspace/.cypress-cache

# Install Cypress dependencies
RUN sudo apt-get update \
    && sudo DEBIAN_FRONTEND=noninteractive apt-get install -y \
    libgtk2.0-0 \
    libgtk-3-0 \
    libnotify-dev \
    libnss3 \
    libxss1 \
    libasound2 \
    libxtst6 \
    xauth \
    xvfb \
    && sudo rm -rf /var/lib/apt/lists/*

2. Create a `.gitpod.yml` file

The .gitpod.yml file guides Gitpod on how to initialize and prepare your development environment.

For instance, in our setup, the first task is to install npm packages and set up Cypress, ensuring all dependencies are ready for your testing. The second task prepares the environment for running headless Chrome tests and launches Cypress, accessible via port 6080 using the VNC web browser.

yml

image:
    file: .gitpod.Dockerfile
ports:
    - port: 5900
      onOpen: ignore
    - port: 6080
      onOpen: open-preview
tasks:
    - name: install cypress to workspace
      init: |
          npm install
          npx cypress install
    - name: run chrome tests
      command: |
          gp sync-await
          yes | npx cypress run --browser chrome
    - name: open cypress application
      command: |
          gp sync-done
          yes | npx cypress open

3. Time to test it out!

Now it’s time to bring our setup to life! After committing and pushing the new configuration files to your repository, start a new workspace in Gitpod.

As it launches, you’ll witness the configuration taking effect, preparing your environment for Cypress testing. Note: This may take some time.

If you encounter any issues with the example not opening, simply navigate to the IDE’s ports view and manually open the browser for the VNC web view on port 6080. You can also view all ports by running the gp ports list command.

Caption: Example of the ports view in VS Code.

Now you’re ready to test using Cypress on a Cloud Development Environment!

With just a few steps, you’re now equipped to leverage Cypress on Gitpod for efficient and powerful testing.

Speed up your development workflow with Gitpod today! ⚡

How to do end-to-end browser testing on Gitpod