Ein Erfahrungsbericht über Testing-Frameworks für das Frontend mit Cypress und BackstopJS anhand des PLONE Projekts Onkopedia

Die Vorteile von von Testing-Frameworks

Ein Erfahrungsbericht über Testing-Frameworks für das Frontend mit Cypress und BackstopJS anhand des PLONE Projekts Onkopedia

Ein funktionierender Code ist Teil eines Workflows und sehr wichtig in jedem Webprojekt, ob groß oder klein. Gerade bei großen Projekten wird es schnell zu einer Herausforderung, den Überblick zu behalten. Um nicht bei jeder Änderung alles testen zu müssen, ist es sinnvoll, diesen Schritt zu automatisieren.

Wozu braucht man automatisierte Tests? Es ist eine zeitsparende Methode, weil es viel schneller als das manuelle Testen ist und jederzeit durchgeführt werden kann. Automatisierte Testverfahren sind präzise, was einerseits die Qualität des Codes garantiert und andererseits Sicherheit schafft. Gleichzeitig bedeutet es auch, dass der Code geschützt ist und nicht so leicht kaputtgeht, da Fehlermeldungen gesendet werden, sobald etwas nicht stimmig ist.

Wir implementieren in allen größeren Projekten automatisierte Tests unter Verwendung verschiedener Tools.

Cypress und BackstopJS

Warum wir uns für Cypress im Bereich End-to-End Testing entschieden haben?

Für End-to-End-Tests haben wir uns für Cypress entschieden, ein auf JavaScript basierendes Open Source All-in-one Test-Framework. Wir evaluierten Cypress, als wir für Onkopedia eine facettierte Suche entwickeln und implementieren sollten. Ein bedeutender und entscheidender Vorteil von Cypress besonders in dieser Hinsicht ist, dass es vollständig auf JavaScript basiert und innerhalb eines Browsers selbst ausgeführt wird, wo es die gleiche Run-Loop wie die jeweilige Webanwendung nutzt. Über Node.js liest und emuliert es den Webverkehr und die Interaktionen mit dem Browser.

Cypress bietet die Möglichkeit, verschiedene Arten von Tests zu schreiben, u.a. End-to-End-Tests und Integrationstests. Die Tatsache, dass es auf JavaScript basiert, macht es sowohl für erfahrene Qualitätsmanager als auch für Frontend-Entwickler einfach, Tests zu verstehen, zu erstellen und durchzuführen. Auch das Debugging ist sehr einfach, da es eine präzise und unkomplizierte Fehleranalyse einzelner Objekte ermöglicht. Zusätzlich gibt es die Option nach jedem Testlauf Screenshots zu erstellen, wodurch Befehle oder Zustände leichter reproduziert werden können. All diese Vorteile waren für uns ausschlaggebend, Cypress als automatisiertes Testtool im Onkopedia-Projekt einzusetzen.

Wie wird Cypress installiert?

Die Ausführung des Befehls npm install cypress ist alles, was Sie tun müssen, um Cypress zu installieren. Dadurch werden alle Abhängigkeiten, Bibliotheken, Engines, Server, Frameworks usw. eingerichtet. Darüber hinaus müssen keine Konfigurationen vorgenommen werden, was die Möglichkeit nicht ausschließt, weitere Bibliotheken, Abhängigkeiten oder Einstellungen hinzuzufügen.

Wie werden Tests in Cypress geschrieben?

In einem ersten Schritt muss das Standard-Setup cypress.json modifiziert werden, z.B. durch Ändern der baseUrl auf die verweisende Anwendungsadresse (z.B. localhost:3000). Durch den Befehl cy.visit(url) setzt Cypress der URL, die mit der baseUrl gesendet wird, ein Präfix voran.

Nachdem alle Änderungen vorgenommen wurden, muss die erste Datei im Integration-Folder erstellt werden, um mit dem eigentlichen Testen der Umgebung zu beginnen.

it("test if the url has 2 params document types", () => {
   cy.visit(
     "#https://app-test.onkopedia.com&document_type=drug-assessment||drug-factsheet"
   );
   cy.get(".cards >div").should("have.class", "Mui-expanded");
   cy.get(".cards >div").should(($div) => {
     expect($div).to.contain("Afatinib (Giotrif®)");
   });
 });

Beispiel für einen Dateinamen, der getestet werden soll. Hier definiert als select-drug-from-url.test.js

Die Durchführung eines Tests ist recht einfach, da man nur den Ausführungsbefehl eingeben muss. Danach werden alle Testergebnisse im Terminal angezeigt. Videos und Screenshots werden automatisch gespeichert. Diese sind für die Fehlersuche nützlich.

Durch Ausführen des Befehls npx cypress run öffnet Cypress ein Modal und zeigt die definierte Datei an. Durch Doppelklick auf die zu testende Datei, öffnet sich ein Browser-Tab, der die Ergebnisse des durchgeführten Tests anzeigt.

Warum wir uns für BackstopJS im Bereich UI-Testing entschieden haben?

Um die Benutzeroberfläche unserer Web-Projekte zu testen, haben wir uns für BackstopJS entschieden, ein Open Source Test-Framework für CSS-Regressionstests. Es ist ein einfach zu bedienendes Werkzeug, das visuelle Tests automatisiert, indem es DOM-Screenshots von Webseiten durch verschiedene Viewports vergleicht. Die Änderungen werden hervorgehoben, sodass der Tester sie schnell identifizieren und bewerten kann.

