Web-Apps testen – so geht‘s
Veröffentlicht am 24.06.2021 von DomainFactory
Das Testen von Software ist integraler Bestandteil der Entwicklungsarbeit. Professionelle Teams arbeiten mit automatisierten Tests, die zur Programmierarbeit gehören. Auch ohne Automatisierung müssen Webentwickler ihre Web-Apps testen und die fehlerfreie Funktion sicherstellen. Sie können sich manuell durch die Seiten klicken und zum Beispiel das korrekte Abfangen von Falscheingaben prüfen. Für kleine Programme kann das ausreichen. Das Problem: Je größer das Projekt, desto fehleranfälliger und zeitaufwendiger wird das ständige Testen. Die Lösung: Die Testverfahren automatisieren. Erfahren Sie jetzt, wie das geht.Mit automatisierten Tests die Funktion der Web-Apps testen
Software muss für den „dümmsten anzunehmenden Anwender“ verständlich sein und funktionieren. Das sicherzustellen, ist die Aufgabe der Programmierer und Designer. Bei Falscheingaben und nicht vorgesehenem Verhalten darf die Anwendung nicht abstürzen. Jeder Fehler muss abgefangen und verarbeitet werden. Jedes Update erfordert neue Tests, die Gründe für eine Automatisierung dieser Arbeit sprechen für sich.
Apps bestehen in der Regel aus drei Schichten: Datenschicht (Unit), Dienstschicht (API) und Präsentationsschicht (UI). Die drei Schichten werden in einem Pyramidenmodell dargestellt: Unit-Tests bilden die Basis, von diesen sollte es die meisten Tests geben. Integration-Tests folgen und UI-Tests stehen an der Spitze.
1. Unit-Tests: die einfachste Testform
Unit-Tests prüfen kleine Codeblöcke, zum Beispiel eine Funktion. Bei strenger Umsetzung müssen Sie erst den Test schreiben und anschließend den eigentlichen Code. Eine einfache Methode ist der sogenannte Smoketest. Dabei automatisieren Sie das Klicken durch die gesamte Web-App. Läuft das Script ohne Fehler, ist eine Basisqualität sichergestellt. Beliebte Tools für Unit-Tests sind:
- PHPUnit kommt für Unit-Tests in PHP zum Einsatz.
- AVA ermöglicht parallele Testausführungen und wird bevorzugt in der Backend-Entwicklung genutzt.
- Tape ist ein minimalistisches JavaScript-Framework, das Basisfunktionen mitbringt.
- Jest ist ein JavaScript-Testing-Framework mit Fokus auf Einfachheit. Es funktioniert unter anderem mit Babel, TypeScript, Node, React, Vue und Angular. Frontend-Entwickler setzen es ein.
Info: Auf den Websites finden Sie die Dokumentationen mit Anleitungen.
2. API-Tests / Integration-Tests
Die Application Programming Interfaces (APIs) verbinden die verschiedenen Schichten der Anwendung miteinander und eignen sich ideal für automatisierte Tests. Mit API-Tests prüfen Sie Geschäftslogik, Datenantworten, Sicherheit und Verhalten bei Leistungsengpässen.
Ein Test untersucht nicht nur einen Codeblock wie beim Unit-Test, sondern mehrere Teile der Anwendung zusammen. API-Tests kommen im Front- und Backend-Bereich zum Einsatz und können die korrekte Interaktion der beiden Seiten überprüfen. Beliebte Programme sind auch hier
- PHPUnit
- AVA
- Jest
Ein weiteres Tool ist Postman. Es ist eine Kollaborations-Plattform für die API-Entwicklung. Probieren Sie den Web- und Desktop-Client zum Testen aus. Für die Arbeit per Kommandozeile können Sie Postman via Newman nutzen. Eine kostenlose Version steht für den Einstieg zum Download bereit.
Öffnen Sie das Programm nach der Installation. Mit folgenden Schritten erstellen Sie die erste Anfrage:
- Klick auf „Create a Collection“
- Name eintragen
- Auf „Create“ klicken
- Neben dem Namen auf „(..)“ klicken
- „Add Request“ auswählen
- Einen Namen für den Request eintragen
- „Save to my Collection“ auswählen
Jetzt den neuen Test auf der linken Seite auswählen. Für das Beispiel tragen Sie „df.eu“ als URL ein und fügen den Test hinzu, indem Sie im Tab darunter auf „Tests“ klicken. Im folgenden Textfeld tragen Sie den Test in JavaScript ein – zum Beispiel:
pm.test("Status code is 200", () => {
pm.response.to.have.status(200);
});
3. UI-Tests für die Qualitätssicherung
Die Benutzeroberfläche bildet die wesentliche Schnittstelle für die Interaktion zwischen System und Nutzer. Mit UI-Tests kontrollieren Sie die Benutzeroberfläche, das Erscheinungsbild der Weboberfläche und prüfen zum Beispiel die Funktion von Buttons, Menüs und Dialogboxen.
- Selenium: Das Open-Source-Webautomatisierungs-Tool gehört zu den beliebtesten Programmen auf dem Markt. Test-Skripte können Sie in den Programmiersprachen C#, Java, Python, PHP, Ruby, JavaScript und Perl schreiben und mit Selenium WebDriver den Browser aus der Ferne steuern.
- Puppeteer ist eine JavaScript-Bibliothek mit Chrome-Implementierung. Es ermöglicht programmierte UI-Tests, die im Hintergrund ablaufen. Das manuelle Testen von Web-Apps wird durch JavaScript ersetzt. Fast alles, was Sie manuell im Browser machen können, kann mit Puppeteer erfolgen.
Beispiel mit Puppeteer
<iframe width="557" height="313" src="https://www.youtube.com/embed/lhZOFUY1weo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Im Video erfahren Sie mehr über Headless Chrome, Puppeteer und Use-Cases.
Die Installation per NPM erfolgt per:
$ npm i puppeteer
Mit folgendem Skript lässt sich eine kopflose Version von Chrome kontrollieren, um Tests laufen zu lassen:
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://df.eu', {waitUntil: 'networkidle2'});
const heading = await page.$('h1');
await browser.close();
if(!heading) console.log('No heading found!');
})();
Das Skript startet eine kopflose Instanz von Chrome, navigiert zu df.eu und prüft, ob die Seite eine H1-Überschrift hat. Wenn nicht, folgt ein Logeintrag.
Zusammenfassung
Web-Apps zu testen, ist wichtig und stellt die einwandfreie Funktionsfähigkeit sicher. Manuelle Tests nehmen viel Zeit in Anspruch und eignen sich nur für kleine Programme. Bei größeren Projekten werden die Tests automatisiert. Zum Testen der Fehlerfreiheit über die drei Anwendungsschichten hinweg gibt es eine Reihe praktischer Tools. Tutorials und ausführliche Dokumentationen finden Sie auf den jeweiligen Websites. Probieren Sie es aus.
