End-to-End Testing einer Applikation mit integriertem Captcha

In diesem Artikel erklären wir Ihnen, wie Sie Ihre Anwendung mit E2E-Tests testen können, auch wenn sie durch ein Captcha geschützt ist.

Was sind E2E-Tests?

End-to-End-Tests sind eine Testmethode, bei der das System aus Kundensicht als Ganzes getestet wird. Dies hilft den Entwicklern, Fehler aus Benutzersicht frühzeitig zu finden. Aus diesem Grund werden E2E-Tests sehr häufig in den verschiedenen Testphasen vor einem Release durchgeführt. Beliebte Tools für diese Art des Testens sind derzeit z.B. Playwright, Selenium oder Cypress.

Welche Probleme gibt es mit E2E-Tests und Captchas?

Aufgrund der immer kürzer werdenden Releasezyklen ist es bei E2E-Tests wichtig, den manuellen Testaufwand so gering wie möglich zu halten. Daher sollte ein Großteil der Tests automatisiert werden. Diese übernehmen die Kontrolle über einen ausgewählten Browser und testen die Anwendung aus Kundensicht.

Und hier kommen wir zu einem häufigen Problem mit Captchas. Diese sind dazu da, um Ihre Anwendung vor Bots zu schützen, die ähnlich wie Ihre E2E-Tools vorgehen. Daher bleibt Ihnen oft nichts anderes übrig, als das Captcha während der Testtage zu entfernen. Hierbei besteht jedoch immer das Risiko, dass bei der Live-Integration noch Probleme auftreten, da das Zusammenspiel von z.B. Formular und Captcha nicht getestet werden konnte.

Welche Lösung bietet CaptchaFox?

Damit Sie Ihre Appikation mit dem eingebudenenden Captcha erfolgreich testen können, bietet CaptchaFox Ihnen für diesen Fall einen Testschlüssel an, den Sie in unserer Dokumentation finden. Dieser Testschlüssel kann nur in Kombination mit einem bestimmten geheimen Schlüssel in Ihrem Backend verwendet werden.

Um diesen möglichst effektiv nutzen zu können, empfiehlt es sich, mit verschiedenen Umgebungen zu arbeiten. Im folgenden Beispiel zeigen wir Ihnen, wie Sie dies in einer Angular-Anwendung tun können.

Beispiel in Angular

Um verschiedene Umgebungen zu erstellen, können Sie die CLI von Angular verwenden und den folgenden Befehl ausführen um Application Environments zu erstellen. In Angular sind Application Environments Konfigurationen, die es ermöglichen, verschiedene Einstellungen (wie API-URLs oder Debug-Flags) für unterschiedliche Umgebungen (z.B. Entwicklung, Produktion) festzulegen. Sie werden typischerweise in separaten Dateien gespeichert und beim Build-Prozess je nach Zielumgebung ausgewählt.

1ng generate environments

Sie sollten nun die folgende Ordnerstruktur in Ihrem Projekt vorfinden:

1project
2│
3└───app
4│   │   app.component.html
5│   │   app.component.ts
6│   
7└───environment
8    │   environment.ts
9    │   environment.development.ts
10    │   environment.staging.ts

In die neu generierte environment.ts können Sie nun alle Umgebungsvariablen hinzufügen, die Sie für Ihre Live-Umgebung benötigen, wie z.B. den Seitenschlüssel für CaptchaFox, den Sie im Portal generiert haben.

1export const environment = {
2  production: true,
3  apiUrl: 'your-website.url'
4  captchaFox: 'your-sitekey'
5};

Als nächstes können Sie die Umgebungsvariablen für Ihre Teststage festlegen. Öffnen Sie dazu die Datei environment.staging.ts und fügen Sie auch hier die Umgebungsvariablen hinzu. Achten Sie darauf, dass Sie hier die Variablen verwenden, die Sie für die Tests benötigen. In unserem Beispiel sieht das so aus:

1export const environment = {
2  production: false,
3  apiUrl: 'your-website.url'
4  captchaFox: 'sk_11111111000000001111111100000000'
5};

Den hier verwendendeten Testschlüssel können Sie auch für Ihre Tests benutzen. Sie finden diesen auch in unserer Dokumentation. Durch Verwendung dieses Seitenschlüssels wird das Captcha für den End-to-End Test immer eine erfolgreiche Antwort zurückliefern.

Um Ihre Anwendung in der Testumgebung zu bauen, führen Sie einfach den folgenden Befehl aus:

1ng build --configuration=staging

Mit dem erhaltenen Seitenschlüssel können Sie Ihre Anwendung jetzt in verschiedenen Entwicklungsumgebungen testen, indem Sie das Captcha in Ihrer bevorzugten Umgebung einbinden und die Funktionalität entsprechend überprüfen. Dies ermöglicht Ihnen, das Verhalten der Anwendung sowohl in der Entwicklungs- als auch in der Produktionsumgebung zu validieren.

Wenn Sie nun auch tiefer in die Intergration eintauchen wollen, können Sie die offizielle Dokumentation lesen.