Das Projekt Onkopedia ist in den letzten Jahren sehr schnell gewachsen, und es wurden neue Funktionen entwickelt und implementiert. Je mehr Funktionen, desto schwieriger wurde es, den Überblick über alle Abhängigkeiten innerhalb des Projekts zu behalten. Es ist immer wieder vorgekommen, dass etwas kaputtgegangen ist, ohne dass es wirklich bemerkt wurde. Um keine Zeit mit der Behebung von Fehlern zu verlieren, die nicht entdeckt wurden oder auf dem Staging-Server entdeckt wurden, aber weitere Produktionsversionen blockierten, bis sie behoben waren, haben wir schnell reagiert. Mit BackstopJS haben wir ein Tool gefunden, dass das Testen von Benutzeroberflächen automatisiert und erleichtert.

Wie wird BackstopJS installiert?

Nach der Installation kann ein Projekt durch Ausführen von backstop init eingerichtet werden. Dies erzeugt einen Projektordner im Arbeitsverzeichnis und eine Standardkonfigurationsdatei (backstop.json), in die die projektbezogenen Informationen eingegeben werden können. Sobald das Setup fertig ist, können die Tests geschrieben werden.

Wie werden Tests in BackstopJS geschrieben?

Das Schreiben von Tests in BackstopJS erfordert zunächst die Definition der verschiedenen Viewports der zu testenden Geräte (die gebräuchlichsten sind Desktop, Tablet, Smartphone usw.), wie im nachfolgenden Codeblock dargestellt:

"viewports": [
       {
           "name": "phone",
           "width": 320,
           "height": 480
       },
       {
           "name": "tablet",
           "width": 1024,
           "height": 768
       },
       {
           "name": "tablet-vertical",
           "width": 768,
           "height": 1024
       },
       {
           "name": "Desktop",
           "width": 1860,
           "height": 1024
       }
   ],

Beispiel für häufig verwendete Viewports zum Ausführen von Tests mit BackstopJS

Als nächster Schritt müssen die Szenarien definiert werden:

  • Hinzufügen der URL, die getestet werden soll. Dies kann auch eine lokale Testinstanz sein.
  • Hinzufügen der Referenz-URL. Dies ist normalerweise die produktive Umgebung des Projekts.
  • Definieren der Wartezeit, bevor das Tool mit den Tests beginnt (Verzögerung bzw. Delay).

Die Angaben sehen wie folgt aus:

"scenarios": [
        {
           "label": "Onkopedia home page",
           "url": "https://dev.onkopedia.com/de",
           "referenceUrl": "https://www.onkopedia.com/de",
           "delay": 1000
        },
        {
           "label": "Onkopedia guidelines overview",
           "url": "https://dev.onkopedia.com/de/onkopedia/guidelines",
      "referenceUrl": "https://www.onkopedia.com/de/onkopedia/guidelines",
           "delay": 1000
        },
        {
           "label": "Onkopedia drug-assessment overview page",
      "url": "https://dev.onkopedia.com/de/drug-assessment/guidelines",
      "referenceUrl": "https://www.onkopedia.com/de/drug-assessment/guideliness",
           "delay": 1000
        }
 ],

Beispiel für Szenariospezifikationen zur Ausführung von Tests mit BackstopJS

Zur Vorbereitung der Tests müssen zunächst die Referenz-Screenshots erstellt werden. Der Befehl backstop reference erzeugt Screenshots für jede in den Szenariospezifikationen definierte Referenz-URL (Produktivumgebung). Nachdem die Referenz-Screenshots vorliegen, können die Test-Screenshots, die mit den erstellten Referenzen verglichen werden, mit der Ausführung des Befehls backstop test generiert werden.
Wenn die Software die Erstellung der Screenshots abgeschlossen hat, öffnet sich das Browserfenster und zeigt den Bericht an. Dieser kann wie folgt aussehen:

Beispiel für einen mit BackstopJS erstellten Bericht, der den Referenz-Screenshot, den Test-Screenshot und die hervorgehobenen Änderungen zeigt.

Durch den Befehl backstop approve werden die Referenz-Screenshots durch die neuen Screenshots ersetzt. Dieser Befehl sollte nur ausgeführt werden, wenn kein Fehler festgestellt wird und die lokale/Staging-Version korrekt ist.

Über das Projekt Onkopedia

Die DGHO trägt zur Aus- und Weiterbildung von Ärzten und medizinischem Fachpersonal bei, indem sie medizinische Leitlinien entwickelt, erstellt und veröffentlicht. Der Schwerpunkt liegt auf der Erforschung, Diagnose und Behandlung von Blutkrankheiten und bösartigen Tumoren. Onkopedia ist ein Projekt der DGHO und anderer medizinischer Fachgesellschaften aus Deutschland, Österreich und der Schweiz und dient als Portal, um die Leitlinien sowohl Ärzten als auch Patienten zur Verfügung zu stellen. Im Jahr 2010 wurde die Plone-basierte Plattform von der Firma ZOPYX entwickelt. Abstract Technology wurde als Projektpartner hinzugezogen, um das Portal hinsichtlich Frontend-Entwicklung und Usability zu optimieren.

Unser Fazit

Automatisierte Tests sind für uns entscheidend, insbesondere bei großen Projekten. Nicht nur, um Prozesse zu erleichtern, sondern auch, um die Qualität unserer Arbeit weiterhin zu gewährleisten.

Wir sind mit den Tools Cypress und BackstopJS sehr zufrieden. Zusammen decken sie alle unsere Anforderungen ab, insbesondere im Onkopedia-Projekt. Sie sind sowohl für Entwickler als auch für Neulinge leicht zu installieren, anzupassen und zu bedienen. Die erzeugten Berichte sind sehr genau und erleichtern die Debugging-Prozesse. Beide Tools bieten viele Möglichkeiten, neue Funktionen und UI-Anpassungen gründlich zu testen.

Read the english version of this article under the following link: https://abstract-technology.com/lab/articles/Review-automated-testing-tools

Teilen auf

Share |

Zu gleichen Themen

Kommentare

comments powered by Disqus