Cypress Flaky tests – Dem Wahnsinn Einhalt gebieten

Cypress hilft vielen Entwicklern in ihrer täglichen Arbeit, um eine vernünftige E2E-Testabdeckung umzusetzen.

Dabei stößt man jedoch gelegentlich an die ein oder andere Herausforderung, gerade in Verbindung mit Elementen, die sich wiederholen/generisch generiert werden. Als Beispiel eine Liste von Elementen, welche eine Checkbox enthalten.

Man könnte dem Element jetzt eine id geben, welche den Index und Namen von dem Element beinhaltet Bsp. [id]="element.name + index" und dann über cy.get('#example-1') darauf zugreifen.

Jedoch wissen wir aus der Cypress Dokumentation, dass das vermieden werden soll. Den oft werden Elemente aufgrund dessen nicht richtig identifiziert und Tests laufen nicht mehr richtig durch. Stattdessen sollte man das data-cy Attribute verwenden.

Dieses ist im oben genannten Fall ebenfalls möglich, hierbei ist die Syntax ähnlich Bsp. [attr.data-cy]="element.name + index" und wir können dann über cy.get([data-cy=example-1]) darauf zugreifen und halten hierbei den Best Practice Ansatz von Cypress ein.

Bsp. [id]="element.name + element.id"

---

Bsp. [attr.data-cy]="element.name + element.id"