←  back to guides
How to do end-to-end browser testing on Gitpod

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

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.

Open in Gitpod

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.

Virtual Network Computing (VNC) enables remote desktop access over a network, essential for tests requiring a graphical user interface (GUI), such as headed mode testing. This allows developers to visually debug and interact with applications during test runs, even on headless servers.

language icon 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.

language icon 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! ⚡

Author
@pawlean's avatar on GitHub Pauline Narvas DevRel + Community at Gitpod

Publish date

Jan 31, 2024

Join developers, everywhere.

Development environments pre-configured with the tools and dependencies needed to get inspired and start building.

Related articles

Monthly Newsletter

Subscribe to get a summary of what we've shipped over the last month and everything you need to know around developer experience.

By submitting this form, I confirm that I acknowledge the collection and processing of personal data by Gitpod, as further described in the Privacy Policy.