Cypress: So testen wir automatisiert Formulare in Contao
Kontakt- und Bestellformulare sollten regelmäßig auf Funktion getestet werden – besonders nach einem Update. Denn es gibt nichts ärgerliches als eine Anfrage, die den Empfänger nicht erreicht.
Doch was ist mit Websites, die über sehr viele Formulare verfügen? Reicht es, stichprobenartig 1-2 Formulare zu testen und dann davon auszugehen, dass alle Formulare funktionieren? Das kommt mit Sicherheit auf die Formulare an.
Bei einem unserer Kunden war dies keine Lösung. Denn 26 der 28 Formulare waren verbindliche Bestellformulare. Doch das manuelle Testen jedes Formulars nach jedem Update hätte mindestens eine halbe Stunde gedauert. Deswegen musste eine andere Lösung her.
Mit Cypress automatisierte Frontend-Tests erstellen
Mit Cypress lassen sich automatisierte Frontend-Tests durchführen und so zum Beispiel auch Formulare testen. Cypress basiert auf Javascript, genauer gesagt auf Node.js und kann lokal, auf einem entsprechenden Server oder über die eigenen Dienst, die Cypress Cloud genutzt werden.
Wir lassen die Tests momentan noch lokal laufen, da wir auch die monatlichen Contao Updates zunächst lokal testen. Langfristig überlegen wir die Tests über Gitlab auszuführen, um so den Prozess weiter zu automatisieren.
Auch wenn die Cypress Dokumentation sehr gut ist, findest du nachfolgend ein Test-Script, mit dem wir Formulare in Contao testen:
/// <reference types="cypress" />
context('Kontaktformulare', () => {
// Ausgabe in Cypress, welches Formular gestetet wird
it('Kontaktformular', () => {
// Besuche erstmal eine
// andere Unterseite (Bot-Erkennung umgehen)
cy.visit('/leistungen.html')
// Klicke Kontakt im Menü
cy.get('.nav--main .kontakt a').click()
// suche das Kontaktformular
// (sinnvoll bei mehreren Formularen)
cy.get('#contact').within(() => {
// Trage Testnutzer in das Feld Name ein
cy.get('[name="name"]')
.type('Testnutzer', { delay: 200 }).should('have.value', 'Testnutzer')
cy.get('[name="email"]')
.type('test@erdmann-freunde.de', { delay: 200 }).should('have.value', 'test@erdmann-freunde.de')
cy.get('[name="nachricht"]')
.type('Dies ist eine automatisierte Testnachricht', { delay: 100 }).should('have.value', 'Dies ist eine automatisierte Testnachricht')
// Absenden Button kliken
cy.get('button[type="submit"]').click()
})
// auf der nachfolgenden Seite sollte der Bestätigungstext stehen
cy.get('.mod_article').should('contain', 'Vielen Dank für Ihre Anfrage')
})
})Wenn du Unterstützung beim Aufsetzen und der Einrichtung von Frontend-Tests mit Cypress benötigst, dann melde dich gerne bei uns: