Im Folgenden möchte ich gerne das Framework Cypress vorstellen. Dieses lässt sich besonders einfach in Bestandsprojekte einbinden, um ein schnelles Umsetzen von Tests zu ermöglichen. Einer der Vorteile ist, dass die Syntax des Frameworks sprechend formuliert wurde, was das Entwickeln von Tests sehr komfortabel macht. 

Die Tests in Cypress werden in JavaScript formuliert und sind für das Frontend gedacht. Cypress bietet hierbei zudem eine interaktive Oberfläche zum Durchführen der Tests und viele hilfreiche Funktionen für das Debugging.

Implementation von Tests

Idealerweise sollten die Tests mit Implementation der Komponente geschrieben werden, andernfalls ergeben sich folgende Probleme:

• Unklare Referenzen
• Erschwertes Debugging
• Zukünftige Aufwände

Diese ergeben sich, da ohne entsprechende Anpassung Referenzen im Code verwendet werden müssen, die bereits existieren. Man stelle sich beispielsweise eine Klassenbezeichnung als Referenz vor. Wenn diese Klasse bei zukünftiger Anpassung verändert wird, so wird in den Tests das Element nicht mehr referenziert und es kommt zu einem Fehler. Durch die einzigartige Bezeichnung der Elemente wird zudem Debugging erleichtert, da das fehlerhafte Element eindeutig ist. Auf diesem Weg lassen sich außerdem zukünftige Aufwände vermeiden, da Tests dann nicht nachgereicht werden müssen und Bugs in der Software frühzeitig abgefangen werden können.
Im Rahmen von Cypress wird für die eindeutige Referenz insbesondere die data-cy Eigenschaft verwendet.

describe('Add Dialog Test', () =>{
    it('inputs a text and check if element contains text', () =>{
        cy.get('[data-cy=inputField]').type('test')
        cy.get('[data-cy=output]').should('have.text', 'test')
    })
})

Vergleich Cypress und Selenium 

Zudem ist es für eine Entscheidung für ein Testframework von Interesse, Cypress mit anderen Frameworks zu vergleichen. Für Cypress und Selenium ergeben sich dabei basierend auf den Anforderungen unterschiedliche Aspekte, die betrachtet werden können. Zum Beispiel sollte dabei betrachtet werden in welcher Programmiersprache die Tests geschrieben werden müssen. Cypress Tests sind in Javascript geschrieben, während Tests in Selenium in unterschiedlichen Programmiersprachen formuliert werden können. Ebenfalls relevant sind die unterstützten Browser. Selenium unterstützt beispielsweise auch Safari, was bei Cypress noch nicht vorhanden aber bereits geplant ist.

Mehr zu dem Thema findet man im Artikel hier auf heise.de, den ich dort veröffentlichen durfte.