Formulare automatisiert testen mit Cypress

Als gewissenhafte Agentur führst du regelmäßig Contao-Updates durch. Aber testest du danach auch alle Formulare? Und prüfst du sie auch, nachdem der Hoster ein Update durchgeführt hat?

Wenn Interessent:innen nach dem Absenden eines Kontaktformulars einen Fehler angezeigt bekommen, herrscht nicht nur Unsicherheit, ob die Nachricht angekommen ist — es macht auch einen schlechten Eindruck. Schlimmer ist nur noch, wenn sie eine Bestätigung bekommen, obwohl die Nachricht aufgrund eines technischen Problems nicht zugestellt werden kann (z. B. weil sie vom Mailserver geblockt wird).

Deshalb gehört zu monatlichen Updates bei Wartungsvertragskund:innen auch der Test aller wesentlichen Formulare — inklusive der Bitte um kurzes Feedback, ob die Mails angekommen sind. Bei 1–3 Formularen pro Website geht das noch schnell händisch. Bei einer Kanzlei mit 28 teilweise mehrseitigen Formularen wären dafür aber selbst mit den flinksten Fingern und der Autofill-Funktion des Browsers mindestens 30 Minuten pro Update fällig. Zeit für automatisierte Frontend-Tests.

Ghost Inspector

Ghost Inspector ist ein Dienst für automatisierte Browser-Tests, mit dem du (fast) ohne Programmierkenntnisse Frontend-Tests erstellen kannst. Mit einer Browser-Erweiterung nimmst du die gewünschten Aktionen auf und editierst sie im Nachgang. Außerdem legst du fest, welches Ergebnis du erwartest — z. B. einen bestimmten Text auf der Bestätigungsseite. Der Haken: Ghost Inspector ist nicht ganz günstig.

Selenium

Selenium kann alles, was Ghost Inspector kann, und verursacht keine monatlichen Kosten. Nach der Installation des Treibers und einer Firefox-Erweiterung lassen sich auch hier Aktionen aufnehmen und nachträglich bearbeiten. Trotzdem wird nicht jede:r mit Selenium warm — es kann so viel mehr, als man für Formular-Tests braucht, und die Dokumentation macht einen eher abschreckenden Eindruck.

Cypress

Den Ausschlag gab eine Session von Mathias von PDIR auf dem Contao Camp 2022, der zeigte, wie sein Team Frontend-Tests mit Cypress durchführt. Das Ergebnis in der Praxis: Nach jedem Contao- oder Server-Update werden alle 28 Formulare der Kanzlei automatisiert auf Funktion getestet — in nur 3 Minuten statt rund 30.

Tipp: Wenn du Cypress selbst ausprobieren möchtest, findest du im Wissensbereich ein Beispiel-Test-Script für ein Kontaktformular in Contao: Contao-Formulare automatisiert testen.

Cypress prüft die Funktion — ob nach einem Update auch das Layout noch stimmt, klärst du mit visuellen Regressionstests.