Testing: Acceptance tests in software development with Cypress

By writing tests, it is possible for developers to publish high quality software over the long term. A high test coverage also ensures that future regression tests deliver meaningful results with little effort. The difficulty here arises from the perceived added value in daily work. In my projects I was able to find out that the development of new features in particular ensures a personal sense of achievement and promotes the development of a software product.

The tests initially do not bring any direct added value in the short term, apart from the fact that they check the logic and ensure its functionality. In the long term, the added value increases as soon as the writing of tests is consistently integrated into your own development. In my work, Cypress has proven itself for this, as it can be integrated into projects with little effort and enables tests to be created quickly. In addition to Cypress, there are a number of other frameworks that can be used for writing tests. This article should first introduce the relatively new framework for test automation. This is followed by a comparison with a possible alternative, the Selenium testing tool, which has been established for a long time. The two tools each have different peculiarities, which is why they are suitable for different application scenarios, which the article will work out towards the end.

This contribution is part of a series of articles to which heise Developer has explicitly invited young developers – with the aim of informing their own kind, but of course also interested “older semesters”, about current trends, developments, phenomena and personal experiences. The articles in this series appear on a monthly basis. Are you a “Young Professional” yourself and want to be part of this series? Then apply with a suggestion to the editorial team: We are at your side with helpful tips throughout the writing, editing and approval process.

Cypress is a framework for end-to-end testing (E2E) in JavaScript, with which the user behavior can be simulated in order to test workflows. There are four steps in the foreground: the integration of the framework, the subsequent writing of the tests, their execution and debugging. In this article, I’ll focus on introducing acceptance testing and the first three steps in the workflow. Cypress has a speaking syntax that makes it easier for developers to formulate and understand tests. The formalized language allows cypress tests to be pre-formulated. An example of this would be the formulation of the order in which the elements in the graphical user interface (GUI) of an application are used to carry out a specific process (such as creating a blog article). This means that even people with a less developed technical background can formulate the workflow, and then a developer implements the specific test in Cypress.

The “Blogs” project is used to visualize the tests. The application consists of a simple interface including elements with which users can interact, for example to activate a dark mode or to create a new blog entry. The application is based on Vue.js in combination with Vuetify. Vuetify is a material design framework for quickly creating a sample application with user interface elements for your own project. However, Cypress is not bound by any particular framework. Overall, there should be three components in the sample project – first of all, the surface itself, which can be seen in Figure 1.

The project blog interface (Fig.1)

There is also a dialog for adding a new entry, which can be seen in Figure 2. An entry consists of a title, a material design icon, the content and the tags. As soon as the entry has been added via the dialog, the publication date also appears automatically.

Dialog for adding a new entry (Fig. 2)

First, we will implement a test for the existing components and then develop an extension in the form of a filtering tag cloud. With the tests in mind, the component can be built in such a way that tests are easy to create.

To home page