18.02.2025

Automated End-to-End Testing

Error-Free Web Applications with Cypress

Testing web applications is a central component of modern software development. Manual testing is often time-consuming, error-prone, and difficult to scale. Cypress is an end-to-end testing tool that was specifically developed for the requirements of automated testing of web applications.

Error-free web applications with Cypress

Introduction

In today's web development, ensuring the quality of an application is crucial for success. To guarantee a seamless user experience, automated end-to-end (E2E) testing has established itself as an indispensable component of the development process. One of the most performant tools for automated testing is Cypress, which we would like to explore in more detail in this article.

Cypress enables developers to conduct tests directly in the browser, thus realistically reproducing the user experience. With its focus on speed, user-friendliness, and stability, Cypress is ideal for comprehensively testing web applications and identifying potential errors early. In this article, you will learn why Cypress plays an important role in modern web projects and how you can successfully implement it.

What is Cypress?

Cypress is a modern end-to-end testing framework specifically developed for web applications. It is based on JavaScript and deeply integrated into the browser. This means that tests are carried out in the same environment in which users interact with the application - namely directly in the browser. This ensures particularly realistic results.

Why is Cypress so special?

Cypress distinguishes itself through its close integration into the browser and its user-friendliness. Here are some of its outstanding characteristics:

Simple Setup: No complex setup - install Cypress with one command, and you can start immediately.
Tests in the Browser: Your tests run in the same environment as the application, making the results particularly realistic.
Fast Debugging: With screenshots, videos, and interactive runtimes, you can immediately see where the problem is.

Compared to other testing frameworks like Selenium, Cypress offers a simpler user experience. The integration into the browser and faster test execution make it the optimal choice for automated testing of modern web applications.

Cypress logo

Advantages of Cypress

Performance and Speed

Cypress provides real-time feedback, allowing developers to immediately recognize and fix errors. This makes the entire development process more efficient. You can write and execute tests quickly, which is a significant advantage, especially for extensive projects.

Realistic Tests

Since Cypress tests are executed directly in the browser, they reflect the actual user experience. This ensures that applications function error-free under real conditions.

User-Friendliness and Easy Integration

Cypress uses an intuitive syntax that enables quick onboarding. Moreover, Cypress can be seamlessly integrated into existing development workflows, including Continuous Integration (CI) and Continuous Deployment (CD).

Flexibility and Adaptability

Cypress offers a variety of APIs and configuration options that allow tests to be tailored to a project's specific requirements. In addition to testing user interfaces, Cypress also supports API tests and can be seamlessly integrated into CI/CD pipelines.

Cypress in Practice

Example 1: Cypress in E-Commerce

A leading e-commerce company implemented Cypress to automate testing of the entire checkout process. This allows for early detection of problems in payment and shipping processes, improving user experience and reducing purchase abandonment.

Example 2: Cypress for SaaS Platforms

A provider of a project management platform uses Cypress to test critical functions like user registration and team collaboration. This helped shorten development cycles and improve the application's stability.

Example 3: Financial Platform with Continuous Integration

A financial platform with high security requirements uses Cypress for automated end-to-end testing in Continuous Integration. Errors in transaction processes are thus detected and resolved in real-time.

Integration into Existing Systems

Thanks to comprehensive documentation and support for various CI/CD tools, Cypress can be seamlessly integrated into existing development environments.

Implementing Cypress: Step-by-Step Guide

Step 1: Installing Cypress

Installing Cypress is the first step to integrate automated tests into your project. Cypress will be installed as an npm package, which means you must have Node.js and npm (Node Package Manager) set up in your project.

Installation command:

Open your terminal or command line and navigate to the root directory of your project.
Execute the following command to install Cypress as a development dependency:

$ npm install cypress --save-dev

Step 2: Starting Cypress

After installation, you can start Cypress for the first time and explore the interactive test environment. Use the following command:

$ npx cypress open

Step 3: Creating and Structuring the First Tests

Cypress expects your tests to be stored in a special directory located at cypress/integration. When you open Cypress for the first time, this directory will be automatically created.

