11_Cypress Testing

Introduction

Cypress is a front-end testing tool built for the web. Cypress then enables you to write all types of tests:

• End-to-end tests
• Integration tests
• Unit tests

Installation and Opening Cypress

We use cypress, to test our front-end functionalities. Therefore, you don't have to test the front-end manually, but instead you may profit from efficient cypress testing algorithms (written by yourself).

Cypress is usually already installed on the Flox infrastructure. If you need to reinstall cypress, then run the following command inside your project folder:

yarn

If you want to run cypress using the command line, then run:

yarn run cypress open

The Launchpad

When running the above mentioned command, the Cypress Launchpad will open. While previously only E2E Testing was possible, Cypress now also provides the possibility to perform Component Testing. For Project Managers (PMs), mainly E2E will be relevant. Once you click on the respective symbol, you may chose the browser of your dreams to run the cypress tests.

The Cypress App

As soon as you have clicked on the icon of your preferred browser, the Cypress App will be opened, where you can inspect your Testing Specs, your past Runs and your Settings.

The Section "Runs" requires you to log in to the Cypress Dashboard. The Cypress Dashboard Service is an optional web-based companion to the Test Runner. It provides insights on all your tests run at a glance and with automatic parallelization and load balancing you can optimize CI and run faster tests.

Nevertheless, the Test Runner is of more interest to us. We want to run our tests and want to inspect, if they succeeded or if they failed. Therefore, we click on the element "Specs" and inspect our written test files. Flox provides the original introduction test files that Cypress provides, so that developers get a feeling of how Cypress testing works.

Let's summarize: Inside the IDE of your choice (let's say WebStorm), you write the code for your test. Usually, the code is written inside frontend/cypress/e2e. Then, when you want to run the code and see how it performed, you open the Cypress App where, besides running the test code, you may see how the Test Runner clicks, writes, scrolls... just as a normal human would do.

If you want to learn more about cypress and want to learn about how to write your first E2E, check out the official cypress documentation: Cypress