Cypress

Frontend testing traditionally stands the test pyramid on its head: lots of end-to-end testing, hardly any unit testing, and flaky jest tests with endless timeouts in between. Cypress wants to change this - not only as a Selenium alternative for end-to-end testing, but also with component testing, which tests individual React, Vue or Angular components in isolation in the real browser. The visual feedback makes test-driven development in the frontend practical: every test step is visible as a DOM snapshot, and screenshots in the event of an error immediately show why a test fails. The open source version is completely sufficient for most software testing teams - test parallelization can also be implemented in your own pipeline without a commercial cloud.

Podcast Episode: Cypress

Dehla has been working with automation tools for many years. Cypress has won her over. The open source tool has many advantages, such as flexible use in several test levels and speed. But Cypress also has its limits, of course. Dehla explains how to proceed with Cypress and how her team works with it. Finally, she gives valuable tips for anyone who wants to try out Cypress.

“Cypress manages to combine the speed of testing with visual feedback” - Dehla Sokenou

Dr.-Ing. Dehla Sokenou completed her doctorate in 2005 at the TU Berlin on UML-based testing. She feels at home in all phases of software development, but continues to focus on all topics related to quality assurance and testing. At WPS, she works as a test and quality manager and software architect. She is also the spokesperson for the GI specialist group Test, Analysis and Verification of Software (TAV) and on the spokesperson committee of the Innovative Test Methods working group.

Highlights der Episode

• Cypress runs in the real browser and shows visual feedback - therefore more stable than Jest emulation.
• Component Testing turns the frontend test pyramid upside down: Individual components isolated instead of just end-to-end.
• The flipbook feature shows DOM snapshots before and after each testing step - ideal for Test-Driven Development.
• Cypress Open Source is enough: test parallelization can be built in GitLab pipelines.
• Testing Library makes tests more intuitive: Search for button labels instead of hardcoding DOM paths.

Cypress: Revolution in the field of test automation

Dehla introduces Cypress, a revolutionary test automation tool for web development. She discusses the benefits of Cypress, talks about challenges and best practices and how it is changing the testing landscape.

Cypress is more than just a Selenium competitor

Cypress started out as an end-to-end testing tool and quickly positioned itself as a strong competitor to Selenium. However, it has since developed far beyond this. Of particular interest is the introduction of component testing, which opened up a new perspective on front-end testing. Instead of turning the test pyramid on its head, component testing enables a more focused view of individual components - a method that promises faster feedback and greater test stability.

Dealing with tests: a paradigm shift

Dehla talked about the paradigm shift in Cypress’ approach to testing. Instead of cumbersomely using Jest, which does not test in the real browser and is therefore often unstable, Cypress uses the real browser for testing. This not only leads to a higher stability of the tests, but also to visual feedback during the testing process. Of particular note is Cypress’ ‘Thumb Cinema’ feature, which allows each step of a test to be visualized, providing immediate insight into the behavior of the component under test.

Test-driven Development im Frontend

Cypress has also opened up new possibilities for test-driven development (TDD) in the front end. Thanks to the tool’s intuitive handling, developers start writing tests even before the actual component exists. This process supports structured development and helps to gradually introduce features and receive immediate feedback.

The evolution of Cypress

Cypress is constantly evolving. From its beginnings as a simple testing tool to the current version 12, Cypress has undergone several significant updates. These updates included not only bug fixes and performance improvements, but also the introduction of new features such as component testing for various frameworks (React, Vue, Angular). Despite minor hurdles in the introduction of new features, it has become clear that the issues have now been resolved and Cypress provides a stable environment for front-end testing.

Tips for getting started

For anyone who wants to get started with Cypress, Dehla recommends reading up thoroughly and familiarizing themselves with the setup. A key tip is to use the Testing Library together with Cypress for a more intuitive test design. This approach not only makes it easier to write tests from the user’s point of view, but also contributes to stability. The key to success is to start simple and gain your own experience.