Create a new test file in this directory, e.g. example.spec.js.
Write a simple test to ensure that Cypress is functioning. Here's an example of a basic test that checks whether your website loads correctly:

describe('My first Cypress test suite', () => {
    it('Visits the start page', () => {
        cy.visit('https://your-website.com');
        cy.contains('Welcome');
    });
});

Step 4: Test Execution

After creating your first test, you can run it in the Cypress Test Runner interface. Simply select the previously created example.spec.js file in the Cypress window, and the test will be automatically executed in the browser. You can observe the test steps in real-time.

Step 5: Integrating Cypress into CI/CD Pipelines

A key advantage of Cypress is the easy integration into CI/CD pipelines, allowing your tests to be automatically executed with every code change. Here's a general workflow for integrating Cypress into a CI environment like GitLab CI, Jenkins, or GitHub Actions:

Create a CI configuration file in your project (e.g. .gitlab-ci.yml or .github/workflows/test.yml).
Include Cypress commands in the pipeline configuration. Here's a simple example for GitLab CI:

stages:
  - test

cypress-test:
  image: cypress/base:14
  stage: test
  script:
    - npm ci
    - npx cypress run

Execute the pipeline to ensure that Cypress tests are automatically run with each new commit or merge request.

Michael Schilonka

We can also make your application error-free with Cypress tests.

Get in touch

Best Practices for Writing Cypress Tests

To get the most out of Cypress and create efficient and maintainable tests, there are several best practices you should follow:

Avoid direct dependencies between tests: Each test should be independent of other tests. This makes debugging easier and makes your tests more robust.
Use mocks and stubs to reduce API dependencies: Use Cypress' cy.intercept() function to simulate API calls and avoid unnecessary dependencies.
Use selectors selectively: Use targeted data attributes like data-cy=“element-name” to make your tests more stable, even if the layout changes.
Avoid too many “wait” commands: Use Cypress's built-in functions to wait for content to load, such as cy.get(), instead of adding arbitrary cy.wait() commands.
Use the Cypress dashboard option: For larger test suites, the dashboard provides detailed reports, screenshots and videos of failed tests.

Error Handling and Debugging with Cypress

Cypress offers powerful debugging tools to help you quickly find and fix problems:

Interactive Runtime: When a Test Fails, You Can See on the Test Runner Interface Which Step Failed and Why.
Screenshots and Videos: Cypress Automatically Takes Screenshots and Videos of Every Failed Test, Allowing You to Replay the Exact Moment of the Error.
Chrome DevTools Integration: Cypress Allows You to Use Chrome DevTools While Your Tests Are Running to Investigate Detailed Network and Console Errors.

Frequently Asked Questions

1. What is Cypress and What is it Used For?

Cypress is an end-to-end testing framework for web applications. It enables developers to run automated tests directly in the browser to ensure that an application works as expected.

2. What Advantages Does Cypress Offer Compared to Selenium?

Cypress differs from Selenium in that:

Faster Test Execution Directly in the browser
Simpler Setup Without additional web driver or plugins
Better Debugging Options, Including screenshots and videos of failed tests

3. How Can Cypress Be Integrated into CI/CD Pipelines?

Cypress can be seamlessly integrated into Continuous Integration/Deployment (CI/CD). It is defined as a test step in the CI configuration (e.g. GitLab CI, GitHub Actions) and automatically executes tests for every code change.

4. What Are the Best Practices for Cypress Tests?

Independent Tests: Each test should run independently
Targeted Selectors: Using data-cy-attributes for stable tests
Use API Interception: Monitor API responses with cy.intercept() instead of fixed wait times
Modular Test Design: Outsource recurring test logic to custom commands or helper functions

5. For which applications is Cypress not suitable?

Cypress supports only modern web applications. Limitations exist with:

Tests in multiple browser tabs or different domains simultaneously (workarounds necessary).
Mobile App Testing, since Cypress is not designed for native apps.
Tests for Internet Explorer or older browsers, as Cypress only supports modern browsers.