Seite 3: Implementieren einer neuen Komponente inklusive Test

Die neue Komponente ist eine Tag-Cloud, in der einzelne Chips angeklickt werden, um nur für sie relevante Einträge anzuzeigen. Chips sind grafische Elemente, um Text hervorzuheben. Zur Veranschaulichung: Abbildung 1 verwendet rechts unter der Überschrift "Tags" Chips, um Begriffe darzustellen, mit denen das Filtern möglich ist. Zudem gibt es einen Switch, mit dem es möglich ist, die Filterfunktion zu deaktiveren. Damit verändert sich das Styling der Chips. Für die Komponente sind somit zwei Elemente identifizierbar: eine Sammlung von Chips, basierend auf den angegebenen Tags für die Einträge, sowie der Switch für die Filterfunktion. Beide Elemente sind für einen Akzeptanztest relevant und müssen eindeutig referenzierbar sein. Im Idealfall geschieht das durch ein einzigartiges Attribut der Form data-cy=element. Durch die Endung cy wird eindeutig, dass es sich um ein Element handelt, das für den Test relevant ist und eindeutig referenziert werden muss. Solch ein Attribut wird nun sowohl dem Chip als auch dem Switch hinzugefügt. Die daraus resultierende Komponente hat die in Listing 5 dargestellte Form:

<template>
  <div>
    <v-row>
      <v-switch data-cy="filterSwitch" label="Filter deaktivieren" @click="filterable = !filterable" class="ml-2">
      </v-switch>
    </v-row>
    <v-row>
      <v-chip 
        :disabled="!filterable"
        id="tagCloudChip" 
        data-cy="tagChips"
        class="mr-2 mt-2 secondary" 
        v-for="(tag, index) in tags" 
        :outlined="!tag.active"
        :key="index"
        @click="activateTag(tag.name)"
      >
        {{tag.name}}
      </v-chip>
    </v-row>
  </div>
</template>

Listing 5: Die Tag-Cloud mit einem Schalter, um den Filter zu deaktivieren

Beide Elemente werden nun in zwei Tests eingebunden, um die Filterfunktion und den Switch zu testen. Die Vorbedingung ist in diesem Test unverändert und zu Beginn werden zwei Einträge hinzugefügt. Anschließend wird das erste Tag geklickt und geprüft, ob nur noch einer der beiden Einträge sichtbar ist und ob es auch der korrekte Eintrag ist (s. Listing 6).

cy.get('[data-cy=tagChips]').eq(0).click()
        
// Korrektheit wird getestet
cy.get('[data-cy=tagChips]').eq(0).should('not.have.class', 'v-chip--outlined')
cy.get('span').contains('Erstellt am').should('have.length', 1)

Listing 6: Test, ob die Filterfunktion Einträge in Blogs korrekt ausblendet

In der ersten Zeile ist hier nun auch zu sehen, dass die Referenz über data-cy verwendet wurde. Da die Anzahl der Tags jedoch beliebig groß sein kann und je nach Anzahl der Einträge schwankt, muss hier weiterhin angegeben werden, welches konkrete Element der Tags zu verwenden ist. An dieser Stelle wird also das erste Element [code]eq(0)[code] selektiert. Dadurch, dass zu Beginn des Tests der Eintrag angelegt wird, ist bekannt, um welches Tag es sich handelt. Damit ist dieses Element für Tests nun von Styling und Inhalt entkoppelt, sodass beide Parameter sich ändern lassen, ohne den Test negativ zu beeinflussen. Das hat zudem den Vorteil, dass sich der Wartungsaufwand für Tests verringert. Wenn ein Test scheitert, kann eine der Ursachen sein, dass das falsche Element referenziert wurde. Das passiert unter anderem, wenn ein Element mit einem bestimmten Styling ausgewählt wird. Wird dieses Styling mehrfach verwendet, kommt es zu einer falschen Auswahl. Die Entkopplung verhindert das, da jedes Element eindeutig auswählbar ist. Mit den zurückgelieferten Ergebnissen von Cypress lässt sich dann das problematische Element direkt identifizieren.

Für die Neuentwicklung von Komponenten gibt es somit drei Schritte, die zu beachten sind. Zunächst muss für eine neue Komponente bestimmt werden, welche Elemente in den Akzeptanztests zu betrachten sind. Die Namen sollten in diesem Fall eindeutig sein und dürfen sich nicht mit anderen Elementen auf der Seite doppeln. Anschließend wird die Komponente implementiert, und die Elemente erhalten ihre vordefinierten Namen. Nach der Implementierung der Komponente kann nun der Test geschrieben werden.

Vergleich von Cypress mit Selenium

Für eine Bewertung, welches Tool zur Testautomatisierung verwendet werden soll, wollen wir nun einmal das Framework Selenium hinzuziehen, um es mit Cypress zu vergleichen. Es ist 2004 erschienen und hat damit einige Jahre Vorsprung. Cypress ist im Gegensatz dazu erst 2017 in eine offene Beta gewechselt.

Die Funktionsweise der beiden Tools ist grundsätzlich verschieden. Cypress führt seine Anweisungen innerhalb eines Browsers aus, während Selenium das außerhalb des Browsers macht. Somit kann Cypress Aktionen direkt auf den entsprechenden DOM-Elementen (Document Object Model) ausführen. Selenium, genauer gesagt der WebDriver, bietet im Gegensatz dazu eine API und ein Protokoll, um Anweisungen an den Browser zu delegieren.

Zudem unterscheiden sie sich in den unterstützten Sprachen, und an dieser Stelle zeigt sich Selenium im Vorteil. Cypress ist JavaScript-basiert, und alle Tests in Cypress lassen sich nur in dieser Sprache schreiben. Selenium hingegen ist in der Lage, Tests in verschiedenen Sprachen auszuführen. Dazu gehören beispielsweise auch Java oder Python. Für Entwicklerinnen und Entwickler, die eine andere Programmiersprache verwenden, ist das von Vorteil, da sie sich nicht erst mit JavaScript auseinandersetzen müssen, um Tests zu schreiben.

Cypress unterstützt aktuell nur Browser aus der Chrome-Familie, Firefox und Edge. Selenium ist zusätzlich auch mit Browsern wie Safari oder Opera einsatzbereit, mit Cypress lässt sich für Safari bisher nicht testen. Da dieser Browser jedoch einen Marktanteil von rund 10 Prozent besitzt, könnte das problematisch sein. Es liegt bereits ein Proposal vor, das eine künftige Unterstützung von Safari für Cypress anregt.

Eine Entscheidung, welches Tool besser ist, lässt sich nicht pauschal treffen. Beide haben ihre eigenen Vorzüge und Nachteile, je nach Einsatzgebiet und Anwendungsfällen. Cypress hat den Fokus auf Entwicklernähe, und das Schreiben von Tests ist relativ einfach. Im Gegensatz dazu bietet Selenium eine große Bandbreite an unterstützten Sprachen, die sich für viele Anwendungsfälle eignen. In meiner persönlichen Arbeit hat sich Cypress bewährt, da ich die Zeit zum Schreiben von Tests damit gering halten konnte und Cypress zugleich alle Anforderungen an die Tests erfüllt hat.